diff --git a/endpoints/subscription/add.php b/endpoints/subscription/add.php
index 003a386bb..0c4e3c16b 100644
--- a/endpoints/subscription/add.php
+++ b/endpoints/subscription/add.php
@@ -1,4 +1,5 @@
-
-
-
= $subscription['name'] ?>
-
= $subscription['billing_cycle'] ?>
-
= $subscription['next_payment'] ?>
-
-
- = $subscription['price'] ?>= $subscription['currency'] ?>
-
-
-
-
+
+
+
+
= $subscription['name'] ?>
+
= $subscription['billing_cycle'] ?>
+
= $subscription['next_payment'] ?>
+
+
+ = $subscription['price'] ?>= $subscription['currency'] ?>
+
+
+
+
+
+
+
= $subscription['name'] ?>
+
= $members[$subscription['payer_user_id']]['name'] ?>
+
= $categories[$subscription['category_id']]['name'] ?>
+
{
diff --git a/scripts/settings.js b/scripts/settings.js
index e4d9d348e..40251b0e9 100644
--- 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
index 945b7a416..973839e52 100644
--- a/settings.php
+++ b/settings.php
@@ -434,17 +434,10 @@
-
-
- >
-
-
-
>
diff --git a/styles/styles.css b/styles/styles.css
index bd984d245..0869fa245 100644
--- 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;