Merge pull request #689 from mrpaulblack/images-flexbox

[simple theme] use flexbox instead of js for positioning images

5 files changed, 56 insertions, 36 deletions

diff --git a/searx/static/themes/simple/src/js/main/results.js b/searx/static/themes/simple/src/js/main/results.js
index 609bd8ecd..4eae58435 100644
--- a/searx/static/themes/simple/src/js/main/results.js
+++ b/searx/static/themes/simple/src/js/main/results.js
@@ -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 => {
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index abda5e37c..7de0d7ef9 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -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
diff --git a/searx/static/themes/simple/src/less/detail.less b/searx/static/themes/simple/src/less/detail.less
index 5e3cfaca6..b63e65206 100644
--- a/searx/static/themes/simple/src/less/detail.less
+++ b/searx/static/themes/simple/src/less/detail.less
@@ -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);
diff --git a/searx/static/themes/simple/src/less/style-rtl.less b/searx/static/themes/simple/src/less/style-rtl.less
index 6d3e9f525..bbaa48748 100644
--- a/searx/static/themes/simple/src/less/style-rtl.less
+++ b/searx/static/themes/simple/src/less/style-rtl.less
@@ -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;
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 29cf554b0..7640b253c 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -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;
   }
 }