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

Revert "Theme: add a preference to center the results"

searx/preferences.py

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

searx/settings.yml

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

searx/settings_defaults.py

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

searx/static/themes/simple/src/less/definitions.less

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

searx/static/themes/simple/src/less/style-center.less

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

searx/static/themes/simple/src/less/style.less

@@ -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,7 +699,6 @@ article[data-vim-selected].category-social {
 }
 
 @media screen and (max-width: @tablet) {
-  .center-aligment-no {
   .page_with_header {
     margin: 2rem 0.5rem;
     width: auto;
@@ -801,7 +797,6 @@ article[data-vim-selected].category-social {
       "urls"
       "pagination";
   }
-  }
 }
 
 #main_results div#results.only_template_images {

searx/templates/simple/base.html

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

searx/templates/simple/preferences.html

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