Merge pull request #32 from SteinCodeAT/dev-te

removed broken mobile project card slider
SteinCodeAT · Mar 14, 2024 · e93ad8b · e93ad8b
2 parents 8a79480 + d134495
commit e93ad8b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 71 deletions.
diff --git a/src/components/StackItem.astro b/src/components/StackItem.astro
@@ -157,8 +157,10 @@ const {classes, slug, title, projectType, description, imageObject, imageType, y
     @media (max-width: 762px) {
         .stack-item {
             padding: 0;
-            gap: 0;
-            grid-template-columns: 1fr;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
         }
 
         .stack-item--col {
@@ -170,6 +172,7 @@ const {classes, slug, title, projectType, description, imageObject, imageType, y
 
         .stack-item .stack-item--image-area {
             aspect-ratio: unset;
+            transform: unset !important;
             height: 60vh;
             width: 80vw;
             margin: 5vh 5vw;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -295,6 +295,19 @@ Austria, Italy, Poland, Greece, Bosnia and Herzegovina.
 					top: 0;
 				}
 
+				@media ((max-width:762px)) {
+					#projects-section {
+						padding-top: 10vh;
+					}
+					.stack-area {
+						position: relative;
+						display: flex;
+						flex-direction: column;
+						gap: 10vh;
+						flex-flow: column-reverse;
+						justify-content: flex-end;
+					}
+				}
 			</style>
 
 			<div class="stack-area">

diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -97,68 +97,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const bannerSection = document.querySelector(".banner-section");
     const stackArea = document.querySelector(".stack-area")
 
-    let touchStartY = 0;
-    let touchEndY = 0;
-    let minimumTouchDistance = 1;
-
-    stackArea.addEventListener("touchstart", (event) => {
-        const bannerAreaProportion = bannerSection.getBoundingClientRect().bottom/(window.innerHeight * 0.8);
-
-        if (bannerAreaProportion > 0){
-            /* stack area is not visible */
-            return
-        }
-        event.preventDefault()
-
-        const touchLocation = event.targetTouches[0];
-        touchStartY = touchLocation.screenY;
-        touchEndY = 0;
-    }, false)
-
-    stackArea.addEventListener("touchend", (event) => {
-        const bannerAreaProportion = bannerSection.getBoundingClientRect().bottom/(window.innerHeight * 0.8);
-
-        if (bannerAreaProportion > 0){
-            /* stack area is not visible */
-            return
-        }
-
-        const touchLocation = event.changedTouches[0];
-        touchEndY = touchLocation.screenY;
-
-        const distanceY = touchEndY - touchStartY
-
-        if (distanceY < 0 && Math.abs(distanceY) > minimumTouchDistance){
-            // move one card down
-            window.scrollBy({
-                top: (window.innerHeight) * 0.99,
-                left: 0,
-                behavior: "smooth",
-            })
-
-        } else if (distanceY > 0 && Math.abs(distanceY) > minimumTouchDistance){
-            // move one card up
-            window.scrollBy({
-                top: (window.innerHeight) * (-0.99),
-                left: 0,
-                behavior: "smooth",
-            })
-        }
-        switchCard()
-    }, false)
-
-    stackArea.addEventListener("touchcancel", () => {
-        // reset touch recorded points
-        touchStartY = 0;
-        touchEndY = 0;
-    }, false)
-
-
     window.addEventListener("scroll", () => {
-        switchCard()  
-    })
-
-    function switchCard() {
         const propotion = bannerSection.getBoundingClientRect().bottom/(window.innerHeight * 0.8);
 
         if (propotion > 0){
@@ -167,7 +106,6 @@ document.addEventListener("DOMContentLoaded", () => {
         }
 
         const index = Math.floor(propotion) * -1
-        console.log(index)
 
         if (index == stackArea.dataset.currentFocusIndex){
             /* return if the focus card would remain the same */
@@ -219,5 +157,5 @@ document.addEventListener("DOMContentLoaded", () => {
         })
 
         rotateNotPassedImages()
-    }
+    })
 })
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -499,7 +499,7 @@ header nav li {
     }
 
     .header-card {
-        height: 15dvh;
+        height: 15vh;
     }
     .header-card .card-content {
         display: flex;

diff --git a/src/styles/project-card-page.css b/src/styles/project-card-page.css
@@ -62,8 +62,8 @@ hr {
   flex-direction: column; /* Stack children vertically */
   align-items: center; /* Center children horizontally */
   margin: auto;
-  width: 90dvw;
-  min-height: 92dvh;
+  width: 90vw;
+  min-height: 92vh;
   background-color: #E4E4E4;
   border-radius: 7px;
   margin-top: 3%;
@@ -344,8 +344,8 @@ hr {
   background-color: var(--main-bg);
   padding: 1rem;
   border-radius: 5px;
-  width: 95dvw;
-  height: 95dvh;
+  width: 95vw;
+  height: 95vh;
   position: relative;
   background: rgba(0, 0, 0, 0.8);
 }
@@ -418,7 +418,7 @@ hr {
 
 @media (max-width: 762px) {
   .modal--content {
-    height: 100dvh;
+    height: 100vh;
   }
 
   .modal--navigation button {