jandieman
/
searxng
mirror of https://github.com/searxng/searxng.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

* rework selection UI in pref (fix based on: 78643e9f43)
* 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
This commit is contained in:
mrpaulblack 2021-11-21 21:38:00 +01:00
parent 02cccdf876
commit f3aff26086
15 changed files with 153 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
searx/static/themes/simple/src/js/main/search.js
View File

@ -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);
}

14
searx/static/themes/simple/src/less/definitions.less
View File

@ -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;

3
searx/static/themes/simple/src/less/index.less
View File

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

26
searx/static/themes/simple/src/less/preferences.less
View File

@ -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;

49
searx/static/themes/simple/src/less/search.less
View File

@ -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";

58
searx/static/themes/simple/src/less/style.less
View File

@ -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;

21
searx/static/themes/simple/src/less/toolkit.less
View File

@ -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 {

2
searx/templates/simple/categories.html
View File

@ -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>

2
searx/templates/simple/languages.html → searx/templates/simple/filters/languages.html
View File

@ -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 %}>

5
searx/templates/simple/filters/safesearch.html Normal file
View File

@ -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>

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

@ -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>{{- '' -}}

6
searx/templates/simple/macros.html
View File

@ -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>

28
searx/templates/simple/search.html
View File

@ -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>

6
searx/templates/simple/simple_search.html
View File

@ -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>

11
searx/webapp.py
View File

@ -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