From 8a85d1b0c7b03cc0d0f82287a114728b521a5a47 Mon Sep 17 00:00:00 2001
From: Alexandre Flament
Date: Fri, 3 Jun 2022 14:10:48 +0200
Subject: [PATCH 1/2] 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') }}
+
{% endif %}
{% if 'results_on_new_tab' not in locked_preferences %}