kamp/searxng
1
0
Fork 0
mirror of https://github.com/searxng/searxng.git synced 2024-11-22 20:17:45 +01:00
Code

[simple theme] add logo to search form on result page

Browse Source 
* rework search form as grid layout
* remove various paddings and margins
* add logo and link to index to search form
* make categories bigger on phone
This commit is contained in:
MrPaulBlack 2021-10-26 23:11:51 +02:00 committed by Markus Heiser
parent 18299abc6f
commit bcc313bcf8
4 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,7 @@
background: inherit; background: inherit;
border: inherit; border: inherit;
padding: 0; padding: 0;
display: block;
} }
.search_filters { .search_filters {

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

@ -3,14 +3,34 @@
*/ */
#search { #search {
padding: 0 2em 0 @results-offset; padding: 1.5em 2em 0 @results-offset - 4rem;
margin: 0; margin: 0;
background: var(--color-header-background); background: var(--color-header-background);
border-bottom: 1px solid var(--color-header-border); border-bottom: 1px solid var(--color-header-border);
display: grid;
column-gap: 1rem;
row-gap: 10px;
grid-template-columns: 3rem 1fr;
grid-template-areas:
"logo search"
"spacer categories";
}
#search_logo {
grid-area: logo;
}
.search_logo_img {
width: 40px;
}
.search_categories {
grid-area: categories;
} }
#search_wrapper { #search_wrapper {
padding: 20px 0 10px 0; padding: 0;
grid-area: search;
} }
.search_box { .search_box {
@ -105,7 +125,8 @@
@media screen and (max-width: @tablet) { @media screen and (max-width: @tablet) {
#search { #search {
padding: 0 @results-tablet-offset; padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
column-gap: @results-tablet-offset;
} }
#categories { #categories {
@ -150,11 +171,20 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0.1em 0 0 0; padding: 0.1em 0 0 0;
column-gap: 0;
row-gap: 0;
grid-template-areas:
"logo search"
"categories categories";
}
.search_logo {
padding: 0;
} }
#search_wrapper { #search_wrapper {
width: 100%; width: 100%;
margin: 0 0 0.7em 0; margin: 0;
padding: 0; padding: 0;
} }
@ -187,7 +217,7 @@
width: 100%; width: 100%;
label { label {
border-bottom: 0; padding: 10px !important;
} }
} }
} }

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

@ -1,4 +1,4 @@
<div id="categories">{{- '' -}} <div id="categories" class="search_categories">{{- '' -}}
<div id="categories_container"> <div id="categories_container">
{%- for category in categories -%} {%- 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">{{ _(category) }}</label></div> <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">{{ _(category) }}</label></div>

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

@ -1,4 +1,7 @@
<form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}"> <form id="search" method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
<a id="search_logo" href="{{ url_for('index') }}">
<img class="search_logo_img" src="{{ url_for('static', filename='img/favicon.png') }}">
</a>
<div id="search_wrapper"> <div id="search_wrapper">
<div class="search_box"> <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 %} > <input id="q" autofocus name="q" type="text" placeholder="{{ _('Search for...') }}" tabindex="1" autocomplete="off" spellcheck="false" dir="auto" {% if q %}value="{{ q }}"{% endif %} >