From 21e3c4051689318d887da6bd0fd5ff9eaf077ae2 Mon Sep 17 00:00:00 2001 From: mrpaulblack Date: Mon, 21 Feb 2022 22:18:48 +0100 Subject: [simple theme] replace Image_layout.js with flexbox CS impl. * drop image_layout.js from simple theme * move image_layout.js to oscar theme and delete common js dir (since its empty now) * align top position of image detail modal with bottom position of search header * use flexbox to display images; row height can be set via @results-image-row-height in defenitions.less * display span title underneath each image with a max width of 12rem * increase margin and padding around image article on desktop and tablet * make article height smaller on phone layout (height of 6rem) to display more content on current view * remove content from result, if the title and content matches * use a group that cotains the flex image article, if images are mixed with other categories * fix pylint issues in webapp.py * use the default.html result template in unit tests (thanks @return42) --- searx/static/themes/simple/src/less/definitions.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'searx/static/themes/simple/src/less/definitions.less') diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index abda5e37c..7de0d7ef9 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -68,8 +68,8 @@ --color-result-search-url-border: #ddd; --color-result-search-url-font: #000; // Images Colors - --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); - --color-result-image-span-font: #fff; + --color-result-image-span-font: #444; + --color-result-image-span-font-selected: #fff; --color-result-image-background: #fff; /// Settings Colors --color-settings-tr-hover: #f7f7f7; @@ -179,8 +179,8 @@ --color-result-detail-loader-border: rgba(255, 255, 255, 0.2); --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0); // Images Colors - --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); - --color-result-image-span-font: #fff; + --color-result-image-span-font: #bbb; + --color-result-image-span-font-selected: #222; --color-result-image-background: #222; /// Settings Colors --color-settings-tr-hover: #2d2d2d; @@ -230,9 +230,11 @@ @results-gap: 5rem; @results-margin: 0.125rem; @result-padding: 1rem; +@results-image-row-height: 12rem; +@results-image-row-height-phone: 6rem; @search-width: 40rem; // heigh of #search, see detail.less -@search-height: 7.75rem; +@search-height: 7.6rem; /// Device Size /// @desktop > @tablet -- cgit v1.2.3