From 524bb88a4cff822d86668c19360739afef327934 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Thu, 25 Jan 2024 22:51:18 +0100
Subject: [PATCH] Frontend: Some tweaks for the containers of the slides,
 mainly pictures focused. Added formatDateMobile().

---
 frontend/src/lib/components/education.svelte  |  95 ++++++++-------
 frontend/src/lib/components/experience.svelte | 115 ++++++++++--------
 frontend/src/lib/components/projects.svelte   |   2 +-
 frontend/src/lib/css/slide.css                |  58 ++++-----
 frontend/src/lib/js/date.js                   |   7 ++
 5 files changed, 145 insertions(+), 132 deletions(-)

diff --git a/frontend/src/lib/components/education.svelte b/frontend/src/lib/components/education.svelte
index 8c1edc3..68452c4 100644
--- a/frontend/src/lib/components/education.svelte
+++ b/frontend/src/lib/components/education.svelte
@@ -1,54 +1,59 @@
 <script>
-    import SvgIcon from "@jamescoyle/svelte-icon";
-    import { mdiMapMarker, mdiCog } from "@mdi/js";
-    import "$lib/css/slide.css";
-    import { formatYear } from "$lib/js/date.js"
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import { mdiMapMarker, mdiCog } from "@mdi/js";
+  import "$lib/css/slide.css";
+  import { formatYear } from "$lib/js/date.js";
 
-    export let active = false;
-    export let data;
+  export let active = false;
+  export let data;
 
-    const title = data.school;
-    const location = data.school_location;
-    const speciality = data.speciality;
-    const option = data.school_options;
-    const picture = data.picture_url;
-    const end_year = data.end_year === null ? '' : formatYear(data.end_year);
-    const start_year = data.start_year === null ? '' : (data.end_year === null ? formatYear(data.start_year) : '-'+formatYear(data.start_year));
+  const title = data.school;
+  const location = data.school_location;
+  const speciality = data.speciality;
+  const option = data.school_options;
+  const picture = data.picture_url;
+  const end_year = data.end_year === null ? "" : formatYear(data.end_year);
+  const start_year =
+    data.start_year === null
+      ? ""
+      : data.end_year === null
+        ? formatYear(data.start_year)
+        : "-" + formatYear(data.start_year);
 </script>
 
 <div class="slide-container">
-    <div class="slide-main {active ? '' : 'slide-unactive'}">
-        <div class="slide-img-container">
-            <img class="slide-img" src={picture} alt="Education" />
-        </div>
-        <div class="slide-text-container">
-            <h1 class="slide-title">{title}</h1>
-            <div class="slide-img-mobile-container">
-                <img class="slide-img-mobile" src={picture} alt="Education" />
-            </div>
-            {#if location}
-                <div class="slide-subtitle-container">
-                    <SvgIcon size="35" path={mdiMapMarker} type="mdi" />
-                    <p class="slide-subtitle slide-aftericon">
-                        {location}
-                    </p>
-                </div>
-            {/if}
-            {#if speciality}
-                <div class="slide-subtitle-container">
-                    <SvgIcon size="35" path={mdiCog} type="mdi" />
-                    <p class="slide-subtitle slide-aftericon">
-                        {speciality}
-                    </p>
-                </div>
-            {/if}
-            {#if option}
-                <p class="slide-subtitle">{option}</p>
-            {/if}
-        </div>
+  <div class="slide-main {active ? '' : 'slide-unactive'}">
+    <div class="slide-img-container">
+      <img class="slide-img" src={picture} alt="Education" />
     </div>
-    <div class="slide-time">
-        <div class="slide-bubble" />
-        <h2 class="slide-date">{`${end_year}${start_year}`}</h2>
+    <div class="slide-text-container">
+      <h1 class="slide-title">{title}</h1>
+      <div class="slide-img-mobile-container">
+        <img class="slide-img-mobile" src={picture} alt="Education" />
+      </div>
+      {#if location}
+        <div class="slide-subtitle-container">
+          <SvgIcon size="35" path={mdiMapMarker} type="mdi" />
+          <p class="slide-subtitle slide-aftericon">
+            {location}
+          </p>
+        </div>
+      {/if}
+      {#if speciality}
+        <div class="slide-subtitle-container">
+          <SvgIcon size="35" path={mdiCog} type="mdi" />
+          <p class="slide-subtitle slide-aftericon">
+            {speciality}
+          </p>
+        </div>
+      {/if}
+      {#if option}
+        <p class="slide-subtitle">{option}</p>
+      {/if}
     </div>
+  </div>
+  <div class="slide-time">
+    <div class="slide-bubble" />
+    <h2 class="slide-date">{`${end_year}${start_year}`}</h2>
+  </div>
 </div>
diff --git a/frontend/src/lib/components/experience.svelte b/frontend/src/lib/components/experience.svelte
index d1adf5c..e0c46da 100644
--- a/frontend/src/lib/components/experience.svelte
+++ b/frontend/src/lib/components/experience.svelte
@@ -1,61 +1,74 @@
 <script>
-    import SvgIcon from "@jamescoyle/svelte-icon";
-    import { mdiMapMarker, mdiOfficeBuilding } from "@mdi/js";
-    import "$lib/css/slide.css";
-    import { formatDate } from "$lib/js/date.js";
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import { mdiMapMarker, mdiOfficeBuilding } from "@mdi/js";
+  import "$lib/css/slide.css";
+  import { formatDate,formatDateMobile } from "$lib/js/date.js";
 
-    export let active = false;
-    export let data;
+  export let active = false;
+  export let data;
 
-    const enterprise = data.enterprise;
-    const location = data.enterprise_location;
-    const description = data.job_description;
-    const position = data.job_position;
-    const end_year = data.end_year === null ? "" : formatDate(data.end_year);
-    const start_year =
-        data.start_year === null
-            ? ""
-            : data.end_year === null
-            ? formatDate(data.start_year)
-            : " - " + formatDate(data.start_year);
+  const enterprise = data.enterprise;
+  const location = data.enterprise_location;
+  const description = data.job_description;
+  const position = data.job_position;
+  const end_year = data.end_year === null ? "" : formatDate(data.end_year);
+  const start_year =
+    data.start_year === null
+      ? ""
+      : data.end_year === null
+        ? formatDate(data.start_year)
+        : " - " + formatDate(data.start_year);
+  const mobile_end_year =
+    data.end_year === null ? "" : formatDateMobile(data.end_year);
+  const mobile_start_year =
+    data.start_year === null
+      ? ""
+      : data.end_year === null
+        ? formatDateMobile(data.start_year)
+        : "-" + formatDateMobile(data.start_year);
     const picture = data.picture_url;
+
+  // mobile version
+  let windowWidth = 0;
 </script>
 
+<svelte:window bind:innerWidth={windowWidth} />
+
 <div class="slide-container">
-    <div class="slide-main {active ? '' : 'slide-unactive'}">
-        <div class="slide-img-container">
-            <img class="slide-img" src={picture} alt="Experience" />
-        </div>
-        <div class="slide-text-container">
-            <h1 class="slide-title">{position}</h1>
-            <div class="slide-img-mobile-container">
-                <img class="slide-img-mobile" src={picture} alt="Experience" />
-            </div>
-            <div class="slide-subtitle-container">
-                <SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
-                <p class="slide-subtitle slide-aftericon">
-                    {enterprise}
-                </p>
-            </div>
-            {#if location}
-                <div class="slide-subtitle-container">
-                    <SvgIcon size="35" path={mdiMapMarker} type="mdi" />
-                    <p class="slide-subtitle slide-aftericon">
-                        {location}
-                    </p>
-                </div>
-            {/if}
-            {#if description}
-                <div class="slide-subtitle-container">
-                    <p class="slide-subtitle">
-                        {description}
-                    </p>
-                </div>
-            {/if}
-        </div>
+  <div class="slide-main {active ? '' : 'slide-unactive'}">
+    <div class="slide-img-container">
+      <img class="slide-img" src={picture} alt="Experience" />
     </div>
-    <div class="slide-time">
-        <div class="slide-bubble" />
-        <h2 class="slide-date">{`${end_year}${start_year}`}</h2>
+    <div class="slide-text-container">
+      <h1 class="slide-title">{position}</h1>
+      <div class="slide-img-mobile-container">
+        <img class="slide-img-mobile" src={picture} alt="Experience" />
+      </div>
+      <div class="slide-subtitle-container">
+        <SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
+        <p class="slide-subtitle slide-aftericon">
+          {enterprise}
+        </p>
+      </div>
+      {#if location}
+        <div class="slide-subtitle-container">
+          <SvgIcon size="35" path={mdiMapMarker} type="mdi" />
+          <p class="slide-subtitle slide-aftericon">
+            {location}
+          </p>
+        </div>
+      {/if}
+      {#if description}
+        <div class="slide-subtitle-container">
+          <p class="slide-subtitle">
+            {description}
+          </p>
+        </div>
+      {/if}
     </div>
+  </div>
+  <div class="slide-time">
+    <div class="slide-bubble" />
+    <h2 class="slide-date">{`${windowWidth > 1000 ? end_year : mobile_end_year}${windowWidth > 1000 ? start_year : mobile_start_year}`}</h2>
+  </div>
 </div>
diff --git a/frontend/src/lib/components/projects.svelte b/frontend/src/lib/components/projects.svelte
index 7d8949c..b8ab1f7 100644
--- a/frontend/src/lib/components/projects.svelte
+++ b/frontend/src/lib/components/projects.svelte
@@ -41,7 +41,7 @@
                 </p>
             </div>
             <div class="slide-subtitle-container">
-                <p class="slide-subtitle slide-text slide-overflow slide-o2 slide-justify">
+                <p class="slide-subtitle slide-text slide-overflow slide-justify">
                     {description}
                 </p>
             </div>
diff --git a/frontend/src/lib/css/slide.css b/frontend/src/lib/css/slide.css
index d619816..3cb047a 100644
--- a/frontend/src/lib/css/slide.css
+++ b/frontend/src/lib/css/slide.css
@@ -73,6 +73,11 @@
         display: flex;
         justify-content: flex-end;
     }
+
+    /* Add it to any text that may overflow. (long texts)*/
+    .slide-text {
+        font-size: 1.25rem !important;
+    }
 }
 
 @media screen and (max-width: 1000px)
@@ -88,7 +93,7 @@
         border-radius: 0.4rem;
         box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
         background-color: var(--color-background);
-        height: 70dvh;
+        height: 60dvh;
         width: 90dvw;
         margin-left: 5dvw;
         z-index: 1;
@@ -98,13 +103,15 @@
     .slide-img-mobile-container {
         display: flex;
         justify-content: center;
+        height: 30dvh;
     }
 
     .slide-img-mobile {
         max-width: 76dvw;
-        max-height: 30dvh;
+        max-height: 100%;
         margin-top: 1.5rem;
         margin-bottom: 1.5rem;
+        object-fit: cover;
     }
 
     .slide-img-container{
@@ -117,7 +124,7 @@
         color: var(--color-text);
         font-family: 'Gabarito', sans-serif;
         font-weight: 600;
-        font-size: 2rem;
+        font-size: 3vmax;
         margin-bottom: 0;
     }
 
@@ -126,7 +133,7 @@
         color: var(--color-text);
         font-family: 'Gabarito', sans-serif;
         font-weight: 500;
-        font-size: 1.25rem;
+        font-size: 1.75vmax;
         margin-top: 0.5rem;
         margin-bottom: 0.5rem;
         width: 100%;
@@ -149,6 +156,18 @@
         right: 0;
         position: absolute;
     }
+
+    .slide-text {
+        font-size: 1.5vmax;
+    }
+}
+
+.slide-overflow {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
 }
 
 .slide-subtitle-container {
@@ -166,37 +185,6 @@
     text-align: justify;
     text-justify:auto;
 }
-/* Add it to any text that may overflow. (long texts)*/
-.slide-text {
-    font-size: 1.25rem !important;
-}
-
-.slide-overflow {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-}
-
-.slide-o1 {
-    -webkit-line-clamp: 1;
-}
-
-.slide-o2 {
-    -webkit-line-clamp: 2;
-}
-
-.slide-o3 {
-    -webkit-line-clamp: 3;
-}
-
-.slide-o4 {
-    -webkit-line-clamp: 4;
-}
-
-.slide-o5 {
-    -webkit-line-clamp: 5;
-}
 
 /* Every button are centered to the right side of the component */
 .slide-button {
diff --git a/frontend/src/lib/js/date.js b/frontend/src/lib/js/date.js
index 0488574..d72aa5b 100644
--- a/frontend/src/lib/js/date.js
+++ b/frontend/src/lib/js/date.js
@@ -5,6 +5,13 @@ export function formatDate(date) {
     return formattedDate;
 }
 
+export function formatDateMobile(date) {
+    const options = { month: 'numeric', year: 'numeric' };
+    const cool_date = new Date(date);
+    const formattedDate = cool_date.toLocaleString('fr-FR', options);
+    return formattedDate;
+}
+
 export function formatMonth(date) {
     const options = { month: 'long', year: 'numeric' };
     const cool_date = new Date(date);