mirror of
https://github.com/searxng/searxng
synced 2024-01-01 18:24:07 +00:00
[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
parent
02cccdf876
commit
f3aff26086
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -22,7 +22,8 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#search {
|
||||
#search,
|
||||
#search_header {
|
||||
margin: 0 auto;
|
||||
background: inherit;
|
||||
border: inherit;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
5
searx/templates/simple/filters/safesearch.html
Normal 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>
|
||||
@ -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>{{- '' -}}
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user