From 7a0fbdecc484284296574a2c2ba9afda01212723 Mon Sep 17 00:00:00 2001
From: Alexandre Flament <alex@al-f.net>
Date: Mon, 22 Mar 2021 12:00:48 +0100
Subject: [PATCH] [enh] oscar: image thumbnail layout

Adjust thumbnail sizes to fill the container width
---
 .../js/image_layout.js}                       | 110 +++---
 .../themes/oscar/css/logicodev-dark.css       |  29 +-
 .../themes/oscar/css/logicodev-dark.min.css   | Bin 16699 -> 17141 bytes
 .../oscar/css/logicodev-dark.min.css.map      | Bin 7913 -> 8107 bytes
 searx/static/themes/oscar/css/logicodev.css   |  29 +-
 .../static/themes/oscar/css/logicodev.min.css | Bin 13078 -> 13520 bytes
 .../themes/oscar/css/logicodev.min.css.map    | Bin 6447 -> 6641 bytes
 searx/static/themes/oscar/gruntfile.js        |   4 +-
 searx/static/themes/oscar/js/searx.js         | 172 ++++++++++
 searx/static/themes/oscar/js/searx.min.js     | Bin 5695 -> 7829 bytes
 searx/static/themes/oscar/js/searx.min.js.map | Bin 6642 -> 9889 bytes
 searx/static/themes/oscar/src/js/01_init.js   |   3 +
 .../themes/oscar/src/js/element_modifiers.js  |   6 +
 .../oscar/src/less/logicodev/results.less     |  31 +-
 searx/static/themes/simple/css/searx-rtl.css  |   2 +-
 .../themes/simple/css/searx-rtl.min.css       | Bin 27825 -> 27825 bytes
 searx/static/themes/simple/css/searx.css      |   2 +-
 searx/static/themes/simple/css/searx.min.css  | Bin 27790 -> 27790 bytes
 searx/static/themes/simple/gruntfile.js       |   4 +-
 .../static/themes/simple/js/searx.head.min.js | Bin 752 -> 752 bytes
 searx/static/themes/simple/js/searx.js        | 316 +++++++++---------
 searx/static/themes/simple/js/searx.min.js    | Bin 24025 -> 24399 bytes
 .../static/themes/simple/js/searx.min.js.map  | Bin 30503 -> 30991 bytes
 .../simple/js/searx_src/searx_results.js      |   2 +-
 searx/templates/oscar/base.html               |   2 +-
 25 files changed, 497 insertions(+), 215 deletions(-)
 rename searx/static/themes/{simple/js/searx_src/searx_imageresult.js => __common__/js/image_layout.js} (53%)

diff --git a/searx/static/themes/simple/js/searx_src/searx_imageresult.js b/searx/static/themes/__common__/js/image_layout.js
similarity index 53%
rename from searx/static/themes/simple/js/searx_src/searx_imageresult.js
rename to searx/static/themes/__common__/js/image_layout.js
index 7bbfc1454..ea54cf515 100644
--- a/searx/static/themes/simple/js/searx_src/searx_imageresult.js
+++ b/searx/static/themes/__common__/js/image_layout.js
@@ -3,21 +3,21 @@
 * Google Image Layout v0.0.1
 * Description, by Anh Trinh.
 * Heavily modified for searx
-* http://trinhtrunganh.com
+* https://ptgamr.github.io/2014-09-12-google-image-layout/
+* https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
 *
 * @license Free to use under the MIT License.
 *
 */
-(function(w, d) {
-  'use strict';
-  
-  function ImageLayout(container_selector, results_selector, img_selector, maxHeight) {
+
+(function (w, d) {
+  function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
     this.container_selector = container_selector;
     this.results_selector = results_selector;
     this.img_selector = img_selector;
-    this.margin = 10;
+    this.margin = margin;
     this.maxHeight = maxHeight;
-    this._alignAllDone = true;
+    this.isAlignDone = true;
   }
 
   /**
@@ -31,12 +31,11 @@
   *
   * @return {[type]}        the height
   */
-  ImageLayout.prototype._getHeigth = function(images, width) {
-    var r = 0,
-    img;
+  ImageLayout.prototype._getHeigth = function (images, width) {
+    var i, img;
+    var r = 0;
 
-    width -= images.length * this.margin;
-    for (var i = 0; i < images.length; i++) {
+    for (i = 0; i < images.length; i++) {
       img = images[i];
       if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
         r += img.naturalWidth / img.naturalHeight;
@@ -46,12 +45,14 @@
       }
     }
 
-    return width / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
+    return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
   };
 
-  ImageLayout.prototype._setSize = function(images, height) {
-    var img, imgWidth, imagesLength = images.length;
-    for (var i = 0; i < imagesLength; i++) {
+  ImageLayout.prototype._setSize = function (images, height) {
+    var i, img, imgWidth;
+    var imagesLength = images.length, resultNode;
+
+    for (i = 0; i < imagesLength; i++) {
       img = images[i];
       if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
         imgWidth = height * img.naturalWidth / img.naturalHeight;
@@ -65,38 +66,52 @@
       img.style.marginTop = '3px';
       img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
       img.style.marginBottom = this.margin - 7 + 'px';
+      resultNode = img.parentNode.parentNode;
+      if (!resultNode.classList.contains('js')) {
+        resultNode.classList.add('js');
+      }
     }
   };
 
-  ImageLayout.prototype._alignImgs = function(imgGroup) {
-    var slice, h,
-    containerWidth = d.querySelector(this.container_selector).clientWidth;
+  ImageLayout.prototype._alignImgs = function (imgGroup) {
+    var isSearching, slice, i, h;
+    var containerElement = d.querySelector(this.container_selector);
+    var containerCompStyles = window.getComputedStyle(containerElement);
+    var containerPaddingLeft = parseInt(containerCompStyles.getPropertyValue('padding-left'), 10);
+    var containerPaddingRight = parseInt(containerCompStyles.getPropertyValue('padding-right'), 10);
+    var containerWidth = containerElement.clientWidth - containerPaddingLeft - containerPaddingRight;
 
-    w: while (imgGroup.length > 0) {
-      for (var i = 1; i <= imgGroup.length; i++) {
+    while (imgGroup.length > 0) {
+      isSearching = true;
+      for (i = 1; i <= imgGroup.length && isSearching; i++) {
         slice = imgGroup.slice(0, i);
         h = this._getHeigth(slice, containerWidth);
         if (h < this.maxHeight) {
           this._setSize(slice, h);
+          // continue with the remaining images
           imgGroup = imgGroup.slice(i);
-          continue w;
+          isSearching = false;
         }
       }
-      this._setSize(slice, Math.min(this.maxHeight, h));
-      break;
+      if (isSearching) {
+        this._setSize(slice, Math.min(this.maxHeight, h));
+        break;
+      }
     }
   };
 
-  ImageLayout.prototype.align = function(results_selector) {
-    var results_selectorNode = d.querySelectorAll(this.results_selector),
-    results_length = results_selectorNode.length,
-    previous = null,
-    current = null,
-    imgGroup = [];
-    for (var i = 0; i < results_length; i++) {
+  ImageLayout.prototype.align = function () {
+    var i;
+    var results_selectorNode = d.querySelectorAll(this.results_selector);
+    var results_length = results_selectorNode.length;
+    var previous = null;
+    var current = null;
+    var imgGroup = [];
+
+    for (i = 0; i < results_length; i++) {
       current = results_selectorNode[i];
       if (current.previousElementSibling !== previous && imgGroup.length > 0) {
-        // the current image is not conected to previous one
+        // the current image is not connected to previous one
         // so the current image is the start of a new group of images.
         // so call _alignImgs to align the current group
         this._alignImgs(imgGroup);
@@ -114,32 +129,29 @@
     }
   };
 
-  ImageLayout.prototype.watch = function() {
-    var i, img, imgGroup, imgNodeLength,
-    obj = this,
-    results_nodes = d.querySelectorAll(this.results_selector),
-    results_length = results_nodes.length;
+  ImageLayout.prototype.watch = function () {
+    var i, img;
+    var obj = this;
+    var results_nodes = d.querySelectorAll(this.results_selector);
+    var results_length = results_nodes.length;
 
-    function align(e) {
-      obj.align();
-    }
-
-    function throttleAlign(e) {
-      if (obj._alignAllDone) {
-        obj._alignAllDone = false;
-        setTimeout(function() {
+    function throttleAlign() {
+      if (obj.isAlignDone) {
+        obj.isAlignDone = false;
+        setTimeout(function () {
           obj.align();
-          obj._alignAllDone = true;
+          obj.isAlignDone = true;
         }, 100);
       }
     }
 
+    w.addEventListener('pageshow', throttleAlign);
+    w.addEventListener('load', throttleAlign);
     w.addEventListener('resize', throttleAlign);
-    w.addEventListener('pageshow', align);
 
     for (i = 0; i < results_length; i++) {
       img = results_nodes[i].querySelector(this.img_selector);
-      if (typeof img !== 'undefined') {
+      if (img !== null && img !== undefined) {
         img.addEventListener('load', throttleAlign);
         img.addEventListener('error', throttleAlign);
       }
@@ -148,4 +160,4 @@
 
   w.searx.ImageLayout = ImageLayout;
 
-})(window, document);
+}(window, document));
diff --git a/searx/static/themes/oscar/css/logicodev-dark.css b/searx/static/themes/oscar/css/logicodev-dark.css
index cfd6f7f23..9bacb3c13 100644
--- a/searx/static/themes/oscar/css/logicodev-dark.css
+++ b/searx/static/themes/oscar/css/logicodev-dark.css
@@ -202,14 +202,39 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
 }
 .result-images {
   float: left !important;
-  width: 24%;
-  margin: 0.5%;
+  margin: 0;
+  padding: 0;
 }
 .result-images a {
   display: block;
   width: 100%;
   background-size: cover;
 }
+.result-images a .img-thumbnail {
+  border: none !important;
+  padding: 0;
+}
+.result-images a:hover,
+.result-images a:focus {
+  outline: 0;
+}
+.result-images a:hover .img-thumbnail,
+.result-images a:focus .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;
+}
+.result-images:not(.js) a .img-thumbnail {
+  margin: 0;
+  max-height: 128px;
+  min-height: 128px;
+}
 .img-thumbnail {
   margin: 5px;
   max-height: 128px;
diff --git a/searx/static/themes/oscar/css/logicodev-dark.min.css b/searx/static/themes/oscar/css/logicodev-dark.min.css
index 58e477082c62afc8eb4890dba980d0ae40782243..a70a109f460d87f5195c3522eb58aef040269501 100644
GIT binary patch
delta 453
zcmdnp#Q3$9al<h#q1?ox^vpaf1M7msl$6Z8bSs0&x44|@i&BeAb4qkGa}(23ixm<T
z^fGhPbxSfzbCdECGjpnw@{3YZi>&hU^HLQva|`l|N)q!*5JuGMq3O3u%TF#X*1-_Y
z$S+GRs?IMh$;r%1wK9O~tA|+((THX}4s*~{0UcSPTbz-Yl3#9RT2P??!iFHiKtb8S
z0AUxzD!nXZZ`MQonVVRln~|ECo>5|znU|4Tlv!e(o0*3u1a~#WBw(nNXaJ4VtS-+?
mDao)hGF63#j4{X!a01A{p;uZHGt6NzHQ9t)WwQ*oycqyc#if7%

delta 39
vcmey`%DB6Ual<h#k@C!xk_;;&6IJWn#G>@fJS#m@)yX%woHk$Mkv9VXFEI{J

diff --git a/searx/static/themes/oscar/css/logicodev-dark.min.css.map b/searx/static/themes/oscar/css/logicodev-dark.min.css.map
index 549274f3b0a22c8e2f65aeba5c7aac72506e7192..4cd2eb8c52aedbd71077218f7083d17ebcb1a592 100644
GIT binary patch
delta 227
zcmaE9yV`z(5xc0rqobpatE01{P9U6>Ie9*d<m3c)j(VVQy0fFRrw&+IDv~l+U!77X
zN5>El>FkcAx!4(G4v+-u3I{Pg;e<ED2B4U?qpzn<E>KN|6GTxU$Y`+gKu7mvopPX|
vDLTHI5UnuBflUG%0wz2iT|IRwA<mn8kzb0*J8E+ldkGU$h5zOUoSdQnh%-HL

delta 53
zcmZ2&|I&7Y5xc0bqobpar=zo@jz650Ie9*d<m3c)4kpi_%{m+<Oibp!n-_6$iUI(s
C?GCg6

diff --git a/searx/static/themes/oscar/css/logicodev.css b/searx/static/themes/oscar/css/logicodev.css
index d5c2a237a..6e5bddce3 100644
--- a/searx/static/themes/oscar/css/logicodev.css
+++ b/searx/static/themes/oscar/css/logicodev.css
@@ -175,14 +175,39 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
 }
 .result-images {
   float: left !important;
-  width: 24%;
-  margin: 0.5%;
+  margin: 0;
+  padding: 0;
 }
 .result-images a {
   display: block;
   width: 100%;
   background-size: cover;
 }
+.result-images a .img-thumbnail {
+  border: none !important;
+  padding: 0;
+}
+.result-images a:hover,
+.result-images a:focus {
+  outline: 0;
+}
+.result-images a:hover .img-thumbnail,
+.result-images a:focus .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;
+}
+.result-images:not(.js) a .img-thumbnail {
+  margin: 0;
+  max-height: 128px;
+  min-height: 128px;
+}
 .img-thumbnail {
   margin: 5px;
   max-height: 128px;
diff --git a/searx/static/themes/oscar/css/logicodev.min.css b/searx/static/themes/oscar/css/logicodev.min.css
index 1a5d9f38015de7375e5675042a581fcf934e4251..12ddfe00e766b270b26d9298712284f77ccc6e54 100644
GIT binary patch
delta 451
zcmZ`$y=ucS5PktqS+h7aEe+I0ZOEc*UHTkKrASw-labGj!4%IKG6lN#4FY+QK2mI)
zIKjb#4sqP~bKm{0|KTtXMpk$Y$k{R#QUYqu_8-A}<yDp^6oD05WuXXTusR}>+Z75(
z%9Zm{d5#X%1Z?U&38X8<Pu#=vwfoGom%Fxc-^!ORrvy-O*5Rs)a0~3o5AgJ+YLi8j
z86n+<FVZ4x-fL4>_`ujztCfnsZr7~Nds<OMMu9fO0gduNOAFX*b*@{cIu&}Z>1O2y
hBpLp;c<hpyHy*lDe+IDQ*?s1hOYQ%H>2VwEo=$!Hr4#@F

delta 37
scmcbRIW292F^@=jW=cthm63_6b#7u&dS;%Lo~i0&S01O$&V0RU004mub^rhX

diff --git a/searx/static/themes/oscar/css/logicodev.min.css.map b/searx/static/themes/oscar/css/logicodev.min.css.map
index 407ff7d41953880796f9476f6165d22b90c70c9e..3e15ed5ec95747635e0db40a1c039c23091f060e 100644
GIT binary patch
delta 218
zcmZ2)^wD_3M|J^!M@L5;S4U?@oj@>aG9!mtJ&>2~?C9*N1C~ui$U3_E>XbS;I);Eq
zXLqO`kbJQ-NIQ@O>Iw%jJ>i5m*kBOh?da>NlM7Un;RI0>2+|5x9_Z+vtWyp&G)2c(
s6QUL7Ca_6hL%@WmqpPP*CB%7?CkRL}c}H#5<S1ccs_@@DpKAgi0FVqi_W%F@

delta 44
xcmexpyxwTTM|J^UM@L5;Pe*4*9e*%uG9!l?lV{N8*Bm8GOy<6u6S*hw0RTqe4S4_n

diff --git a/searx/static/themes/oscar/gruntfile.js b/searx/static/themes/oscar/gruntfile.js
index 7c1f55249..1973b09c4 100644
--- a/searx/static/themes/oscar/gruntfile.js
+++ b/searx/static/themes/oscar/gruntfile.js
@@ -60,7 +60,7 @@ module.exports = function(grunt) {
         separator: ';'
       },
       dist: {
-        src: ['src/js/*.js'],
+        src: ['src/js/*.js', '../__common__/js/image_layout.js'],
         dest: 'js/searx.js'
       }
     },
@@ -76,7 +76,7 @@ module.exports = function(grunt) {
       }
     },
     jshint: {
-      files: ['gruntfile.js', 'js/searx_src/*.js'],
+      files: ['gruntfile.js', 'js/searx_src/*.js', '../__common__/js/image_layout.js'],
       options: {
         reporterOutput: "",
         // options here to override JSHint defaults
diff --git a/searx/static/themes/oscar/js/searx.js b/searx/static/themes/oscar/js/searx.js
index 163009481..c377e4534 100644
--- a/searx/static/themes/oscar/js/searx.js
+++ b/searx/static/themes/oscar/js/searx.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');
@@ -199,6 +202,12 @@ $(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();
 });
 ;window.addEventListener('load', function() {
     // Hide infobox toggle if shrunk size already fits all content.
@@ -383,3 +392,166 @@ $(document).ready(function(){
     });
 });
 
+;/**
+*
+* Google Image Layout v0.0.1
+* Description, by Anh Trinh.
+* Heavily modified for searx
+* https://ptgamr.github.io/2014-09-12-google-image-layout/
+* https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
+*
+* @license Free to use under the MIT License.
+*
+*/
+
+(function (w, d) {
+  function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
+    this.container_selector = container_selector;
+    this.results_selector = results_selector;
+    this.img_selector = img_selector;
+    this.margin = margin;
+    this.maxHeight = maxHeight;
+    this.isAlignDone = true;
+  }
+
+  /**
+  * Get the height that make all images fit the container
+  *
+  * width = w1 + w2 + w3 + ... = r1*h + r2*h + r3*h + ...
+  *
+  * @param  {[type]} images the images to be calculated
+  * @param  {[type]} width  the container witdth
+  * @param  {[type]} margin the margin between each image
+  *
+  * @return {[type]}        the height
+  */
+  ImageLayout.prototype._getHeigth = function (images, width) {
+    var i, img;
+    var r = 0;
+
+    for (i = 0; i < images.length; i++) {
+      img = images[i];
+      if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
+        r += img.naturalWidth / img.naturalHeight;
+      } else {
+        // assume that not loaded images are square
+        r += 1;
+      }
+    }
+
+    return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
+  };
+
+  ImageLayout.prototype._setSize = function (images, height) {
+    var i, img, imgWidth;
+    var imagesLength = images.length, resultNode;
+
+    for (i = 0; i < imagesLength; i++) {
+      img = images[i];
+      if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
+        imgWidth = height * img.naturalWidth / img.naturalHeight;
+      } else {
+        // not loaded image : make it square as _getHeigth said it
+        imgWidth = height;
+      }
+      img.style.width = imgWidth + 'px';
+      img.style.height = height + 'px';
+      img.style.marginLeft = '3px';
+      img.style.marginTop = '3px';
+      img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
+      img.style.marginBottom = this.margin - 7 + 'px';
+      resultNode = img.parentNode.parentNode;
+      if (!resultNode.classList.contains('js')) {
+        resultNode.classList.add('js');
+      }
+    }
+  };
+
+  ImageLayout.prototype._alignImgs = function (imgGroup) {
+    var isSearching, slice, i, h;
+    var containerElement = d.querySelector(this.container_selector);
+    var containerCompStyles = window.getComputedStyle(containerElement);
+    var containerPaddingLeft = parseInt(containerCompStyles.getPropertyValue('padding-left'), 10);
+    var containerPaddingRight = parseInt(containerCompStyles.getPropertyValue('padding-right'), 10);
+    var containerWidth = containerElement.clientWidth - containerPaddingLeft - containerPaddingRight;
+
+    while (imgGroup.length > 0) {
+      isSearching = true;
+      for (i = 1; i <= imgGroup.length && isSearching; i++) {
+        slice = imgGroup.slice(0, i);
+        h = this._getHeigth(slice, containerWidth);
+        if (h < this.maxHeight) {
+          this._setSize(slice, h);
+          // continue with the remaining images
+          imgGroup = imgGroup.slice(i);
+          isSearching = false;
+        }
+      }
+      if (isSearching) {
+        this._setSize(slice, Math.min(this.maxHeight, h));
+        break;
+      }
+    }
+  };
+
+  ImageLayout.prototype.align = function () {
+    var i;
+    var results_selectorNode = d.querySelectorAll(this.results_selector);
+    var results_length = results_selectorNode.length;
+    var previous = null;
+    var current = null;
+    var imgGroup = [];
+
+    for (i = 0; i < results_length; i++) {
+      current = results_selectorNode[i];
+      if (current.previousElementSibling !== previous && imgGroup.length > 0) {
+        // the current image is not connected to previous one
+        // so the current image is the start of a new group of images.
+        // so call _alignImgs to align the current group
+        this._alignImgs(imgGroup);
+        // and start a new empty group of images
+        imgGroup = [];
+      }
+      // add the current image to the group (only the img tag)
+      imgGroup.push(current.querySelector(this.img_selector));
+      // update the previous variable
+      previous = current;
+    }
+    // align the remaining images
+    if (imgGroup.length > 0) {
+      this._alignImgs(imgGroup);
+    }
+  };
+
+  ImageLayout.prototype.watch = function () {
+    var i, img;
+    var obj = this;
+    var results_nodes = d.querySelectorAll(this.results_selector);
+    var results_length = results_nodes.length;
+
+    function throttleAlign() {
+      if (obj.isAlignDone) {
+        obj.isAlignDone = false;
+        setTimeout(function () {
+          obj.align();
+          obj.isAlignDone = true;
+        }, 100);
+      }
+    }
+
+    w.addEventListener('pageshow', throttleAlign);
+    w.addEventListener('load', throttleAlign);
+    w.addEventListener('resize', throttleAlign);
+
+    for (i = 0; i < results_length; i++) {
+      img = results_nodes[i].querySelector(this.img_selector);
+      if (img !== null && img !== undefined) {
+        img.addEventListener('load', throttleAlign);
+        img.addEventListener('error', throttleAlign);
+      }
+    }
+  };
+
+  w.searx.ImageLayout = ImageLayout;
+
+}(window, document));
diff --git a/searx/static/themes/oscar/js/searx.min.js b/searx/static/themes/oscar/js/searx.min.js
index b3317e0c51b66df6783720a4d2ccb1123257262c..8b17d4f61a1f4383c2ad26fb21b91bff1155ec6a 100644
GIT binary patch
delta 3123
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

delta 1090
zcmaJ=L2p|{5Y}t3)6&QePTeLgO<y;yz1z2Wb`p@l?sGY`hYFXfidqhlQK$AgUiEpO
z*<II-98)gbkRVziZU_)Z4oH@`A|Vdkiqs#_KTwGicg9Jq7OM8}c4y}M-e~5V*>9rX
z_}5FR_4U>A#@_NfXC8p|fkR}&W?yTe>}FHTp55K0u=m}H2YbIWJe~y}xJB<>JU{X_
zJu&{#Tk!Du^+>^605%kb!UalJJ|!%C05KKgzh}yxyP7`XHd4fO)90K`U7P_{ai6D7
z%>cLVuk@08oVtaa)2@<!)A@LRlFqu@sdMhj^u-i#amW@Nkp1mRh%QhY5WnWjwuY`C
zjN1s@X!d*tLa<g-Vsw*m82>!`(~)B%#s^Zhl7ZVhyEM)pFL_w}wYlq_a9_>Qx78$D
zM;aEkzyc+S>8{$H-XyDZPv*XVqzVPeh7);YL{>;3c^s*J99PXi+Gd9;Hf(|sL?taj
zDscqCzDY@70>Y{!5Y>BH!2RkzYXCckB(z?^(IN&b6SYsw2W0BMKzFm5t9MWu9G8ei
z7sq9`$_;L?8Og$q?Z%W<+li*&OXZ8u!nR?uO(%s%QFIUp6{@$pySf%dIz)-Y!<%gi
z?uX1`7Mr+SvaQ->{7^~vXC|NrKW#xH)S?$dQ_zxM+UA6?ph#-PV2Zn6vL{?Ad-l{c
z(0B>YyNB8Hufacj4Yuem&1a5IbGr}bi_24|5t{xzW3^P<w9Kbb_r-ki(bRd7@;o+e
zo>Z`zwg2_gm}mhtaxlhGOSGXM+lmPeWkf|r=o|`Gvbsh_&&OaGN5=(kJ;k*<p7U|-
zcy7Z}?r!e1C*3f2r78;rYLdR~d@PKO>LE_QjvdI!MCI0cgK?E;+qnk+Mb{8@|KvV<
z0~qf5VBv{Zz~^T$nYyAwBkUb122_cGUk~dCDGfd*u3RsF=6y8YV{F9BjO!3utvc)o
nTo=acVKY%yCo$H6Aw!4c=H?Cm2K1D?Pbx6}BTqf2mW%%aJ6Kk_

diff --git a/searx/static/themes/oscar/js/searx.min.js.map b/searx/static/themes/oscar/js/searx.min.js.map
index 13e949a74dba2cf4d8542352ad43b1b6f7092fac..506dde42f5412339a6c072b164d2cf5abc624b7c 100644
GIT binary patch
literal 9889
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

delta 1074
zcmZuw&ref95DpNP5>a9crIiMSlXN4LrWE4A%xt%hQcG#dORdJ3CwW%-OG<w?8V=q?
zvp3_#yBE{H#&Ga2FeV<ncyV?YqllNy+izyS`M#NXA2Q#gZ;EeUEc!}rOH|#OTW>Y7
zzw4B?otpdU{nXg-WbAlUZhCItWhvk}&IBa3)Cu{dI)%kb2z*Ch?1Y9=tbqUxWCh?Y
z+*DXDB|m!>ZfvRVY??U$4r|i8I_E4);cXL;*C#^$-M^FC2oGAEaoCeP6Y=pfvJ5~b
zJ3O9ved(wORyA=T6hpR@WcyTgA2lD97I7>KMI~4fpjZ(s4Ukrvo{|+vX%lYUq%^qZ
z4WmgSCjLa5aqb(0OhN?<iqGK&dM<xl3#|{3<;Z}7GIWSYBCeUmKa@2hsG&vm8yMpq
zAsd%{^09Y*WJMl%mlk7ZbXcZ>t@=kiRJ0Hmaw<6MX&TuZLVooIZngETi^@=D`F|9B
z1S`tB!)4#($j!1DStY5}CYS|$fTw-Q1K1t;Xxe|Z%b86L>uK(ESH7BFSc{xqIHSD0
zde|c`q|5FY&UHZ`>{Zn``Gyvh@5__v@YJE6PeoOOGG9x`nVFiO$bWY&t;H)vx&H9o
zjCb_t9HkoEDpyqx@oew_^>9frk72~DUsy|NV+)N~2dn|FoDPk~pNtyGzw_!Q6w?+(
zSlm-e+ek3&Ri04?VO4Rf#k2M5mMrE1xKuSWNX0apWyYQDCX}7@p;{!Xjy>56g#0VI
z)#O?2T@zK`_HiRAKL!GxwiazKC*`-m>^MDFO?@UKLEj{4?O<Ocg|b5A7w-iRkx@zo
ztAqr{SM_bLuEG~x5HVaC)`Aa5=i_=j=VfKVYGKc;-_N<FD}VkAaN;PVp*wSDA-#%i
J-AjAn<u7p9Ee!ww

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;
+        }
     }
 }
 
diff --git a/searx/static/themes/simple/css/searx-rtl.css b/searx/static/themes/simple/css/searx-rtl.css
index 385fc7d5e..6b9b47d85 100644
--- a/searx/static/themes/simple/css/searx-rtl.css
+++ b/searx/static/themes/simple/css/searx-rtl.css
@@ -1,4 +1,4 @@
-/*! searx | 16-03-2021 |  */
+/*! searx | 23-03-2021 |  */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *
diff --git a/searx/static/themes/simple/css/searx-rtl.min.css b/searx/static/themes/simple/css/searx-rtl.min.css
index 1cb4a4aa26c702b432043aaa66e38f6dbd84ffd7..3b5d7f7535bdb72244268690eecc37f995f8de99 100644
GIT binary patch
delta 25
gcmdmZlX2rsMm~KlMTO$j#G(p?8U-WcjeLu90C+M8(EtDd

delta 25
gcmdmZlX2rsMm~KlMTO$j#G(p?8U;hMjeLu90C+nH(*OVf

diff --git a/searx/static/themes/simple/css/searx.css b/searx/static/themes/simple/css/searx.css
index 206c5f903..484fdc82d 100644
--- a/searx/static/themes/simple/css/searx.css
+++ b/searx/static/themes/simple/css/searx.css
@@ -1,4 +1,4 @@
-/*! searx | 16-03-2021 |  */
+/*! searx | 23-03-2021 |  */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *
diff --git a/searx/static/themes/simple/css/searx.min.css b/searx/static/themes/simple/css/searx.min.css
index b2eb4f528776e3fc29ad9ce646df60acd141c7f0..2757ba4343d600598cc6c84f30445b86d0e908ee 100644
GIT binary patch
delta 25
gcmeCX$=G+3kxySsQK2|Bv8Y0!M#0E<BVR)f0C9f^XaE2J

delta 25
gcmeCX$=G+3kxySsQK2|Bv8Y0!M#0c*BVR)f0C9*2Y5)KL

diff --git a/searx/static/themes/simple/gruntfile.js b/searx/static/themes/simple/gruntfile.js
index c8f2ed3c6..0c322f37f 100644
--- a/searx/static/themes/simple/gruntfile.js
+++ b/searx/static/themes/simple/gruntfile.js
@@ -11,7 +11,7 @@ module.exports = function(grunt) {
       }
     },
     jshint: {
-      files: ['js/searx_src/*.js', 'js/searx_header/*.js'],
+      files: ['js/searx_src/*.js', 'js/searx_header/*.js', '../__common__/js/*.js'],
       options: {
         reporterOutput: "",
         proto: true,
@@ -30,7 +30,7 @@ module.exports = function(grunt) {
         },
         files: {
           'js/searx.head.js': ['js/searx_head/*.js'],
-          'js/searx.js': ['js/searx_src/*.js']
+          'js/searx.js': ['js/searx_src/*.js', '../__common__/js/*.js']
         }
       }
     },
diff --git a/searx/static/themes/simple/js/searx.head.min.js b/searx/static/themes/simple/js/searx.head.min.js
index 5c87d749bf824cbe00181e1837af4b7cac4fbfdc..dd85086eeb017a87022d191aada586dfc50b8c71 100644
GIT binary patch
delta 13
Ucmeys`hj(V6qAwhMwu&203+4}p8x;=

delta 13
Ucmeys`hj(V6qBLZMwu&203+W7p#T5?

diff --git a/searx/static/themes/simple/js/searx.js b/searx/static/themes/simple/js/searx.js
index 1abe81e4d..88c1823bc 100644
--- a/searx/static/themes/simple/js/searx.js
+++ b/searx/static/themes/simple/js/searx.js
@@ -698,157 +698,6 @@ module.exports = AutoComplete;
 
 },{}]},{},[1])(1)
 });
-;/**
-*
-* Google Image Layout v0.0.1
-* Description, by Anh Trinh.
-* Heavily modified for searx
-* http://trinhtrunganh.com
-*
-* @license Free to use under the MIT License.
-*
-*/
-(function(w, d) {
-  'use strict';
-  
-  function ImageLayout(container_selector, results_selector, img_selector, maxHeight) {
-    this.container_selector = container_selector;
-    this.results_selector = results_selector;
-    this.img_selector = img_selector;
-    this.margin = 10;
-    this.maxHeight = maxHeight;
-    this._alignAllDone = true;
-  }
-
-  /**
-  * Get the height that make all images fit the container
-  *
-  * width = w1 + w2 + w3 + ... = r1*h + r2*h + r3*h + ...
-  *
-  * @param  {[type]} images the images to be calculated
-  * @param  {[type]} width  the container witdth
-  * @param  {[type]} margin the margin between each image
-  *
-  * @return {[type]}        the height
-  */
-  ImageLayout.prototype._getHeigth = function(images, width) {
-    var r = 0,
-    img;
-
-    width -= images.length * this.margin;
-    for (var i = 0; i < images.length; i++) {
-      img = images[i];
-      if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
-        r += img.naturalWidth / img.naturalHeight;
-      } else {
-        // assume that not loaded images are square
-        r += 1;
-      }
-    }
-
-    return width / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
-  };
-
-  ImageLayout.prototype._setSize = function(images, height) {
-    var img, imgWidth, imagesLength = images.length;
-    for (var i = 0; i < imagesLength; i++) {
-      img = images[i];
-      if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
-        imgWidth = height * img.naturalWidth / img.naturalHeight;
-      } else {
-        // not loaded image : make it square as _getHeigth said it
-        imgWidth = height;
-      }
-      img.style.width = imgWidth + 'px';
-      img.style.height = height + 'px';
-      img.style.marginLeft = '3px';
-      img.style.marginTop = '3px';
-      img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
-      img.style.marginBottom = this.margin - 7 + 'px';
-    }
-  };
-
-  ImageLayout.prototype._alignImgs = function(imgGroup) {
-    var slice, h,
-    containerWidth = d.querySelector(this.container_selector).clientWidth;
-
-    w: while (imgGroup.length > 0) {
-      for (var i = 1; i <= imgGroup.length; i++) {
-        slice = imgGroup.slice(0, i);
-        h = this._getHeigth(slice, containerWidth);
-        if (h < this.maxHeight) {
-          this._setSize(slice, h);
-          imgGroup = imgGroup.slice(i);
-          continue w;
-        }
-      }
-      this._setSize(slice, Math.min(this.maxHeight, h));
-      break;
-    }
-  };
-
-  ImageLayout.prototype.align = function(results_selector) {
-    var results_selectorNode = d.querySelectorAll(this.results_selector),
-    results_length = results_selectorNode.length,
-    previous = null,
-    current = null,
-    imgGroup = [];
-    for (var i = 0; i < results_length; i++) {
-      current = results_selectorNode[i];
-      if (current.previousElementSibling !== previous && imgGroup.length > 0) {
-        // the current image is not conected to previous one
-        // so the current image is the start of a new group of images.
-        // so call _alignImgs to align the current group
-        this._alignImgs(imgGroup);
-        // and start a new empty group of images
-        imgGroup = [];
-      }
-      // add the current image to the group (only the img tag)
-      imgGroup.push(current.querySelector(this.img_selector));
-      // update the previous variable
-      previous = current;
-    }
-    // align the remaining images
-    if (imgGroup.length > 0) {
-      this._alignImgs(imgGroup);
-    }
-  };
-
-  ImageLayout.prototype.watch = function() {
-    var i, img, imgGroup, imgNodeLength,
-    obj = this,
-    results_nodes = d.querySelectorAll(this.results_selector),
-    results_length = results_nodes.length;
-
-    function align(e) {
-      obj.align();
-    }
-
-    function throttleAlign(e) {
-      if (obj._alignAllDone) {
-        obj._alignAllDone = false;
-        setTimeout(function() {
-          obj.align();
-          obj._alignAllDone = true;
-        }, 100);
-      }
-    }
-
-    w.addEventListener('resize', throttleAlign);
-    w.addEventListener('pageshow', align);
-
-    for (i = 0; i < results_length; i++) {
-      img = results_nodes[i].querySelector(this.img_selector);
-      if (typeof img !== 'undefined') {
-        img.addEventListener('load', throttleAlign);
-        img.addEventListener('error', throttleAlign);
-      }
-    }
-  };
-
-  w.searx.ImageLayout = ImageLayout;
-
-})(window, document);
 ;searx.ready(function() {
 
   searx.on('.result', 'click', function() {
@@ -1411,7 +1260,7 @@ module.exports = AutoComplete;
   'use strict';
 
   searx.ready(function() {
-    searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 200);
+    searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
     searx.image_thumbnail_layout.watch();
 
     searx.on('.btn-collapse', 'click', function(event) {
@@ -1575,3 +1424,166 @@ module.exports = AutoComplete;
   });
 
 })(window, document, window.searx);
+;/**
+*
+* Google Image Layout v0.0.1
+* Description, by Anh Trinh.
+* Heavily modified for searx
+* https://ptgamr.github.io/2014-09-12-google-image-layout/
+* https://ptgamr.github.io/google-image-layout/src/google-image-layout.js
+*
+* @license Free to use under the MIT License.
+*
+*/
+
+(function (w, d) {
+  function ImageLayout(container_selector, results_selector, img_selector, margin, maxHeight) {
+    this.container_selector = container_selector;
+    this.results_selector = results_selector;
+    this.img_selector = img_selector;
+    this.margin = margin;
+    this.maxHeight = maxHeight;
+    this.isAlignDone = true;
+  }
+
+  /**
+  * Get the height that make all images fit the container
+  *
+  * width = w1 + w2 + w3 + ... = r1*h + r2*h + r3*h + ...
+  *
+  * @param  {[type]} images the images to be calculated
+  * @param  {[type]} width  the container witdth
+  * @param  {[type]} margin the margin between each image
+  *
+  * @return {[type]}        the height
+  */
+  ImageLayout.prototype._getHeigth = function (images, width) {
+    var i, img;
+    var r = 0;
+
+    for (i = 0; i < images.length; i++) {
+      img = images[i];
+      if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
+        r += img.naturalWidth / img.naturalHeight;
+      } else {
+        // assume that not loaded images are square
+        r += 1;
+      }
+    }
+
+    return (width - images.length * this.margin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
+  };
+
+  ImageLayout.prototype._setSize = function (images, height) {
+    var i, img, imgWidth;
+    var imagesLength = images.length, resultNode;
+
+    for (i = 0; i < imagesLength; i++) {
+      img = images[i];
+      if ((img.naturalWidth > 0) && (img.naturalHeight > 0)) {
+        imgWidth = height * img.naturalWidth / img.naturalHeight;
+      } else {
+        // not loaded image : make it square as _getHeigth said it
+        imgWidth = height;
+      }
+      img.style.width = imgWidth + 'px';
+      img.style.height = height + 'px';
+      img.style.marginLeft = '3px';
+      img.style.marginTop = '3px';
+      img.style.marginRight = this.margin - 7 + 'px'; // -4 is the negative margin of the inline element
+      img.style.marginBottom = this.margin - 7 + 'px';
+      resultNode = img.parentNode.parentNode;
+      if (!resultNode.classList.contains('js')) {
+        resultNode.classList.add('js');
+      }
+    }
+  };
+
+  ImageLayout.prototype._alignImgs = function (imgGroup) {
+    var isSearching, slice, i, h;
+    var containerElement = d.querySelector(this.container_selector);
+    var containerCompStyles = window.getComputedStyle(containerElement);
+    var containerPaddingLeft = parseInt(containerCompStyles.getPropertyValue('padding-left'), 10);
+    var containerPaddingRight = parseInt(containerCompStyles.getPropertyValue('padding-right'), 10);
+    var containerWidth = containerElement.clientWidth - containerPaddingLeft - containerPaddingRight;
+
+    while (imgGroup.length > 0) {
+      isSearching = true;
+      for (i = 1; i <= imgGroup.length && isSearching; i++) {
+        slice = imgGroup.slice(0, i);
+        h = this._getHeigth(slice, containerWidth);
+        if (h < this.maxHeight) {
+          this._setSize(slice, h);
+          // continue with the remaining images
+          imgGroup = imgGroup.slice(i);
+          isSearching = false;
+        }
+      }
+      if (isSearching) {
+        this._setSize(slice, Math.min(this.maxHeight, h));
+        break;
+      }
+    }
+  };
+
+  ImageLayout.prototype.align = function () {
+    var i;
+    var results_selectorNode = d.querySelectorAll(this.results_selector);
+    var results_length = results_selectorNode.length;
+    var previous = null;
+    var current = null;
+    var imgGroup = [];
+
+    for (i = 0; i < results_length; i++) {
+      current = results_selectorNode[i];
+      if (current.previousElementSibling !== previous && imgGroup.length > 0) {
+        // the current image is not connected to previous one
+        // so the current image is the start of a new group of images.
+        // so call _alignImgs to align the current group
+        this._alignImgs(imgGroup);
+        // and start a new empty group of images
+        imgGroup = [];
+      }
+      // add the current image to the group (only the img tag)
+      imgGroup.push(current.querySelector(this.img_selector));
+      // update the previous variable
+      previous = current;
+    }
+    // align the remaining images
+    if (imgGroup.length > 0) {
+      this._alignImgs(imgGroup);
+    }
+  };
+
+  ImageLayout.prototype.watch = function () {
+    var i, img;
+    var obj = this;
+    var results_nodes = d.querySelectorAll(this.results_selector);
+    var results_length = results_nodes.length;
+
+    function throttleAlign() {
+      if (obj.isAlignDone) {
+        obj.isAlignDone = false;
+        setTimeout(function () {
+          obj.align();
+          obj.isAlignDone = true;
+        }, 100);
+      }
+    }
+
+    w.addEventListener('pageshow', throttleAlign);
+    w.addEventListener('load', throttleAlign);
+    w.addEventListener('resize', throttleAlign);
+
+    for (i = 0; i < results_length; i++) {
+      img = results_nodes[i].querySelector(this.img_selector);
+      if (img !== null && img !== undefined) {
+        img.addEventListener('load', throttleAlign);
+        img.addEventListener('error', throttleAlign);
+      }
+    }
+  };
+
+  w.searx.ImageLayout = ImageLayout;
+
+}(window, document));
diff --git a/searx/static/themes/simple/js/searx.min.js b/searx/static/themes/simple/js/searx.min.js
index 3b2b9d762b59b542f98ffc87c2832adf9da58b44..17daac2a43f0a4e7b6320c41e3b2af40a9eaf682 100644
GIT binary patch
delta 1256
zcmah|&x;&I6lP+;xCEmZLVlUuY0OZ)+g;r~JAr6#DWZV{)F`_ogk=+Ir{8qHq^D}A
zuFhl~ng#LbAyD{-$X*07;MI#~Z#n4yVO7u0W(^BD_3QWJtNPye)!)B${(8}Qe)&{?
z{g<oL@Zipk>&vH-_+Y$s`yKOhxVv9{5=9f8^Rc2i>Z0DID5HLy48r*1FzJW6lz9mu
zj(HAY$@gTfqoviALhH$iqbK!OY8ai6r;n>8bC!N~Nd`lIHmb!?qZBJZAkcvbFi=L)
ztz}GgffXI|XSV_KLNhf_VD)*4xiJ6I0SPdD%GHWuaXONU2>TTqKuZw0E>f|!=FgD9
zwlMdj)s8YhM7?urjU`Q^K-WqT9hz=*{w+UJ=GTal7L2n6Kp>By^4H)_E2dY?kI_f5
z4H~4C-YbDlG1CQ8Yu@CUmoAdU{QmkdYkrC^URu<~T;(XX<b-+a?Tq<7?sd@o6ZgJL
zB||#l3WWYfW^gP_aYVY34ohBDUty)`PzudaRK$B+dA>h8UgKFdPd8>MiIxI&NONf3
zTR(5^CLip#3CX4?GC8F==r81WQftUI9Vx>7wxMG7E*0Dnnn>65t&$T^dhZ@DYargl
zo`WI}OBiX-50ZF3Rla#@-;F7!@v*s@amx=a_xo<AVHK9?v_N~Eg*>0e{!BBiYG`Fb
zmZZ3GBwnwlQ*;IpHdU241QG}6r&cXzt4EfA^OY`$I1|*q+o&>sCd->5P<{$WLv}>7
z5icuf8r!4oneBW9dK13~B7(2EF6bDooBrol3*)D|3iy-8-0WXF<IkK`AvF*B(XDo&
zg6V}-T?v_}%d)MgS0QKHJ1sx3=7tTCf+J;FY=ilu|Kj}xl0CZ((LC(0-aJIX1^&@1
z<HSCR5fSw88GR`Q*c~l?&D(?SbwRm%VZ=|5@~*92bz_B%{icyd3_k2yXGm&wzxCAW
z<ctUc6!A*QGcRyOb9Zp%vJKqpoD)!U0-E7A>{thOuejCgE^8@U)ofIY3`Qs*GcN~M
aJKQ{faN%80N-781G>ygW-XP{+r}rOvb+8No

delta 961
zcmZ8g&ubGw6ejAWqN1o2rP_4SbvM~;HuwYVWQu~IhhEgurcK%~CNJ5+=}efNwXJ25
zUOk9(ZvGKM>9J6}d+_YRi+_nTn{=z5mi_j7-+SNt-u^f){X8mtzImqc=wN26w!hrJ
zHeatRNqMYf%7=u<VNY!8-^)+jH0b%ePMSbDF@&CS&>-bKMFlT|2Z0KBK>b}kTAS8O
zE68a?NX0Y>H_7%3pu<>UItIFg(IJ1znEtx*U;#&g!D|>o27IXE%A`mRDMte#y>~>G
zC6176o=}jiR{dRyp)K|KR;9%C!<KuQS8*fDB&byKvZ`~v*9t!rvV{~eQlu#nu^QZH
zkaa`{9uGM&m4vO(zKRzj*Da9o^b3(~sVW7W6YIt6n3Vxb!16L4CTgd}Al$Nom{y(9
zwu5rifbn=E>R)t|Sl5d%P}sTuH+}qJNsLZ#{c+Vbz7JMi?XA^ycg;6BF$!GeV<DK|
ziYYU(OtxyLKV4?SEc0|T`8Jh#PZ;fi7X{Ks9Op4~hoG!66?@8rn=eX#YR}e8*gk@y
z##HnKSCpqvhAbP`CZJx^_uwi0t9@gN`#yRjfxO-C+&&BDPTWrYabWsPCJZR%DPw^g
zKL~EG7nuo@nP_q(Y-SRxw$NWX#~1Cv8NTfn5MAw5UIqe_iQegPCZ1_0!~E(zKP!%w
zS=>Y~!{Q>J37&HcK!0DKyI0hr|ESpfBaj7+DDtx`)pM_|UXYL&&rZO6l<F%Rx26+6
zw*kfiGz9`{L1CizHvH>5BM^hKn#0&hc^?LpL*LQgHfGM5a%J@{fs{g8xh%_!VyWvL
R>e}7e!=uILQ@Yx{^9R8&P?-P#

diff --git a/searx/static/themes/simple/js/searx.min.js.map b/searx/static/themes/simple/js/searx.min.js.map
index efce15142a535689188defe534e8afe7da4a77c3..6541da7b5e9c2ae299b3a26b0c63b7b70355553c 100644
GIT binary patch
delta 8552
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

delta 8092
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
SUoQ5>kDImD<9dJP*Z&u(GwzE3

diff --git a/searx/static/themes/simple/js/searx_src/searx_results.js b/searx/static/themes/simple/js/searx_src/searx_results.js
index b13da8391..fe00efc90 100644
--- a/searx/static/themes/simple/js/searx_src/searx_results.js
+++ b/searx/static/themes/simple/js/searx_src/searx_results.js
@@ -18,7 +18,7 @@
   'use strict';
 
   searx.ready(function() {
-    searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 200);
+    searx.image_thumbnail_layout = new searx.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
     searx.image_thumbnail_layout.watch();
 
     searx.on('.btn-collapse', 'click', function(event) {
diff --git a/searx/templates/oscar/base.html b/searx/templates/oscar/base.html
index b5c6ed258..6134bd725 100644
--- a/searx/templates/oscar/base.html
+++ b/searx/templates/oscar/base.html
@@ -1,6 +1,6 @@
 {% from 'oscar/macros.html' import icon %}
 <!DOCTYPE html>
-<html lang="{{ preferences.get_value('locale') }}" xml:lang="{{ preferences.get_value('locale') }}"{% if rtl %} dir="rtl"{% endif %}>
+<html lang="{{ preferences.get_value('locale') }}" xml:lang="{{ preferences.get_value('locale') }}"{% if rtl %} dir="rtl"{% endif %} class="nojs">
 <head>
     <meta charset="UTF-8" />
     <meta name="description" content="searx - a privacy-respecting, hackable metasearch engine" />