From e9563e6a5d9356ae0bebba4c4621616c792bd7e6 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Tue, 30 Jan 2024 22:48:10 +0100
Subject: [PATCH] Frontend: Fixing major issues with the sidebar when on large
 screens. Optimised the code to use less scrollY.

---
 frontend/src/lib/css/cv.css      |   6 +-
 frontend/src/routes/+page.svelte | 325 +++++++++++++++++--------------
 2 files changed, 178 insertions(+), 153 deletions(-)

diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index acdca0b..fdf9c95 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -9,14 +9,12 @@
     .sidebar {
         position: absolute;
         width: 15rem;
-        height: 75rem;
-        background-color: var(--color-special);
         transition: all 0s ease 0s;
+        margin-left: 1rem;
     }
 
     .fake-sidebar {
-        width: 100%;
-        flex-basis: 20rem;
+        width: 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);
     }
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 2d0976f..4a082b5 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,162 +1,189 @@
 <script>
-	import SvgIcon from "@jamescoyle/svelte-icon";
-	import { processData } from "$lib/js/processdata.js";
-	import { formatDate } from "$lib/js/date.js";
-	import "$lib/css/base.css";
-	import "$lib/css/cv.css";
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import { processData } from "$lib/js/processdata.js";
+  import { formatDate } from "$lib/js/date.js";
+  import "$lib/css/base.css";
+  import "$lib/css/cv.css";
 
-	// Sidebar
-	import SidebarComponent from "$lib/components/sidebar-component.svelte";
-	import {
-		mdiAccount,
-		mdiCogs,
-		mdiEmailOutline,
-		mdiPhone,
-		mdiStar,
-		mdiXml,
-		mdiApplication,
-		mdiEarth,
-		mdiHeart
-	} from "@mdi/js";
+  // Sidebar
+  import SidebarComponent from "$lib/components/sidebar-component.svelte";
+  import {
+    mdiAccount,
+    mdiCogs,
+    mdiEmailOutline,
+    mdiPhone,
+    mdiStar,
+    mdiXml,
+    mdiApplication,
+    mdiEarth,
+    mdiHeart,
+  } from "@mdi/js";
 
-	// Main
-	import Section from "$lib/components/section.svelte";
-	import SubSection from "$lib/components/subsection.svelte";
-	import Education from "$lib/components/education.svelte";
-	import Experience from "$lib/components/experience.svelte";
-	import Projects from "$lib/components/projects.svelte"
-	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";
+  // Main
+  import Section from "$lib/components/section.svelte";
+  import SubSection from "$lib/components/subsection.svelte";
+  import Education from "$lib/components/education.svelte";
+  import Experience from "$lib/components/experience.svelte";
+  import Projects from "$lib/components/projects.svelte";
+  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";
 
-	export let data;
-	const cv = data.status == 0 ? processData(data) : undefined;
-	const birth_year =
-		data.status == 0 ? formatDate(cv.info.birth_year) : undefined;
+  export let data;
+  const cv = data.status == 0 ? processData(data) : undefined;
+  const birth_year =
+    data.status == 0 ? formatDate(cv.info.birth_year) : undefined;
 
-	// Sidebar sticky
-	let sidebar;
-	let footer;
-	let moving_position = 0;
-	$: scrollY = 0;
-	$: innerHeight = 0;
-	onMount(() => {
-		sidebarScrollingHandler();
-	});
+  // Sidebar sticky
+  let sidebar;
+  let containerCv;
+  let footer;
+  $: scrollY = 0;
+  $: innerHeight = 0;
+  onMount(() => {
+    sidebarScrollingHandler();
+  });
 
-	function sidebarScrollingHandler() {
-		let isBottom = (scrollY+innerHeight  >= footer.offsetTop);
-		// Testing if sidebar is outside of scrolling scope
-		if(scrollY+innerHeight >= sidebar.offsetHeight && !isBottom) {
-			sidebar.style.position = 'fixed';
-			sidebar.style.top = `-${sidebar.offsetHeight-innerHeight}px`;
-			moving_position = scrollY;
-		}
-		else if(isBottom) {
-			sidebar.style.position = 'absolute';
-			sidebar.style.top = `${moving_position-(sidebar.offsetHeight-innerHeight)}px`;
-		}
-		else {
-			sidebar.style.position = 'absolute';
-			sidebar.style.top = '';
-		}
-	}
+  function sidebarScrollingHandler() {
+    let isBottom = scrollY + innerHeight >= footer.offsetTop;
+    let isMoved = scrollY + innerHeight >= sidebar.offsetHeight;
+    let littleScreen = innerHeight < sidebar.offsetHeight;
+    console.log(littleScreen);
+    // Only having the sticky sidebar if the size of the screen is too 'little'
 
-	// Mobile check
-	$: innerWidth = 0;
-	function mobileCheck() {
-		//console.log(innerWidth);
-	}
+    // Testing if sidebar is outside of scrolling scope
+    if (isMoved && !isBottom) {
+      sidebar.style.position = "fixed";
+      sidebar.style.top = littleScreen
+        ? `${innerHeight - sidebar.offsetHeight}px`
+        : "0px";
+    }
+    // Checking if at the bottom, calculating the diff. between the cv and the sidebar heights
+    else if (isBottom && littleScreen) {
+      sidebar.style.position = "absolute";
+      sidebar.style.top = `${
+        containerCv.offsetHeight - sidebar.offsetHeight
+      }px`;
+    }
+	// Only putting absolute if on little screen 
+	else if (littleScreen) {
+      sidebar.style.position = "absolute";
+      sidebar.style.top = "";
+    }
+  }
+
+  // Mobile check
+  $: innerWidth = 0;
+  function mobileCheck() {
+    //console.log(innerWidth);
+  }
 </script>
 
-<svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
+<svelte:window
+  bind:scrollY
+  bind:innerHeight
+  bind:innerWidth
+  on:scroll={sidebarScrollingHandler}
+  on:resize={mobileCheck}
+/>
 
 {#if data.status == 0}
-	<ProjectsPopup tags={cv.tags} />
-	<div class="container-cv">
-		<!-- SIDEBAR DIV (LEFT) -->
-		<div class="sidebar" bind:this={sidebar}>
-			<div class="profile-picture-container">
-				<img
-					class="profile-picture"
-					src={cv.info.profile_pic}
-					alt={cv.info.full_name}
-				/>
-			</div>
-			<SidebarComponent icon={mdiAccount} description={birth_year} />
-			<SidebarComponent
-				icon={mdiEmailOutline}
-				description={cv.info.email}
-			/>
-			{#if cv.info.phone_number != null}
-			<SidebarComponent
-				icon={mdiPhone}
-				description={cv.info.phone_number}
-			/>
-			{/if}
-			<SidebarComponent
-				icon={mdiStar}
-				title="Interests"
-				description={cv.info.interests}
-			/>
-			<SidebarComponent
-				icon={mdiCogs}
-				title="Soft-Skills"
-				description={cv.info.softskills}
-			/>
-		</div>
-		<div class="fake-sidebar" />
-		<!-- MAIN DIV (RIGHT) -->
-		<div class="main">
-			<h1 class="name">{cv.info.full_name}</h1>
-			<h2 class="name">Apprentice Engineer Automatic/Electronic</h2>
-			<Section icon={mdiSchool} title="Education" />
-			<SlideShow
-				data={cv.education}
-				type={Education}
-				timeline="true"
-				reverse="true"
-			/>
-			<Section icon={mdiBriefcase} title="Experience" />
-			<SlideShow
-				data={cv.experiences}
-				type={Experience}
-				timeline="true"
-				reverse="true"
-			/>
-			<Section icon={mdiWrench} title="Projects" />
-			<SlideShow
-				data={cv.skills.project}
-				type={Projects}
-			/>
-			<Section icon={mdiPencil} title="Skills" />
-			<SubSection icon={mdiXml} title="Programming Languages"/>
-			<div class="subsection">
-				{#each cv.skills.programming_languages as pilldata, index (index)}
-					<Pill name={pilldata.lang} type_icon={pilldata.type_icon} icon={pilldata.icon} color={pilldata.color} show_tooltip={true} tooltip_data={cv.project_programming[index]}/>
-				{/each}
-			</div>
-			<SubSection icon={mdiApplication} title="Software"/>
-			<div class="subsection">
-				{#each cv.skills.softwares as pilldata, index (index)}
-					<Pill name={pilldata.software} type_icon={pilldata.type_icon} icon={pilldata.icon} color={pilldata.color} show_tooltip={true} tooltip_data={cv.project_software[index]}/>
-				{/each}
-			</div>
-			<SubSection icon={mdiEarth} title="Languages"/>
-			<div class="subsection flag-container end">
-				{#each cv.skills.languages as langdata}
-					<FlagComponent lang={langdata.lang} level={langdata.level} icon={langdata.icon_alpha}/>
-				{/each}
-			</div>
-		</div>
-	</div>
-	<div class="footer" bind:this={footer}>
-		<p>Made with <SvgIcon size="20" path={mdiHeart} type="mdi"/> using Svelte</p>
-		<p>All rights reserved, Yohan Boujon • {new Date().getFullYear()}</p>
-	</div>
+  <ProjectsPopup tags={cv.tags} />
+  <div class="container-cv" bind:this={containerCv}>
+    <!-- SIDEBAR DIV (LEFT) -->
+    <div class="sidebar" bind:this={sidebar}>
+      <div class="profile-picture-container">
+        <img
+          class="profile-picture"
+          src={cv.info.profile_pic}
+          alt={cv.info.full_name}
+        />
+      </div>
+      <SidebarComponent icon={mdiAccount} description={birth_year} />
+      <SidebarComponent icon={mdiEmailOutline} description={cv.info.email} />
+      {#if cv.info.phone_number != null}
+        <SidebarComponent icon={mdiPhone} description={cv.info.phone_number} />
+      {/if}
+      <SidebarComponent
+        icon={mdiStar}
+        title="Interests"
+        description={cv.info.interests}
+      />
+      <SidebarComponent
+        icon={mdiCogs}
+        title="Soft-Skills"
+        description={cv.info.softskills}
+      />
+    </div>
+    <div class="fake-sidebar" />
+    <!-- MAIN DIV (RIGHT) -->
+    <div class="main">
+      <h1 class="name">{cv.info.full_name}</h1>
+      <h2 class="name">Apprentice Engineer Automatic/Electronic</h2>
+      <Section icon={mdiSchool} title="Education" />
+      <SlideShow
+        data={cv.education}
+        type={Education}
+        timeline="true"
+        reverse="true"
+      />
+      <Section icon={mdiBriefcase} title="Experience" />
+      <SlideShow
+        data={cv.experiences}
+        type={Experience}
+        timeline="true"
+        reverse="true"
+      />
+      <Section icon={mdiWrench} title="Projects" />
+      <SlideShow data={cv.skills.project} type={Projects} />
+      <Section icon={mdiPencil} title="Skills" />
+      <SubSection icon={mdiXml} title="Programming Languages" />
+      <div class="subsection">
+        {#each cv.skills.programming_languages as pilldata, index (index)}
+          <Pill
+            name={pilldata.lang}
+            type_icon={pilldata.type_icon}
+            icon={pilldata.icon}
+            color={pilldata.color}
+            show_tooltip={true}
+            tooltip_data={cv.project_programming[index]}
+          />
+        {/each}
+      </div>
+      <SubSection icon={mdiApplication} title="Software" />
+      <div class="subsection">
+        {#each cv.skills.softwares as pilldata, index (index)}
+          <Pill
+            name={pilldata.software}
+            type_icon={pilldata.type_icon}
+            icon={pilldata.icon}
+            color={pilldata.color}
+            show_tooltip={true}
+            tooltip_data={cv.project_software[index]}
+          />
+        {/each}
+      </div>
+      <SubSection icon={mdiEarth} title="Languages" />
+      <div class="subsection flag-container end">
+        {#each cv.skills.languages as langdata}
+          <FlagComponent
+            lang={langdata.lang}
+            level={langdata.level}
+            icon={langdata.icon_alpha}
+          />
+        {/each}
+      </div>
+    </div>
+  </div>
+  <div class="footer" bind:this={footer}>
+    <p>
+      Made with <SvgIcon size="20" path={mdiHeart} type="mdi" /> using Svelte
+    </p>
+    <p>All rights reserved, Yohan Boujon • {new Date().getFullYear()}</p>
+  </div>
 {:else}
-	<h1 class="h1 text-center">Oops, could not load database :/</h1>
+  <h1 class="h1 text-center">Oops, could not load database :/</h1>
 {/if}