From 8fbe7682e7202bd6188e843f210417bd75ab87bf Mon Sep 17 00:00:00 2001
From: Jay Trees <github.hybridsupply@grandel.anonaddy.me>
Date: Wed, 23 Feb 2022 10:53:49 +0100
Subject: [PATCH] Improve card layout

---
 src/assets/css/default.css  |  31 ++++++++++-
 src/classes/wishlist.php    | 108 ++++++++++++++++++------------------
 src/pages/wishlist-view.php |   4 +-
 3 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/src/assets/css/default.css b/src/assets/css/default.css
index ced40ee4..f55a82e3 100644
--- a/src/assets/css/default.css
+++ b/src/assets/css/default.css
@@ -1,3 +1,7 @@
+:root {
+    --lineHeight: 1.4285;
+}
+
 /**
  * Footer
  */
@@ -23,16 +27,37 @@
 /**
  * Card
  */
-.ui.card .header > img {
-	height: 1.25em;
-    vertical-align: text-bottom;
+.ui.fluid.card.stretch {
+    height: 100%;
 }
+
+/** Image */
 .ui.card > .image > img,
 .ui.cards > .card > .image > img {
 	height: 30vh;
     object-fit: cover;
+    background-color: #fff;
 }
 
+/** Content */
+.ui.card > .content > .header + .description,
+.ui.card > .content > .meta + .description,
+.ui.cards > .card > .content > .header + .description,
+.ui.cards > .card > .content > .meta + .description {
+    max-height: calc(2em * var(--lineHeight));
+
+    overflow: hidden;
+}
+
+/** Icon */
+.ui.card .header > img {
+    position: absolute;
+    top: 1em;
+    height: 1.25em;
+    vertical-align: text-bottom;
+}
+
+
 /**
  * Label
  */
diff --git a/src/classes/wishlist.php b/src/classes/wishlist.php
index 4b2fc560..3b0b41a3 100644
--- a/src/classes/wishlist.php
+++ b/src/classes/wishlist.php
@@ -78,67 +78,69 @@ class Wishlist
          * Cards
          */
         if (!empty($products)) { ?>
-            <div class="ui three stackable cards">
+            <div class="ui stackable three column grid container">
                 <?php foreach ($products as $product) {
                     $cache = new EmbedCache();
                     $info  = $cache->get($product['url']);
                     ?>
-                    <div class="card" data-id="<?= $product['id'] ?>">
+                    <div class="column">
+                        <div class="ui fluid card stretch" data-id="<?= $product['id'] ?>">
 
-                        <?php if ($info->image) { ?>
-                            <div class="image">
-                                <img src="<?= $info->image ?>" />
+                            <?php if ($info->image) { ?>
+                                <div class="image">
+                                    <img src="<?= $info->image ?>" />
+                                </div>
+                            <?php } ?>
+
+                            <div class="content">
+                                <?php if ($info->title) { ?>
+                                    <div class="header">
+                                        <?php if ($info->favicon) { ?>
+                                            <img src="<?= $info->favicon ?>" />
+                                        <?php } ?>
+
+                                        <?php if ($info->url) { ?>
+                                            <a href="<?= $info->url ?>" target="_blank"><?= $info->title ?></a>
+                                        <?php } else { ?>
+                                            <?= $info->title ?>
+                                        <?php } ?>
+                                    </div>
+                                <?php } ?>
+
+                                <?php if ($info->keywords) { ?>
+                                    <div class="meta">
+                                        <?= implode(',', $info->keywords) ?>
+                                    </div>
+                                <?php } ?>
+
+                                <?php if ($info->description) { ?>
+                                    <div class="description">
+                                        <?= $info->description ?>
+                                    </div>
+                                <?php } ?>
+                            </div>
+                            <div class="extra content">
+                                <?php if ($info->publishedTime) { ?>
+                                    <span class="right floated">
+                                        <?= $info->publishedTime ?>
+                                    </span>
+                                <?php } ?>
+                                <?php if ($info->providerName) { ?>
+                                    <?= $info->providerName ?>
+                                <?php } ?>
+                            </div>
+                            <div class="extra content">
+                                <?php if ($info->url) { ?>
+                                    <a class="ui tiny button" href="<?= $info->url ?>" target="_blank">View</a>
+                                <?php } ?>
+                                <?php if (isset($_SESSION['user']) && $this->data['user'] === $_SESSION['user']['id']) { ?>
+                                    <a class="ui tiny red button delete">Delete</a>
+                                <?php } else { ?>
+                                    <a class="ui tiny button commit">Commit</a>
+                                <?php } ?>
                             </div>
-                        <?php } ?>
 
-                        <div class="content">
-                            <?php if ($info->title) { ?>
-                                <div class="header">
-                                    <?php if ($info->favicon) { ?>
-                                        <img src="<?= $info->favicon ?>" />
-                                    <?php } ?>
-
-                                    <?php if ($info->url) { ?>
-                                        <a href="<?= $info->url ?>" target="_blank"><?= $info->title ?></a>
-                                    <?php } else { ?>
-                                        <?= $info->title ?>
-                                    <?php } ?>
-                                </div>
-                            <?php } ?>
-
-                            <?php if ($info->keywords) { ?>
-                                <div class="meta">
-                                    <?= implode(',', $info->keywords) ?>
-                                </div>
-                            <?php } ?>
-
-                            <?php if ($info->description) { ?>
-                                <div class="description">
-                                    <?= $info->description ?>
-                                </div>
-                            <?php } ?>
                         </div>
-                        <div class="extra content">
-                            <?php if ($info->publishedTime) { ?>
-                                <span class="right floated">
-                                    <?= $info->publishedTime ?>
-                                </span>
-                            <?php } ?>
-                            <?php if ($info->providerName) { ?>
-                                <?= $info->providerName ?>
-                            <?php } ?>
-                        </div>
-                        <div class="extra content">
-                            <?php if ($info->url) { ?>
-                                <a class="ui tiny button" href="<?= $info->url ?>" target="_blank">View</a>
-                            <?php } ?>
-                            <?php if (isset($_SESSION['user']) && $this->data['user'] === $_SESSION['user']['id']) { ?>
-                                <a class="ui tiny red button delete">Delete</a>
-                            <?php } else { ?>
-                                <a class="ui tiny button commit">Commit</a>
-                            <?php } ?>
-                        </div>
-
                     </div>
                 <?php } ?>
             </div>
diff --git a/src/pages/wishlist-view.php b/src/pages/wishlist-view.php
index ce2b43ed..39ec61e3 100644
--- a/src/pages/wishlist-view.php
+++ b/src/pages/wishlist-view.php
@@ -56,9 +56,9 @@ if (isset($_POST['wishlist_delete_id'])) {
                 </form>
             </div>
         </div>
-
-        <div class="wishlist-cards"></div>
     </div>
+
+    <div class="wishlist-cards"></div>
 </main>
 
 <?php