From 1cc62ac0cd67adec6c23af2936fdeef90b6b6476 Mon Sep 17 00:00:00 2001
From: Gnkalk <Gnkalk@yahoo.com>
Date: Wed, 1 Jan 2025 20:08:27 +0330
Subject: [PATCH] add result base layout

---
 searx/static/themes/smart/css/ltr-style.css   | 145 ++++++++++++------
 searx/static/themes/smart/css/rtl-style.css   | 145 ++++++++++++------
 searx/static/themes/smart/src/scss/style.scss | 113 +++++++++++---
 searx/templates/smart/base.html               |  28 +---
 searx/templates/smart/footer.html             |  25 +++
 searx/templates/smart/index.html              |   1 +
 searx/templates/smart/madules/search_box.html |   2 -
 .../smart/madules/search_header.html          |  57 +++++++
 searx/templates/smart/madules/sidebar.html    |   1 -
 searx/templates/smart/results.html            |  17 +-
 searx/webapp.py                               |  16 +-
 11 files changed, 388 insertions(+), 162 deletions(-)
 create mode 100644 searx/templates/smart/footer.html
 create mode 100644 searx/templates/smart/madules/search_header.html

diff --git a/searx/static/themes/smart/css/ltr-style.css b/searx/static/themes/smart/css/ltr-style.css
index cfa8b45d2..edc7396bf 100644
--- a/searx/static/themes/smart/css/ltr-style.css
+++ b/searx/static/themes/smart/css/ltr-style.css
@@ -229,9 +229,9 @@ br {
 }
 
 body {
-  transition: gap .25s ease-in-out, padding .5s ease-in-out background-color .3s ease-in-out;
   background-color: var(--secondary-background-color);
   gap: 0;
+  transition: gap .25s ease-in-out, padding .5s ease-in-out, background-color .3s ease-in-out;
   display: flex;
   overflow: hidden;
 }
@@ -323,29 +323,23 @@ main:has(.not-found) .button {
   max-width: clamp(70px, 25vw, 150px);
 }
 
-#index header .links {
-  gap: .5rem;
-  display: flex;
+#results {
+  grid-template: "search links"
+                 "search amount"
+                 "results sidebox" 1fr
+                 "footer footer"
+                 / 2fr 1fr;
+  gap: 1rem;
+  padding: 0 6rem;
+  display: grid;
 }
 
-#index header .links .link {
-  border-radius: 9999px;
-  height: min-content;
-  padding: .5rem;
-  transition: background-color .1s ease-in-out;
-  display: inline-block;
+#results .links {
+  grid-area: links;
 }
 
-#index header .links .link:is(:hover, :focus-within) {
-  background-color: var(--secondary-background-color);
-}
-
-#index header .links .link svg {
-  width: 1.5rem;
-}
-
-#index header .links .link.config {
-  transition: transform 1s ease-in-out;
+#results footer {
+  grid-area: footer;
 }
 
 body:has(.sidebar_btn[open]) {
@@ -439,7 +433,10 @@ body:has(.sidebar_btn[open]) header .links .link.config {
 }
 
 #sidebar > .container .about {
-  padding: .5rem;
+  background-color: var(--background-color);
+  border-radius: 1rem;
+  padding: 1rem;
+  overflow: hidden;
 }
 
 #sidebar > .container .about p {
@@ -455,6 +452,31 @@ body:has(.sidebar_btn[open]) header .links .link.config {
   margin: .5rem 0;
 }
 
+.links {
+  gap: .5rem;
+  display: flex;
+}
+
+.links .link {
+  border-radius: 9999px;
+  height: min-content;
+  padding: .5rem;
+  transition: background-color .1s ease-in-out;
+  display: inline-block;
+}
+
+.links .link:is(:hover, :focus-within) {
+  background-color: var(--background-color);
+}
+
+.links .link svg {
+  width: 1.5rem;
+}
+
+.links .link.config {
+  transition: transform 1s ease-in-out;
+}
+
 footer {
   flex-wrap: wrap;
   justify-content: space-between;
@@ -477,7 +499,7 @@ footer .links {
   display: flex;
 }
 
-#search #search_categories .categories {
+#search.screen #search_categories .categories {
   flex-flow: wrap;
   justify-content: center;
   align-items: center;
@@ -486,38 +508,38 @@ footer .links {
 }
 
 @media (width <= 768px) {
-  #search #search_categories .categories {
+  #search.screen #search_categories .categories {
     transform: scale(.8);
   }
 }
 
 @media (width <= 480px) {
-  #search #search_categories .categories {
+  #search.screen #search_categories .categories {
     display: none;
   }
 }
 
-#search #search_categories .categories label:first-child .category-icon {
+#search.screen #search_categories .categories label:first-child .category-icon {
   background-color: #32e258;
 }
 
-#search #search_categories .categories label:nth-child(2) .category-icon {
+#search.screen #search_categories .categories label:nth-child(2) .category-icon {
   background-color: #2196f3;
 }
 
-#search #search_categories .categories label:nth-child(3) .category-icon {
+#search.screen #search_categories .categories label:nth-child(3) .category-icon {
   background-color: #e49928;
 }
 
-#search #search_categories .categories label:nth-child(4) .category-icon {
+#search.screen #search_categories .categories label:nth-child(4) .category-icon {
   background-color: #5b2ae0;
 }
 
-#search #search_categories .categories label:nth-child(5) .category-icon {
+#search.screen #search_categories .categories label:nth-child(5) .category-icon {
   background-color: red;
 }
 
-#search #search_categories .categories label {
+#search.screen #search_categories .categories label {
   cursor: pointer;
   border-radius: 1rem;
   flex-direction: column;
@@ -528,20 +550,20 @@ footer .links {
   display: flex;
 }
 
-#search #search_categories .categories label .category-icon {
+#search.screen #search_categories .categories label .category-icon {
   border-radius: 9999px;
   padding: 1rem;
 }
 
-#search #search_categories .categories label .category-icon svg {
+#search.screen #search_categories .categories label .category-icon svg {
   color: #fff;
 }
 
-#search #search_categories .categories label:has(input:checked) {
+#search.screen #search_categories .categories label:has(input:checked) {
   background-color: var(--background-color);
 }
 
-#search .search_box {
+#search.screen .search_box {
   background-color: var(--background-color);
   border-radius: 9999px;
   flex-wrap: wrap;
@@ -554,13 +576,13 @@ footer .links {
 }
 
 @media (width <= 480px) {
-  #search .search_box {
+  #search.screen .search_box {
     border-radius: 1rem;
     width: 70vw;
   }
 }
 
-#search .search_box input {
+#search.screen .search_box input {
   color: var(--text-color);
   background-color: #0000;
   border: none;
@@ -569,11 +591,11 @@ footer .links {
   padding: .5rem;
 }
 
-#search .search_box input:focus {
+#search.screen .search_box input:focus {
   outline: none;
 }
 
-#search .search_box button {
+#search.screen .search_box button {
   color: var(--text-color);
   background-color: #0000;
   border: none;
@@ -581,11 +603,11 @@ footer .links {
   padding: .5rem;
 }
 
-#search .search_box button:focus {
+#search.screen .search_box button:focus {
   outline: none;
 }
 
-#search .search_box #clear_search {
+#search.screen .search_box #clear_search {
   color: var(--text-color);
   background-color: #0000;
   border: none;
@@ -593,21 +615,58 @@ footer .links {
   padding: .5rem;
 }
 
-#search .search_box #clear_search:focus {
+#search.screen .search_box #clear_search:focus {
   outline: none;
 }
 
-#search .search_box #send_search {
+#search.screen .search_box #send_search {
   background-color: var(--primary-color);
   color: var(--filled-text-color);
   border-radius: 9999px;
   padding: 0 1rem;
 }
 
-#search .search_box #send_search:focus {
+#search.screen .search_box #send_search:focus {
   outline: none;
 }
 
+#search.header {
+  grid-area: search;
+  padding: 1rem 0;
+}
+
+#search.header .header {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  display: flex;
+}
+
+#search.header .header .logo {
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  display: flex;
+}
+
+#search.header .header .logo img {
+  width: 100%;
+}
+
+#search.header .header .search_box {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+#search.header .header .search_box input {
+  border-radius: 9999px;
+  width: 100%;
+  padding: 1rem;
+}
+
 input[type="checkbox"].switch {
   appearance: none;
   background-color: var(--secondary-background-color);
diff --git a/searx/static/themes/smart/css/rtl-style.css b/searx/static/themes/smart/css/rtl-style.css
index 6470b6388..bbac5eb52 100644
--- a/searx/static/themes/smart/css/rtl-style.css
+++ b/searx/static/themes/smart/css/rtl-style.css
@@ -229,9 +229,9 @@ br {
 }
 
 body {
-  transition: gap .25s ease-in-out, padding .5s ease-in-out background-color .3s ease-in-out;
   background-color: var(--secondary-background-color);
   gap: 0;
+  transition: gap .25s ease-in-out, padding .5s ease-in-out, background-color .3s ease-in-out;
   display: flex;
   overflow: hidden;
 }
@@ -323,29 +323,23 @@ main:has(.not-found) .button {
   max-width: clamp(70px, 25vw, 150px);
 }
 
-#index header .links {
-  gap: .5rem;
-  display: flex;
+#results {
+  grid-template: "search links"
+                 "search amount"
+                 "results sidebox" 1fr
+                 "footer footer"
+                 / 2fr 1fr;
+  gap: 1rem;
+  padding: 0 6rem;
+  display: grid;
 }
 
-#index header .links .link {
-  border-radius: 9999px;
-  height: min-content;
-  padding: .5rem;
-  transition: background-color .1s ease-in-out;
-  display: inline-block;
+#results .links {
+  grid-area: links;
 }
 
-#index header .links .link:is(:hover, :focus-within) {
-  background-color: var(--secondary-background-color);
-}
-
-#index header .links .link svg {
-  width: 1.5rem;
-}
-
-#index header .links .link.config {
-  transition: transform 1s ease-in-out;
+#results footer {
+  grid-area: footer;
 }
 
 body:has(.sidebar_btn[open]) {
@@ -439,7 +433,10 @@ body:has(.sidebar_btn[open]) header .links .link.config {
 }
 
 #sidebar > .container .about {
-  padding: .5rem;
+  background-color: var(--background-color);
+  border-radius: 1rem;
+  padding: 1rem;
+  overflow: hidden;
 }
 
 #sidebar > .container .about p {
@@ -455,6 +452,31 @@ body:has(.sidebar_btn[open]) header .links .link.config {
   margin: .5rem 0;
 }
 
+.links {
+  gap: .5rem;
+  display: flex;
+}
+
+.links .link {
+  border-radius: 9999px;
+  height: min-content;
+  padding: .5rem;
+  transition: background-color .1s ease-in-out;
+  display: inline-block;
+}
+
+.links .link:is(:hover, :focus-within) {
+  background-color: var(--background-color);
+}
+
+.links .link svg {
+  width: 1.5rem;
+}
+
+.links .link.config {
+  transition: transform 1s ease-in-out;
+}
+
 footer {
   flex-wrap: wrap;
   justify-content: space-between;
@@ -477,7 +499,7 @@ footer .links {
   display: flex;
 }
 
-#search #search_categories .categories {
+#search.screen #search_categories .categories {
   flex-flow: wrap;
   justify-content: center;
   align-items: center;
@@ -486,38 +508,38 @@ footer .links {
 }
 
 @media (width <= 768px) {
-  #search #search_categories .categories {
+  #search.screen #search_categories .categories {
     transform: scale(.8);
   }
 }
 
 @media (width <= 480px) {
-  #search #search_categories .categories {
+  #search.screen #search_categories .categories {
     display: none;
   }
 }
 
-#search #search_categories .categories label:first-child .category-icon {
+#search.screen #search_categories .categories label:first-child .category-icon {
   background-color: #32e258;
 }
 
-#search #search_categories .categories label:nth-child(2) .category-icon {
+#search.screen #search_categories .categories label:nth-child(2) .category-icon {
   background-color: #2196f3;
 }
 
-#search #search_categories .categories label:nth-child(3) .category-icon {
+#search.screen #search_categories .categories label:nth-child(3) .category-icon {
   background-color: #e49928;
 }
 
-#search #search_categories .categories label:nth-child(4) .category-icon {
+#search.screen #search_categories .categories label:nth-child(4) .category-icon {
   background-color: #5b2ae0;
 }
 
-#search #search_categories .categories label:nth-child(5) .category-icon {
+#search.screen #search_categories .categories label:nth-child(5) .category-icon {
   background-color: red;
 }
 
-#search #search_categories .categories label {
+#search.screen #search_categories .categories label {
   cursor: pointer;
   border-radius: 1rem;
   flex-direction: column;
@@ -528,20 +550,20 @@ footer .links {
   display: flex;
 }
 
-#search #search_categories .categories label .category-icon {
+#search.screen #search_categories .categories label .category-icon {
   border-radius: 9999px;
   padding: 1rem;
 }
 
-#search #search_categories .categories label .category-icon svg {
+#search.screen #search_categories .categories label .category-icon svg {
   color: #fff;
 }
 
-#search #search_categories .categories label:has(input:checked) {
+#search.screen #search_categories .categories label:has(input:checked) {
   background-color: var(--background-color);
 }
 
-#search .search_box {
+#search.screen .search_box {
   background-color: var(--background-color);
   border-radius: 9999px;
   flex-wrap: wrap;
@@ -554,13 +576,13 @@ footer .links {
 }
 
 @media (width <= 480px) {
-  #search .search_box {
+  #search.screen .search_box {
     border-radius: 1rem;
     width: 70vw;
   }
 }
 
-#search .search_box input {
+#search.screen .search_box input {
   color: var(--text-color);
   background-color: #0000;
   border: none;
@@ -569,11 +591,11 @@ footer .links {
   padding: .5rem;
 }
 
-#search .search_box input:focus {
+#search.screen .search_box input:focus {
   outline: none;
 }
 
-#search .search_box button {
+#search.screen .search_box button {
   color: var(--text-color);
   background-color: #0000;
   border: none;
@@ -581,11 +603,11 @@ footer .links {
   padding: .5rem;
 }
 
-#search .search_box button:focus {
+#search.screen .search_box button:focus {
   outline: none;
 }
 
-#search .search_box #clear_search {
+#search.screen .search_box #clear_search {
   color: var(--text-color);
   background-color: #0000;
   border: none;
@@ -593,21 +615,58 @@ footer .links {
   padding: .5rem;
 }
 
-#search .search_box #clear_search:focus {
+#search.screen .search_box #clear_search:focus {
   outline: none;
 }
 
-#search .search_box #send_search {
+#search.screen .search_box #send_search {
   background-color: var(--primary-color);
   color: var(--filled-text-color);
   border-radius: 9999px;
   padding: 0 1rem;
 }
 
-#search .search_box #send_search:focus {
+#search.screen .search_box #send_search:focus {
   outline: none;
 }
 
+#search.header {
+  grid-area: search;
+  padding: 1rem 0;
+}
+
+#search.header .header {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  display: flex;
+}
+
+#search.header .header .logo {
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  display: flex;
+}
+
+#search.header .header .logo img {
+  width: 100%;
+}
+
+#search.header .header .search_box {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+#search.header .header .search_box input {
+  border-radius: 9999px;
+  width: 100%;
+  padding: 1rem;
+}
+
 input[type="checkbox"].switch {
   appearance: none;
   background-color: var(--secondary-background-color);
diff --git a/searx/static/themes/smart/src/scss/style.scss b/searx/static/themes/smart/src/scss/style.scss
index f11d4049d..3ddbf4ffe 100644
--- a/searx/static/themes/smart/src/scss/style.scss
+++ b/searx/static/themes/smart/src/scss/style.scss
@@ -39,7 +39,8 @@ body {
     gap: 0;
     overflow: hidden;
     transition: gap 250ms ease-in-out,
-        padding 500ms ease-in-out background-color 300ms ease-in-out;
+        padding 500ms ease-in-out,
+        background-color 300ms ease-in-out;
 
     background-color: var(--secondary-background-color);
 
@@ -142,31 +143,27 @@ main:has(.not-found) {
                 max-width: clamp(70px, 25vw, 150px);
             }
         }
+    }
+}
 
-        .links {
-            display: flex;
-            gap: .5rem;
+#results {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: auto auto 1fr auto;
+    grid-template-areas:
+        "search links"
+        "search amount"
+        "results sidebox"
+        "footer footer";
+    gap: 1rem;
+    padding: 0 6rem;
 
-            .link {
-                display: inline-block;
-                padding: 0.5rem;
-                height: min-content;
-                @include mixin.rounded(full);
-                transition: background-color 100ms ease-in-out;
+    .links {
+        grid-area: links;
+    }
 
-                &:is(:hover, :focus-within) {
-                    background-color: var(--secondary-background-color);
-                }
-
-                svg {
-                    width: 1.5rem;
-                }
-
-                &.config {
-                    transition: transform 1s ease-in-out;
-                }
-            }
-        }
+    footer {
+        grid-area: footer;
     }
 }
 
@@ -261,7 +258,10 @@ body:has(.sidebar_btn[open]) {
         }
 
         .about {
-            padding: .5rem;
+            background-color: var(--background-color);
+            overflow: hidden;
+            @include mixin.rounded();
+            padding: 1rem;
 
             p {
                 text-align: justify;
@@ -275,6 +275,32 @@ body:has(.sidebar_btn[open]) {
                     margin: .5rem 0;
                 }
             }
+
+        }
+    }
+}
+
+.links {
+    display: flex;
+    gap: .5rem;
+
+    .link {
+        display: inline-block;
+        padding: 0.5rem;
+        height: min-content;
+        @include mixin.rounded(full);
+        transition: background-color 100ms ease-in-out;
+
+        &:is(:hover, :focus-within) {
+            background-color: var(--background-color);
+        }
+
+        svg {
+            width: 1.5rem;
+        }
+
+        &.config {
+            transition: transform 1s ease-in-out;
         }
     }
 }
@@ -303,7 +329,7 @@ footer {
     }
 }
 
-#search {
+#search.screen {
     #search_categories .categories {
         display: flex;
         flex-direction: row;
@@ -436,6 +462,43 @@ footer {
     }
 }
 
+#search.header {
+    grid-area: search;
+    padding: 1rem 0;
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 1rem;
+        align-items: center;
+
+        .logo {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100px;
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .search_box {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+
+            input {
+                width: 100%;
+                padding: 1rem;
+                @include mixin.rounded(full);
+            }
+        }
+    }
+}
+
 input[type="checkbox"].switch {
     appearance: none;
     margin-right: .5rem;
diff --git a/searx/templates/smart/base.html b/searx/templates/smart/base.html
index 4bb9ccd19..9170c4228 100644
--- a/searx/templates/smart/base.html
+++ b/searx/templates/smart/base.html
@@ -58,32 +58,7 @@
     </head>
     <body>
         <div id="{{ endpoint }}" class="body-container">
-            <footer>
-                {% block footer %}
-                <p>
-                    {{ _('a privacy-respecting, open metasearch engine') }} - {{
-                    searx_version }}
-                </p>
-                <div class="links">
-                    {% if enable_metrics %}
-                    <a href="{{ url_for('stats') }}">{{ _('Engine stats') }}</a
-                    >{% endif %} {% if get_setting('brand.public_instances') %}
-                    <a href="{{ get_setting('brand.public_instances') }}"
-                        >{{ _('Public instances') }}</a
-                    >
-                    {% endif %} {% if get_setting('general.privacypolicy_url')
-                    %}
-                    <a href="{{ get_setting('general.privacypolicy_url') }}"
-                        >{{ _('Privacy policy') }}</a
-                    >
-                    {% endif %} {% if get_setting('general.contact_url') %}
-                    <a href="{{ get_setting('general.contact_url') }}"
-                        >{{ _('Contact instance maintainer') }}</a
-                    >
-                    {% endif %}
-                </div>
-                {% endblock %}
-            </footer>
+            {% block body %} {% include 'smart/footer.html' %}
             <header>{% block header %} {% endblock %}</header>
             <main>
                 {% if errors %}
@@ -99,6 +74,7 @@
                 </div>
                 {% endif %} {% block content %} {% endblock %}
             </main>
+            {% endblock body %}
         </div>
         {% if endpoint == 'index' or endpoint == 'results' %} {% include
         'smart/madules/sidebar.html' %} {% endif %}
diff --git a/searx/templates/smart/footer.html b/searx/templates/smart/footer.html
new file mode 100644
index 000000000..f55d907eb
--- /dev/null
+++ b/searx/templates/smart/footer.html
@@ -0,0 +1,25 @@
+<footer>
+    {% block footer %}
+    <p>
+        {{ _('a privacy-respecting, open metasearch engine') }} - {{
+        searx_version }}
+    </p>
+    <div class="links">
+        {% if enable_metrics %}
+        <a href="{{ url_for('stats') }}">{{ _('Engine stats') }}</a>{% endif %}
+        {% if get_setting('brand.public_instances') %}
+        <a href="{{ get_setting('brand.public_instances') }}"
+            >{{ _('Public instances') }}</a
+        >
+        {% endif %} {% if get_setting('general.privacypolicy_url') %}
+        <a href="{{ get_setting('general.privacypolicy_url') }}"
+            >{{ _('Privacy policy') }}</a
+        >
+        {% endif %} {% if get_setting('general.contact_url') %}
+        <a href="{{ get_setting('general.contact_url') }}"
+            >{{ _('Contact instance maintainer') }}</a
+        >
+        {% endif %}
+    </div>
+    {% endblock %}
+</footer>
diff --git a/searx/templates/smart/index.html b/searx/templates/smart/index.html
index c3958295a..02a919d48 100644
--- a/searx/templates/smart/index.html
+++ b/searx/templates/smart/index.html
@@ -20,6 +20,7 @@
         method="{{ method or 'POST' }}"
         action="{{ url_for('search') }}"
         role="search"
+        class="screen"
     >
         {% include 'smart/madules/categories_box.html' %} {% include
         'smart/madules/search_box.html' %}
diff --git a/searx/templates/smart/madules/search_box.html b/searx/templates/smart/madules/search_box.html
index bc3051a98..8b78d9119 100644
--- a/searx/templates/smart/madules/search_box.html
+++ b/searx/templates/smart/madules/search_box.html
@@ -18,7 +18,6 @@
         <span class="js-only">Clear</span
         ><span class="js-alt">{{ _('clear') }}</span>
     </button>
-    {% if endpoint == 'index' %}
     <button
         id="send_search"
         type="submit"
@@ -27,5 +26,4 @@
     >
         {{ _('search') }}
     </button>
-    {% endif %}
 </div>
diff --git a/searx/templates/smart/madules/search_header.html b/searx/templates/smart/madules/search_header.html
new file mode 100644
index 000000000..bb4fc4646
--- /dev/null
+++ b/searx/templates/smart/madules/search_header.html
@@ -0,0 +1,57 @@
+<form
+    id="search"
+    method="{{ method or 'POST' }}"
+    action="{{ url_for('search') }}"
+    role="search"
+    class="header"
+>
+    <div class="header">
+        <div class="logo">
+            <img src="/static/img/logo.svg" alt="{{ instance_name }}" />
+        </div>
+        <div class="search_box">
+            <input
+                id="q"
+                name="q"
+                type="text"
+                placeholder="{{ _('Search for...') }}"
+                tabindex="1"
+                autocomplete="off"
+                autocapitalize="none"
+                spellcheck="false"
+                autocorrect="off"
+                dir="auto"
+                value="{{ q or '' }}"
+            />
+            <button
+                id="clear_search"
+                type="reset"
+                aria-label="{{ _('clear') }}"
+                class="hide_if_nojs"
+            >
+                <span>c</span><span class="js-alt">{{ _('clear') }}</span>
+            </button>
+        </div>
+    </div>
+    <div class="selections">
+        <div class="categories"></div>
+        <label for="filter">
+            <input type="checkbox" id="filter-btn" hidden />
+            <div class="filter-btn">
+                {{ _('Filters') }} {{ icon_small('filter') }}
+            </div>
+        </label>
+    </div>
+    <div class="filters">
+        {% include 'simple/filters/languages.html' %} {% include
+        'simple/filters/time_range.html' %} {% include
+        'simple/filters/safesearch.html' %}
+    </div>
+
+    <input type="hidden" name="theme" value="{{ theme }}" />
+    {% if timeout_limit %}<input
+        type="hidden"
+        name="timeout_limit"
+        value="{{ timeout_limit|e }}"
+    />{% endif %}
+</form>
diff --git a/searx/templates/smart/madules/sidebar.html b/searx/templates/smart/madules/sidebar.html
index 1d167cf7e..81ddb6529 100644
--- a/searx/templates/smart/madules/sidebar.html
+++ b/searx/templates/smart/madules/sidebar.html
@@ -32,7 +32,6 @@
             >{{- _('See all preferences') -}}</a
         >
         <br />
-        <h1>{{- _('About') -}}</h1>
         <div class="about">{{- about_section | safe -}}</div>
     </div>
 </div>
diff --git a/searx/templates/smart/results.html b/searx/templates/smart/results.html
index 32440c35f..cea7b392d 100644
--- a/searx/templates/smart/results.html
+++ b/searx/templates/smart/results.html
@@ -1,20 +1,7 @@
 {% from 'smart/icons.html' import icon_small %} {% extends "smart/base.html" %}
-{% block header %}
-
-<a href="/" class="logo">
-    {# - for times there's no logo, use the instance name
-    <span>{{ instance_name }}</span>
-    #}
-    <img src="/static/img/logo.svg" alt="{{ instance_name }}" />
-</a>
-{% include 'smart/madules/search_box.html' %}
+{% block body %} {% include 'smart/madules/search_header.html' %}
 <div class="links">
     <a href="" class="link">{{icon_small('donate')}}</a>
     {% include 'smart/madules/sidebar_btn.html' %}
 </div>
-
-{% endblock %} {% block content %}
-
-<div class="container"></div>
-
-{% endblock %}
+{% include 'smart/footer.html' %} {% endblock %}
diff --git a/searx/webapp.py b/searx/webapp.py
index 230da0ca9..4b4796a9d 100755
--- a/searx/webapp.py
+++ b/searx/webapp.py
@@ -404,6 +404,15 @@ def render(template_name: str, **kwargs):
     kwargs['categories_as_tabs'] = list(settings['categories_as_tabs'].keys())
     kwargs['categories'] = get_enabled_categories(settings['categories_as_tabs'].keys())
     kwargs['DEFAULT_CATEGORY'] = DEFAULT_CATEGORY
+    
+    # values for sidebar
+    current_locale = request.preferences.get_value("locale")
+    kwargs['current_locale'] = current_locale
+    kwargs['autocomplete_backends'] = autocomplete_backends
+    kwargs['locales'] = LOCALE_NAMES
+    if kwargs['endpoint'] == 'index' or kwargs['endpoint'] == 'results':
+        about_section = infopage.INFO_PAGES.get_page('about', current_locale).html.split('<h2>')[1]
+        kwargs['about_section'] = about_section
 
     # i18n
     kwargs['sxng_locales'] = [l for l in sxng_locales if l[0] in settings['search']['languages']]
@@ -604,17 +613,10 @@ def index():
         query = ('?' + request.query_string.decode()) if request.query_string else ''
         return redirect(url_for('search') + query, 308)
 
-    current_locale = request.preferences.get_value("locale")
-    about_section = infopage.INFO_PAGES.get_page('about', current_locale).html.split('<h2>')[1]
-    
     return render(
         # fmt: off
         'index.html',
         selected_categories=get_selected_categories(request.preferences, request.form),
-        current_locale = current_locale,
-        autocomplete_backends = autocomplete_backends,
-        locales = LOCALE_NAMES,
-        about_section = about_section,
         # fmt: on
     )