Frontend: Updated Some CSS for tooltips visibility. changed how popup.js works. showPopup now asks for a project id. Pill now can show the popup.

frontend/src/lib/components/pill.svelte

@@ -1,8 +1,9 @@
 <script>
   import SvgIcon from "@jamescoyle/svelte-icon";
   import "$lib/css/pill.css";
-  import { mdiHelp } from "@mdi/js";
+  import { mdiHelp, mdiPlus } from "@mdi/js";
   import { shouldColorBeWhite } from "$lib/js/color.js";
+  import { showPopup } from "$lib/js/popup.js";
 
   export let name = "Unknown";
   export let icon = mdiHelp;
@@ -32,15 +33,10 @@
       pill_arrow.style.visibility = "visible";
       // adjusting top
       pill_tooltip.style.top = `${
-        main_pill.offsetTop - pill_tooltip.offsetHeight - 17
+        main_pill.offsetTop - pill_tooltip.offsetHeight - 16
       }px`;
-      if (white) {
-        pill_tooltip.style.boxShadow = `0px 8px 18px -1px ${color}60`;
-        pill_arrow.style.filter = `drop-shadow(0px 8px 18px ${color}40)`;
-      } else {
-        pill_tooltip.style.boxShadow = `0px 8px 18px -1px #261C2C30`;
-        pill_arrow.style.filter = `drop-shadow(0px 8px 18px #261C2C20)`;
-      }
+      pill_tooltip.style.boxShadow = `0px 8px 18px -1px #261C2C30`;
+      pill_arrow.style.filter = `drop-shadow(0px 8px 18px #261C2C20)`;
     } else {
       pill_tooltip.style.visibility = "hidden";
       pill_arrow.style.visibility = "hidden";
@@ -62,7 +58,16 @@
     <div class="pill-arrow" bind:this={pill_arrow} />
     <div class="pill-tooltip" bind:this={pill_tooltip}>
       {#each tooltip_data as td}
-        <p>{td.title}</p>
+        <div>
+          <p>{td.title}</p>
+          <div class="pill-last">
+            <button
+              class="pill-view"
+              on:click={() => showPopup(true, td.project_id)}
+              ><SvgIcon size="20" path={mdiPlus} type="mdi" /></button
+            >
+          </div>
+        </div>
       {/each}
     </div>
   {/if}

frontend/src/lib/components/projects-popup.svelte

@@ -4,7 +4,7 @@
   import "$lib/css/project-popup.css";
   import "$lib/css/slide.css";
   import Pill from "$lib/components/pill.svelte";
-  import { showPopup, popupDatas } from "$lib/js/popup.js";
+  import { showPopup, actualData } from "$lib/js/popup.js";
   import SvgIcon from "@jamescoyle/svelte-icon";
   import {
     mdiClose,
@@ -21,7 +21,7 @@
   } from "@mdi/js";
 
   // Variables
-  const unsubscribe = popupDatas.subscribe(popupShowed);
+  const unsubscribe = actualData.subscribe(popupShowed);
   let popupMain;
   let active = false;
 

frontend/src/lib/components/projects.svelte

@@ -4,7 +4,7 @@
   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";
+  import { showPopup, popupDatas } from "$lib/js/popup.js";
 
   export let active = false;
   export let data;
@@ -16,17 +16,23 @@
     formatMonth(data.date_done).slice(1);
   const project_type = data.type_project;
   let picture;
-  const popDataObject = {
-    id: data.id,
-    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;
+
+    popupDatas.update((value) => {
+      const newData = {
+        id: data.id,
+        title: data.title,
+        date: issued_date,
+        type_project: data.type_project,
+        description: data.description,
+        picture_name: data.picture_name,
+      };
+
+      value.push(newData);
+      return value;
+    });
   });
 </script>
 
@@ -62,10 +68,7 @@
         </p>
       </div>
       <div class="slide-button-container">
-        <button
-          class="slide-button"
-          on:click={() => showPopup(true, popDataObject)}
-        >
+        <button class="slide-button" on:click={() => showPopup(true, data.id)}>
           <SvgIcon size="20" path={mdiPlus} type="mdi" />
           More</button
         >

frontend/src/lib/css/cv.css

@@ -8,10 +8,9 @@
 {
     .sidebar {
         position: absolute;
-        width: 16rem;
+        width: 15rem;
         height: 75rem;
         background-color: var(--color-special);
-        z-index: 2;
         transition: all 0s ease 0s;
     }
 
@@ -20,19 +19,12 @@
         flex-basis: 20rem;
         box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
         background-color: var(--color-special);
-        z-index: 1;
     }
 }
 
 @media screen and (max-width: 1200px)
 {
     .sidebar {
-        position: absolute;
-        width: 16rem;
-        height: 75rem;
-        background-color: var(--color-special);
-        z-index: 2;
-        transition: all 0s ease 0s;
         visibility: hidden;
     }
 }

frontend/src/lib/css/pill.css

@@ -38,6 +38,10 @@
     margin-right: 0.5rem;
 }
 
+.pill-container p {
+    margin-right: 0.5rem;
+}
+
 .pill-tooltip {
     position: absolute;
     z-index: 1;
@@ -56,6 +60,49 @@
     padding-right: 1rem;
 }
 
+.pill-tooltip>div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.pill-tooltip svg {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.pill-last {
+    margin-left: auto;
+}
+
+.pill-view {
+    width: 2.2rem;
+    height: 2.2rem;
+    background-color: var(--color-special);
+    box-shadow: 0px 8px 18px -1px #0174BE50;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--color-background);
+    border: 0;
+    cursor: grab;
+    margin: 0 !important;
+    padding: 0 !important;
+    transition: none;
+}
+
+.pill-view:hover {
+    transition: all .3s ease 0s;
+    color: var(--color-special);
+    background-color: var(--color-background);
+}
+
+.pill-view:active {
+    transform: translateY(3px);
+    box-shadow: 0px 4px 12px -1px #0174BE70;
+}
+
 .pill-arrow {
     position: absolute;
     z-index: 2;

frontend/src/lib/js/popup.js

@@ -1,6 +1,6 @@
 import {writable} from 'svelte/store';
 
-export function showPopup(show, popupObject) {
+export function showPopup(show, projectId) {
   const background = document.getElementById('project-popup-background');
   const mainPopup = document.getElementById('project-popup-main');
   const body = document.getElementsByTagName('body');
@@ -14,11 +14,22 @@ export function showPopup(show, popupObject) {
     background.style.visibility = 'hidden';
     mainPopup.style.visibility = 'hidden';
   }
-  if (popupObject != null) {
-    popupDatas.update(() => {
-      return popupObject;
+  if (projectId != null) {
+    actualData.update(() => {
+      let popup;
+      const unsubscribe = popupDatas.subscribe(value => {
+        popup = value;
+      });
+      for (const p of popup) {
+        if (p.id == projectId) {
+          unsubscribe();
+          return p;
+        }
+      }
+      unsubscribe();
     });
   }
 }
 
-export let popupDatas = writable(0);
+export let popupDatas = writable([]);
+export let actualData = writable(0);

frontend/src/routes/+page.js

@@ -22,7 +22,7 @@ export async function load(context) {
   const project_programming = [];
   const dataToGather =
       ['info', 'education', 'experience', 'skills/1', 'tags/1'];
-  for (const [index, url] of dataToGather.entries()) {
+  for (const url of dataToGather) {
     const res = await fetchData(url);
     if (res.status == 0) {
       // Pushing data