Theme: add Help and Donate links in all pages

Close https://github.com/searxng/searxng/issues/931

6 files changed, 66 insertions, 9 deletions

diff --git a/searx/infopage/__init__.py b/searx/infopage/__init__.py
index 4aebfa5a7..730d50a74 100644
--- a/searx/infopage/__init__.py
+++ b/searx/infopage/__init__.py
@@ -134,6 +134,7 @@ class InfoPageSet:  # pylint: disable=too-few-public-methods
         self.toc: typing.List[str] = [
             'search-syntax',
             'about',
+            'donate',
         ]
         """list of articles in the online documentation"""
 
diff --git a/searx/static/themes/simple/gruntfile.js b/searx/static/themes/simple/gruntfile.js
index 50ea3b1d4..e9aadee92 100644
--- a/searx/static/themes/simple/gruntfile.js
+++ b/searx/static/themes/simple/gruntfile.js
@@ -189,6 +189,8 @@ module.exports = function (grunt) {
           'school-outline': 'node_modules/ionicons/dist/svg/school-outline.svg',
           'file-tray-full-outline': 'node_modules/ionicons/dist/svg/file-tray-full-outline.svg',
           'people-outline': 'node_modules/ionicons/dist/svg/people-outline.svg',
+          'heart-outline': 'node_modules/ionicons/dist/svg/heart-outline.svg',
+          'help-circle-outline': 'src/svg/help-circle-outline.svg',
         },
         dest: '../../../templates/simple/icons.html',
       },
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index c2efcdd50..b97e113fe 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -639,16 +639,30 @@ article[data-vim-selected].category-social {
   }
 }
 
-#linkto_preferences {
+#links_on_top {
   position: absolute;
   .ltr-right(1.8rem);
+  .ltr-text-align-right();
   top: 2.2rem;
   padding: 0;
   border: 0;
-  display: block;
-  font-size: 1.2em;
+  display: flex;
+  align-items: center;
+  font-size: 1em;
   color: var(--color-search-font);
 
+  a {
+    display: flex;
+    align-items: center;
+    margin-left: 1em;
+
+    svg {
+      font-size: 1.2em;
+      .ltr-margin-right(0.125em);
+    }
+  }
+
+  a,
   a:link *,
   a:hover *,
   a:visited *,
@@ -706,6 +720,12 @@ article[data-vim-selected].category-social {
 */
 
 .results-tablet() {
+  #links_on_top {
+    span {
+      display: none;
+    }
+  }
+
   .page_with_header {
     margin: 2rem 0.5rem;
     width: auto;
@@ -806,6 +826,25 @@ article[data-vim-selected].category-social {
   }
 }
 
+@media screen and (max-width: calc(@tablet - 0.5px)) {
+  #links_on_top {
+    span {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 52rem) {
+  body.results_endpoint {
+    #links_on_top {
+      .link_on_top_about,
+      .link_on_top_donate {
+        display: none;
+      }
+    }
+  }
+}
+
 @media screen and (min-width: @phone) and (max-width: @tablet) {
   // when .center-aligment-yes, see style-center.less
   // the media query includes "min-width: @phone"
@@ -872,12 +911,12 @@ article[data-vim-selected].category-social {
     margin: 1rem 0 0 0;
   }
 
-  #linkto_preferences {
+  #links_on_top {
     top: 0.8rem;
     .ltr-right(0.7rem);
   }
 
-  #main_index #linkto_preferences {
+  #main_index #links_on_top {
     top: 0.5rem;
     .ltr-right(0.5rem);
   }
diff --git a/searx/static/themes/simple/src/svg/help-circle-outline.svg b/searx/static/themes/simple/src/svg/help-circle-outline.svg
new file mode 100644
index 000000000..df36289d3
--- /dev/null
+++ b/searx/static/themes/simple/src/svg/help-circle-outline.svg
@@ -0,0 +1,5 @@
+<svg class="ionicon" viewBox="0 0 512 512" aria-hidden="true">
+    <path d="M256 80a176 176 0 10176 176A176 176 0 00256 80z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
+    <path d="M200 202.29s.84-17.5 19.57-32.57C230.68 160.77 244 158.18 256 158c10.93-.14 20.69 1.67 26.53 4.45 10 4.76 29.47 16.38 29.47 41.09 0 26-17 37.81-36.37 50.8S251 281.43 251 296" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="28"/>
+    <circle cx="250" cy="348" r="20" stroke="currentColor" stroke-width="16" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/searx/templates/simple/base.html b/searx/templates/simple/base.html
index c40183fdd..05662e1d2 100644
--- a/searx/templates/simple/base.html
+++ b/searx/templates/simple/base.html
@@ -40,10 +40,18 @@
         </div>
     {% endif %}
 
-    {% block linkto_preferences %}
-    {% from 'simple/icons.html' import icon_big %}
-      <nav id="linkto_preferences"><a href="{{ url_for('preferences') }}" aria-label="{{ _('preferences') }}">{{ icon_big('menu-outline') }}</a></nav>
-    {% endblock %}
+    <nav id="links_on_top">
+      {%- from 'simple/icons.html' import icon_big -%}
+      {%- block linkto_about -%}
+        <a href="{{ url_for('info', pagename='about') }}" class="link_on_top_about">{{ icon_big('help-circle-outline') }}<span>{{ _('About') }}</span></a>
+      {%- endblock -%}
+      {%- block linkto_donate -%}
+        <a href="{{ url_for('info', pagename='donate') }}" class="link_on_top_donate">{{ icon_big('heart-outline') }}<span>{{ _('Donate') }}</span></a>
+      {%- endblock -%}
+      {%- block linkto_preferences -%}
+        <a href="{{ url_for('preferences') }}" aria-label="{{ _('preferences') }}" class="link_on_top_preferences">{{ icon_big('menu-outline') }}</a>
+      {%- endblock -%}
+    </nav>
     {% block header %}
     {% endblock %}
     {% block content %}
diff --git a/searx/templates/simple/info.html b/searx/templates/simple/info.html
index b94ad0037..52b29b0ad 100644
--- a/searx/templates/simple/info.html
+++ b/searx/templates/simple/info.html
@@ -1,5 +1,7 @@
 {% extends 'simple/page_with_header.html' %}
 {% block title %}{{ active_page.title }} - {% endblock %}
+{% block linkto_about %}{% endblock %}
+{% block linkto_donate %}{% endblock %}
 {% block content %}
 <ul class="tabs">
 {% for pagename, locale, page in all_pages %}