From 8a85d1b0c7b03cc0d0f82287a114728b521a5a47 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Fri, 3 Jun 2022 14:10:48 +0200 Subject: [PATCH] Theme: add a preference to center the results (Oscar) (2nd edition) related to * #1169 * #1281 * #1286 --- searx/preferences.py | 10 ++ searx/settings.yml | 2 + searx/settings_defaults.py | 1 + .../themes/simple/src/less/definitions.less | 1 + .../themes/simple/src/less/style-center.less | 118 ++++++++++++++++++ .../static/themes/simple/src/less/style.less | 33 ++++- searx/templates/simple/base.html | 2 +- searx/templates/simple/preferences.html | 10 ++ 8 files changed, 174 insertions(+), 3 deletions(-) create mode 100644 searx/static/themes/simple/src/less/style-center.less diff --git a/searx/preferences.py b/searx/preferences.py index 46b7b39d7..a7ecac55e 100644 --- a/searx/preferences.py +++ b/searx/preferences.py @@ -365,6 +365,16 @@ 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'), diff --git a/searx/settings.yml b/searx/settings.yml index 1a5d85d1a..a6311b7ff 100644 --- a/searx/settings.yml +++ b/searx/settings.yml @@ -83,6 +83,8 @@ 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: "" diff --git a/searx/settings_defaults.py b/searx/settings_defaults.py index 35089fbd4..ccbbbf287 100644 --- a/searx/settings_defaults.py +++ b/searx/settings_defaults.py @@ -184,6 +184,7 @@ 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), diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index dc2717067..ef6b02b2c 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -243,6 +243,7 @@ /// General Size @results-width: 45rem; +@results-sidebar-width: 25rem; @results-offset: 10rem; @results-tablet-offset: 0.5rem; @results-gap: 5rem; diff --git a/searx/static/themes/simple/src/less/style-center.less b/searx/static/themes/simple/src/less/style-center.less new file mode 100644 index 000000000..30c52cd5a --- /dev/null +++ b/searx/static/themes/simple/src/less/style-center.less @@ -0,0 +1,118 @@ +/* +--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) { + // any change must be reset in @media screen and (min-width: @tablet) { ... } + .center-aligment-yes #main_results { + #results { + grid-template-columns: 60% calc(40% - @results-gap); + 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"; + column-gap: 1.2rem; // from search.less + width: 100%; + padding-left: 0; + padding-right: 0; + } + + .search_filters { + .ltr-margin-left(0.5rem); + width: var(--center-page-width); + } + + #results { + // from style.less (when screen width = @tablet, reset layout from tablet) + .ltr-margin-right(2rem); + .ltr-margin-left(@results-offset); + // + + &.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; + } + } + + // from style.less (when screen width = @tablet, reset layout from tablet) + #urls { + .ltr-margin-left(0); + } + + #sidebar { + .ltr-margin-right(0); + } + } +} diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index 45c6eb204..c2efcdd50 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -29,6 +29,9 @@ // Search-Field @import "search.less"; +// to center the results +@import "style-center.less"; + // ion-icon .ion-icon { display: inline-block; @@ -460,7 +463,7 @@ article[data-vim-selected].category-social { margin-bottom: 0; .ltr-margin-left(@results-offset); display: grid; - grid-template-columns: @results-width 25rem; + grid-template-columns: @results-width @results-sidebar-width; grid-template-rows: min-content min-content 1fr min-content; gap: 0 @results-gap; grid-template-areas: @@ -698,7 +701,11 @@ article[data-vim-selected].category-social { opacity: 1; } -@media screen and (max-width: @tablet) { +/* + tablet layout +*/ + +.results-tablet() { .page_with_header { margin: 2rem 0.5rem; width: auto; @@ -799,6 +806,17 @@ article[data-vim-selected].category-social { } } +@media screen and (min-width: @phone) and (max-width: @tablet) { + // when .center-aligment-yes, see style-center.less + // the media query includes "min-width: @phone" + // because the phone layout includes the tablet layout unconditionally. + .center-aligment-no { + .results-tablet(); + } +} + +/* Misc */ + #main_results div#results.only_template_images { margin: 1rem @results-tablet-offset 0 @results-tablet-offset; display: grid; @@ -837,7 +855,14 @@ article[data-vim-selected].category-social { } } +/* + phone layout +*/ + @media screen and (max-width: @phone) { + // based on the tablet layout + .results-tablet(); + html { background-color: var(--color-base-background-mobile); } @@ -888,6 +913,10 @@ article[data-vim-selected].category-social { } } +/* + small-phone layout +*/ + @media screen and (max-width: @small-phone) { .result-videos { img.thumbnail { diff --git a/searx/templates/simple/base.html b/searx/templates/simple/base.html index 7e5f535d4..c40183fdd 100644 --- a/searx/templates/simple/base.html +++ b/searx/templates/simple/base.html @@ -1,5 +1,5 @@ - + diff --git a/searx/templates/simple/preferences.html b/searx/templates/simple/preferences.html index 4dde6fec2..aa0e65e28 100644 --- a/searx/templates/simple/preferences.html +++ b/searx/templates/simple/preferences.html @@ -213,6 +213,16 @@

{{ _('Choose auto to follow your browser settings') }}
+
+ {{ _('Center Alignment') }} +

+ +

+
{{ _('Displays results in the center of the page (Oscar layout).') }}
+
{% endif %} {% if 'results_on_new_tab' not in locked_preferences %}