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 { .sidebar {
width: 100%; position: absolute;
height: 100%; width: 16rem;
flex-basis: 20rem; height: 75rem;
background-color: var(--color-special); 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; z-index: 2;
transition: all 0s ease 0s; 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 { .profile-picture-container {
display: flex; display: flex;
justify-content: center; justify-content: center;

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

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