From 12d2a0a04090c5da28b871df883126de928309c4 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Wed, 16 Apr 2025 15:59:45 +0200
Subject: [PATCH] HoverCard: Added localisation, compressed image url, hover
 card description. Finished popup implementation.

---
 src/lib/components/hover-card.svelte       | 22 +++++++---
 src/lib/components/popup.svelte            |  2 +-
 src/lib/components/popup/hover-card.svelte | 27 +++++++++----
 src/lib/css/hover-card.css                 | 47 ++++++++++++++++++++--
 src/lib/css/popup.css                      |  4 +-
 src/lib/json/hub.json                      | 13 ++++--
 src/routes/+page.svelte                    |  4 +-
 7 files changed, 96 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/hover-card.svelte b/src/lib/components/hover-card.svelte
index 22a4276..350bc42 100644
--- a/src/lib/components/hover-card.svelte
+++ b/src/lib/components/hover-card.svelte
@@ -4,14 +4,16 @@
 
     import anime from "animejs";
     import SvgIcon from "@jamescoyle/svelte-icon";
-    import { mdiEye } from "@mdi/js";
+    import { mdiEye, mdiMapMarker } from "@mdi/js";
     import { popupComponent } from "$lib/ts/popup.ts";
     import HoverCardPopup from "$lib/components/popup/hover-card.svelte";
 
     import text from "$lib/json/hover-card.json";
 
     export let picture;
+    export let picturefull;
     export let title = "Title";
+    export let localisation = "Paris, France";
     export let description =
         "This is a description, you can add some explaination to your picture in here!";
 
@@ -19,7 +21,7 @@
     let divHoverCardMetadata = {
         div: null,
         title: null,
-        description: null,
+        localisation: null,
         tip: null,
     };
     function animateCard(isEntering) {
@@ -47,7 +49,7 @@
         });
         translateValues = translateValues.map((e) => -e);
         anime({
-            targets: [divHoverCardMetadata.description],
+            targets: [divHoverCardMetadata.localisation],
             opacity: opacityValues,
             translateY: translateValues,
             delay: 100,
@@ -59,7 +61,12 @@
     function showPopup() {
         popupComponent.set({
             component: HoverCardPopup,
-            props: { title: "Hello", description: "This is a custom Popup" },
+            props: {
+                title: title,
+                localisation: localisation,
+                description: description,
+                picture: picturefull,
+            },
         });
     }
 </script>
@@ -75,7 +82,7 @@
         animateCard(false);
     }}
     on:click={showPopup}
-    on:keydown={(e) => e.key === "Enter" && showPopup()} 
+    on:keydown={(e) => e.key === "Enter" && showPopup()}
 >
     <div class="hover-card">
         <img alt="hover-card" src={picture} />
@@ -94,7 +101,10 @@
             bind:this={divHoverCardMetadata.div}
         >
             <h1 bind:this={divHoverCardMetadata.title}>{title}</h1>
-            <p bind:this={divHoverCardMetadata.description}>{description}</p>
+            <div bind:this={divHoverCardMetadata.localisation} class="flex align-center">
+                <SvgIcon type="mdi" path={mdiMapMarker}></SvgIcon>
+                <p>{localisation}</p>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/lib/components/popup.svelte b/src/lib/components/popup.svelte
index aa7b687..b645782 100644
--- a/src/lib/components/popup.svelte
+++ b/src/lib/components/popup.svelte
@@ -22,7 +22,7 @@
     }
 </script>
 
-<svelte:window on:keydown|preventDefault={onKeyDown} />
+<svelte:window on:keydown={onKeyDown} />
 {#if component}
     <div
         class="on-popup"
diff --git a/src/lib/components/popup/hover-card.svelte b/src/lib/components/popup/hover-card.svelte
index 45e58ef..4ff85d3 100644
--- a/src/lib/components/popup/hover-card.svelte
+++ b/src/lib/components/popup/hover-card.svelte
@@ -1,11 +1,24 @@
 <script>
-    import "$lib/css/hover-card.css"
+    import "$lib/css/hover-card.css";
+    import { mdiMapMarker } from '@mdi/js'
+    import SvgIcon from "@jamescoyle/svelte-icon/src/svg-icon.svelte";
 
-    export let title=""
-    export let description=""
+    export let title = "";
+    export let localisation = "";
+    export let description = "";
+    export let picture;
 </script>
 
-<div class="hover-card-popup-container">
-    <h1>{title}</h1>
-    <p>{description}</p>
-</div>
\ No newline at end of file
+<div class="hover-card-popup-container flex">
+    <div class="hover-card-popup-text">
+        <h1>{title}</h1>
+        <div class="flex align-center">
+            <SvgIcon type="mdi" path={mdiMapMarker}></SvgIcon>
+            <span>{localisation}</span>
+        </div>
+        <p>{description}</p>
+    </div>
+    <div class="hover-card-popup-picture">
+        <img alt="hover-card-popup" src={picture} />
+    </div>
+</div>
diff --git a/src/lib/css/hover-card.css b/src/lib/css/hover-card.css
index 59bcf54..a9f59b7 100644
--- a/src/lib/css/hover-card.css
+++ b/src/lib/css/hover-card.css
@@ -72,7 +72,7 @@
 
 .hover-card-metadata {
     width: 100%;
-    height: 7rem;
+    height: 8rem;
     color: var(--color-background);
     opacity: 0;
 }
@@ -97,12 +97,10 @@
 
 .hover-card-metadata p {
     /* Animation */
-    opacity: 0;
     font-family: 'JetBrains Mono';
     font-weight: 400;
     font-style: italic;
     font-size: 0.8rem;
-    margin-left: 1rem;
     margin-right: 1rem;
     /* Overflow */
     overflow: hidden;
@@ -113,9 +111,52 @@
     line-clamp: 2;
 }
 
+.hover-card-metadata svg {
+    margin-left: 1rem;
+    margin-right: 0.5rem;
+}
+
 /* Pop-up Hover Card */
 
 .hover-card-popup-container {
+    width: 100%;
+    /* Idk why, but height is not calculated on the parent div, css being weird */
+    height: calc(100% - 32px - 1.2rem);
+}
+
+.hover-card-popup-text {
+    width: 30%;
+    margin: 1rem;
+    color: var(--color-text);
+}
+
+.hover-card-popup-text h1 {
+    font-family: "Gabarito";
+}
+
+.hover-card-popup-text svg {
+    margin-right: 0.6rem;
+}
+
+.hover-card-popup-text span {
+    font-family: "JetBrains Mono";
+    font-size: 1rem;
+    font-style: italic;
+}
+
+.hover-card-popup-text p {
+    font-family: "JetBrains Mono";
+    font-size: 1.1rem;
+    text-align: justify;
+}
+
+.hover-card-popup-picture {
+    width: 70%;
+    margin: 1rem;
+}
+
+.hover-card-popup-picture img {
     width: 100%;
     height: 100%;
+    object-fit: contain;
 }
\ No newline at end of file
diff --git a/src/lib/css/popup.css b/src/lib/css/popup.css
index e19f3a8..e41f2c1 100644
--- a/src/lib/css/popup.css
+++ b/src/lib/css/popup.css
@@ -18,8 +18,8 @@
     width: 80dvw;
     height: 80dvh;
     position: fixed;
-    left: 10dvw;
-    top: 10dvh;
+    left: calc(10dvw - 1.2rem);
+    top: calc(10dvh - 1.2rem);
     z-index: var(--z-index-on-popup);
     padding: 1.2rem;
     background-image: var(--background-dark);
diff --git a/src/lib/json/hub.json b/src/lib/json/hub.json
index 000ef15..d54c700 100644
--- a/src/lib/json/hub.json
+++ b/src/lib/json/hub.json
@@ -50,19 +50,26 @@
     },
     "photos": [
         {
+            "urlcompressed": "https://cloud.etheryo.fr/s/azb63ct3bGn84Da/download?path=&files=IMG20240728150532_compressed.jpg",
             "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728150532.jpg",
             "title": "Tarnished Peak (afterwar)",
-            "description": "Photo prise à Ben More, Écosse"
+            "localisation": "Ben More, Écosse",
+            "description": "L'appel à l'aventure était trop fort. Je ne voulais plus m'arrêter, mais comme à mon habitude, mon corps ne pouvait suivre mes pensées. Je me suis posé pendant plusieurs minutes devant cette falaise, me demandant ce qu'il y'avait derrière. Les nuages flottants et changeant de place à la vitesse du vent était un reflet de mes émotions qui changeaient."
         },
         {
+            "urlcompressed": "https://cloud.etheryo.fr/s/azb63ct3bGn84Da/download?path=&files=IMG20240728142327_compressed.jpg",
             "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg",
             "title": "Whitewashed",
-            "description": "Photo prise à Ben More, Écosse"
+            "localisation": "Ben More, Écosse",
+            "description": "Photo modifiée pour ajouter cet effet de brume lointaine. Le ciel était bien bleu mais les nuages cachaient cette lumière et laissait paraître une ambiance blanchâtre."
         },
         {
+            "urlcompressed": "https://cloud.etheryo.fr/s/azb63ct3bGn84Da/download?path=&files=Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu_compressed.jpg",
             "url": "https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg",
             "title": "Compagnons",
-            "description": "Photo prise au Lac d'Oô, France"
+            "localisation": "Lac d'Oô, France",
+            "description": "Lors de notre petit periple avec quelques camarades de l'INSA nous avons décidé de nous balader vers l'autre bout du lac. Cette photo est une prise de vue de loin par ma part de mes camarades, observant leurs divers déplacements devant le coucher du soleil."
+        
         }
     ]
 }
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ffa833d..1ed995a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -71,8 +71,10 @@
 	<div class="flex w-100 justify-center">
 		{#each hubjson.photos as photo}
 			<HoverCard
-				picture={photo.url}
+				picture={photo.urlcompressed}
+				picturefull={photo.url}
 				title={photo.title}
+				localisation={photo.localisation}
 				description={photo.description}
 			/>
 		{/each}