Etheryo/curriculum-vitae
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Frontend: Fixing an issue with the pills being loaded before the scrolling bar, which would eventually put the popup in a different place than expected.

Browse source
This commit is contained in:
Yohan Boujon 2024-02-03 12:04:54 +01:00
parent b9c39d517b
commit e0c1a92f15
1 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/routes/+page.svelte
View file

@ -6,16 +6,15 @@
import "$lib/css/cv.css"; import "$lib/css/cv.css";
// Main // Main
import Sidebar from "$lib/components/sidebar.svelte";
import Section from "$lib/components/section.svelte"; import Section from "$lib/components/section.svelte";
import SubSection from "$lib/components/subsection.svelte"; import SubSection from "$lib/components/subsection.svelte";
import Education from "$lib/components/education.svelte"; import Education from "$lib/components/education.svelte";
import Experience from "$lib/components/experience.svelte"; import Experience from "$lib/components/experience.svelte";
import Projects from "$lib/components/projects.svelte"; import Projects from "$lib/components/projects.svelte";
import SlideShow from "$lib/components/slideshow.svelte"; import SlideShow from "$lib/components/slideshow.svelte";
import Pill from "$lib/components/pill.svelte";
import FlagComponent from "$lib/components/flag-component.svelte"; import FlagComponent from "$lib/components/flag-component.svelte";
import ProjectsPopup from "$lib/components/projects-popup.svelte"; import ProjectsPopup from "$lib/components/projects-popup.svelte";
import Pill from "$lib/components/pill.svelte";
import { import {
mdiSchool, mdiSchool,
mdiBriefcase, mdiBriefcase,
@ -35,6 +34,8 @@
// Sidebar // Sidebar
let containerCv; let containerCv;
let footer; let footer;
let sidebarLoaded = false;
let Sidebar;
// Mobile top bar // Mobile top bar
function mobileTopBar() { function mobileTopBar() {
@ -61,6 +62,8 @@
onMount(async () => { onMount(async () => {
mobileTopBar(); mobileTopBar();
Sidebar = (await import('/src/lib/components/sidebar.svelte')).default;
sidebarLoaded = true;
}); });
</script> </script>
@ -77,12 +80,12 @@
{#if data.status == 0} {#if data.status == 0}
<ProjectsPopup tags={cv.tags} /> <ProjectsPopup tags={cv.tags} />
<!-- TOPBAR DIV (POPUP: mobile) --> <!-- TOPBAR DIV (POPUP: mobile) -->
{#if innerWidth < 1200} {#if innerWidth < 1200 && sidebarLoaded}
<Sidebar info={cv.info} bind:sidebarContainer /> <Sidebar info={cv.info} bind:sidebarContainer />
{/if} {/if}
<div class="container-cv" bind:this={containerCv}> <div class="container-cv" bind:this={containerCv}>
<!-- SIDEBAR DIV (LEFT: desktop) --> <!-- SIDEBAR DIV (LEFT: desktop) -->
{#if innerWidth >= 1200} {#if innerWidth >= 1200 && sidebarLoaded}
<Sidebar info={cv.info} {footer} {containerCv} /> <Sidebar info={cv.info} {footer} {containerCv} />
{/if} {/if}
<!-- MOBILE TOP BAR --> <!-- MOBILE TOP BAR -->
@ -122,29 +125,33 @@
<Section icon={mdiPencil} title="Skills" /> <Section icon={mdiPencil} title="Skills" />
<SubSection icon={mdiXml} title="Programming Languages" /> <SubSection icon={mdiXml} title="Programming Languages" />
<div class="subsection"> <div class="subsection">
{#each cv.skills.programming_languages as pilldata, index (index)} {#if sidebarLoaded}
<Pill {#each cv.skills.programming_languages as pilldata, index (index)}
name={pilldata.lang} <Pill
type_icon={pilldata.type_icon} name={pilldata.lang}
icon={pilldata.icon} type_icon={pilldata.type_icon}
color={pilldata.color} icon={pilldata.icon}
show_tooltip={true} color={pilldata.color}
tooltip_data={cv.project_programming[index]} show_tooltip={true}
/> tooltip_data={cv.project_programming[index]}
{/each} />
{/each}
{/if}
</div> </div>
<SubSection icon={mdiApplication} title="Software" /> <SubSection icon={mdiApplication} title="Software" />
<div class="subsection"> <div class="subsection">
{#each cv.skills.softwares as pilldata, index (index)} {#if sidebarLoaded}
<Pill {#each cv.skills.softwares as pilldata, index (index)}
name={pilldata.software} <Pill
type_icon={pilldata.type_icon} name={pilldata.software}
icon={pilldata.icon} type_icon={pilldata.type_icon}
color={pilldata.color} icon={pilldata.icon}
show_tooltip={true} color={pilldata.color}
tooltip_data={cv.project_software[index]} show_tooltip={true}
/> tooltip_data={cv.project_software[index]}
{/each} />
{/each}
{/if}
</div> </div>
<SubSection icon={mdiEarth} title="Languages" /> <SubSection icon={mdiEarth} title="Languages" />
<div class="subsection flag-container end"> <div class="subsection flag-container end">