fix swipe movement

includes/list_subscriptions.php

@@ -104,6 +104,7 @@ function printSubscriptions($subscriptions, $sort, $categories, $members, $i18n,
             if ($mobileNavigation === 'true') {
                 ?>
                 <div class="mobile-actions" data-id="<?= $subscription['id'] ?>">
+                    <button class="mobile-action-edit"></button>
                     <button class="mobile-action-edit" onClick="openEditSubscription(event, <?= $subscription['id'] ?>)">
                         <?php include $imagePath . "images/siteicons/svg/mobile-menu/edit.php"; ?>
                         Edit

includes/version.php

@@ -1,3 +1,3 @@
 <?php
-$version = "v2.34.0";
+$version = "v2.34.1";
 ?>

scripts/dashboard.js

@@ -499,29 +499,47 @@ function setSwipeElements() {
 
     swipeElements.forEach((element) => {
       let startX = 0;
+      let startY = 0;
       let currentX = 0;
+      let currentY = 0;
       let translateX = 0;
       const maxTranslateX = -180;
 
       element.addEventListener('touchstart', (e) => {
         startX = e.touches[0].clientX;
-        element.style.transition = ''; // Remove transition for smooth drag effect
+        startY = e.touches[0].clientY;
+        element.style.transition = ''; // Remove transition for smooth dragging
       });
 
       element.addEventListener('touchmove', (e) => {
         currentX = e.touches[0].clientX;
-        translateX = Math.min(0, Math.max(maxTranslateX, currentX - startX)); // Clamp value between -180 and 0
-        element.style.transform = `translateX(${translateX}px)`;
+        currentY = e.touches[0].clientY;
+
+        const diffX = currentX - startX;
+        const diffY = currentY - startY;
+
+        // Check if the swipe is more horizontal than vertical
+        if (Math.abs(diffX) > Math.abs(diffY)) {
+          e.preventDefault(); // Prevent vertical scrolling
+
+          // Only update translateX if swiping within allowed range
+          if (!(translateX === maxTranslateX && diffX < 0)) {
+            translateX = Math.min(0, Math.max(maxTranslateX, diffX)); // Clamp translateX between -180 and 0
+            element.style.transform = `translateX(${translateX}px)`;
+          }
+        }
       });
 
       element.addEventListener('touchend', () => {
-        // Snap to closest position (0 or -180)
+        // Check the final swipe position to determine snap behavior
         if (translateX < maxTranslateX / 2) {
-          translateX = maxTranslateX; // Snap to -180
+          // If more than halfway to the left, snap fully open
+          translateX = maxTranslateX;
         } else {
-          translateX = 0; // Snap to 0
+          // If swiped less than halfway left or swiped right, snap back to closed
+          translateX = 0;
         }
-        element.style.transition = 'transform 0.2s ease'; // Smooth snap-back
+        element.style.transition = 'transform 0.2s ease'; // Smooth snap effect
         element.style.transform = `translateX(${translateX}px)`;
       });
     });

styles/dark-theme.css

@@ -58,7 +58,7 @@ svg .text-color {
 }
 
 .subscription.inactive {
-    background-color: rgba(24, 24, 24, 0.3);
+    background-color: #222;
     color: rgba(200, 200, 200, 0.6);
     box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
 }
@@ -80,6 +80,10 @@ svg .text-color {
     border: none;
 }
 
+.subscription-container {
+    background-color: #222;
+  }
+
 .close-form {
     color: #EEE;
 }

styles/styles.css

@@ -343,7 +343,7 @@ button:hover svg .main-color {
   background-color: #FFFFFF;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   border-radius: 16px;
-  background-color: #f3e22d;
+  background-color: #FFFFFF;
 }
 
 .subscription-container > .mobile-actions {
@@ -368,10 +368,11 @@ button:hover svg .main-color {
   height: 100%;
   width: 60px;
   justify-content: center;
+  color: #f1f1f1;
 }
 
 button.mobile-action-edit {
-  background-color: #f3e22d;
+  background-color: #ffbf15; /* #f3e22d; */
 }
 
 button.mobile-action-delete {
@@ -399,12 +400,8 @@ button.mobile-action-clone {
   padding: 12px 15px;
   border-radius: 16px;
   cursor: pointer;
-  transition: all .3s ease-in;
   position: relative;
-}
-
-.subscription.show-menu {
-  transform: translateX(-180px);
+  transition: transform 0.2s;
 }
 
 .subscription.hide {