From 772b7aa80a1d01889c129bbbe710bca9521a3633 Mon Sep 17 00:00:00 2001
From: Miguel Ribeiro <k.d.mitnick@gmail.com>
Date: Fri, 5 Jul 2024 21:36:05 +0200
Subject: [PATCH] fix: dashboard scrolling to top when opening a subscription

---
 includes/version.php |   2 +-
 index.php            | 286 +++++++++++++++++++++----------------------
 scripts/dashboard.js |   6 +
 styles/styles.css    |   6 +
 4 files changed, 155 insertions(+), 145 deletions(-)

diff --git a/includes/version.php b/includes/version.php
index e360ce324..83de57a2f 100644
--- a/includes/version.php
+++ b/includes/version.php
@@ -1,3 +1,3 @@
 <?php
-$version = "v2.14.0";
+$version = "v2.14.1";
 ?>
\ No newline at end of file
diff --git a/index.php b/index.php
index 36004c81d..87168b481 100644
--- a/index.php
+++ b/index.php
@@ -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>
 
diff --git a/scripts/dashboard.js b/scripts/dashboard.js
index 4409301c2..c7b381e5c 100644
--- a/scripts/dashboard.js
+++ b/scripts/dashboard.js
@@ -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 + '"]');
@@ -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}`;
@@ -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();
 }
 
diff --git a/styles/styles.css b/styles/styles.css
index eb40b6376..ef6c14f4e 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -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);
 }