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

Frontend: Added an hitbox for the tooltip. Upgrading the user experience.

Browse source
This commit is contained in:
Yohan Boujon 2024-02-01 18:49:15 +01:00
parent 88423c45cb
commit 213e179e70
2 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/lib/components/pill.svelte
View file

@ -27,6 +27,7 @@
let pill_arrowdown; let pill_arrowdown;
let pill_tooltip; let pill_tooltip;
let main_pill; let main_pill;
let pill_hitbox;
// constants and variables // constants and variables
let innerWidth; let innerWidth;
@ -42,9 +43,11 @@
// forcing left or right depending on the out of bound situation // forcing left or right depending on the out of bound situation
if (isOutofBoundLeft) { if (isOutofBoundLeft) {
pill_tooltip.style.left = "0"; pill_tooltip.style.left = "0";
pill_hitbox.style.left = "0";
} }
if (isOutofBoundRight) { if (isOutofBoundRight) {
pill_tooltip.style.right = "0"; pill_tooltip.style.right = "0";
pill_hitbox.style.right = "0";
} }
// Setting the top size depending on the situation // Setting the top size depending on the situation
if (scrollY > offsetUp) { if (scrollY > offsetUp) {
@ -55,6 +58,7 @@
pill_tooltip.style.top = `${offsetUp}px`; pill_tooltip.style.top = `${offsetUp}px`;
pill_arrowup.style.visibility = "visible"; pill_arrowup.style.visibility = "visible";
} }
pill_hitbox.style.visibility = "visible";
pill_tooltip.style.visibility = "visible"; pill_tooltip.style.visibility = "visible";
} }
// Hiding tooltip // Hiding tooltip
@ -62,6 +66,7 @@
pill_tooltip.style.visibility = "hidden"; pill_tooltip.style.visibility = "hidden";
pill_arrowup.style.visibility = "hidden"; pill_arrowup.style.visibility = "hidden";
pill_arrowdown.style.visibility = "hidden"; pill_arrowdown.style.visibility = "hidden";
pill_hitbox.style.visibility = "hidden";
} }
} }
@ -87,8 +92,22 @@
} }
} }
function calculateHitbox() {
if (show_tooltip && tooltip_data.length > 0) {
pill_hitbox.style.width = `${
main_pill.clientWidth > pill_tooltip.clientWidth
? main_pill.clientWidth
: pill_tooltip.clientWidth
}px`;
pill_hitbox.style.height = `${main_pill.clientHeight + 50}px`;
pill_hitbox.style.left = "";
pill_hitbox.style.right = "";
}
}
onMount(async () => { onMount(async () => {
calculateOffsetUp(); calculateOffsetUp();
calculateHitbox();
}); });
</script> </script>
@ -96,8 +115,8 @@
bind:innerWidth bind:innerWidth
bind:scrollY bind:scrollY
on:resize={() => { on:resize={() => {
console.log("tamere");
calculateOffsetUp(); calculateOffsetUp();
calculateHitbox();
calculateOutOfBounds(); calculateOutOfBounds();
}} }}
/> />
@ -114,6 +133,7 @@
bind:this={main_pill} bind:this={main_pill}
> >
{#if show_tooltip === true} {#if show_tooltip === true}
<div class="pill-tooltip-hitbox" bind:this={pill_hitbox} />
<div class="pill-arrow pill-arrow-up" bind:this={pill_arrowup} /> <div class="pill-arrow pill-arrow-up" bind:this={pill_arrowup} />
<div class="pill-arrow pill-arrow-down" bind:this={pill_arrowdown} /> <div class="pill-arrow pill-arrow-down" bind:this={pill_arrowdown} />
<div class="pill-tooltip" bind:this={pill_tooltip}> <div class="pill-tooltip" bind:this={pill_tooltip}>

10
frontend/src/lib/css/pill.css
View file

@ -42,6 +42,16 @@
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.pill-tooltip-hitbox {
position: absolute;
z-index: 1;
background-color: #ffffff00;
visibility: hidden;
display: flex;
margin-bottom: 4rem;
min-width: 10rem;
}
.pill-tooltip { .pill-tooltip {
position: absolute; position: absolute;
z-index: 1; z-index: 1;