From 6b9cee1a0aaaa9d7ef80def4cdc8efda3d4d07ce Mon Sep 17 00:00:00 2001
From: grandeljay <github.jay@grandel.anonaddy.me>
Date: Tue, 6 Dec 2022 18:22:43 +0100
Subject: [PATCH] Make wish image full height

---
 src/assets/css/wishlist.css | 93 +++++++++++++++++++++++++------------
 src/classes/wish.php        |  6 +--
 2 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/src/assets/css/wishlist.css b/src/assets/css/wishlist.css
index 48c2476b..8e507218 100644
--- a/src/assets/css/wishlist.css
+++ b/src/assets/css/wishlist.css
@@ -45,6 +45,46 @@
 }
 
 /** Image */
+.wishlist .ui.card > .image {
+    --wishPreviewHeightMin: calc(1.28571429em * 1.28571429 + 2em + 3px);
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    min-height: var(--wishPreviewHeightMin);
+    height: 100%;
+
+    border-radius: inherit;
+}
+@media (hover: hover) {
+    @media (prefers-reduced-motion: no-preference) {
+        .wishlist .ui.card > .image {
+            transition: 0.2s ease height;
+        }
+    }
+}
+
+.wishlist .ui.card > .image::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    z-index: 1;
+    border-radius: inherit;
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
+}
+@media (prefers-color-scheme: dark) {
+    .wishlist .ui.card > .image::before {
+        background-image: linear-gradient(180deg, rgba(27, 28, 29, 1) 0, rgba(27, 28, 29, 0) 100%);
+    }
+}
+
 .wishlist .ui.card > .image > :is(svg, img.preview) {
     display: block;
 
@@ -94,7 +134,6 @@
         }
     }
     .wishlist .ui.horizontal.card:hover > .image > svg {
-        height: var(--wishPreviewHeightHover);
         padding: 0 !important;
         opacity: 0;
     }
@@ -113,27 +152,11 @@
     }
 }
 
-@media (hover: hover) {
-    @media (prefers-reduced-motion: no-preference) {
-        .wishlist .ui.card > .image > img.preview {
-            transition:
-                0.2s linear height,
-                0.2s linear opacity;
-        }
-    }
-
-    .wishlist .ui.horizontal.card:hover > .image > img.preview {
-        height: var(--wishPreviewHeightHover);
-    }
-}
-
 .ui.card.horizontal > .image,
 .ui.horizontal.cards > .card > .image {
-    --sizeCardY: calc(1.28571429em * 1.28571429 + 2em + 3px);
     --sizeFaviconX: calc(1.25em + var(--padding) * 2);
 
-    width: min(var(--sizeFaviconX), var(--sizeCardY));
-    min-height: var(--sizeCardY);
+    width: min(var(--sizeFaviconX), var(--wishPreviewHeightMin));
 }
 @media (max-width: 512px) {
     .ui.card.horizontal > .image,
@@ -143,11 +166,6 @@
 }
 
 /** Provider */
-.wishlist .ui.card > .image,
-.wishlist .ui.card > .image > span.provider {
-    border-radius: .28571429rem .28571429rem 0 0;
-}
-
 .wishlist .ui.card > .image > img.favicon,
 .wishlist .ui.card > .image > span.provider {
     position: absolute;
@@ -238,6 +256,8 @@
     gap: 0.5em;
 
     width: 100%;
+
+    z-index: 1;
 }
 @media (hover: hover) {
     @media (prefers-reduced-motion: no-preference) {
@@ -251,14 +271,8 @@
     .wishlist .ui.horizontal.card > .content:not(.extra) {
         --contentHeight: calc(var(--wishPreviewHeightMobile) * 1.25);
 
-        height: var(--contentHeight);
-
         overflow: hidden;
     }
-
-    .wishlist .ui.horizontal.card:hover > .content:not(.extra) {
-        height: calc(var(--contentHeight) + 0.75em - 4px);
-    }
 }
 .ui.card > .content::after,
 .ui.cards > .card > .content::after {
@@ -268,8 +282,27 @@
 .wishlist .ui.card > .content > .header {
     flex-shrink: 0;
 
-    max-height: calc(2 * 1.28571429em);
+    width: 100%;
+
+    white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
+    text-shadow: 0.02em 0.02em 0.12em #ddd;
+}
+@media (prefers-color-scheme: dark) {
+    .wishlist .ui.card > .content > .header {
+        text-shadow: 0.02em 0.02em 0.12em #222;
+    }
+}
+
+.wishlist .ui.card > .content > .header > .ui.label {
+    float: right;
+    line-height: inherit;
+    margin-left: 1ch;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    text-shadow: none;
 }
 
 .wishlist .ui.card > .content > .description {
diff --git a/src/classes/wish.php b/src/classes/wish.php
index 3a74c1b9..f72f7b72 100644
--- a/src/classes/wish.php
+++ b/src/classes/wish.php
@@ -240,10 +240,6 @@ class Wish
         ob_start();
         ?>
         <div class="image">
-            <?php if ('grid' === $this->style) { ?>
-                <?= $this->getCardPriority() ?>
-            <?php } ?>
-
             <?php if ($this->image) { ?>
                 <?php if ('svg' === pathinfo($this->image, PATHINFO_EXTENSION)) { ?>
                     <?php if (file_exists(ROOT . $this->image)) { ?>
@@ -277,6 +273,8 @@ class Wish
         ob_start();
         ?>
         <div class="header">
+            <?= $this->getCardPriority() ?>
+
             <?php if ($this->url) { ?>
                 <a href="<?= $this->url ?>" target="_blank"><?= $this->title ?></a>
             <?php } else { ?>