zaclys/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng synced 2024-01-01 19:24:07 +01: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

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