Frontend: Added updateTimeLine() which reset the position of the slidestring array each time a resizing occurs. Updated CSS so that the sidebar is not shown if in mobile mode.

frontend/src/lib/components/slideshow.svelte

@@ -5,6 +5,7 @@
   import { onMount } from "svelte";
   import {
     createTimeLine,
+    updateTimeLine,
     slideContainerCount,
     slideTimelineCount,
     slideStringCount,
@@ -19,13 +20,16 @@
     data = data.reverse();
   }
 
-    // Slideshow global variables
+  // Resizing variables
+  let resizing = false;
 
+  // Slideshow global variables
   let slideshow_index = 0;
   let slideshow_hidden = [];
 
   let slideshowTimeline;
   let slideshowElements;
+  let slideshowBubbles;
 
   // Timeline global variables
   let slideshow;
@@ -36,7 +40,7 @@
     const currentSlideCount = $slideContainerCount;
     // Sliced array from currentSlideCount to data.length
     slideshowElements = Array.from(
-            document.querySelectorAll(".slide-container")
+      document.querySelectorAll(".slide-container"),
     ).slice(currentSlideCount, currentSlideCount + data.length);
     // Updating with the current length
     slideContainerCount.update((value) => {
@@ -48,8 +52,8 @@
       //global writer count
       const currentTimelineCount = $slideTimelineCount;
       // Creating the string between the bubbles
-            const slideshowBubbles = Array.from(
-                document.querySelectorAll(".slide-bubble")
+      slideshowBubbles = Array.from(
+        document.querySelectorAll(".slide-bubble"),
       ).slice(currentTimelineCount, currentTimelineCount + data.length);
 
       // Creating strings
@@ -59,40 +63,15 @@
           top: element.offsetTop,
         });
       }
-            const stringTimelineElements = createTimeLine(bubbles);
-            for (const div of stringTimelineElements) {
-                slideshow.appendChild(div);
-            }
-            // Updating with the current length
-            slideTimelineCount.update((value) => {
-                return value + data.length;
-            });
-            //global writer count
-            const currentStringCount = $slideStringCount;
-            // Sliced array from currentTimelineCount to data.length
-            slideshowTimeline = Array.from(
-                document.querySelectorAll(".slide-string")
-            ).slice(
-                currentStringCount,
-                currentStringCount + stringTimelineElements.length
-            );
-            // Updating with the current length
-            slideStringCount.update((value) => {
-                return value + stringTimelineElements.length;
-            });
+
+      createTimelineStrings();
     }
   });
 
   function slideCards() {
     // Set or reset slideshow index, hidden array and timeling.
     if (slideshow_index >= data.length - 1) {
-            slideshow_hidden = [];
-            slideshow_index = 0;
-            if (timeline) {
-                for (const timeline of slideshowTimeline) {
-                    timeline.style.backgroundColor = "";
-                }
-            }
+      resetSlideCards();
     } else {
       slideshow_hidden.push(slideshow_index);
       slideshow_index++;
@@ -105,7 +84,6 @@
     }
 
     // Translating elements
-        console.log(slideshowTimeline)
     slideshowElements.forEach((element, id) => {
       /* Slideshow translating*/
       let newtransformValue = transformValue;
@@ -115,12 +93,11 @@
       }
       element.style.transform = `translateX(-${newtransformValue}px)`;
 
-            /* Slideshow Timeline trnaslating */
+      /* Slideshow Timeline translating */
       if (timeline) {
         if (slideshowTimeline[id] != undefined) {
-                    slideshowTimeline[
-                        id
-                    ].style.transform = `translateX(-${transformValue}px)`;
+          slideshowTimeline[id].style.transform =
+            `translateX(-${transformValue}px)`;
           if (slideshow_hidden.includes(id)) {
             slideshowTimeline[id].style.backgroundColor =
               "var(--color-background)";
@@ -129,8 +106,68 @@
       }
     });
   }
+
+  function resetSlideCards() {
+    return new Promise((resolve) => {
+      slideshow_hidden = [];
+      slideshow_index = 0;
+      for (const element of slideshowElements) {
+        element.style.transform = "";
+      }
+      if (timeline) {
+        for (const timeline of slideshowTimeline) {
+          timeline.style.backgroundColor = "";
+          timeline.style.transform = "";
+        }
+      }
+
+      resolve();
+    });
+  }
+
+  function createTimelineStrings() {
+    const stringTimelineElements = createTimeLine(bubbles);
+    for (const div of stringTimelineElements) {
+      slideshow.appendChild(div);
+    }
+    // Updating with the current length
+    slideTimelineCount.update((value) => {
+      return value + data.length;
+    });
+
+    //global writer count
+    const currentStringCount = $slideStringCount;
+    /* Sliced array from currentTimelineCount to data.length
+        Everytime a slideshow created the slide string, the queryselector all will get all the elements
+        We do not want that and only want the slide-string we are interested in
+        Starting from the oldest count, finishing by our actual length */
+    slideshowTimeline = Array.from(
+      document.querySelectorAll(".slide-string"),
+    ).slice(
+      currentStringCount,
+      currentStringCount + stringTimelineElements.length,
+    );
+    // Updating with the current length
+    slideStringCount.update((value) => {
+      return value + stringTimelineElements.length;
+    });
+  }
+
+  async function changeSize() {
+    if (timeline && !resizing) {
+      resizing = true;
+
+      await resetSlideCards();
+      await new Promise(resolve => setTimeout(resolve, 400));
+      updateTimeLine(slideshowTimeline, slideshowBubbles);
+      resizing = false;
+      //global writer count
+    }
+  }
 </script>
 
+<svelte:window on:resize={changeSize} />
+
 <div class="slideshow" bind:this={slideshow}>
   <button class="slideshow_btn" on:click={slideCards}>
     <div>

frontend/src/lib/css/cv.css

@@ -11,6 +11,9 @@ html {
     flex-direction: row;
 }
 
+
+@media screen and (min-width: 1200px)
+{
     .sidebar {
         position: absolute;
         width: 16rem;
@@ -27,6 +30,20 @@ html {
         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;
+    }
+}
 
 .profile-picture-container {
     display: flex;

frontend/src/lib/js/slideshow.js

@@ -16,6 +16,16 @@ export function createTimeLine(positionsArray) {
   return divArray;
 }
 
+export function updateTimeLine(slideStringArray, positionsArray) {
+  for (let i = 0; i < positionsArray.length - 1; i++)
+  {
+    const left = positionsArray[i].offsetLeft + (2.5 * 16);
+    const top = positionsArray[i].offsetTop + 16;
+    slideStringArray[i].style.left = `${left}px`;
+    slideStringArray[i].style.top = `${top}px`;
+  }
+}
+
 export let slideContainerCount = writable(0);
 export let slideTimelineCount = writable(0);
 export let slideStringCount = writable(0);

frontend/src/routes/+page.svelte

@@ -64,9 +64,15 @@
 			sidebar.style.top = '';
 		}
 	}
+
+	// Mobile check
+	$: innerWidth = 0;
+	function mobileCheck() {
+		//console.log(innerWidth);
+	}
 </script>
 
-<svelte:window bind:scrollY bind:innerHeight on:scroll={sidebarScrollingHandler} />
+<svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
 
 {#if data.status == 0}
 	<div class="container-cv">