From 5e9a8399fb29d3792d5ffdc6e599b855e895ae84 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Sat, 27 Jan 2024 23:24:43 +0100
Subject: [PATCH] Frontend: Added projects-popup component, added showPopup(),
 added popup writeable, added multiple slide sizes, adjusted z-indexes.

---
 .../src/lib/components/projects-popup.svelte  |  81 +++++++++++++
 frontend/src/lib/components/projects.svelte   | 114 ++++++++++--------
 frontend/src/lib/css/cv.css                   |   2 -
 frontend/src/lib/css/project-popup.css        |  84 +++++++++++++
 frontend/src/lib/css/slide.css                |   6 +-
 frontend/src/lib/css/slideshow.css            |   4 +-
 frontend/src/lib/js/popup.js                  |  24 ++++
 frontend/src/routes/+page.svelte              |   2 +
 8 files changed, 264 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/lib/components/projects-popup.svelte
 create mode 100644 frontend/src/lib/css/project-popup.css
 create mode 100644 frontend/src/lib/js/popup.js

diff --git a/frontend/src/lib/components/projects-popup.svelte b/frontend/src/lib/components/projects-popup.svelte
new file mode 100644
index 0000000..57d3c26
--- /dev/null
+++ b/frontend/src/lib/components/projects-popup.svelte
@@ -0,0 +1,81 @@
+<script>
+  import { onDestroy } from "svelte";
+
+  import "$lib/css/project-popup.css";
+  import "$lib/css/slide.css";
+  import { showPopup, popupDatas } from "$lib/js/popup.js";
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import {
+    mdiClose,
+    mdiSchool,
+    mdiAccount,
+    mdiCalendarRange,
+    mdiTextBox,
+  } from "@mdi/js";
+
+  const unsubscribe = popupDatas.subscribe(popupShowed);
+  let title = "Title";
+  let date = "Date";
+  let type_project = "Type of project";
+  let picture;
+  let description = "Description";
+
+  async function popupShowed(data) {
+    /**
+     * Checking if when this function is called data is not equal to 0.
+     * It could call the next lines which involve modifying undeclared data
+     * or using import statements that cannot be fullfilled because the document
+     * is not yet loaded.
+     */
+    if (data != 0) {
+      const superData = data;
+      title = superData.title;
+      date = data.date;
+      type_project = data.type_project;
+      picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
+      description = data.description;
+    }
+  }
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+<div id="project-popup-main">
+  <!--Closing button-->
+  <button class="project-popup-close" on:click={() => showPopup(false, null)}>
+    <SvgIcon size="25" path={mdiClose} type="mdi" />
+  </button>
+
+  <div class="project-popup-container">
+    <!-- Information -->
+    <div class="project-popup-info-container">
+      <h1 class="slide-title">{title}</h1>
+      <div class="project-popup-img-container">
+        <img class="project-popup-img" src={picture} alt="Project Popup" />
+      </div>
+      <div class="slide-subtitle-container">
+        <SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
+        <p class="slide-subtitle slide-aftericon">{date}</p>
+      </div>
+      <div class="slide-subtitle-container">
+        <SvgIcon
+          size="35"
+          path={type_project == "School" ? mdiSchool : mdiAccount}
+          type="mdi"
+        />
+        <p class="slide-subtitle slide-aftericon">{type_project}</p>
+      </div>
+    </div>
+    <!-- Text -->
+    <div class="project-popup-text-container">
+      <div class="slide-subtitle-container">
+        <SvgIcon size="35" path={mdiTextBox} type="mdi" />
+        <p class="slide-subtitle slide-aftericon">Description</p>
+      </div>
+      <p class="slide-subtitle project-popup-text">{description}</p>
+    </div>
+  </div>
+</div>
+<div id="project-popup-background"></div>
diff --git a/frontend/src/lib/components/projects.svelte b/frontend/src/lib/components/projects.svelte
index b8ab1f7..e94d3d8 100644
--- a/frontend/src/lib/components/projects.svelte
+++ b/frontend/src/lib/components/projects.svelte
@@ -1,56 +1,74 @@
 <script>
-    import { onMount } from "svelte";
-    import SvgIcon from "@jamescoyle/svelte-icon";
-    import { mdiCalendarRange, mdiPlus, mdiAccount, mdiSchool } from "@mdi/js";
-    import "$lib/css/slide.css";
-    import { formatMonth } from "$lib/js/date.js";
+  import { onMount } from "svelte";
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import { mdiCalendarRange, mdiPlus, mdiAccount, mdiSchool } from "@mdi/js";
+  import "$lib/css/slide.css";
+  import { formatMonth } from "$lib/js/date.js";
+  import { showPopup } from "$lib/js/popup.js";
 
-    export let active = false;
-    export let data;
+  export let active = false;
+  export let data;
 
-    const title = data.title;
-    const description = data.description;
-    const issued_date = formatMonth(data.date_done).charAt(0).toUpperCase()+formatMonth(data.date_done).slice(1);
-    const project_type = data.type_project;
-    let picture;
-    onMount(async () => {
-        picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
-    });
+  const title = data.title;
+  const description = data.description;
+  const issued_date =
+    formatMonth(data.date_done).charAt(0).toUpperCase() +
+    formatMonth(data.date_done).slice(1);
+  const project_type = data.type_project;
+  let picture;
+  const popDataObject = {
+    title: data.title,
+    date: issued_date,
+    type_project: data.type_project,
+    description: data.description,
+    picture_name: data.picture_name,
+  };
+
+  onMount(async () => {
+    picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
+  });
 </script>
 
 <div class="slide-container">
-    <div class="slide-main {active ? '' : 'slide-unactive'}">
-        <div class="slide-img-container">
-            <img class="slide-img" src={picture} alt="Projects" />
-        </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="Projects" />
-            </div>
-            <div class="slide-subtitle-container">
-                <SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
-                <p class="slide-subtitle slide-aftericon">
-                    {issued_date}
-                </p>
-            </div>
-            <div class="slide-subtitle-container">
-                <SvgIcon size="35" path={project_type == "School" ? mdiSchool : mdiAccount} type="mdi" />
-                <p class="slide-subtitle slide-aftericon">
-                    {project_type}
-                </p>
-            </div>
-            <div class="slide-subtitle-container">
-                <p class="slide-subtitle slide-text slide-overflow slide-justify">
-                    {description}
-                </p>
-            </div>
-            <div class="slide-button-container">
-                <button class="slide-button">
-                    <SvgIcon size="20" path={mdiPlus} type="mdi" />
-                    More</button
-                >
-            </div>
-        </div>
+  <div class="slide-more slide-main {active ? '' : 'slide-unactive'}">
+    <div class="slide-img-container">
+      <img class="slide-img" src={picture} alt="Projects" />
     </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="Projects" />
+      </div>
+      <div class="slide-subtitle-container">
+        <SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
+        <p class="slide-subtitle slide-aftericon">
+          {issued_date}
+        </p>
+      </div>
+      <div class="slide-subtitle-container">
+        <SvgIcon
+          size="35"
+          path={project_type == "School" ? mdiSchool : mdiAccount}
+          type="mdi"
+        />
+        <p class="slide-subtitle slide-aftericon">
+          {project_type}
+        </p>
+      </div>
+      <div class="slide-subtitle-container">
+        <p class="slide-subtitle slide-text slide-overflow slide-justify">
+          {description}
+        </p>
+      </div>
+      <div class="slide-button-container">
+        <button
+          class="slide-button"
+          on:click={() => showPopup(true, popDataObject)}
+        >
+          <SvgIcon size="20" path={mdiPlus} type="mdi" />
+          More</button
+        >
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index ee5fd01..fcbfd5a 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -67,7 +67,6 @@
         display: flex;
         height: 15rem;
         background-color: var(--color-text);
-        z-index: 3;
         justify-content: center;
         align-items: center;
         flex-direction: column;
@@ -111,7 +110,6 @@
         display: flex;
         height: 20rem;
         background-color: var(--color-text);
-        z-index: 3;
         justify-content: center;
         align-items: center;
         flex-direction: column;
diff --git a/frontend/src/lib/css/project-popup.css b/frontend/src/lib/css/project-popup.css
new file mode 100644
index 0000000..f09107f
--- /dev/null
+++ b/frontend/src/lib/css/project-popup.css
@@ -0,0 +1,84 @@
+#project-popup-main {
+    height: 80dvh;
+    top: calc(10vh - 1.5rem);
+    /* 100-height/2 */
+    width: 50dvw;
+    left: calc(25vw - 1.5rem);
+    /* 100-width/2 */
+    border-radius: 0.4rem;
+    box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
+    position: fixed;
+    background-color: var(--color-background);
+    z-index: 5;
+    padding: 1.5rem;
+    visibility: hidden;
+}
+
+#project-popup-background {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(1.5rem);
+    z-index: 4;
+    visibility: hidden;
+}
+
+.project-popup-close {
+    min-width: 2.2rem;
+    min-height: 2.2rem;
+    background-color: var(--color-background);
+    color: var(--color-text);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 0;
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+}
+
+.project-popup-close:hover {
+    background-color: var(--color-special);
+    color: var(--color-background);
+    box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
+}
+
+.project-popup-close:active {
+    background-color: var(--color-special);
+    color: var(--color-background);
+    box-shadow: 0px 3px 3px -1px rgba(0, 0, 0, 0.2);
+    transform: translateY(2px);
+}
+
+.project-popup-img-container {
+    display: flex;
+    justify-content: center;
+    height: 17.25rem;
+}
+
+.project-popup-img {
+    max-width: 20dvw;
+    /* Because the width of the popup is 50dvw and the picture has to take maximum half of the popup*/
+    max-height: 100%;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    object-fit: cover;
+}
+
+.project-popup-container {
+    display: flex;
+    flex-direction: row;
+}
+
+/* style for child of container */
+.project-popup-container>div {
+    width: 50%;
+    margin: 0.5rem;
+}
+
+.project-popup-text {
+    font-size: 1rem !important;
+    text-align: justify;
+}
\ No newline at end of file
diff --git a/frontend/src/lib/css/slide.css b/frontend/src/lib/css/slide.css
index e7444e4..8233d3e 100644
--- a/frontend/src/lib/css/slide.css
+++ b/frontend/src/lib/css/slide.css
@@ -93,13 +93,17 @@
         border-radius: 0.4rem;
         box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
         background-color: var(--color-background);
-        min-height: 35rem;
+        min-height: 30rem;
         width: 90dvw;
         margin-left: 5dvw;
         z-index: 1;
         transition: all .3s ease 0s;
     }
 
+    .slide-more {
+        min-height: 37rem !important;
+    }
+
     .slide-img-mobile-container {
         display: flex;
         justify-content: center;
diff --git a/frontend/src/lib/css/slideshow.css b/frontend/src/lib/css/slideshow.css
index 9110e3a..bb96747 100644
--- a/frontend/src/lib/css/slideshow.css
+++ b/frontend/src/lib/css/slideshow.css
@@ -8,7 +8,7 @@
 @media screen and (min-width: 1000px)
 {
     .slideshow_btn {
-        z-index: 5;
+        z-index: 3;
         position: absolute;
         right: 0;
         margin-right: 2.5rem;
@@ -29,7 +29,7 @@
 @media screen and (max-width: 1000px)
 {
     .slideshow_btn {
-        z-index: 5;
+        z-index: 3;
         position: absolute;
         right: 0;
         margin-right: 1rem;
diff --git a/frontend/src/lib/js/popup.js b/frontend/src/lib/js/popup.js
new file mode 100644
index 0000000..8bc2cd5
--- /dev/null
+++ b/frontend/src/lib/js/popup.js
@@ -0,0 +1,24 @@
+import {writable} from 'svelte/store';
+
+export function showPopup(show, popupObject) {
+  const background = document.getElementById('project-popup-background');
+  const mainPopup = document.getElementById('project-popup-main');
+  const body = document.getElementsByTagName('body');
+
+  if (show === true) {
+    body[0].style.overflow = 'hidden';
+    background.style.visibility = 'visible';
+    mainPopup.style.visibility = 'visible';
+  } else {
+    body[0].style.overflow = '';
+    background.style.visibility = 'hidden';
+    mainPopup.style.visibility = 'hidden';
+  }
+  if (popupObject != null) {
+    popupDatas.update(() => {
+      return popupObject;
+    });
+  }
+}
+
+export let popupDatas = writable(0);
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 935b929..0625974 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -29,6 +29,7 @@
 	import SlideShow from "$lib/components/slideshow.svelte";
 	import Pill from "$lib/components/pill.svelte"
 	import FlagComponent from "$lib/components/flag-component.svelte"
+	import ProjectsPopup from "$lib/components/projects-popup.svelte"
 	import { mdiSchool, mdiBriefcase, mdiWrench, mdiPencil } from "@mdi/js";
 	import { onMount } from "svelte";
 
@@ -75,6 +76,7 @@
 <svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
 
 {#if data.status == 0}
+	<ProjectsPopup/>
 	<div class="container-cv">
 		<!-- SIDEBAR DIV (LEFT) -->
 		<div class="sidebar" bind:this={sidebar}>