From 4237f5fd50c2dc0e91513056d885f25038ef6787 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) related to #1169 --- 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 | 102 ++++++++++ .../static/themes/simple/src/less/style.less | 179 +++++++++--------- searx/templates/simple/base.html | 2 +- searx/templates/simple/preferences.html | 10 + 8 files changed, 219 insertions(+), 88 deletions(-) create mode 100644 searx/static/themes/simple/src/less/style-center.less diff --git a/searx/preferences.py b/searx/preferences.py index cd943af66..624f1284c 100644 --- a/searx/preferences.py +++ b/searx/preferences.py @@ -367,6 +367,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 8a97bbcdc..8f3ae137f 100644 --- a/searx/settings.yml +++ b/searx/settings.yml @@ -82,6 +82,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 938b9714d..c3dfb563b 100644 --- a/searx/settings_defaults.py +++ b/searx/settings_defaults.py @@ -183,6 +183,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..749aab4e8 --- /dev/null +++ b/searx/static/themes/simple/src/less/style-center.less @@ -0,0 +1,102 @@ +/* +--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; + } + } + } +} diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index 45c6eb204..6777cbadc 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: @@ -699,103 +702,105 @@ article[data-vim-selected].category-social { } @media screen and (max-width: @tablet) { - .page_with_header { - margin: 2rem 0.5rem; - width: auto; - } + .center-aligment-no { + .page_with_header { + margin: 2rem 0.5rem; + width: auto; + } - #infoboxes { - position: inherit; - max-width: inherit; + #infoboxes { + position: inherit; + max-width: inherit; - .infobox { - clear: both; + .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%; 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%; + max-width: 98%; } } - .engines { - .ltr-float-right(); - padding: 0 0 3px 0; + #backToTop { + display: none; } - } - .result-images { - border-bottom: none !important; - } - - .image_result { - max-width: 98%; - - img { - max-width: 98%; + #pagination { + margin: 2rem 0 0 0 !important; } - } - #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 { + 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"; + } } } diff --git a/searx/templates/simple/base.html b/searx/templates/simple/base.html index d8eaaa02b..a424032aa 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 %}