Merge pull request #1281 from dalf/style-center

Theme: add a preference to center the results
This commit is contained in:
Alexandre Flament 2022-06-05 21:39:58 +02:00 committed by GitHub
commit f8f6b95d8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 279 additions and 131 deletions

View File

@ -365,6 +365,16 @@ class Preferences:
locked=is_locked('simple_style'), locked=is_locked('simple_style'),
choices=['', 'auto', 'light', 'dark'] 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( 'advanced_search': MapSetting(
settings['ui']['advanced_search'], settings['ui']['advanced_search'],
locked=is_locked('advanced_search'), locked=is_locked('advanced_search'),

View File

@ -82,6 +82,8 @@ ui:
query_in_title: false query_in_title: false
# ui theme # ui theme
default_theme: simple default_theme: simple
# center the results ?
center_aligment: false
# Default interface locale - leave blank to detect from browser information or # Default interface locale - leave blank to detect from browser information or
# use codes from the 'locales' config section # use codes from the 'locales' config section
default_locale: "" default_locale: ""

View File

@ -183,6 +183,7 @@ SCHEMA = {
'theme_args': { 'theme_args': {
'simple_style': SettingsValue(SIMPLE_STYLE, 'auto'), 'simple_style': SettingsValue(SIMPLE_STYLE, 'auto'),
}, },
'center_aligment': SettingsValue(bool, False),
'results_on_new_tab': SettingsValue(bool, False), 'results_on_new_tab': SettingsValue(bool, False),
'advanced_search': SettingsValue(bool, False), 'advanced_search': SettingsValue(bool, False),
'query_in_title': SettingsValue(bool, False), 'query_in_title': SettingsValue(bool, False),

View File

@ -45,7 +45,10 @@
} }
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ /* .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 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-marker-pane img,
.leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img, .leaflet-container .leaflet-tile-pane img,
@ -53,6 +56,8 @@
.leaflet-container .leaflet-tile { .leaflet-container .leaflet-tile {
max-width: none !important; max-width: none !important;
max-height: none !important; max-height: none !important;
width: auto;
padding: 0;
} }
.leaflet-container.leaflet-touch-zoom { .leaflet-container.leaflet-touch-zoom {
@ -166,9 +171,6 @@
/* zoom and fade animations */ /* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup { .leaflet-fade-anim .leaflet-popup {
opacity: 0; opacity: 0;
-webkit-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;
@ -183,9 +185,10 @@
-ms-transform-origin: 0 0; -ms-transform-origin: 0 0;
transform-origin: 0 0; transform-origin: 0 0;
} }
.leaflet-zoom-anim .leaflet-zoom-animated { svg.leaflet-zoom-animated {
will-change: transform; will-change: transform;
} }
.leaflet-zoom-anim .leaflet-zoom-animated { .leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -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); -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 { .leaflet-container {
background: #ddd; background: #ddd;
outline: 0; outline-offset: 1px;
} }
.leaflet-container a { .leaflet-container a {
color: #0078A8; color: #0078A8;
} }
.leaflet-container a.leaflet-active {
outline: 2px solid orange;
}
.leaflet-zoom-box { .leaflet-zoom-box {
border: 2px dotted #38f; border: 2px dotted #38f;
background: rgba(255,255,255,0.5); background: rgba(255,255,255,0.5);
@ -267,7 +267,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
/* general typography */ /* general typography */
.leaflet-container { .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); box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px; border-radius: 4px;
} }
.leaflet-bar a, .leaflet-bar a {
.leaflet-bar a:hover {
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
width: 26px; width: 26px;
@ -295,7 +297,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
} }
.leaflet-bar a:hover { .leaflet-bar a:hover,
.leaflet-bar a:focus {
background-color: #f4f4f4; background-color: #f4f4f4;
} }
.leaflet-bar a:first-child { .leaflet-bar a:first-child {
@ -385,6 +388,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
} }
.leaflet-control-layers label { .leaflet-control-layers label {
display: block; display: block;
font-size: 13px;
font-size: 1.08333em;
} }
.leaflet-control-layers-separator { .leaflet-control-layers-separator {
height: 0; height: 0;
@ -393,7 +398,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
} }
/* Default icon URLs */ /* 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); background-image: url(images/marker-icon.png);
} }
@ -402,23 +407,24 @@ svg.leaflet-image-layer.leaflet-interactive path {
.leaflet-container .leaflet-control-attribution { .leaflet-container .leaflet-control-attribution {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.8);
margin: 0; margin: 0;
} }
.leaflet-control-attribution, .leaflet-control-attribution,
.leaflet-control-scale-line { .leaflet-control-scale-line {
padding: 0 5px; padding: 0 5px;
color: #333; color: #333;
line-height: 1.4;
} }
.leaflet-control-attribution a { .leaflet-control-attribution a {
text-decoration: none; text-decoration: none;
} }
.leaflet-control-attribution a:hover { .leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
text-decoration: underline; 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 { .leaflet-left .leaflet-control-scale {
margin-left: 5px; margin-left: 5px;
@ -431,7 +437,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
border-top: none; border-top: none;
line-height: 1.1; line-height: 1.1;
padding: 2px 5px 1px; padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -474,17 +479,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
border-radius: 12px; border-radius: 12px;
} }
.leaflet-popup-content { .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 { .leaflet-popup-content p {
margin: 18px 0; margin: 17px 0;
margin: 1.3em 0;
} }
.leaflet-popup-tip-container { .leaflet-popup-tip-container {
width: 40px; width: 40px;
height: 20px; height: 20px;
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-top: -1px;
margin-left: -20px; margin-left: -20px;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
@ -495,6 +505,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
padding: 1px; padding: 1px;
margin: -10px auto 0; margin: -10px auto 0;
pointer-events: auto;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg); -moz-transform: rotate(45deg);
@ -511,19 +522,18 @@ svg.leaflet-image-layer.leaflet-interactive path {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: 4px 4px 0 0;
border: none; border: none;
text-align: center; 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; text-decoration: none;
font-weight: bold;
background: transparent; 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 { .leaflet-popup-scrolled {
overflow: auto; 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)"; -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); 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-zoom,
.leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-control-layers,
@ -578,7 +585,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
pointer-events: none; pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.4);
} }
.leaflet-tooltip.leaflet-clickable { .leaflet-tooltip.leaflet-interactive {
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
} }
@ -638,3 +645,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
margin-left: -12px; margin-left: -12px;
border-right-color: #fff; 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;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

@ -29,6 +29,9 @@
// Search-Field // Search-Field
@import "search.less"; @import "search.less";
// to center the results
@import "style-center.less";
// ion-icon // ion-icon
.ion-icon { .ion-icon {
display: inline-block; display: inline-block;
@ -460,7 +463,7 @@ article[data-vim-selected].category-social {
margin-bottom: 0; margin-bottom: 0;
.ltr-margin-left(@results-offset); .ltr-margin-left(@results-offset);
display: grid; 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; grid-template-rows: min-content min-content 1fr min-content;
gap: 0 @results-gap; gap: 0 @results-gap;
grid-template-areas: grid-template-areas:
@ -699,6 +702,7 @@ article[data-vim-selected].category-social {
} }
@media screen and (max-width: @tablet) { @media screen and (max-width: @tablet) {
.center-aligment-no {
.page_with_header { .page_with_header {
margin: 2rem 0.5rem; margin: 2rem 0.5rem;
width: auto; width: auto;
@ -798,6 +802,7 @@ article[data-vim-selected].category-social {
"pagination"; "pagination";
} }
} }
}
#main_results div#results.only_template_images { #main_results div#results.only_template_images {
margin: 1rem @results-tablet-offset 0 @results-tablet-offset; margin: 1rem @results-tablet-offset 0 @results-tablet-offset;

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!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> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="SearXNG — a privacy-respecting, hackable metasearch engine"> <meta name="description" content="SearXNG — a privacy-respecting, hackable metasearch engine">

View File

@ -213,6 +213,16 @@
</p> </p>
<div class="description">{{ _('Choose auto to follow your browser settings') }}</div> <div class="description">{{ _('Choose auto to follow your browser settings') }}</div>
</fieldset> </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 %} {% endif %}
{% if 'results_on_new_tab' not in locked_preferences %} {% if 'results_on_new_tab' not in locked_preferences %}
<fieldset> <fieldset>