Subscription cards are now expandable

ellite · Nov 15, 2023 · 0cd6f64 · 0cd6f64
1 parent 190c052
commit 0cd6f64
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 65 deletions.
diff --git a/endpoints/subscription/add.php b/endpoints/subscription/add.php
@@ -1,4 +1,5 @@
 <?php
+    error_reporting(E_ERROR | E_PARSE);
     require_once '../../includes/connect_endpoint.php';
     session_start();
 

diff --git a/endpoints/subscriptions/get.php b/endpoints/subscriptions/get.php
@@ -61,9 +61,6 @@
             $print[$id]['price'] = getPricePerMonth($cycle, $frequency, $print[$id]['price']);
           }
           $print[$id]['price'] = number_format($print[$id]['price'], 2, ".", ""); 
-          $print[$id]['hidelogo'] = isset($_COOKIE['hideNameOnMobile']) && $_COOKIE['hideNameOnMobile'] === 'true' && $print[$id]['logo'] === "wallos.png" ? "hideonmobile" : "";
-          $print[$id]['hidename'] = isset($_COOKIE['hideNameOnMobile']) && $_COOKIE['hideNameOnMobile'] === 'true' && $print[$id]['logo'] != "wallos.png" ? "hideonmobile" : "";
-          $print[$id]['resizename'] = isset($_COOKIE['hideNameOnMobile']) && $_COOKIE['hideNameOnMobile'] === 'true' && $print[$id]['logo'] === "wallos.png" ? "resize" : "";
         }
 
         if (isset($print)) {

diff --git a/images/siteicons/Thumbs.db b/images/siteicons/Thumbs.db
diff --git a/images/siteicons/category.png b/images/siteicons/category.png
diff --git a/images/siteicons/payment.png b/images/siteicons/payment.png
diff --git a/images/siteicons/subscription.png b/images/siteicons/subscription.png
diff --git a/includes/list_subscriptions.php b/includes/list_subscriptions.php
@@ -81,20 +81,27 @@ function printSubscriptons($subscriptions, $sort, $categories, $members) {
                 $currentPayerUserId = $subscription['payer_user_id'];
             }
         ?>
-            <div class="subscription">
-                <span class="logo <?= $subscription['hidelogo'] ?>"><img src="<?= $subscription['logo'] ?>"></span>
-                <span class="name <?= $subscription['hidename'] ?> <?= $subscription['resizename'] ?>"><?= $subscription['name'] ?></span>
-                <span class="cycle"><?= $subscription['billing_cycle'] ?></span>
-                <span class="next"><?= $subscription['next_payment'] ?></span>
-                <span class="price">
-                <img src="<?= $subscription['payment_method_icon'] ?>" title="Payment Method: <?= $subscription['payment_method_name'] ?>"/>
-                <?= $subscription['price'] ?><?= $subscription['currency'] ?>
-                </span>
-                <span class="actions">
-                <button class="image-button medium" onClick="openEditSubscription(<?= $subscription['id'] ?>)" name="edit">
-                    <img src="images/siteicons/edit.png" title="Edit subscription">
-                </button>
-                </span>
+            <div class="subscription" onClick="toggleOpenSubscription(<?= $subscription['id'] ?>)" data-id="<?= $subscription['id'] ?>">
+                <div class="subscription-main">
+                    <span class="logo"><img src="<?= $subscription['logo'] ?>"></span>
+                    <span class="name"><?= $subscription['name'] ?></span>
+                    <span class="cycle"><?= $subscription['billing_cycle'] ?></span>
+                    <span class="next"><?= $subscription['next_payment'] ?></span>
+                    <span class="price">
+                    <img src="<?= $subscription['payment_method_icon'] ?>" title="Payment Method: <?= $subscription['payment_method_name'] ?>"/>
+                    <?= $subscription['price'] ?><?= $subscription['currency'] ?>
+                    </span>
+                    <span class="actions">
+                    <button class="image-button medium" onClick="openEditSubscription(event, <?= $subscription['id'] ?>)" name="edit">
+                        <img src="images/siteicons/edit.png" title="Edit subscription">
+                    </button>
+                    </span>
+                </div>
+                <div class="subscription-secondary">
+                    <span class="name"><img src="images/siteicons/subscription.png" alt="Subscription" /><?= $subscription['name'] ?></span>
+                    <span class="payer_user" title="Paid By"><img src="images/siteicons/payment.png" alt="Paid By" /><?= $members[$subscription['payer_user_id']]['name'] ?></span>
+                    <span class="category" title="Category" ><img src="images/siteicons/category.png" alt="Category" /><?= $categories[$subscription['category_id']]['name'] ?></span>
+                </div>
             </div>
         <?php
         }

diff --git a/index.php b/index.php
@@ -89,9 +89,6 @@
               $print[$id]['price'] = getPricePerMonth($cycle, $frequency, $print[$id]['price']);
             }
             $print[$id]['price'] = number_format($print[$id]['price'], 2, ".", "");
-            $print[$id]['hidelogo'] = isset($_COOKIE['hideNameOnMobile']) && $_COOKIE['hideNameOnMobile'] === 'true' && $print[$id]['logo'] === "wallos.png" ? "hideonmobile" : "";
-            $print[$id]['hidename'] = isset($_COOKIE['hideNameOnMobile']) && $_COOKIE['hideNameOnMobile'] === 'true' && $print[$id]['logo'] != "wallos.png" ? "hideonmobile" : "";
-            $print[$id]['resizename'] = isset($_COOKIE['hideNameOnMobile']) && $_COOKIE['hideNameOnMobile'] === 'true' && $print[$id]['logo'] === "wallos.png" ? "resize" : "";
           }
 
           if (isset($print)) {

diff --git a/scripts/dashboard.js b/scripts/dashboard.js
@@ -1,5 +1,10 @@
 let isSortOptionsOpen = false;
 
+function toggleOpenSubscription(subId) {
+  const subscriptionElement = document.querySelector('.subscription[data-id="' + subId + '"]');
+  subscriptionElement.classList.toggle('is-open');
+}
+
 function toggleSortOptions() {
   const sortOptions = document.querySelector("#sort-options");
   sortOptions.classList.toggle("is-open");
@@ -74,7 +79,8 @@ function fillEditFormFields(subscription) {
   modal.classList.add("is-open");
 }
 
-function openEditSubscription(id) {
+function openEditSubscription(event, id) {
+    event.stopPropagation();
     const url = `endpoints/subscription/get.php?id=${id}`;
     fetch(url)
     .then((response) => {

diff --git a/scripts/settings.js b/scripts/settings.js
@@ -556,12 +556,6 @@ function switchTheme() {
   document.cookie = `theme=${themeChoice}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
 }
 
-function setHideNameOnMobileCookie() {
-  const hideNameCheckbox = document.querySelector("#hidename");
-  const value = hideNameCheckbox.checked;
-  document.cookie = `hideNameOnMobile=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
-}
-
 function setShowMonthlyPriceCookie() {
   const showMonthlyPriceCheckbox = document.querySelector("#monthlyprice");
   const value = showMonthlyPriceCheckbox.checked;

diff --git a/settings.php b/settings.php
@@ -434,17 +434,10 @@
                 <input type="button" value="Switch Light / Dark Theme" onClick="switchTheme()">
             </div>
             <?php
-                $hidename = isset($_COOKIE['hideNameOnMobile']) && $_COOKIE['hideNameOnMobile'] === 'true';
                 $monthlyprice = isset($_COOKIE['showMonthlyPrice']) && $_COOKIE['showMonthlyPrice'] === 'true';
                 $convertcurrency = isset($_COOKIE['convertCurrency']) && $_COOKIE['convertCurrency'] === 'true';
                 $removebackground = isset($_COOKIE['removeBackground']) && $_COOKIE['removeBackground'] === 'true';
             ?>
-            <div>
-                <div class="form-group-inline">
-                    <input type="checkbox" id="hidename" name="hidename" onChange="setHideNameOnMobileCookie()"  <?= $hidename ? "checked" : "" ?>>
-                    <label for="hidename">Hide subscripton name on mobile</label>
-                </div>
-            </div>
             <div>
                 <div class="form-group-inline">
                     <input type="checkbox" id="monthlyprice" name="monthlyprice" onChange="setShowMonthlyPriceCookie()" <?php if ($monthlyprice) echo 'checked'; ?>>

diff --git a/styles/styles.css b/styles/styles.css
@@ -178,22 +178,42 @@ main > .contain {
 .subscriptions {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 15px;
+  justify-content: center;
+  font-size: 17px;
 }
 
 .subscription {
   display: flex;
-  flex-direction: row;
-  height: 45px;
-  align-items: center;
+  flex-direction: column;
+  height: auto;
+  justify-content: flex-start;
   gap: 12px;
   background-color: #FFFFFF;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   padding: 12px 15px;
   border-radius: 8px;
+  cursor: pointer;
 }
 
-.subscription > span {
+.subscription-main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+
+.subscription-secondary {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 5px;
+}
+
+.subscription-main > span,
+.subscription-secondary > span {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -219,28 +239,9 @@ main > .contain {
   font-weight: 600;
 }
 
-@media (max-width: 768px) {
-  .subscription .name.hideonmobile {
-    display: none;
-  }
-
-  .subscription .name.resize {
-    flex-basis: 17%;
-  }
-
-  .subscription .logo.hideonmobile {
-    display: none;
-  }
-}
-
 .subscription .cycle {
   flex-basis: 16%;
-}
-
-@media (max-width: 768px) {
-  .subscription .cycle {
-    display: none;
-  }
+  flex-grow: 1;
 }
 
 .subscription .next {
@@ -264,6 +265,42 @@ main > .contain {
   flex-basis: auto;
 }
 
+.subscription .actions img {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
+.subscription-secondary > .name {
+  display: none;
+  justify-content: flex-start;
+  flex-basis: 33%;
+}
+
+.subscription-secondary > span {
+  justify-content: flex-start;
+  flex-basis: 33%;
+}
+
+@media (max-width: 768px) {
+  .subscription-main > .name {
+    display: none;
+  }
+
+  .subscription-secondary > .name {
+    display: flex;
+  }
+}
+
+.subscription.is-open .subscription-secondary {
+  display: flex;
+}
+
+.subscription-secondary img {
+  height: 20px;
+  margin-right: 10px;
+}
+
 .empty-page {
   display: block;
   max-width: 90%;
@@ -284,12 +321,6 @@ main > .contain {
   margin: 0px auto;
 }
 
-.subscription .actions img {
-  width: 25px;
-  height: 25px;
-  cursor: pointer;
-}
-
 .account-section {
   background-color: #FFFFFF;
   border: 1px solid #eee;