forked from Ponysearch/Ponysearch
Merge pull request #1286 from searxng/revert-1281-style-center
Revert "Theme: add a preference to center the results"
This commit is contained in:
commit
d633c1c6f1
12 changed files with 92 additions and 223 deletions
|
@ -365,16 +365,6 @@ class Preferences:
|
|||
locked=is_locked('simple_style'),
|
||||
choices=['', 'auto', 'light', 'dark']
|
||||
),
|
||||
'center_aligment': MapSetting(
|
||||
settings['ui']['center_aligment'],
|
||||
locked=is_locked('center_aligment'),
|
||||
map={
|
||||
'0': False,
|
||||
'1': True,
|
||||
'False': False,
|
||||
'True': True
|
||||
}
|
||||
),
|
||||
'advanced_search': MapSetting(
|
||||
settings['ui']['advanced_search'],
|
||||
locked=is_locked('advanced_search'),
|
||||
|
|
|
@ -82,8 +82,6 @@ ui:
|
|||
query_in_title: false
|
||||
# ui theme
|
||||
default_theme: simple
|
||||
# center the results ?
|
||||
center_aligment: false
|
||||
# Default interface locale - leave blank to detect from browser information or
|
||||
# use codes from the 'locales' config section
|
||||
default_locale: ""
|
||||
|
|
|
@ -183,7 +183,6 @@ SCHEMA = {
|
|||
'theme_args': {
|
||||
'simple_style': SettingsValue(SIMPLE_STYLE, 'auto'),
|
||||
},
|
||||
'center_aligment': SettingsValue(bool, False),
|
||||
'results_on_new_tab': SettingsValue(bool, False),
|
||||
'advanced_search': SettingsValue(bool, False),
|
||||
'query_in_title': SettingsValue(bool, False),
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -243,7 +243,6 @@
|
|||
|
||||
/// General Size
|
||||
@results-width: 45rem;
|
||||
@results-sidebar-width: 25rem;
|
||||
@results-offset: 10rem;
|
||||
@results-tablet-offset: 0.5rem;
|
||||
@results-gap: 5rem;
|
||||
|
|
|
@ -1,102 +0,0 @@
|
|||
/*
|
||||
--center-page-width overrides the less variable @results-width when the results are centered
|
||||
see the CSS rules for #results in style.less ( grid-template-columns and gap).
|
||||
|
||||
In this file, the --center-page-width values comes from the Oscar theme (Bootstrap 3).
|
||||
|
||||
All rules starts with ".center-aligment-yes #main_results" to be enabled only
|
||||
on the /search URL and when the "center alignment" preference is enabled.
|
||||
*/
|
||||
|
||||
@media screen and (min-width: @phone) {
|
||||
.center-aligment-yes #main_results {
|
||||
--center-page-width: 48rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 62rem) {
|
||||
.center-aligment-yes #main_results {
|
||||
--center-page-width: 60rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @tablet) {
|
||||
.center-aligment-yes #main_results {
|
||||
--center-page-width: 73rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @phone) and (max-width: @tablet) {
|
||||
.center-aligment-yes #main_results {
|
||||
#results {
|
||||
grid-template-columns: 60% 1fr;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#urls {
|
||||
.ltr-margin-left(3rem);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
.ltr-margin-right(1rem);
|
||||
}
|
||||
|
||||
#backToTop {
|
||||
.ltr-left(calc(60% + 1rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @tablet) {
|
||||
.center-aligment-yes #main_results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
#search {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#search_header {
|
||||
grid-template-columns: calc(50% - 4.5rem - var(--center-page-width) / 2) 3rem var(--center-page-width);
|
||||
grid-template-areas: "na logo search" "na spacer categories";
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.search_filters {
|
||||
.ltr-margin-left(0.5rem);
|
||||
width: var(--center-page-width);
|
||||
}
|
||||
|
||||
#results {
|
||||
&.only_template_images,
|
||||
&.image-detail-open {
|
||||
// * grid-template-columns and .ltr-margin-left are set in style.less
|
||||
// * With .image-detail-open.only_template_images, the width is set in detail.less
|
||||
// * #results is going to be centered because of the #main_results rules,
|
||||
// align-self aligns the results on the left or right according to the language.
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
&:not(.only_template_images):not(.image-detail-open) {
|
||||
// the gap is set in style.less
|
||||
.ltr-margin-left(1.5rem);
|
||||
grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width;
|
||||
|
||||
#backToTop {
|
||||
.ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.result .content {
|
||||
max-width: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -29,9 +29,6 @@
|
|||
// Search-Field
|
||||
@import "search.less";
|
||||
|
||||
// to center the results
|
||||
@import "style-center.less";
|
||||
|
||||
// ion-icon
|
||||
.ion-icon {
|
||||
display: inline-block;
|
||||
|
@ -463,7 +460,7 @@ article[data-vim-selected].category-social {
|
|||
margin-bottom: 0;
|
||||
.ltr-margin-left(@results-offset);
|
||||
display: grid;
|
||||
grid-template-columns: @results-width @results-sidebar-width;
|
||||
grid-template-columns: @results-width 25rem;
|
||||
grid-template-rows: min-content min-content 1fr min-content;
|
||||
gap: 0 @results-gap;
|
||||
grid-template-areas:
|
||||
|
@ -702,106 +699,104 @@ article[data-vim-selected].category-social {
|
|||
}
|
||||
|
||||
@media screen and (max-width: @tablet) {
|
||||
.center-aligment-no {
|
||||
.page_with_header {
|
||||
margin: 2rem 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
.page_with_header {
|
||||
margin: 2rem 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#infoboxes {
|
||||
position: inherit;
|
||||
max-width: inherit;
|
||||
#infoboxes {
|
||||
position: inherit;
|
||||
max-width: inherit;
|
||||
|
||||
.infobox {
|
||||
clear: both;
|
||||
|
||||
img {
|
||||
.ltr-float-left();
|
||||
max-width: 10em;
|
||||
margin-top: 0.5em;
|
||||
.ltr-margin-right(0.5em);
|
||||
margin-bottom: 0.5em;
|
||||
.ltr-margin-left(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
margin: 0 @results-tablet-offset @results-margin @results-tablet-offset;
|
||||
padding: 0;
|
||||
float: none;
|
||||
border: none;
|
||||
width: auto;
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#apis {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search_url {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result {
|
||||
.thumbnail {
|
||||
max-width: 98%;
|
||||
}
|
||||
|
||||
.url {
|
||||
span.url {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.engines {
|
||||
.ltr-float-right();
|
||||
padding: 0 0 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.result-images {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.image_result {
|
||||
max-width: 98%;
|
||||
.infobox {
|
||||
clear: both;
|
||||
|
||||
img {
|
||||
max-width: 98%;
|
||||
.ltr-float-left();
|
||||
max-width: 10em;
|
||||
margin-top: 0.5em;
|
||||
.ltr-margin-right(0.5em);
|
||||
margin-bottom: 0.5em;
|
||||
.ltr-margin-left(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
margin: 0 @results-tablet-offset @results-margin @results-tablet-offset;
|
||||
padding: 0;
|
||||
float: none;
|
||||
border: none;
|
||||
width: auto;
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#apis {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search_url {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result {
|
||||
.thumbnail {
|
||||
max-width: 98%;
|
||||
}
|
||||
|
||||
.url {
|
||||
span.url {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#backToTop {
|
||||
display: none;
|
||||
.engines {
|
||||
.ltr-float-right();
|
||||
padding: 0 0 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
#pagination {
|
||||
margin: 2rem 0 0 0 !important;
|
||||
}
|
||||
.result-images {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
#main_results div#results {
|
||||
margin: 1rem auto 0 auto;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: @results-width;
|
||||
grid-template-rows: min-content min-content min-content 1fr min-content min-content;
|
||||
gap: 0;
|
||||
grid-template-areas:
|
||||
"corrections"
|
||||
"answers"
|
||||
"sidebar"
|
||||
"urls"
|
||||
"pagination";
|
||||
.image_result {
|
||||
max-width: 98%;
|
||||
|
||||
img {
|
||||
max-width: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
#backToTop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pagination {
|
||||
margin: 2rem 0 0 0 !important;
|
||||
}
|
||||
|
||||
#main_results div#results {
|
||||
margin: 1rem auto 0 auto;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: @results-width;
|
||||
grid-template-rows: min-content min-content min-content 1fr min-content min-content;
|
||||
gap: 0;
|
||||
grid-template-areas:
|
||||
"corrections"
|
||||
"answers"
|
||||
"sidebar"
|
||||
"urls"
|
||||
"pagination";
|
||||
}
|
||||
}
|
||||
|
||||
#main_results div#results.only_template_images {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="no-js theme-{{ preferences.get_value('simple_style') or 'auto' }} center-aligment-{{ preferences.get_value('center_aligment') and 'yes' or 'no' }}" lang="{{ locale_rfc5646 }}" {% if rtl %} dir="rtl"{% endif %}>
|
||||
<html class="no-js theme-{{ preferences.get_value('simple_style') or 'auto' }}" lang="{{ locale_rfc5646 }}" {% if rtl %} dir="rtl"{% endif %}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="SearXNG — a privacy-respecting, hackable metasearch engine">
|
||||
|
|
|
@ -213,16 +213,6 @@
|
|||
</p>
|
||||
<div class="description">{{ _('Choose auto to follow your browser settings') }}</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend id="pref_center_aligment">{{ _('Center Alignment') }}</legend>
|
||||
<p class="value">
|
||||
<select name="center_aligment" aria-labelledby="pref_center_aligment">
|
||||
<option value="1" {% if preferences.get_value('center_aligment') %}selected="selected"{% endif %}>{{ _('On') }}</option>
|
||||
<option value="0" {% if not preferences.get_value('center_aligment') %}selected="selected"{% endif %}>{{ _('Off')}}</option>
|
||||
</select>
|
||||
</p>
|
||||
<div class="description">{{ _('Displays results in the center of the page (Oscar layout).') }}</div>
|
||||
</fieldset>
|
||||
{% endif %}
|
||||
{% if 'results_on_new_tab' not in locked_preferences %}
|
||||
<fieldset>
|
||||
|
|
Loading…
Reference in a new issue