HoverCard: Added localisation, compressed image url, hover card description. Finished popup implementation.

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>
@@ -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>

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"

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 title = "";
-    export let description=""
+    export let localisation = "";
+    export let description = "";
+    export let picture;
 </script>
 
-<div class="hover-card-popup-container">
+<div class="hover-card-popup-container flex">
-    <h1>{title}</h1>
+    <div class="hover-card-popup-text">
-    <p>{description}</p>
+        <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>

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%;
-    height: 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;
 }

src/lib/css/popup.css

@@ -18,8 +18,8 @@
     width: 80dvw;
     height: 80dvh;
     position: fixed;
-    left: 10dvw;
+    left: calc(10dvw - 1.2rem);
-    top: 10dvh;
+    top: calc(10dvh - 1.2rem);
     z-index: var(--z-index-on-popup);
     padding: 1.2rem;
     background-image: var(--background-dark);

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."
+        
         }
     ]
 }

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}