Improve saved wishlists design

src/assets/css/default.css

@@ -71,6 +71,12 @@ figure {
 }
 
 /** Image */
+svg#no-image,
+.wishlist .ui.card > .image > svg {
+    color: #f0f0f0;
+    background-color: #f4f4f4;
+}
+
 .wishlist .ui.card > .image > svg {
     transition: var(--themeTransitionDuration) ease color,
                 var(--themeTransitionDuration) ease background-color;
@@ -81,11 +87,9 @@ figure {
 
     box-sizing: border-box;
     border-radius: inherit;
-
-    color: #f0f0f0;
-    background-color: #f4f4f4;
 }
 @media (prefers-color-scheme: dark) {
+    svg#no-image,
     .wishlist .ui.card > .image > svg {
         color: #0f0f0f;
         background-color: #0b0b0b;

src/assets/css/wishlists-saved.css

@@ -0,0 +1,44 @@
+.wishlists-saved .image {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+
+    height: 20vh !important;
+
+    background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+    .wishlists-saved .image {
+        background-color: #000;
+    }
+}
+
+.wishlists-saved svg#no-image {
+    width: 40%;
+    height: 60%;
+
+    background-color: inherit;
+}
+
+.wishlists-saved .ui.bordered.image svg,
+.wishlists-saved .ui.bordered.images svg {
+	border: none;
+}
+
+.wishlists-saved .content {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    padding: 1em;
+    margin: 0.5rem 0.5625rem;
+
+    border-radius: 0 0 4px 4px;
+    background-color: rgba(255, 255, 255, 0.6);
+}
+@media (prefers-color-scheme: dark) {
+    .wishlists-saved .content {
+        background-color: rgba(0, 0, 0, 0.6);
+    }
+}

src/pages/changelog.php

@@ -47,6 +47,7 @@ $page->navigation();
                             <ul>
                                 <li><?= __('Localisation (many new translations added)') ?></li>
                                 <li><?= __('Additional logins are no longer required when switching between wishthis channels') ?></li>
+                                <li><?= __('Saved wishlists design') ?></li>
                             </ul>
 
                             <h3 class="ui header"><?= __('Changed') ?></h3>

src/pages/wishlists-saved.php

@@ -17,24 +17,26 @@ $page->navigation();
     <div class="ui container">
         <h1 class="ui header"><?= $page->title ?></h1>
 
-        <div class="ui segment">
+        <div class="ui three column grid wishlists-saved">
-            <div class="ui relaxed divided list">
-
             <?php foreach ($user->getSavedWishlists() as $wishlist_saved) { ?>
                 <?php
                 $wishlist      = new Wishlist($wishlist_saved['wishlist']);
                 $wishlist_user = new User($wishlist_saved['user']);
+                $wishlist_href = Page::PAGE_WISHLIST . '&hash=' . $wishlist->hash;
                 ?>
-                    <div class="item">
+                <div class="column">
-                        <i class="large heart middle aligned icon"></i>
+                    <a class="header" href="<?= $wishlist_href ?>">
+                        <div class="ui rounded bordered fluid image">
+                            <?= file_get_contents(ROOT . '/' . Wish::NO_IMAGE) ?>
+                        </div>
+                    </a>
+
                     <div class="content">
-                            <a class="header" href="<?= Page::PAGE_WISHLIST ?>&hash=<?= $wishlist->hash ?>"><?= $wishlist->getTitle(); ?></a>
+                        <a class="header" href="<?= $wishlist_href ?>"><?= $wishlist->getTitle(); ?></a>
                         <div class="description"><?= $wishlist_user->getDisplayName(); ?></div>
                     </div>
                 </div>
             <?php } ?>
-
-            </div>
         </div>
     </div>
 </main>