Icycoide/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng.git synced 2025-08-03 10:32:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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
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 {