From 038606a3fc6d5a1589738e2c468e4be1ca8b37d1 Mon Sep 17 00:00:00 2001
From: vaporvee <yannik@vaporvee.com>
Date: Sat, 13 Jul 2024 01:37:04 +0200
Subject: [PATCH] added image zoom

---
 src/components/GalaryZoom.astro  | 53 ++++++++++++++++++++++++++++++++
 src/components/ProjectCard.astro | 36 +++++++++++++++++++---
 src/pages/projects.astro         |  2 ++
 src/styles/main.scss             |  7 +----
 4 files changed, 88 insertions(+), 10 deletions(-)
 create mode 100644 src/components/GalaryZoom.astro

diff --git a/src/components/GalaryZoom.astro b/src/components/GalaryZoom.astro
new file mode 100644
index 0000000..aedf472
--- /dev/null
+++ b/src/components/GalaryZoom.astro
@@ -0,0 +1,53 @@
+<style lang="scss">
+  @import "../styles/_var.scss";
+  #galary-zoom {
+    display: none;
+    margin: 0;
+    backdrop-filter: blur(10px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    #zoom-image {
+      position: sticky;
+      min-height: 20px;
+      min-width: 20px;
+      max-height: 35%;
+      max-width: 40%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: white;
+      z-index: 2;
+    }
+    @media (max-width: $responsive-width) {
+      #zoom-image {
+        position: sticky;
+        min-height: 20px;
+        min-width: 20px;
+        max-height: 100%;
+        max-width: 90%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-7%, -50%);
+        background-color: white;
+        z-index: 2;
+      }
+    }
+  }
+</style>
+
+<script lang="ts">
+  function maximizeImage(img) {
+    document.getElementById("galary-zoom").style.display = "initial";
+    document.getElementById("zoom-image").src = img.src;
+  }
+  function hide(dom) {
+    document.body.classList.remove("remove-scrolling");
+    dom.style.display = "none";
+  }
+</script>
+
+<div id="galary-zoom" onclick="hide(this)"><img id="zoom-image" /></div>
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index 60b0b7c..fcc7f84 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -32,11 +32,27 @@ const { name, href, gallery } = Astro.props;
     max-width: 40vw;
     transition: border-color 0.3s;
     .gallery {
-      margin-top: -25px;
+      margin-top: -30px;
+      margin-bottom: 20px;
+      height: 260px;
       img {
+        position: static;
         max-height: 250px;
         margin: 20px 10px;
         border-radius: 10px;
+        transition: all 0.3s;
+        cursor: pointer;
+        &:hover {
+          &.single {
+            position: relative;
+            height: inherit !important;
+          }
+          & {
+            margin: 0 !important;
+            max-height: 260px;
+            height: 280px;
+          }
+        }
       }
     }
     h2 {
@@ -53,7 +69,8 @@ const { name, href, gallery } = Astro.props;
   }
   @media (max-width: $responsive-width) {
     .gallery {
-      margin-top: -3px;
+      height: initial !important;
+      margin-top: -4px;
       text-align: center;
       * {
         margin: 2px !important;
@@ -62,6 +79,10 @@ const { name, href, gallery } = Astro.props;
   }
 </style>
 
+<script lang="ts"></script>
+
+<div id="galary-zoom"><img id="zoom-image" /></div>
+
 <div class={href ? "content" : "content no-hover"}>
   <a class="project-external" target={href ? "_blank" : ""} href={href}>
     <h2>{name}</h2><slot />
@@ -69,9 +90,16 @@ const { name, href, gallery } = Astro.props;
       <div class="gallery">
         {
           Array.isArray(gallery) ? (
-            gallery.map((src) => <img loading="lazy" src={src} />)
+            gallery.map((src) => (
+              <img onclick="maximizeImage(this)" loading="lazy" src={src} />
+            ))
           ) : (
-            <img loading="lazy" src={gallery as string} />
+            <img
+              class="single"
+              onclick="maximizeImage(this)"
+              loading="lazy"
+              src={gallery as string}
+            />
           )
         }
       </div>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 40997de..3f5be8b 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import ProjectCard from "../components/ProjectCard.astro";
+import GalaryZoom from "../components/GalaryZoom.astro";
 ---
 
 <style lang="scss">
@@ -15,6 +16,7 @@ import ProjectCard from "../components/ProjectCard.astro";
   <main>
     <div style="margin-bottom: 20px;">
       <h1 style="text-align: center;">Projects</h1>
+      <GalaryZoom />
       <ProjectCard
         name="voicenext"
         gallery={[
diff --git a/src/styles/main.scss b/src/styles/main.scss
index d0fd859..e23d8db 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -179,11 +179,6 @@ button {
 
 @media (max-width: $responsive-width) {
   .content{
-    width: 85vw !important;
-  }
-}
-@media (max-width: $responsive-width-secondary) {
-  .content{
-    width: 85vw !important;
+    min-width: 85vw !important;
   }
 }
\ No newline at end of file