From 638214629d3eab576e495b179e5c35d8c742fc82 Mon Sep 17 00:00:00 2001
From: Zulius Roolf <36889707+ZuliusRoolf@users.noreply.github.com>
Date: Mon, 28 Oct 2024 17:27:08 +0100
Subject: [PATCH] refactorize touch and pointer events

---
 website/index.html                 |  2 +-
 website/scripts/handle_projects.js | 21 ++++++++++-----------
 website/styles.css                 |  3 +++
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/website/index.html b/website/index.html
index ed7558d..14f1ae6 100644
--- a/website/index.html
+++ b/website/index.html
@@ -14,7 +14,7 @@
   <div class="main">
     <!-- Biography -->
     <div class="main__column" id="biography">
-      <div class="biography biography--show" id="biography__template">
+      <div class="biography" id="biography__template">
         <div class="biography__picture">
           <img src="content/photos/portrait_template.png" alt="Portrait Photo" height="256">
         </div>
diff --git a/website/scripts/handle_projects.js b/website/scripts/handle_projects.js
index 9a8385f..27f68ec 100644
--- a/website/scripts/handle_projects.js
+++ b/website/scripts/handle_projects.js
@@ -32,23 +32,22 @@ export function projectsAddEventListeners(document) {
     }, true);
 
     let isTouch = false;
-    portfolioContainer.addEventListener('touchstart', function (event) {
-        isTouch = true;
-        var button = event.target.closest('.project__button');
-        if (button) {
-            showTouchSelectedProject(button);
-        }
-    }, { passive: true });
-
     portfolioContainer.addEventListener('pointerdown', function (event) {
         var button = event.target.closest('.project__button');
-        if (button && window.innerWidth < 768) {
+        if (!button) {
             return;
         }
-        if (button && !isTouch) {
-            showSelectedProject(button);
+        if (event.pointerType === 'touch') {
+            isTouch = true;
+            showTouchSelectedProject(button);
+            return;
         }
         isTouch = false;
+        if (window.innerWidth < 768) {
+            showTouchSelectedProject(button);
+            return;
+        }
+            showSelectedProject(button);
     }, true);
 
     // Function to get the template content of a button
diff --git a/website/styles.css b/website/styles.css
index 5adb9f3..3de90ea 100644
--- a/website/styles.css
+++ b/website/styles.css
@@ -168,6 +168,9 @@ body {
 #if__biography__about {
     display: none;
 }
+.biography {
+    padding: 15px;
+}
 
 .biography__picture {
     opacity: 1;