Merge pull request #1286 from searxng/revert-1281-style-center

Revert "Theme: add a preference to center the results"
This commit is contained in:
Paul Braeuning 2022-06-05 23:11:44 +02:00 committed by GitHub
commit d633c1c6f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 92 additions and 223 deletions

View file

@ -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'),

View file

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

View file

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

View file

@ -243,7 +243,6 @@
/// General Size
@results-width: 45rem;
@results-sidebar-width: 25rem;
@results-offset: 10rem;
@results-tablet-offset: 0.5rem;
@results-gap: 5rem;

View file

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

View file

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

View file

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

View file

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