[enh] oscar: image thumbnail layout

Adjust thumbnail sizes to fill the container width

3 files changed, 38 insertions, 2 deletions

diff --git a/searx/static/themes/oscar/src/js/01_init.js b/searx/static/themes/oscar/src/js/01_init.js
index dd8de4ddb..e361d87ca 100644
--- a/searx/static/themes/oscar/src/js/01_init.js
+++ b/searx/static/themes/oscar/src/js/01_init.js
@@ -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');
diff --git a/searx/static/themes/oscar/src/js/element_modifiers.js b/searx/static/themes/oscar/src/js/element_modifiers.js
index a113df9a3..087f7d479 100644
--- a/searx/static/themes/oscar/src/js/element_modifiers.js
+++ b/searx/static/themes/oscar/src/js/element_modifiers.js
@@ -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();
 });
diff --git a/searx/static/themes/oscar/src/less/logicodev/results.less b/searx/static/themes/oscar/src/less/logicodev/results.less
index ce62cd34d..67ee296a1 100644
--- a/searx/static/themes/oscar/src/less/logicodev/results.less
+++ b/searx/static/themes/oscar/src/less/logicodev/results.less
@@ -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;
+        }
     }
 }