Icycoide/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng.git synced 2025-08-03 18:42:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

[simple theme] replace Image_layout.js with flexbox CS impl.

Browse source 
* 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)
This commit is contained in:
mrpaulblack 2022-02-21 22:18:48 +01:00
parent 3408d061aa
commit 21e3c40516
12 changed files with 91 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

1
searx/static/themes/simple/gruntfile.js
View file

@ -108,7 +108,6 @@ module.exports = function (grunt) {
'js/searxng.head.min.js': ['src/js/head/*.js'],
'js/searxng.min.js': [
'src/js/main/*.js',
'../__common__/js/*.js',
'./node_modules/autocomplete-js/dist/autocomplete.js'
]
}

5
searx/static/themes/simple/src/js/main/results.js
View file

@ -7,9 +7,6 @@
}
searxng.ready(function () {
searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
searxng.image_thumbnail_layout.watch();
d.querySelectorAll('#urls img.image').forEach(
img =>
img.addEventListener(
@ -74,13 +71,11 @@
}
}
d.getElementById('results').classList.add('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.closeDetail = function (e) {
d.getElementById('results').classList.remove('image-detail-open');
searxng.image_thumbnail_layout.align();
searxng.scrollPageToSelected();
}
searxng.on('.result-detail-close', 'click', e => {

12
searx/static/themes/simple/src/less/definitions.less
View file

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

1
searx/static/themes/simple/src/less/detail.less
View file

@ -39,6 +39,7 @@ article.result-images .detail {
border: none;
object-fit: contain;
width: inherit;
height: inherit;
max-width: 100%;
min-height: inherit;
max-height: calc(100vh - 25rem - 7rem);

5
searx/static/themes/simple/src/less/style-rtl.less
View file

@ -83,6 +83,11 @@
}
}
// Image flexbox
#main_results div#results.only_template_images #urls {
direction: rtl;
}
// Image detail
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
direction: rtl;

69
searx/static/themes/simple/src/less/style.less
View file

@ -143,6 +143,10 @@ article.result-images[data-vim-selected] {
.image_thumbnail {
filter: opacity(60%);
}
span.title {
color: var(--color-result-image-span-font-selected);
}
}
article[data-vim-selected].category-videos,
@ -284,6 +288,16 @@ article[data-vim-selected].category-social {
}
}
.template_group_images {
display: flex;
flex-wrap: wrap;
}
.template_group_images::after {
flex-grow: 10;
content: "";
}
.category-videos,
.category-news,
.category-map,
@ -357,40 +371,38 @@ article[data-vim-selected].category-social {
}
.result-images {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
max-height: 200px;
flex-grow: 1;
padding: 0.5rem 0.5rem 2rem 0.5rem;
margin: 0.25rem;
border: none !important;
height: @results-image-row-height;
& > a {
position: relative;
}
img {
float: inherit;
margin: 0.125rem;
margin: 0;
padding: 0;
border: none;
max-height: 200px;
height: 100%;
width: 100%;
object-fit: cover;
vertical-align: bottom;
background: var(--color-result-image-background);
}
span.title {
display: none;
color: var(--color-result-image-span-font);
}
&:hover span.title {
display: block;
position: absolute;
bottom: 0;
.ltr-right(0);
padding: 4px;
margin-top: 0;
.ltr-margin-right(0);
margin-bottom: 4px;
.ltr-margin-left(4px);
// color: @color-result-image-span-font;
background-color: var(--color-result-image-span-background-hover);
font-size: 0.7em;
width: 100%;
font-size: 0.9rem;
color: var(--color-result-image-span-font);
padding: 0.5rem 0 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@ -785,8 +797,14 @@ article[data-vim-selected].category-social {
}
#urls {
width: inherit;
margin: 0;
display: flex;
flex-wrap: wrap;
}
#urls::after {
flex-grow: 10;
content: "";
}
#backToTop {
@ -837,8 +855,7 @@ article[data-vim-selected].category-social {
.result-images {
margin: 0;
padding: 0;
border: none;
height: @results-image-row-height-phone;
}
}