Skip to content

Commit

Permalink
fix: dashboard scrolling to top when opening a subscription
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellite
ellite committed Jul 5, 2024
1 parent 2179dd2 commit 772b7aa
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 145 deletions.
2 changes: 1 addition & 1 deletion includes/version.php
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<?php
$version = "v2.14.0";
$version = "v2.14.1";
?>
286 changes: 142 additions & 144 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,183 +222,181 @@
}
?>
</div>
</section>
<section class="subscription-form" id="subscription-form">
<header>
<h3 id="form-title"><?= translate('add_subscription', $i18n) ?></h3>
<span class="fa-solid fa-xmark close-form" onClick="closeAddSubscription()"></span>
</header>
<form action="endpoints/subscription/add.php" method="post" id="subs-form">

<section class="subscription-form" id="subscription-form">
<header>
<h3 id="form-title"><?= translate('add_subscription', $i18n) ?></h3>
<span class="fa-solid fa-xmark close-form" onClick="closeAddSubscription()"></span>
</header>
<form action="endpoints/subscription/add.php" method="post" id="subs-form">

<div class="form-group-inline">
<input type="text" id="name" name="name" placeholder="<?= translate('subscription_name', $i18n) ?>"
onchange="setSearchButtonStatus()" onkeypress="this.onchange();" onpaste="this.onchange();"
oninput="this.onchange();" required>
<label for="logo" class="logo-preview">
<img src="" alt="<?= translate('logo_preview', $i18n) ?>" id="form-logo">
</label>
<input type="file" id="logo" name="logo" accept="image/jpeg, image/png, image/gif, image/webp"
onchange="handleFileSelect(event)" class="hidden-input">
<input type="hidden" id="logo-url" name="logo-url">
<div id="logo-search-button" class="image-button medium disabled" title="<?= translate('search_logo', $i18n) ?>"
onClick="searchLogo()">
<?php include "images/siteicons/svg/websearch.php"; ?>
</div>
<input type="hidden" id="id" name="id">
<div id="logo-search-results" class="logo-search">
<header>
<?= translate('web_search', $i18n) ?>
<span class="fa-solid fa-xmark close-logo-search" onClick="closeLogoSearch()"></span>
</header>
<div id="logo-search-images"></div>
</div>
<div class="form-group-inline">
<input type="text" id="name" name="name" placeholder="<?= translate('subscription_name', $i18n) ?>"
onchange="setSearchButtonStatus()" onkeypress="this.onchange();" onpaste="this.onchange();"
oninput="this.onchange();" required>
<label for="logo" class="logo-preview">
<img src="" alt="<?= translate('logo_preview', $i18n) ?>" id="form-logo">
</label>
<input type="file" id="logo" name="logo" accept="image/jpeg, image/png, image/gif, image/webp"
onchange="handleFileSelect(event)" class="hidden-input">
<input type="hidden" id="logo-url" name="logo-url">
<div id="logo-search-button" class="image-button medium disabled" title="<?= translate('search_logo', $i18n) ?>"
onClick="searchLogo()">
<?php include "images/siteicons/svg/websearch.php"; ?>
</div>

<div class="form-group-inline">
<input type="number" step="0.01" id="price" name="price" placeholder="<?= translate('price', $i18n) ?>"
required>
<select id="currency" name="currency_id" placeholder="<?= translate('add_subscription', $i18n) ?>">
<?php
foreach ($currencies as $currency) {
$selected = ($currency['id'] == $main_currency) ? 'selected' : '';
?>
<option value="<?= $currency['id'] ?>" <?= $selected ?>><?= $currency['name'] ?></option>
<?php
}
?>
</select>
<input type="hidden" id="id" name="id">
<div id="logo-search-results" class="logo-search">
<header>
<?= translate('web_search', $i18n) ?>
<span class="fa-solid fa-xmark close-logo-search" onClick="closeLogoSearch()"></span>
</header>
<div id="logo-search-images"></div>
</div>
</div>

<div class="form-group">
<div class="inline">
<div class="split66">
<label for="cycle"><?= translate('payment_every', $i18n) ?></label>
<div class="inline">
<select id="frequency" name="frequency" placeholder="<?= translate('frequency', $i18n) ?>">
<?php
for ($i = 1; $i <= 366; $i++) {
?>
<option value="<?= $i ?>"><?= $i ?></option>
<?php
}
?>
</select>
<select id="cycle" name="cycle" placeholder="Cycle">
<?php
foreach ($cycles as $cycle) {
?>
<option value="<?= $cycle['id'] ?>" <?= $cycle['id'] == 3 ? "selected" : "" ?>>
<?= translate(strtolower($cycle['name']), $i18n) ?>
</option>
<?php
}
?>
</select>
</div>
</div>
<div class="split33">
<label for="next_payment"><?= translate('next_payment', $i18n) ?></label>
<input type="date" id="next_payment" name="next_payment" required>
</div>
</div>
</div>
<div class="form-group-inline">
<input type="number" step="0.01" id="price" name="price" placeholder="<?= translate('price', $i18n) ?>" required>
<select id="currency" name="currency_id" placeholder="<?= translate('add_subscription', $i18n) ?>">
<?php
foreach ($currencies as $currency) {
$selected = ($currency['id'] == $main_currency) ? 'selected' : '';
?>
<option value="<?= $currency['id'] ?>" <?= $selected ?>><?= $currency['name'] ?></option>
<?php
}
?>
</select>
</div>

<div class="form-group">
<div class="inline">
<div class="split50">
<label for="payment_method"><?= translate('payment_method', $i18n) ?></label>
<select id="payment_method" name="payment_method_id">
<div class="form-group">
<div class="inline">
<div class="split66">
<label for="cycle"><?= translate('payment_every', $i18n) ?></label>
<div class="inline">
<select id="frequency" name="frequency" placeholder="<?= translate('frequency', $i18n) ?>">
<?php
foreach ($payment_methods as $payment) {
for ($i = 1; $i <= 366; $i++) {
?>
<option value="<?= $payment['id'] ?>">
<?= $payment['name'] ?>
</option>
<option value="<?= $i ?>"><?= $i ?></option>
<?php
}
?>
</select>
</div>
<div class="split50">
<label for="payer_user"><?= translate('paid_by', $i18n) ?></label>
<select id="payer_user" name="payer_user_id">
<select id="cycle" name="cycle" placeholder="Cycle">
<?php
foreach ($members as $member) {
foreach ($cycles as $cycle) {
?>
<option value="<?= $member['id'] ?>"><?= $member['name'] ?></option>
<option value="<?= $cycle['id'] ?>" <?= $cycle['id'] == 3 ? "selected" : "" ?>>
<?= translate(strtolower($cycle['name']), $i18n) ?>
</option>
<?php
}
?>
</select>
</div>
</div>
<div class="split33">
<label for="next_payment"><?= translate('next_payment', $i18n) ?></label>
<input type="date" id="next_payment" name="next_payment" required>
</div>
</div>
</div>

<div class="form-group">
<label for="category"><?= translate('category', $i18n) ?></label>
<select id="category" name="category_id">
<?php
foreach ($categories as $category) {
<div class="form-group">
<div class="inline">
<div class="split50">
<label for="payment_method"><?= translate('payment_method', $i18n) ?></label>
<select id="payment_method" name="payment_method_id">
<?php
foreach ($payment_methods as $payment) {
?>
<option value="<?= $payment['id'] ?>">
<?= $payment['name'] ?>
</option>
<?php
}
?>
<option value="<?= $category['id'] ?>">
<?= $category['name'] ?>
</option>
</select>
</div>
<div class="split50">
<label for="payer_user"><?= translate('paid_by', $i18n) ?></label>
<select id="payer_user" name="payer_user_id">
<?php
}
?>
</select>
foreach ($members as $member) {
?>
<option value="<?= $member['id'] ?>"><?= $member['name'] ?></option>
<?php
}
?>
</select>
</div>
</div>
</div>

<div class="form-group-inline">
<input type="checkbox" id="notifications" name="notifications" onchange="toggleNotificationDays()">
<label for="notifications"><?= translate('enable_notifications', $i18n) ?></label>
</div>
<div class="form-group">
<label for="category"><?= translate('category', $i18n) ?></label>
<select id="category" name="category_id">
<?php
foreach ($categories as $category) {
?>
<option value="<?= $category['id'] ?>">
<?= $category['name'] ?>
</option>
<?php
}
?>
</select>
</div>

<div class="form-group">
<div class="inline">
<div class="split66 mobile-split-50">
<label for="notify_days_before"><?= translate('notify_me', $i18n) ?></label>
<select id="notify_days_before" name="notify_days_before" disabled>
<option value="0"><?= translate('default_value_from_settings', $i18n) ?></option>
<option value="1">1 <?= translate('day_before', $i18n) ?></option>
<?php
for ($i = 2; $i <= 90; $i++) {
?>
<option value="<?= $i ?>"><?= $i ?> <?= translate('days_before', $i18n) ?></option>
<?php
}
<div class="form-group-inline">
<input type="checkbox" id="notifications" name="notifications" onchange="toggleNotificationDays()">
<label for="notifications"><?= translate('enable_notifications', $i18n) ?></label>
</div>

<div class="form-group">
<div class="inline">
<div class="split66 mobile-split-50">
<label for="notify_days_before"><?= translate('notify_me', $i18n) ?></label>
<select id="notify_days_before" name="notify_days_before" disabled>
<option value="0"><?= translate('default_value_from_settings', $i18n) ?></option>
<option value="1">1 <?= translate('day_before', $i18n) ?></option>
<?php
for ($i = 2; $i <= 90; $i++) {
?>
</select>
</div>
<div class="split33 mobile-split-50">
<label for="cancellation_date"><?= translate('cancellation_notification', $i18n) ?></label>
<input type="date" id="cancellation_date" name="cancellation_date">
</div>
<option value="<?= $i ?>"><?= $i ?> <?= translate('days_before', $i18n) ?></option>
<?php
}
?>
</select>
</div>
<div class="split33 mobile-split-50">
<label for="cancellation_date"><?= translate('cancellation_notification', $i18n) ?></label>
<input type="date" id="cancellation_date" name="cancellation_date">
</div>
</div>
</div>

<div class="form-group">
<input type="text" id="url" name="url" placeholder="<?= translate('url', $i18n) ?>">
</div>
<div class="form-group">
<input type="text" id="url" name="url" placeholder="<?= translate('url', $i18n) ?>">
</div>

<div class="form-group">
<input type="text" id="notes" name="notes" placeholder="<?= translate('notes', $i18n) ?>">
</div>
<div class="form-group">
<input type="text" id="notes" name="notes" placeholder="<?= translate('notes', $i18n) ?>">
</div>

<div class="form-group-inline">
<input type="checkbox" id="inactive" name="inactive">
<label for="inactive"><?= translate('inactive', $i18n) ?></label>
</div>
<div class="form-group-inline">
<input type="checkbox" id="inactive" name="inactive">
<label for="inactive"><?= translate('inactive', $i18n) ?></label>
</div>

<div class="buttons">
<input type="button" value="<?= translate('delete', $i18n) ?>" class="warning-button left thin" id="deletesub"
style="display: none">
<input type="button" value="<?= translate('cancel', $i18n) ?>" class="secondary-button thin"
onClick="closeAddSubscription()">
<input type="submit" value="<?= translate('save', $i18n) ?>" class="thin" id="save-button">
</div>
</form>
</section>
<div class="buttons">
<input type="button" value="<?= translate('delete', $i18n) ?>" class="warning-button left thin" id="deletesub"
style="display: none">
<input type="button" value="<?= translate('cancel', $i18n) ?>" class="secondary-button thin"
onClick="closeAddSubscription()">
<input type="submit" value="<?= translate('save', $i18n) ?>" class="thin" id="save-button">
</div>
</form>
</section>
<script src="scripts/dashboard.js?<?= $version ?>"></script>

Expand Down
6 changes: 6 additions & 0 deletions scripts/dashboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
let isSortOptionsOpen = false;
let scrollTopBeforeOpening = 0;
const shouldScroll = window.innerWidth <= 768;

function toggleOpenSubscription(subId) {
const subscriptionElement = document.querySelector('.subscription[data-id="' + subId + '"]');
Expand Down Expand Up @@ -105,6 +107,7 @@ function fillEditFormFields(subscription) {

function openEditSubscription(event, id) {
event.stopPropagation();
scrollTopBeforeOpening = window.scrollY;
const body = document.querySelector('body');
body.classList.add('no-scroll');
const url = `endpoints/subscription/get.php?id=${id}`;
Expand Down Expand Up @@ -142,6 +145,9 @@ function closeAddSubscription() {
modal.classList.remove("is-open");
const body = document.querySelector('body');
body.classList.remove('no-scroll');
if (shouldScroll) {
window.scrollTo(0, scrollTopBeforeOpening);
}
resetForm();
}

Expand Down
6 changes: 6 additions & 0 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ body.no-scroll {
overflow-y: hidden;
}

@media (max-width: 768px) {
body.no-scroll section.contain {
display: none;
}
}

a:hover > i {
color: var(--hover-color);
}
Expand Down

0 comments on commit 772b7aa

Please sign in to comment.