Merge pull request #38 from SteinCodeAT/dev-te

fix: improved mobile card animations and added new controls
SteinCodeAT · May 9, 2024 · bc92c07 · bc92c07
2 parents d52c769 + 862059d
commit bc92c07
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 31 deletions.
diff --git a/src/components/StackItem.astro b/src/components/StackItem.astro
@@ -71,11 +71,18 @@ const shortDescription = description.slice(0, minimumDescriptionLength + firstWh
 
     .stack-item--image-area {
         position: relative;
-        width: 40vw;
+        width: 30vw;
         aspect-ratio: 1;
         overflow: hidden;
     }
 
+    @media screen and (max-width: 1400px) {
+        /* Increase image width on medium screens */
+        .stack-item--image-area {
+            width: 40vw;
+        }
+    }
+
     .stack-item--image-area:hover {
         filter: brightness(90%);
     }
@@ -171,9 +178,11 @@ const shortDescription = description.slice(0, minimumDescriptionLength + firstWh
     @media (max-width: 762px) {
         .stack-item {
             padding: 0;
+            height: 90vh;
         }
         .stack-item--col {
             padding: 0;
+            height: 90vh;
         }
         .stack-item .stack-item--text-area {
             display: none;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -294,16 +294,36 @@ new ways of interaction between humans and spaces.
 					#projects-section {
 						margin-bottom: 10vh;
 						position: relative;	
-						height: 100vh !important;
+						height: 120vh !important;
 						overflow-x: hidden;
 					}
 
 					.stack-area {
-						top: 0;
-						position: absolute;
+						position: relative;
 						display: flex;
 						flex-direction: row-reverse;
 						gap: 0;
+						height: 90vh;
+					}
+
+					.mobile-stack-controls {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						gap: 1rem;
+						z-index: 500;
+						width: 100vw;
+					}
+
+					.mobile-stack-controls button {
+						border-radius: 100%;
+						background: var(--card-bg);
+						padding: 0.5rem;
+					}
+
+					.mobile-stack-controls svg {
+						height: 2rem;
+						width: 2rem;
 					}
 				}
 			</style>
@@ -322,6 +342,15 @@ new ways of interaction between humans and spaces.
 					/>
 				})}					
 			</div>
+
+			<div class="mobile-only mobile-stack-controls">
+				<button class="stack-back-button">
+					<Icon name="mdi:arrow-left" aria-label="previous card" />
+				</button>
+				<button class="stack-next-button">
+					<Icon name="mdi:arrow-right" aria-label="next card" />
+				</button>
+			</div>
 		</section>
 
 		<section id="about-me-section">

diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -164,6 +164,34 @@ document.addEventListener("DOMContentLoaded", () => {
         transformNotPassedImages()
     }
 
+    function getCurrentFocusIndex(){
+        /* parse the currently set focus index as int or set to a reasonable default value */
+        let currentFocusIndex = stackArea.dataset.currentFocusIndex
+        return currentFocusIndex === undefined ? 0 : parseInt(currentFocusIndex)
+    }
+
+    function showPreviousCard() {
+        const currentFocusIndex = getCurrentFocusIndex()
+        let targetIndex = currentFocusIndex - 1
+
+        if (targetIndex <= 0) {
+            targetIndex = stackItems.length
+        }
+
+        showProjectCardByIndex({index: targetIndex})
+    }
+
+    function showNextCard(){
+        const currentFocusIndex = getCurrentFocusIndex()
+        let targetIndex = currentFocusIndex + 1
+
+        if (targetIndex > stackItems.length) {
+            targetIndex = 1
+        }
+
+        showProjectCardByIndex({index: targetIndex})
+    }
+
     /* Add touch event listeners for mobile screens 
     * This should only be applied if it is a mobile device
     * All larger screens should work with the standard scroll animation
@@ -174,7 +202,7 @@ document.addEventListener("DOMContentLoaded", () => {
         let touchendX = 0;
         let touchendY = 0;
 
-        const minimumTouchDistance = 25;
+        const minimumTouchDistance = 75;
 
         document.querySelector(".stack-area")?.addEventListener("touchstart", (event) => {                    
             const touchLocation = event.targetTouches[0];
@@ -183,8 +211,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
             touchendX = 0;
             touchendY = 0;
-        }, false)
-    
+        }, {passive: true})
+
         document.querySelector(".stack-area")?.addEventListener("touchend", (event) => {
             const touchLocation = event.changedTouches[0];
             touchendX = touchLocation.screenX;
@@ -193,37 +221,16 @@ document.addEventListener("DOMContentLoaded", () => {
             const distanceX = touchendX - touchstartX
             const distanceY = touchendY - touchstartY
 
-            /* parse the currently set focus index as int or set to a reasonable default value */
-            let currentFocusIndex = stackArea.dataset.currentFocusIndex
-
-            if (currentFocusIndex === undefined) {
-                currentFocusIndex = 0
-            } else {
-                currentFocusIndex = parseInt(currentFocusIndex)
-            }
-
             if (distanceX < 0 && Math.abs(distanceX) > minimumTouchDistance){
                 // swipe left
-                let targetIndex = currentFocusIndex + 1
-
-                if (targetIndex > stackItems.length) {
-                    targetIndex = 1
-                }
-
-                showProjectCardByIndex({index: targetIndex})
+                showNextCard()
             } else if (distanceX > 0 && Math.abs(distanceX) > minimumTouchDistance){
                 // swipe right
-                let targetIndex = currentFocusIndex - 1
-
-                if (targetIndex <= 0) {
-                    targetIndex = stackItems.length
-                }
-
-                showProjectCardByIndex({index: targetIndex})
+                showPreviousCard()
             } else if (Math.abs(distanceY) > minimumTouchDistance) {
                 // swipe up or down - do nothing
             }
-        }, false)
+        }, {passive: true})
 
         document.querySelector(".stack-area")?.addEventListener("touchcancel", () => {
             // reset touch recorded points
@@ -232,6 +239,14 @@ document.addEventListener("DOMContentLoaded", () => {
             touchendX = 0;
             touchendY = 0;
         }, false)
+
+        document.querySelector(".stack-back-button")?.addEventListener('click', (event) => {
+            console.log(event)
+            showPreviousCard()
+        })
+        document.querySelector(".stack-next-button")?.addEventListener('click', () => {
+            showNextCard()
+        })
     } else {
         /* Add general scroll animation event listener for larger screens */
         window.addEventListener("scroll", () => {