From 278b3551049df0883c4162ccfe4c150027893c37 Mon Sep 17 00:00:00 2001
From: Tomas Bzatek <tbzatek@users.sourceforge.net>
Date: Fri, 15 Jan 2021 22:13:31 +0100
Subject: fluid: Rework index item thumbnails

Even the recent Firefox still doesn't support the background-image:image-set
CSS styles for HiDPI thumbnails. Rework this to a regular image placed inside
the <a> tag.
---
 templates/fluid/styles.css          | 19 +++++++++++++++----
 templates/fluid/template_index.html |  8 +++++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

(limited to 'templates')

diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css
index d730844..2ad267d 100644
--- a/templates/fluid/styles.css
+++ b/templates/fluid/styles.css
@@ -610,8 +610,6 @@ div.index_item {
   margin: 20px;
   border-radius: 8px;
   border-width: 0px;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
   box-shadow: 0 0 0px 1px #6b6c69,
               0 0 12px 2px rgba(255, 245, 200, 0.38);
   transition-property: box-shadow;
@@ -631,12 +629,25 @@ div.index_item a {
   height: 330px;
   text-align: left;
   text-decoration: none;
+}
+
+div.index_item a span.album_thumbnail {
+  position: relative;
+  display: inline-block;
+}
+
+div.index_item a span.album_thumbnail:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
   background:         linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
   background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
   background:    -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
   background:      -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
-  transition-property: background;
-  transition-duration: 0.3s;
 }
 
 div.index_item span.album_text {
diff --git a/templates/fluid/template_index.html b/templates/fluid/template_index.html
index 12fc918..652d649 100644
--- a/templates/fluid/template_index.html
+++ b/templates/fluid/template_index.html
@@ -52,9 +52,15 @@
 <div class="albums">
   <!-- $(BEGIN_IMG_LIST) -->
     <!-- $(BEGIN_LIST_PICTURE_ALL_SIZES) -->
-      <div class="index_item" style="background-image:url($(IMG_SRC_THUMB)); background-image:image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))); background-image:-webkit-image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))); background-image:-moz-image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)));">
+      <div class="index_item">
         <div class="position_marker" id="$(IMG_POS_MARKER)"></div>
         <a href="$(ALBUM_SUBPATH)">
+          <span class="album_thumbnail">
+            <picture>
+              <source srcset="$(IMG_SRC_THUMB)$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), $(IMG_SRC__THUMBNAIL_HIDPI_1.5X) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), $(IMG_SRC__THUMBNAIL_HIDPI_2X) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))">
+              <img src="$(IMG_SRC_THUMB)" width="$(IMG_SIZE_W__THUMBNAIL)" height="$(IMG_SIZE_H__THUMBNAIL)" alt="" />
+            </picture>
+          </span>
           <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
           <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
           <!-- $(ifdef(IS_PROTECTED)) --><span class="album_protected_note"><br />(This album is password protected)</span><!-- $(endif(IS_PROTECTED)) -->
-- 
cgit v1.2.3