Merge pull request #1281 from dalf/style-center

Theme: add a preference to center the results

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

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

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

searx/static/themes/simple/css/leaflet.css

@@ -45,7 +45,10 @@
 	}
 /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
 /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
-.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
 .leaflet-container .leaflet-marker-pane img,
 .leaflet-container .leaflet-shadow-pane img,
 .leaflet-container .leaflet-tile-pane img,
@@ -53,6 +56,8 @@
 .leaflet-container .leaflet-tile {
 	max-width: none !important;
 	max-height: none !important;
+	width: auto;
+	padding: 0;
 	}
 
 .leaflet-container.leaflet-touch-zoom {
@@ -166,9 +171,6 @@
 
 /* zoom and fade animations */
 
-.leaflet-fade-anim .leaflet-tile {
-	will-change: opacity;
-	}
 .leaflet-fade-anim .leaflet-popup {
 	opacity: 0;
 	-webkit-transition: opacity 0.2s linear;
@@ -183,9 +185,10 @@
 	    -ms-transform-origin: 0 0;
 	        transform-origin: 0 0;
 	}
-.leaflet-zoom-anim .leaflet-zoom-animated {
+svg.leaflet-zoom-animated {
 	will-change: transform;
-	}
+}
+
 .leaflet-zoom-anim .leaflet-zoom-animated {
 	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
 	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
@@ -251,14 +254,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 .leaflet-container {
 	background: #ddd;
-	outline: 0;
+	outline-offset: 1px;
 	}
 .leaflet-container a {
 	color: #0078A8;
 	}
-.leaflet-container a.leaflet-active {
-	outline: 2px solid orange;
-	}
 .leaflet-zoom-box {
 	border: 2px dotted #38f;
 	background: rgba(255,255,255,0.5);
@@ -267,7 +267,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 /* general typography */
 .leaflet-container {
-	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
 	}
 
 
@@ -277,8 +280,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
 	border-radius: 4px;
 	}
-.leaflet-bar a,
+.leaflet-bar a {
-.leaflet-bar a:hover {
 	background-color: #fff;
 	border-bottom: 1px solid #ccc;
 	width: 26px;
@@ -295,7 +297,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background-repeat: no-repeat;
 	display: block;
 	}
-.leaflet-bar a:hover {
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
 	background-color: #f4f4f4;
 	}
 .leaflet-bar a:first-child {
@@ -385,6 +388,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 .leaflet-control-layers label {
 	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
 	}
 .leaflet-control-layers-separator {
 	height: 0;
@@ -393,7 +398,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 
 /* Default icon URLs */
-.leaflet-default-icon-path {
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
 	background-image: url(images/marker-icon.png);
 	}
 
@@ -402,23 +407,24 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 .leaflet-container .leaflet-control-attribution {
 	background: #fff;
-	background: rgba(255, 255, 255, 0.7);
+	background: rgba(255, 255, 255, 0.8);
 	margin: 0;
 	}
 .leaflet-control-attribution,
 .leaflet-control-scale-line {
 	padding: 0 5px;
 	color: #333;
+	line-height: 1.4;
 	}
 .leaflet-control-attribution a {
 	text-decoration: none;
 	}
-.leaflet-control-attribution a:hover {
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
 	text-decoration: underline;
 	}
-.leaflet-container .leaflet-control-attribution,
+.leaflet-control-attribution svg {
-.leaflet-container .leaflet-control-scale {
+	display: inline !important;
-	font-size: 11px;
 	}
 .leaflet-left .leaflet-control-scale {
 	margin-left: 5px;
@@ -431,7 +437,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	border-top: none;
 	line-height: 1.1;
 	padding: 2px 5px 1px;
-	font-size: 11px;
 	white-space: nowrap;
 	overflow: hidden;
 	-moz-box-sizing: border-box;
@@ -474,17 +479,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	border-radius: 12px;
 	}
 .leaflet-popup-content {
-	margin: 13px 19px;
+	margin: 13px 24px 13px 20px;
-	line-height: 1.4;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
 	}
 .leaflet-popup-content p {
-	margin: 18px 0;
+	margin: 17px 0;
+	margin: 1.3em 0;
 	}
 .leaflet-popup-tip-container {
 	width: 40px;
 	height: 20px;
 	position: absolute;
 	left: 50%;
+	margin-top: -1px;
 	margin-left: -20px;
 	overflow: hidden;
 	pointer-events: none;
@@ -495,6 +505,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	padding: 1px;
 
 	margin: -10px auto 0;
+	pointer-events: auto;
 
 	-webkit-transform: rotate(45deg);
 	   -moz-transform: rotate(45deg);
@@ -511,19 +522,18 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	position: absolute;
 	top: 0;
 	right: 0;
-	padding: 4px 4px 0 0;
 	border: none;
 	text-align: center;
-	width: 18px;
+	width: 24px;
-	height: 14px;
+	height: 24px;
-	font: 16px/14px Tahoma, Verdana, sans-serif;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
-	color: #c3c3c3;
+	color: #757575;
 	text-decoration: none;
-	font-weight: bold;
 	background: transparent;
 	}
-.leaflet-container a.leaflet-popup-close-button:hover {
+.leaflet-container a.leaflet-popup-close-button:hover,
-	color: #999;
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
 	}
 .leaflet-popup-scrolled {
 	overflow: auto;
@@ -541,9 +551,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
 	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
 	}
-.leaflet-oldie .leaflet-popup-tip-container {
-	margin-top: -1px;
-	}
 
 .leaflet-oldie .leaflet-control-zoom,
 .leaflet-oldie .leaflet-control-layers,
@@ -578,7 +585,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	pointer-events: none;
 	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
 	}
-.leaflet-tooltip.leaflet-clickable {
+.leaflet-tooltip.leaflet-interactive {
 	cursor: pointer;
 	pointer-events: auto;
 	}
@@ -638,3 +645,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	margin-left: -12px;
 	border-right-color: #fff;
 	}
+
+/* Printing */
+	
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		color-adjust: exact;
+		}
+	}

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;

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

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 {
+  .center-aligment-no {
-    margin: 2rem 0.5rem;
+    .page_with_header {
-    width: auto;
+      margin: 2rem 0.5rem;
-  }
+      width: auto;
+    }
 
-  #infoboxes {
+    #infoboxes {
-    position: inherit;
+      position: inherit;
-    max-width: inherit;
+      max-width: inherit;
 
-    .infobox {
+      .infobox {
-      clear: both;
+        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: 98%;
-        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 {
+    #backToTop {
-      .ltr-float-right();
+      display: none;
-      padding: 0 0 3px 0;
     }
-  }
 
-  .result-images {
+    #pagination {
-    border-bottom: none !important;
+      margin: 2rem 0 0 0 !important;
-  }
-
-  .image_result {
-    max-width: 98%;
-
-    img {
-      max-width: 98%;
     }
-  }
 
-  #backToTop {
+    #main_results div#results {
-    display: none;
+      margin: 1rem auto 0 auto;
-  }
+      justify-content: center;
-
+      display: grid;
-  #pagination {
+      grid-template-columns: @results-width;
-    margin: 2rem 0 0 0 !important;
+      grid-template-rows: min-content min-content min-content 1fr min-content min-content;
-  }
+      gap: 0;
-
+      grid-template-areas:
-  #main_results div#results {
+        "corrections"
-    margin: 1rem auto 0 auto;
+        "answers"
-    justify-content: center;
+        "sidebar"
-    display: grid;
+        "urls"
-    grid-template-columns: @results-width;
+        "pagination";
-    grid-template-rows: min-content min-content min-content 1fr min-content min-content;
+    }
-    gap: 0;
-    grid-template-areas:
-      "corrections"
-      "answers"
-      "sidebar"
-      "urls"
-      "pagination";
   }
 }
 

searx/templates/simple/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="no-js theme-{{ preferences.get_value('simple_style') or 'auto' }}" lang="{{ locale_rfc5646 }}" {% if rtl %} dir="rtl"{% endif %}>
+<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 %}>
 <head>
   <meta charset="UTF-8" />
   <meta name="description" content="SearXNG — a privacy-respecting, hackable metasearch engine">

searx/templates/simple/preferences.html

@@ -213,6 +213,16 @@
       </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>