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

Frontend: Fixed sidebar scrolling.

Browse source
This commit is contained in:
Yohan Boujon 2023-11-17 09:48:58 +01:00
parent 44c8eecd16
commit 721601745d
2 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/lib/css/cv.css
View file

@ -12,15 +12,21 @@ html {
}
.sidebar {
width: 100%;
height: 100%;
flex-basis: 20rem;
position: absolute;
width: 16rem;
height: 75rem;
background-color: var(--color-special);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
z-index: 2;
transition: all 0s ease 0s;
}
.fake-sidebar {
width: 100%;
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);
}
.profile-picture-container {
display: flex;
justify-content: center;

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

@ -33,23 +33,26 @@
let sidebar_height = 0;
$: scrollY = 0;
$: innerHeight = 0;
$: outerHeight = 0;
onMount(() => {
sidebar_height = sidebar.offsetHeight;
console.log(sidebar_height);
sidebarScrollingHandler();
});
function sidebarScrollingHandler() {
if(scrollY+innerHeight >= sidebar_height) {
const translateValue = (scrollY+innerHeight)-sidebar_height;
sidebar.style.transform = `translateY(${translateValue}px)`;
sidebar.style.position = 'fixed';
sidebar.style.top = `-${sidebar_height-innerHeight}px`;
}
else {
sidebar.style.transform = '';
sidebar.style.position = 'absolute';
sidebar.style.top = '';
}
}
</script>
<svelte:window bind:scrollY bind:innerHeight on:scroll={sidebarScrollingHandler} />
<svelte:window bind:scrollY bind:innerHeight bind:outerHeight on:scroll={sidebarScrollingHandler} />
{#if data.status == 0}
<div class="container-cv">
@ -82,6 +85,7 @@
description={cv.info.softskills}
/>
</div>
<div class="fake-sidebar" />
<!-- MAIN DIV (RIGHT) -->
<div class="main">
<h1 class="name">{cv.info.full_name}</h1>