Theme: add Help and Donate links in all pages

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

3 files changed, 51 insertions, 5 deletions

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