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

[enh] oscar: image thumbnail layout

Browse source 
Adjust thumbnail sizes to fill the container width
This commit is contained in:
Alexandre Flament 2021-03-22 12:00:48 +01:00
parent ba90c5a2e0
commit 7a0fbdecc4
25 changed files with 513 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

3
searx/static/themes/oscar/src/js/01_init.js
View file

@ -17,6 +17,9 @@
window.searx = (function(d) {
'use strict';
//
d.getElementsByTagName("html")[0].className = "js";
// add data- properties
var script = d.currentScript || (function() {
var scripts = d.getElementsByTagName('script');

6
searx/static/themes/oscar/src/js/element_modifiers.js
View file

@ -108,4 +108,10 @@ $(document).ready(function(){
tabs.children().attr("aria-selected", "false");
$(a.target).parent().attr("aria-selected", "true");
});
/**
* Layout images according to their sizes
*/
searx.image_thumbnail_layout = new searx.ImageLayout('#main_results', '#main_results .result-images', 'img.img-thumbnail', 15, 200);
searx.image_thumbnail_layout.watch();
});

31
searx/static/themes/oscar/src/less/logicodev/results.less
View file

@ -77,12 +77,39 @@
// image formating of results
.result-images {
float: left !important;
width: 24%;
margin: .5%;
margin: 0;
padding: 0;
a {
display: block;
width: 100%;
background-size: cover;
.img-thumbnail {
border: none !important;
padding: 0;
}
&:hover, &:focus {
outline: 0;
.img-thumbnail {
box-shadow: 5px 5px 15px 0px black;
}
}
}
}
.result-images.js a .img-thumbnail {
max-height: inherit;
min-height: inherit;
}
.result-images:not(.js) {
width: 25%;
padding: 3px 13px 13px 3px;
a {
.img-thumbnail {
margin: 0;
max-height: 128px;
min-height: 128px;
}
}
}