[simple theme] rework select; add safesearch to search and replace / with › in article url

* rework selection UI in pref (fix based on: https://github.com/twelsby/searx/commit/78643e9f43a103c523f112e9f3ce26a5c7bb3a0f)
* moved search filters underneath categories
* cut params from url and replace / with ›
* make h3 and url in article bigger
* add safe search select to search filter (this will not override settings and only be valid while on result page in a session)
* make search form button not overlap each other when js is disabled
* 1rem padding around preview image and thumbnail in default article template

searx/static/themes/simple/src/js/main/search.js

@@ -98,6 +98,7 @@
         return false;
       });
 
+      searxng.on(d.getElementById('safesearch'), 'change', submitIfQuery);
       searxng.on(d.getElementById('time_range'), 'change', submitIfQuery);
       searxng.on(d.getElementById('language'), 'change', submitIfQuery);
     }

searx/static/themes/simple/src/less/definitions.less

@@ -89,11 +89,10 @@
   --color-toolkit-dialog-background: #fff;
   --color-toolkit-tabs-label-border: #fff;
   --color-toolkit-tabs-section-border: #ddd;
+  --color-toolkit-select-background: #f7f7f7;
   --color-toolkit-select-border: #ddd;
-  --color-toolkit-select-border-hover: #bbb;
+  --color-toolkit-select-background-hover: #bbb;
   --color-toolkit-input-text-font: #222;
-  --color-toolkit-input-text-border: #ddd;
-  --color-toolkit-input-text-border-hover: #bbb;
   --color-toolkit-checkbox-onoff-background: #ddd;
   --color-toolkit-checkbox-onoff-label-background: #3050ff;
   --color-toolkit-checkbox-onoff-checked-background: #aaa;
@@ -162,8 +161,8 @@
   --color-result-link-font: #8af;
   --color-result-link-font-highlight: #8af;
   --color-result-link-visited-font: #96b;
-  --color-result-publishdate-font: #777;
-  --color-result-engines-font: #777;
+  --color-result-publishdate-font: #888;
+  --color-result-engines-font: #888;
   --color-result-search-url-border: #555;
   --color-result-search-url-font: #fff;
   /// Detail modal : same as the light version
@@ -190,11 +189,10 @@
   --color-toolkit-dialog-background: #222;
   --color-toolkit-tabs-label-border: #222;
   --color-toolkit-tabs-section-border: #555;
+  --color-toolkit-select-background: #3c3b31;
   --color-toolkit-select-border: #555;
-  --color-toolkit-select-border-hover: #777;
+  --color-toolkit-select-background-hover: #333;
   --color-toolkit-input-text-font: #fff;
-  --color-toolkit-input-text-border: #555;
-  --color-toolkit-input-text-border-hover: #777;
   --color-toolkit-checkbox-onoff-background: #3c3b31;
   --color-toolkit-checkbox-onoff-label-background: #58f;
   --color-toolkit-checkbox-onoff-checked-background: #ddd;

searx/static/themes/simple/src/less/index.less

@@ -22,7 +22,8 @@
     visibility: hidden;
   }
 
-  #search {
+  #search,
+  #search_header {
     margin: 0 auto;
     background: inherit;
     border: inherit;

searx/static/themes/simple/src/less/preferences.less

@@ -41,13 +41,15 @@
     input[type="text"] {
       width: 13.25rem;
       color: var(--color-toolkit-input-text-font);
-      border: 1px solid var(--color-toolkit-input-text-border);
-      background: none repeat scroll 0 0 var(--color-base-background);
-      padding: 0.4rem;
+      border: none;
+      background: none repeat scroll 0 0 var(--color-toolkit-select-background);
+      padding: 0.2rem 0.4rem;
+      height: 2rem;
       .rounded-corners-tiny;
 
-      &:hover {
-        border: 1px solid var(--color-toolkit-input-text-border-hover);
+      &:hover,
+      &:focus {
+        background-color: var(--color-toolkit-select-background-hover);
       }
     }
 
@@ -103,6 +105,20 @@
     }
   }
 
+  .category {
+    margin-right: 0.5rem;
+
+    label {
+      border: 2px solid transparent;
+      padding: 0.2rem 0.4rem;
+      .rounded-corners-tiny;
+    }
+  }
+
+  .category input[type="checkbox"]:checked + label {
+    border: 2px solid var(--color-categories-item-border-selected);
+  }
+
   .name,
   .shortcut {
     text-align: left;

searx/static/themes/simple/src/less/search.less

@@ -3,6 +3,11 @@
 */
 
 #search {
+  padding: 0;
+  margin: 0;
+}
+
+#search_header {
   padding: 1.5em 2em 0 @results-offset - 3rem;
   margin: 0;
   background: var(--color-header-background);
@@ -68,13 +73,10 @@
   grid-area: categories;
 }
 
-#search_wrapper {
+.search_box {
+  margin: 0;
   padding: 0;
   grid-area: search;
-}
-
-.search_box {
-  margin: 0 12px 0 0;
   display: inline-flex;
   flex-direction: row;
   white-space: nowrap;
@@ -148,21 +150,36 @@
   }
 }
 
+.no-js #clear_search,
 .no-js #send_search {
   width: auto !important;
+  border-left: 1px solid var(--color-search-border);
+  padding: 10px;
 }
 
 .search_filters {
-  display: inline-block;
-  margin: 0.8rem 0 0 0;
+  margin: 0.6rem 0 0 @results-offset + 0.6rem;
+
+  select {
+    background-color: inherit;
+
+    &:hover,
+    &:focus {
+      color: var(--color-base-font);
+    }
+  }
 }
 
 @media screen and (max-width: @tablet) {
-  #search {
+  #search_header {
     padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
     column-gap: @results-tablet-offset;
   }
 
+  .search_filters {
+    margin: 0.6rem 0 0 @results-tablet-offset + 3rem;
+  }
+
   #categories {
     font-size: 90%;
     clear: both;
@@ -200,10 +217,10 @@
 }
 
 @media screen and (max-width: @phone) {
-  #search {
+  #search_header {
     width: 100%;
     margin: 0;
-    padding: 0.1em 0 0 0;
+    padding: 0.1rem 0 0 0;
     column-gap: 0;
     row-gap: 0;
     grid-template-areas:
@@ -215,16 +232,9 @@
     padding: 0;
   }
 
-  #search_wrapper {
-    width: 100%;
-    padding: 0;
-  }
-
   .search_box {
     // hack, should be 100% ?
     width: 99%;
-    margin: 0.1em;
-    padding: 0 0.1em 0 0;
     display: flex;
     flex-direction: row;
   }
@@ -240,8 +250,7 @@
   }
 
   .search_filters {
-    display: block;
-    margin: 0.8em 0;
+    margin: 0;
   }
 
   .language,
@@ -266,7 +275,7 @@
 }
 
 @media screen and (max-width: @ultra-small-phone) {
-  #search {
+  #search_header {
     grid-template-areas:
       "search search"
       "categories categories";

searx/static/themes/simple/src/less/style.less

@@ -168,7 +168,7 @@ article[data-vim-selected].category-social {
   border-left: 0.2rem solid transparent;
 
   h3 {
-    font-size: 1.1em;
+    font-size: 1.2rem;
     word-wrap: break-word;
     margin: 0.4rem 0 0.4rem 0;
     padding: 0;
@@ -221,13 +221,39 @@ article[data-vim-selected].category-social {
     }
   }
 
-  .url {
-    font-size: 0.96em;
-    margin: 0 0 3px 0;
-    padding: 0;
-    max-width: 54em;
-    word-wrap: break-word;
+  .url_wrapper {
+    display: flex;
+    font-size: 1rem;
     color: var(--color-result-url-font);
+    flex-wrap: nowrap;
+    overflow: hidden;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+
+    .url_o1 {
+      white-space: nowrap;
+      flex-shrink: 1;
+    }
+
+    .url_o1::after {
+      content: " ";
+      width: 1ch;
+      display: inline-block;
+    }
+
+    .url_o2 {
+      overflow: hidden;
+      white-space: nowrap;
+      flex-basis: content;
+      flex-grow: 0;
+      flex-shrink: 1;
+      text-align: right;
+
+      .url_i2 {
+        float: right;
+      }
+    }
   }
 
   .published_date {
@@ -238,17 +264,15 @@ article[data-vim-selected].category-social {
   img {
     &.thumbnail {
       float: left;
-      padding: 0 5px 10px 0;
-      width: 20em;
-      min-width: 20em;
-      min-height: 8em;
+      padding: 0.6rem 1rem 0 0;
+      width: 20rem;
     }
 
     &.image {
       float: left;
-      padding: 0 5px 10px 0;
-      width: 100px;
-      max-height: 100px;
+      padding: 0.6rem 1rem 0 0;
+      width: 7rem;
+      max-height: 7rem;
       object-fit: scale-down;
       object-position: right top;
     }
@@ -367,7 +391,7 @@ article[data-vim-selected].category-social {
 }
 
 #results {
-  margin: 2rem 2rem 0 @results-offset;
+  margin: 1rem 2rem 0 @results-offset;
   display: grid;
   grid-template-columns: @results-width 25rem;
   grid-template-rows: min-content min-content 1fr min-content;
@@ -686,7 +710,7 @@ article[data-vim-selected].category-social {
   }
 
   #main_results div#results {
-    margin: 2rem auto 0 auto;
+    margin: 1rem auto 0 auto;
     justify-content: center;
     display: grid;
     grid-template-columns: @results-width;
@@ -702,7 +726,7 @@ article[data-vim-selected].category-social {
 }
 
 #main_results div#results.only_template_images {
-  margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
+  margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: min-content min-content 1fr min-content min-content;

searx/static/themes/simple/src/less/toolkit.less

@@ -296,11 +296,11 @@ html body .tabs > input:checked {
 
 /* -- select -- */
 select {
-  height: 28px;
-  margin: 0 1em 0 0;
-  padding: 2px 8px 2px 0 !important;
+  height: 2.4rem;
+  margin: 0 1rem 0 0;
+  padding: 0.2rem !important;
   color: var(--color-search-font);
-  font-size: 12px;
+  font-size: 0.9rem;
   z-index: 2;
 
   &:hover,
@@ -314,17 +314,20 @@ select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border: none;
-    border-bottom: 1px solid var(--color-toolkit-select-border);
+    border-width: 0 2rem 0 0;
+    border-color: transparent;
     background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
-    background-position-x: 105%;
-    background-size: 2em;
+    background-position-x: calc(100% + 2rem);
+    background-size: 2rem;
     background-origin: content-box;
+    background-color: var(--color-toolkit-select-background);
     outline: medium none;
+    text-overflow: ellipsis;
+    .rounded-corners-tiny;
 
     &:hover,
     &:focus {
-      border-bottom: 1px solid var(--color-toolkit-select-border-hover);
+      background-color: var(--color-toolkit-select-background-hover);
     }
 
     option {

searx/templates/simple/categories.html

@@ -13,6 +13,7 @@
 }  -%}
 <div id="categories" class="search_categories">{{- '' -}}
     <div id="categories_container">
+        {%- if display_tooltip %}<div class="help">{{ _('Click on the magnifier to perform search') }}</div>{% endif -%}
         {%- for category in categories -%}
         <div class="category"><input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}"{% if category in selected_categories %} checked="checked"{% endif %}/>
             <label for="checkbox_{{ category|replace(' ', '_') }}" class="tooltips">
@@ -21,6 +22,5 @@
             </label>
         </div>
         {%- endfor -%}
-        {%- if display_tooltip %}<div class="help">{{ _('Click on the magnifier to perform search') }}</div>{% endif -%}
     </div>{{- '' -}}
 </div>

searx/templates/simple/languages.html → searx/templates/simple/filters/languages.html

@@ -1,4 +1,4 @@
-<select class="language" id="language" name="language" tabindex="2">{{- '' -}}
+<select class="language" id="language" name="language" tabindex="1">{{- '' -}}
 	<option value="all" {% if current_language == 'all' %}selected="selected"{% endif %}>{{ _('Default language') }}</option>
 	{%- for lang_id,lang_name,country_name,english_name in language_codes | sort(attribute=1) -%}
 	<option value="{{ lang_id }}" {% if lang_id == current_language %}selected="selected"{% endif %}>

searx/templates/simple/filters/safesearch.html

@@ -0,0 +1,5 @@
+<select  name="safesearch" id="safesearch" class="safesearch" tabindex="3">
+    <option value="2" {% if safesearch == '2' %}selected="selected"{% endif %}>{{ _("SafeSearch") + ": " + _('Strict') }}</option>
+    <option value="1" {% if safesearch == '1' %}selected="selected"{% endif %}>{{ _("SafeSearch") + ": " + _('Moderate') }}</option>
+    <option value="0" {% if safesearch == '0' %}selected="selected"{% endif %}>{{ _("SafeSearch") + ": " + _('None') }}</option>
+</select>

searx/templates/simple/time-range.html → searx/templates/simple/filters/time_range.html

@@ -1,4 +1,4 @@
-<select name="time_range" id="time_range" class="time_range" tabindex="3">{{- '' -}}
+<select name="time_range" id="time_range" class="time_range" tabindex="2">{{- '' -}}
     <option id="time-range-anytime" value="" {{ "selected" if time_range=="" or not time_range  else ""}}>
         {{- _('Anytime') -}}
     </option>{{- '' -}}

searx/templates/simple/macros.html

@@ -18,7 +18,11 @@
 <!-- Draw result header -->
 {% macro result_header(result, favicons, image_proxify) -%}
 <article class="result {% if result['template'] %}result-{{ result.template|replace('.html', '') }}{% else %}result-default{% endif %} {% if result['category'] %}category-{{ result['category'] }}{% endif %}{% for e in result.engines %} {{ e }}{% endfor %}">
-  <p class="url">{{ result_link(result.url, result.pretty_url, 'url') }}</p>
+  {{- result_open_link(result.url, "url_wrapper") -}}
+  {%- for part in get_pretty_url(result.parsed_url) -%}
+  <span class="url_o{{loop.index}}"><span class="url_i{{loop.index}}">{{- part -}}</span></span>
+  {%- endfor %}
+  {{- result_close_link() -}}
   {%- if result.img_src %}{{ result_open_link(result.url) }}<img class="image" src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="image" />{{ result_close_link() }}{% endif -%}
   {%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" alt="{{ result.title|striptags }}"/>{{ result_close_link() }}{% endif -%}
   <h3>{{ result_link(result.url, result.title|safe) }}</h3>

searx/templates/simple/search.html

@@ -1,22 +1,22 @@
 <form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
-  <a id="search_logo" href="{{ url_for('index') }}">
-    <span hidden>SearXNG</span>
-    {% include '__common__/searxng-wordmark.min.svg' without context %}
-  </a>
-  <div id="search_wrapper">
+  <div id="search_header">
+    <a id="search_logo" href="{{ url_for('index') }}">
+      <span hidden>SearXNG</span>
+      {% include '__common__/searxng-wordmark.min.svg' without context %}
+    </a>
     <div class="search_box">
       <input id="q" autofocus name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" spellcheck="false" dir="auto" {% if q %}value="{{ q }}"{% endif %} >
-      <button id="clear_search" type="button" tabindex="-1"><span class="hide_if_nojs">{{ icon_big('close') }}</span><span class="show_if_nojs">{{ _('Clear search') }}</span></button>
-      <button id="send_search" type="submit" tabindex="-1"><span class="hide_if_nojs">{{ icon_big('search-outline') }}</span><span class="show_if_nojs">{{ _('Start search') }}</span></button>
-    </div>
-    <div class="search_filters">
-      {% include 'simple/languages.html' %}
-      {% include 'simple/time-range.html' %}
+      <button id="clear_search" type="button" tabindex="-1"><span class="hide_if_nojs">{{ icon_big('close') }}</span><span class="show_if_nojs">{{ _('clear') }}</span></button>
+      <button id="send_search" type="submit" tabindex="-1"><span class="hide_if_nojs">{{ icon_big('search-outline') }}</span><span class="show_if_nojs">{{ _('search') }}</span></button>
     </div>
+    {% set display_tooltip = true %}
+    {% include 'simple/categories.html' %}
+  </div>
+  <div class="search_filters">
+    {% include 'simple/filters/languages.html' %}
+    {% include 'simple/filters/time_range.html' %}
+    {% include 'simple/filters/safesearch.html' %}
   </div>
-  {% set display_tooltip = true %}
-  {% include 'simple/categories.html' %}
-  <input type="hidden" name="safesearch" value="{{ safesearch }}" >
   <input type="hidden" name="theme" value="{{ theme }}" >
   {% if timeout_limit %}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{% endif %}
 </form>

searx/templates/simple/simple_search.html

@@ -1,9 +1,9 @@
 <form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
-  <div id="search_wrapper">
+  <div id="search_header">
     <div class="search_box">
       <input id="q" autofocus name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" spellcheck="false" dir="auto" {% if q %}value="{{ q }}"{% endif %} >
-      <button id="clear_search" type="button" tabindex="-1"><span class="hide_if_nojs">{{ icon_big('close') }}</span><span class="show_if_nojs">{{ _('Clear search') }}</span></button>
-      <button id="send_search" type="submit" tabindex="-1"><span class="hide_if_nojs">{{ icon_big('search-outline') }}</span><span class="show_if_nojs">{{ _('Start search') }}</span></button>
+      <button id="clear_search" type="button" tabindex="-1"><span class="hide_if_nojs">{{ icon_big('close') }}</span><span class="show_if_nojs">{{ _('clear') }}</span></button>
+      <button id="send_search" type="submit" tabindex="-1"><span class="hide_if_nojs">{{ icon_big('search-outline') }}</span><span class="show_if_nojs">{{ _('search') }}</span></button>
     </div>
   </div>
 </form>

searx/webapp.py

@@ -419,6 +419,16 @@ def _get_enable_categories(all_categories):
     return [x for x in all_categories if x in enabled_categories]
 
 
+def get_pretty_url(parsed_url):
+    path = parsed_url.path
+    path = path[:-1] if len(path) > 0 and path[-1] == '/' else path
+    path = path.replace("/", " › ")
+    return [
+        parsed_url.scheme + "://" + parsed_url.netloc,
+        path
+    ]
+
+
 def render(template_name, override_theme=None, **kwargs):
     # values from the HTTP requests
     kwargs['endpoint'] = 'results' if 'q' in kwargs else request.endpoint
@@ -457,6 +467,7 @@ def render(template_name, override_theme=None, **kwargs):
     kwargs['searx_version'] = VERSION_STRING
     kwargs['searx_git_url'] = GIT_URL
     kwargs['get_setting'] = get_setting
+    kwargs['get_pretty_url'] = get_pretty_url
 
     # helpers to create links to other pages
     kwargs['url_for'] = url_for_theme  # override url_for function in templates