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 + Paid By + Category +
{ 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;