From f6a1d8681bc6ff4e3f24769489db66770b90e3f5 Mon Sep 17 00:00:00 2001
From: Jay Trees <github.hybridsupply@grandel.anonaddy.me>
Date: Thu, 24 Feb 2022 11:11:30 +0100
Subject: [PATCH] Improve wishlist layout

---
 src/assets/css/default.css |  11 +++
 src/classes/wishlist.php   | 138 +++++++++++++++++++------------------
 src/pages/wishlists.php    | 109 +++++++++++++++--------------
 3 files changed, 139 insertions(+), 119 deletions(-)

diff --git a/src/assets/css/default.css b/src/assets/css/default.css
index 02b40e8f..82ec4418 100644
--- a/src/assets/css/default.css
+++ b/src/assets/css/default.css
@@ -40,6 +40,10 @@ img {
 /**
  * Card
  */
+.wishlist-cards {
+    margin-top: 1rem;
+}
+
 .ui.card {
     overflow: hidden;
 }
@@ -138,3 +142,10 @@ p .ui.horizontal.label {
     cursor: default;
     user-select: none;
 }
+
+/**
+ * Segment
+ */
+.ui.segments {
+    overflow: hidden;
+}
diff --git a/src/classes/wishlist.php b/src/classes/wishlist.php
index d109b2cd..beeeac2b 100644
--- a/src/classes/wishlist.php
+++ b/src/classes/wishlist.php
@@ -80,85 +80,87 @@ class Wishlist
         $userIsCurrent = isset($_SESSION['user']) && $this->data['user'] === $_SESSION['user']['id'];
 
         if (!empty($products)) { ?>
-            <div class="ui stackable three column grid container">
-                <?php foreach ($products as $product) {
-                    $cache  = new EmbedCache($product['url']);
-                    $info   = $cache->get(false);
-                    $exists = $cache->exists() ? 'true' : 'false';
-                    ?>
-                    <div class="column">
-                        <div class="ui fluid card stretch" data-id="<?= $product['id'] ?>" data-cache="<?= $exists ?>">
+            <div class="ui container">
+                <div class="ui stackable three column grid">
+                    <?php foreach ($products as $product) {
+                        $cache  = new EmbedCache($product['url']);
+                        $info   = $cache->get(false);
+                        $exists = $cache->exists() ? 'true' : 'false';
+                        ?>
+                        <div class="column">
+                            <div class="ui fluid card stretch" data-id="<?= $product['id'] ?>" data-cache="<?= $exists ?>">
 
-                            <?php if ($info->image) { ?>
-                                <div class="image">
-                                    <img class="preview" src="<?= $info->image ?>" loading="lazy"/>
+                                <?php if ($info->image) { ?>
+                                    <div class="image">
+                                        <img class="preview" src="<?= $info->image ?>" loading="lazy"/>
 
-                                    <?php if ($info->favicon) { ?>
-                                        <img class="favicon" src="<?= $info->favicon ?>" loading="lazy"/>
-                                    <?php } ?>
+                                        <?php if ($info->favicon) { ?>
+                                            <img class="favicon" src="<?= $info->favicon ?>" loading="lazy"/>
+                                        <?php } ?>
 
-                                    <?php if ($info->providerName) { ?>
-                                        <span class="provider"><?= $info->providerName ?></span>
-                                    <?php } ?>
+                                        <?php if ($info->providerName) { ?>
+                                            <span class="provider"><?= $info->providerName ?></span>
+                                        <?php } ?>
 
-                                    <?php if($userIsCurrent) { ?>
-                                        <button class="ui icon button refresh">
-                                            <i class="refresh icon"></i>
-                                        </button>
-                                    <?php } ?>
-                                </div>
-                            <?php } ?>
-
-                            <div class="content">
-                                <?php if ($info->title) { ?>
-                                    <div class="header">
-                                        <?php if ($info->url) { ?>
-                                            <a href="<?= $info->url ?>" target="_blank"><?= $info->title ?></a>
-                                        <?php } else { ?>
-                                            <?= $info->title ?>
+                                        <?php if($userIsCurrent) { ?>
+                                            <button class="ui icon button refresh">
+                                                <i class="refresh icon"></i>
+                                            </button>
                                         <?php } ?>
                                     </div>
                                 <?php } ?>
 
-                                <?php if ($info->keywords) { ?>
-                                    <div class="meta">
-                                        <?= implode(', ', $info->keywords) ?>
-                                    </div>
-                                <?php } ?>
+                                <div class="content">
+                                    <?php if ($info->title) { ?>
+                                        <div class="header">
+                                            <?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 buttons">
+                                    <?php if (!$userIsCurrent) { ?>
+                                        <a class="ui small primary labeled icon button commit">
+                                            <i class="shopping cart icon"></i>
+                                            Commit
+                                        </a>
+                                    <?php } ?>
+
+                                    <?php if ($info->url) { ?>
+                                        <a class="ui small right labeled icon button" href="<?= $info->url ?>" target="_blank">
+                                            <i class="external icon"></i>
+                                            View
+                                        </a>
+                                    <?php } ?>
+
+                                    <?php if ($userIsCurrent) { ?>
+                                        <a class="ui small labeled red icon button delete">
+                                            <i class="trash icon"></i>
+                                            Delete
+                                        </a>
+                                    <?php } ?>
+                                </div>
 
-                                <?php if ($info->description) { ?>
-                                    <div class="description">
-                                        <?= $info->description ?>
-                                    </div>
-                                <?php } ?>
                             </div>
-
-                            <div class="extra content buttons">
-                                <?php if (!$userIsCurrent) { ?>
-                                    <a class="ui small primary labeled icon button commit">
-                                        <i class="shopping cart icon"></i>
-                                        Commit
-                                    </a>
-                                <?php } ?>
-
-                                <?php if ($info->url) { ?>
-                                    <a class="ui small right labeled icon button" href="<?= $info->url ?>" target="_blank">
-                                        <i class="external icon"></i>
-                                        View
-                                    </a>
-                                <?php } ?>
-
-                                <?php if ($userIsCurrent) { ?>
-                                    <a class="ui small labeled red icon button delete">
-                                        <i class="trash icon"></i>
-                                        Delete
-                                    </a>
-                                <?php } ?>
-                            </div>
-
                         </div>
-                    </div>
-                <?php } ?>
+                    <?php } ?>
+                </div>
             </div>
         <?php } else { ?>
             <div class="sixteen wide column">
diff --git a/src/pages/wishlists.php b/src/pages/wishlists.php
index 45d1a9a4..f6554f36 100644
--- a/src/pages/wishlists.php
+++ b/src/pages/wishlists.php
@@ -45,66 +45,73 @@ if (isset($_POST['wishlist_delete_id'])) {
     <div class="ui container">
         <h1 class="ui header"><?= $page->title ?></h1>
 
-        <div class="ui segment">
-            <h2 class="ui header">Create</h2>
-            <p>
-                Choose a new name for your wishlist.
-                Here's a suggestion to get you started!
-            </p>
+        <div class="ui equal width stackable grid">
 
-            <form class="ui form" method="post">
-                <div class="field">
-                    <label>Name</label>
-                    <input type="text"
-                           name="name"
-                           placeholder="<?= getCurrentSeason() ?>"
-                           value="<?= getCurrentSeason() ?>"
-                    />
+            <div class="column">
+                <div class="ui segment form">
+                    <h2 class="ui header">View</h2>
+                    <p>Please select a wishlist to view.</p>
+
+                    <div class="field">
+                        <label>Wishlist</label>
+                        <select class="ui fluid search selection dropdown loading wishlists" name="wishlist">
+                            <option value="">Loading your wishlists...</option>
+                        </select>
+                    </div>
                 </div>
+            </div>
+
+            <div class="column">
+                <div class="ui segment">
+                    <h2 class="ui header">Create</h2>
+                    <p>
+                        Choose a new name for your wishlist.
+                        Here's a suggestion to get you started!
+                    </p>
+
+                    <form class="ui form" method="post">
+                        <div class="field">
+                            <label>Name</label>
+                            <input type="text"
+                                name="name"
+                                placeholder="<?= getCurrentSeason() ?>"
+                                value="<?= getCurrentSeason() ?>"
+                            />
+                        </div>
+
+                        <input class="ui primary button"
+                            type="submit"
+                            name="wishlist-create"
+                            value="Create"
+                        />
+                    </form>
+                </div>
+            </div>
 
-                <input class="ui primary button"
-                       type="submit"
-                       name="wishlist-create"
-                       value="Create"
-                />
-            </form>
         </div>
 
-        <div class="ui horizontal stackable segments">
-            <div class="ui segment">
-                <h2 class="ui header">View</h2>
-                <p>Please select a wishlist to view.</p>
+        <div class="ui segment">
+            <h2 class="ui header">Options</h1>
+            <p>Wishlist related options.</p>
 
-                <div class="field">
-                    <select class="ui fluid search selection dropdown loading wishlists" name="wishlist">
-                        <option value="">Loading your wishlists...</option>
-                    </select>
-                </div>
-            </div>
+            <a class="ui small labeled icon button wishlist-product-add" href="/?page=wishlist-product-add">
+                <i class="add icon"></i>
+                Add products
+            </a>
 
-            <div class="ui segment">
-                <h2 class="ui header">Options</h1>
-                <p>Wishlist related options.</p>
+            <a class="ui small labeled icon button wishlist-share disabled" target="_blank">
+                <i class="share icon"></i>
+                Share
+            </a>
 
-                <a class="ui small labeled icon button wishlist-product-add" href="/?page=wishlist-product-add">
-                    <i class="add icon"></i>
-                    Add products
-                </a>
+            <form class="ui form wishlist-delete" method="post" style="display: inline-block;">
+                <input type="hidden" name="wishlist_delete_id" />
 
-                <a class="ui small labeled icon button wishlist-share disabled" target="_blank">
-                    <i class="share icon"></i>
-                    Share
-                </a>
-
-                <form class="ui form wishlist-delete" method="post" style="display: inline-block;">
-                    <input type="hidden" name="wishlist_delete_id" />
-
-                    <button class="ui small labeled red icon button disabled" type="submit">
-                        <i class="trash icon"></i>
-                        Delete
-                    </button>
-                </form>
-            </div>
+                <button class="ui small labeled red icon button disabled" type="submit">
+                    <i class="trash icon"></i>
+                    Delete
+                </button>
+            </form>
         </div>
     </div>