Merge pull request #31 from SteinCodeAT/dev-te

added project cards slider to mobile view.
SteinCodeAT · Mar 14, 2024 · 8a79480 · 8a79480
2 parents 88a68ec + 4a47368
commit 8a79480
Show file tree

Hide file tree

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

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -282,7 +282,7 @@ Austria, Italy, Poland, Greece, Bosnia and Herzegovina.
 			<div class="vertical-line-2"></div>
 		</section>	
 
-		<section id="projects-section" style={`height: ${100 * projects.length}vh;`}>
+		<section id="projects-section" style={`height: ${90 * projects.length}vh;`}>
 			<style>
 				#projects-section {
 					width: 100vw;
@@ -295,23 +295,7 @@ 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: 20dvh;
-						flex-flow: column-reverse;
-						justify-content: flex-end;
-					}
-				}
 			</style>
-			<script>
-
-			</script>
 
 			<div class="stack-area">
 				{projects.map((project) => {
@@ -339,6 +323,7 @@ Austria, Italy, Poland, Greece, Bosnia and Herzegovina.
 					gap: 1rem;
 					padding: 0 10vw;					
 					padding-top: 2rem;
+					margin-top: 10vh;
 				}
 
 				.about-me--header-area {
@@ -446,17 +431,20 @@ Austria, Italy, Poland, Greece, Bosnia and Herzegovina.
 				@media (max-width:762px) {
 					#about-me-section {
 						grid-template-columns: 1fr;
+						margin-top: 0;
 					}
 
 					.about-me--header-area {
-						position: unset;
-						margin-top: 20vh;
-						margin-bottom: 2rem;
+						position: sticky;
+						margin-top: 0;
+						top: 0;
+						background: var(--main-bg);
+						padding-bottom: 2rem;
 						height: unset;
 					}
 
-					.about-me--header--social-wrapper {
-						flex-direction: column;
+					.about-me--header-img-wrapper {
+						height: 20vh;
 					}
 
 					.about-me--header-img-wrapper img {
@@ -484,11 +472,13 @@ Austria, Italy, Poland, Greece, Bosnia and Herzegovina.
 				<div class="about-me--header--social-wrapper">
 
 					<a href="https://www.instagram.com/nihilprophet/">
-						<Icon name="mdi:instagram" /> @nihilprophet
+						<Icon name="mdi:instagram" /> <span class="desktop-only">@nihilprophet</span>
+						<span class="mobile-only">Instagram</span>
 					</a>
 
 					<a href="mailto:nihilprophet@gmail.com">
-						<Icon name="mdi:email" /> nihilprophet@gmail.com
+						<Icon name="mdi:email" /> <span class="desktop-only">nihilprophet@gmail.com</span>
+						<span class="mobile-only">E-Mail</span>
 					</a>
 
 				</div>

diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -85,7 +85,7 @@ document.addEventListener("DOMContentLoaded", () => {
         )
 
         for (let i = stackItemImageAreas.length - 1; i >= 0; i--) {
-            stackItemImageAreas[i].style.transform = `rotate(-${2 * (stackItemImageAreas.length - i - 1)}deg)`
+            stackItemImageAreas[i].style.transform = `rotate(-${0.75 * (stackItemImageAreas.length - i - 1)}deg)`
         }
     }
 
@@ -94,17 +94,71 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.querySelector(".stack-item:last-of-type").classList.add("focus")
 
-    window.addEventListener("scroll", () => {
-
-        const bannerSection = document.querySelector(".banner-section");
-        const stackArea = document.querySelector(".stack-area")
+    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 (bannerSection === null){
-            /* stack area does not exist on the page */
-            console.error("Could not find .banner-section")
+        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){
@@ -113,6 +167,8 @@ 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 */
             return
@@ -153,7 +209,6 @@ document.addEventListener("DOMContentLoaded", () => {
             * progress more.
              */
             focusStackItem.classList.add("display-at-top")
-            console.log("focus")
         }, 500)
 
 
@@ -164,5 +219,5 @@ document.addEventListener("DOMContentLoaded", () => {
         })
 
         rotateNotPassedImages()
-    })
+    }
 })
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -59,3 +59,20 @@ h3 {
     font-weight: bold;
     margin-bottom: 1rem;
 }
+
+.mobile-only {
+    display: none;
+}
+
+.desktop-only {
+    display: block;
+}
+
+@media (max-width: 762px) {
+    .mobile-only {
+        display: block;
+    }
+    .desktop-only {
+        display: none;
+    }
+}