joshuacoles/wallos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Subscription cards are now expandable

Browse Source
This commit is contained in:
ellite 2023-11-15 20:04:08 +01:00
parent 190c052963
commit 0cd6f64978
12 changed files with 91 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
endpoints/subscription/add.php
View File

@ -1,4 +1,5 @@
<?php
error_reporting(E_ERROR | E_PARSE);
require_once '../../includes/connect_endpoint.php';
session_start();

3
endpoints/subscriptions/get.php
View File

@ -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)) {

BIN
images/siteicons/Thumbs.db
View File

Binary file not shown.

BIN
images/siteicons/category.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
images/siteicons/payment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
images/siteicons/subscription.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

15
includes/list_subscriptions.php
View File

@ -81,9 +81,10 @@
$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>
<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">
@ -91,11 +92,17 @@
<?= $subscription['price'] ?><?= $subscription['currency'] ?>
</span>
<span class="actions">
<button class="image-button medium" onClick="openEditSubscription(<?= $subscription['id'] ?>)" name="edit">
<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
}
}

3
index.php
View File

@ -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)) {

8
scripts/dashboard.js
View File

@ -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) => {

6
scripts/settings.js
View File

@ -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;

7
settings.php
View File

@ -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'; ?>>

93
styles/styles.css
View File

@ -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;