From 0cd6f649780bf19b541ec6a03b4040cc9b5a78db Mon Sep 17 00:00:00 2001 From: ellite Date: Wed, 15 Nov 2023 20:04:08 +0100 Subject: [PATCH] Subscription cards are now expandable --- endpoints/subscription/add.php | 1 + endpoints/subscriptions/get.php | 3 - images/siteicons/Thumbs.db | Bin 4096 -> 0 bytes images/siteicons/category.png | Bin 0 -> 1034 bytes images/siteicons/payment.png | Bin 0 -> 1072 bytes images/siteicons/subscription.png | Bin 0 -> 1161 bytes includes/list_subscriptions.php | 35 ++++++----- index.php | 3 - scripts/dashboard.js | 8 ++- scripts/settings.js | 6 -- settings.php | 7 --- styles/styles.css | 93 ++++++++++++++++++++---------- 12 files changed, 91 insertions(+), 65 deletions(-) delete mode 100644 images/siteicons/Thumbs.db create mode 100644 images/siteicons/category.png create mode 100644 images/siteicons/payment.png create mode 100644 images/siteicons/subscription.png 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 @@ 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 Ef=*f6KmY&$ literal 0 HcmV?d00001 diff --git a/images/siteicons/payment.png b/images/siteicons/payment.png new file mode 100644 index 0000000000000000000000000000000000000000..7446be933bfeceef59f35c55179200d81641bb0f GIT binary patch literal 1072 zcmV-01kd}4P)-V?O*{!g?wQpqjNnU@y_1D+_zJ0&<*4Dr#r(psPUza;?xO4Jwf!0YUv$ zsW@ppFu@Fsi4rywOwg8L+@UGMxIt5f@eGZL5;o%r+PX2=Lcs(anlenF;#^VVs)Xt! z1SJqPu1cs*LQn!xQyGF zzbc_R2~42o9S$ODf0ytA0`71SQTw}u7SJsGzXI-#7Lp8K1RN892_LfGFrf{{=K0us z*rol>a9?lhG^#MzD!4o9#DQN==%&zoSirW+eZ58wt5gVBO@5SalC4>priflwM3sPo zB%eal;|%rn#xB$OCxFQ(X{OjV3&&(mcm(A8spmE{GC%*7Tj0>4-Q4QNxx-QD_XsEq z0JzSkg||%JvNH5olc@wc^^17O5lDLlSOCtjY2oGMM@&vG(gV7?J8+_VA3d#%Q9w$& zfW^fhES)Uug>T5`SGcD{M@Jh>a~C=fwxcz+m3tziUx1X1luj*Tu@?07?AK9JJ^>C* zXe4nFpn`}BV0 zERVLfR;11(xT5S}q>}OR_n3Y2gGe!YY)r=@p7Guut`4LNnFr00^cbh?iFAm!n08I1gwRo$7|oSkc9{W zZh2@lFhf6%f1Yp8XoK5FQ&9LRz qsyk_z4)Ez|I@cO|mslU}u54 zX~ZB}m3EV1QPWC6v119<1Ni1#50ebG!5+`}UzDHp>He{d&bi;c_nW~2GtMUiH&G}% zMm#R=vWv@0S}ftbSHXY`WWW_J)rzlTJX9!+8R>82Rs$0d-bsZLZ#B}>fV;-+lu&e;YeO!!D9=P^zrp73h5 z!I2LE^XS>iHhb?8j5cc3(QK93P2&cXk)`h+BAvd+QS{jM8yx=rU$^k<*qrIL-zB`uh}zhyS9{a5&Q+injiIzLH^A z^?~o6>=~DGxI*^L*ALo8f@Vdnwr$ra{xwIzi3?=@c(!7NHsFy+#F0+jqY=Hm)jBhy zR$6ThCE7lIgJ$!Rv%?ej8&E7h-m};&Ga})^{X5WTO5srK>(ev#BIDrb`HI2T-9n1? z4b(id*iA8}nPVPeqw5fREI!#Yd5vzdJ8jgdw#aMLgb%^!LS3oCX%(f!8ix}{2<%EN zw%NCkd0ah86nN-zFI7P~x%FNi8OeotJYoUmrBLFdM85B%1cmFp-ifQ#w-~3955hYu zf5>-YWkgjaD~N3A1qZN*Tt0hts^kt7BGKn&IK^%8XiR9>%ul zuTp%5N?fnhL-4_Xf+j3B%Zx}kW#w(slp;Z~_gR@Eaz zB#^sY^-Zq2jShMm@VNT-x(VPX#w2(_iK=*2a07zTmkAhoL20)N_YjPMagDS#`Lz*k zEwxo*#X*F71Tx^^o{@7C?vH$T8DXe1cK9P7g?I1qehg*659`M|SB^%4W<{;GDDghu zK?p({@L*PSW+g{q46%yt%+&c=g`btU+7#~I<6()+Kqt(M!9TCFOJt2JZLt$MBQr2A bX5PR%2@=jg* -
- - - - - - - - - - - +
+
+ + + + + + + + + + + +
+
+ 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;