From f3aff26086dda1c2610c9aa845db119ad413006f Mon Sep 17 00:00:00 2001 From: mrpaulblack Date: Sun, 21 Nov 2021 21:38:00 +0100 Subject: [PATCH 1/2] =?UTF-8?q?[simple=20theme]=20rework=20select;=20add?= =?UTF-8?q?=20safesearch=20to=20search=20and=20replace=20/=20with=20?= =?UTF-8?q?=E2=80=BA=20in=20article=20url?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../themes/simple/src/js/main/search.js | 1 + .../themes/simple/src/less/definitions.less | 14 ++--- .../static/themes/simple/src/less/index.less | 3 +- .../themes/simple/src/less/preferences.less | 26 +++++++-- .../static/themes/simple/src/less/search.less | 49 +++++++++------- .../static/themes/simple/src/less/style.less | 58 +++++++++++++------ .../themes/simple/src/less/toolkit.less | 21 ++++--- searx/templates/simple/categories.html | 2 +- .../simple/{ => filters}/languages.html | 2 +- .../templates/simple/filters/safesearch.html | 5 ++ .../time_range.html} | 2 +- searx/templates/simple/macros.html | 6 +- searx/templates/simple/search.html | 28 ++++----- searx/templates/simple/simple_search.html | 6 +- searx/webapp.py | 11 ++++ 15 files changed, 153 insertions(+), 81 deletions(-) rename searx/templates/simple/{ => filters}/languages.html (97%) create mode 100644 searx/templates/simple/filters/safesearch.html rename searx/templates/simple/{time-range.html => filters/time_range.html} (97%) diff --git a/searx/static/themes/simple/src/js/main/search.js b/searx/static/themes/simple/src/js/main/search.js index d3149340a..0244a90ea 100644 --- a/searx/static/themes/simple/src/js/main/search.js +++ b/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); } diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 909fb0877..95370849d 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/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; diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less index b30dad1d2..9a244da00 100644 --- a/searx/static/themes/simple/src/less/index.less +++ b/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; diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less index db6831341..c6e691b9d 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/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; diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 99aa02a34..04ee2cea8 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/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"; diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index a26c57db1..a5c050f20 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/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; diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index f8ae3c1bb..da207f1f5 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/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 { diff --git a/searx/templates/simple/categories.html b/searx/templates/simple/categories.html index 29616f127..ae8b2ec09 100644 --- a/searx/templates/simple/categories.html +++ b/searx/templates/simple/categories.html @@ -13,6 +13,7 @@ } -%}
{{- '' -}}
+ {%- if display_tooltip %}
{{ _('Click on the magnifier to perform search') }}
{% endif -%} {%- for category in categories -%}
{%- endfor -%} - {%- if display_tooltip %}
{{ _('Click on the magnifier to perform search') }}
{% endif -%}
{{- '' -}}
diff --git a/searx/templates/simple/languages.html b/searx/templates/simple/filters/languages.html similarity index 97% rename from searx/templates/simple/languages.html rename to searx/templates/simple/filters/languages.html index dd928ff68..710c18c92 100644 --- a/searx/templates/simple/languages.html +++ b/searx/templates/simple/filters/languages.html @@ -1,4 +1,4 @@ -{{- '' -}} {%- for lang_id,lang_name,country_name,english_name in language_codes | sort(attribute=1) -%} {{- '' -}} diff --git a/searx/templates/simple/macros.html b/searx/templates/simple/macros.html index 26aa71891..7a3a4ff9f 100644 --- a/searx/templates/simple/macros.html +++ b/searx/templates/simple/macros.html @@ -18,7 +18,11 @@ {% macro result_header(result, favicons, image_proxify) -%}
-

{{ result_link(result.url, result.pretty_url, 'url') }}

+ {{- result_open_link(result.url, "url_wrapper") -}} + {%- for part in get_pretty_url(result.parsed_url) -%} + {{- part -}} + {%- endfor %} + {{- result_close_link() -}} {%- if result.img_src %}{{ result_open_link(result.url) }}{{ result.title|striptags }}{{ result_close_link() }}{% endif -%} {%- if result.thumbnail %}{{ result_open_link(result.url) }}{{ result.title|striptags }}{{ result_close_link() }}{% endif -%}

{{ result_link(result.url, result.title|safe) }}

diff --git a/searx/templates/simple/search.html b/searx/templates/simple/search.html index c231d7b35..1df55e782 100644 --- a/searx/templates/simple/search.html +++ b/searx/templates/simple/search.html @@ -1,22 +1,22 @@