From db1f9b31c9063c983560d2e5c24aad61a4ef87c8 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Wed, 21 Feb 2024 19:05:54 +0100
Subject: [PATCH] [feat] images: show resolution inside the image and fix image
 details overflow

Co-authored-by: Markus Heiser <markus.heiser@darmarit.de>
---
 searx/static/themes/simple/src/less/detail.less     |  5 ++++-
 searx/static/themes/simple/src/less/style.less      | 11 +++++++++++
 searx/templates/simple/result_templates/images.html |  8 +++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/searx/static/themes/simple/src/less/detail.less b/searx/static/themes/simple/src/less/detail.less
index 253ffd5b2..fd7858a1e 100644
--- a/searx/static/themes/simple/src/less/detail.less
+++ b/searx/static/themes/simple/src/less/detail.less
@@ -67,7 +67,10 @@ article.result-images .detail {
     p {
       color: var(--color-result-detail-label-font);
       font-size: 0.9rem;
-      line-height: 0.9rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin: 0.8rem 0;
 
       span {
         display: inline-block;
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 7b067a170..c7f459e59 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -464,6 +464,17 @@ article[data-vim-selected].category-social {
     background: var(--color-result-image-background);
   }
 
+  .image_resolution {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 50%);
+    padding: 0.3rem 0.5rem;
+    font-size: 0.9rem;
+    color: #fff;
+    border-top-left-radius: 0.3rem;
+  }
+
   span.title,
   span.source {
     display: block;
diff --git a/searx/templates/simple/result_templates/images.html b/searx/templates/simple/result_templates/images.html
index 0462588be..ff62457ec 100644
--- a/searx/templates/simple/result_templates/images.html
+++ b/searx/templates/simple/result_templates/images.html
@@ -1,11 +1,9 @@
 <article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
         <a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
                 <img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{- "" -}}
-                <span class="title">{{ result.title|striptags }}</span>{{- "" -}}
-                <span class="source">
-                  {{- result.parsed_url.netloc -}}
-                  {%- if result.resolution %} - {{ result.resolution }}{%- endif -%}
-                </span>{{- "" -}}
+		{%- if result.resolution %} <span class="image_resolution">{{ result.resolution }}</span> {%- endif -%}
+		<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
+                <span class="source">{{- result.parsed_url.netloc -}}</span>{{- "" -}}
         </a>{{- "" -}}
         <div class="detail">{{- "" -}}
                 <a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}