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

Frontend: Fixed left/right out of bound tooltip.

Browse source
This commit is contained in:
Yohan Boujon 2024-02-01 15:19:07 +01:00
parent ea8053bf84
commit 7e61cee8ca
3 changed files with 81 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,7 @@
let pill_arrow;
let pill_tooltip;
let main_pill;
let innerWidth;
if (shadow_color === null) {
style = `background-color: ${color};
@ -28,22 +29,34 @@
}
function showingTooltip(visible) {
// Showing tooltip
const isOutofBoundLeft=(main_pill.offsetLeft+(main_pill.offsetWidth/2)<(pill_tooltip.offsetWidth/2));
const isOutofBoundRight=((pill_tooltip.offsetLeft+pill_tooltip.offsetWidth)>innerWidth);
if (visible && tooltip_data.length > 0) {
pill_tooltip.style.visibility = "visible";
pill_arrow.style.visibility = "visible";
// adjusting top
if(isOutofBoundLeft)
{
pill_tooltip.style.left = "0";
}
if(isOutofBoundRight)
{
pill_tooltip.style.right = "0";
}
pill_tooltip.style.top = `${
main_pill.offsetTop - pill_tooltip.offsetHeight - 16
}px`;
pill_tooltip.style.boxShadow = `0px 8px 18px -1px #261C2C30`;
pill_arrow.style.filter = `drop-shadow(0px 8px 18px #261C2C20)`;
} else {
}
// Hiding tooltip
else {
pill_tooltip.style.visibility = "hidden";
pill_arrow.style.visibility = "hidden";
}
}
</script>
<svelte:window bind:innerWidth />
<div
class={white ? "pill-container pill-white" : "pill-container pill-black"}
{style}
@ -59,7 +72,7 @@
<div class="pill-tooltip" bind:this={pill_tooltip}>
{#each tooltip_data as td}
<div>
<p>{td.title}</p>
<span>{td.title}</span>
<div class="pill-last">
<button
class="pill-view"

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

@ -53,11 +53,13 @@
justify-content: center;
visibility: hidden;
transition: all .3s ease 0s;
box-shadow: none;
box-shadow: 0px 8px 18px -1px #261C2C30;
display: flex;
flex-direction: column;
padding-left: 1rem;
padding-right: 1rem;
height: fit-content;
width: fit-content;
}
.pill-tooltip>div {
@ -66,6 +68,13 @@
align-items: center;
}
.pill-tooltip span {
margin-top: 0.9rem;
margin-bottom: 0.9rem;
margin-right: 0.5rem;
white-space: nowrap;
}
.pill-tooltip svg {
margin: 0 !important;
padding: 0 !important;
@ -114,5 +123,5 @@
border-top: 20px solid var(--color-background);
visibility: hidden;
transition: all .3s ease 0s;
filter: none;
filter: drop-shadow(0px 8px 18px #261C2C20);
}

78
frontend/src/lib/css/project-popup.css
View file

@ -59,6 +59,32 @@
flex-direction: row;
align-items: center;
}
.project-popup-close {
min-width: 2.2rem;
min-height: 2.2rem;
background-color: var(--color-background);
color: var(--color-text);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 0;
position: absolute;
right: 0.5rem;
top: 0.5rem;
cursor: pointer;
}
.project-popup-subtitle {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 500;
font-size: 1.1rem;
width: 100%;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
}
@media screen and (max-width: 1000px) {
@ -127,6 +153,32 @@
.project-popup-tag-container {
margin-bottom: 3rem !important;
}
.project-popup-close {
min-width: 2.2rem;
min-height: 2.2rem;
background-color: #ffffff00;
color: var(--color-text);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 0;
position: absolute;
right: 0.5rem;
top: 0.5rem;
cursor: pointer;
}
.project-popup-subtitle {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 500;
font-size: 1rem;
width: 100%;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
}
.project-popup-link-container {
@ -146,22 +198,6 @@
visibility: hidden;
}
.project-popup-close {
min-width: 2.2rem;
min-height: 2.2rem;
background-color: var(--color-background);
color: var(--color-text);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 0;
position: absolute;
right: 0.5rem;
top: 0.5rem;
cursor: pointer;
}
.project-popup-close:hover {
background-color: var(--color-special);
color: var(--color-background);
@ -190,16 +226,6 @@
text-align: justify;
}
.project-popup-subtitle {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 500;
font-size: 1.1rem;
width: 100%;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.project-popup-download {
padding: 0.4rem;
margin-right: 0.75rem;