diff --git a/frontend/src/lib/components/pill.svelte b/frontend/src/lib/components/pill.svelte index 8efa985..1c9a0f3 100644 --- a/frontend/src/lib/components/pill.svelte +++ b/frontend/src/lib/components/pill.svelte @@ -125,10 +125,15 @@ pill_notification.style.top = `${main_pill.offsetTop}px`; } - onMount(async () => { + export function updatePill() { calculateOffsetUp(); calculateHitbox(); + calculateOutOfBounds(); calculateNotification(); + } + + onMount(async () => { + updatePill(); }); @@ -136,10 +141,7 @@ bind:innerWidth bind:scrollY on:resize={() => { - calculateOffsetUp(); - calculateHitbox(); - calculateOutOfBounds(); - calculateNotification(); + updatePill(); }} /> diff --git a/frontend/src/lib/css/pill.css b/frontend/src/lib/css/pill.css index fe40987..b44d311 100644 --- a/frontend/src/lib/css/pill.css +++ b/frontend/src/lib/css/pill.css @@ -194,4 +194,26 @@ color: var(--color-background); background-color: var(--color-text); box-shadow: 0px 8px 18px -1px #261C2C50; +} + +.pill-more { + color: var(--color-text); + background-color: var(--color-background); + cursor: pointer; + box-shadow: 0px 8px 18px -1px #261C2C30; + border: 0; + padding: 0.3rem; + padding-left: 1rem; + padding-right: 1rem; + transition: all .3s ease 0s; +} + +.pill-more:hover{ + color: var(--color-background); + background-color: var(--color-text); +} + +.pill-more:active{ + transform: translateY(4px); + box-shadow: 0px 4px 12px -1px #261C2C90; } \ No newline at end of file diff --git a/frontend/src/lib/lang/en.json b/frontend/src/lib/lang/en.json index ea07bbe..d577029 100644 --- a/frontend/src/lib/lang/en.json +++ b/frontend/src/lib/lang/en.json @@ -3,8 +3,7 @@ "experience": "Experiences", "projects": "Projects", "skills": "Skills", - "programming_languages": "Programming Languages", - "software": "Software", + "more": "More", "languages": "Languages", "interests": "Interests", diff --git a/frontend/src/lib/lang/fr.json b/frontend/src/lib/lang/fr.json index cabca2c..c932888 100644 --- a/frontend/src/lib/lang/fr.json +++ b/frontend/src/lib/lang/fr.json @@ -3,8 +3,7 @@ "experience": "Expériences", "projects": "Projets", "skills": "Compétences", - "programming_languages": "Langages de programmation", - "software": "Logiciels", + "more": "Plus", "languages": "Langues", "interests": "Centres d'intérêt", diff --git a/frontend/src/routes/lang=[lang]/+page.svelte b/frontend/src/routes/lang=[lang]/+page.svelte index 2b69c4c..7e06007 100644 --- a/frontend/src/routes/lang=[lang]/+page.svelte +++ b/frontend/src/routes/lang=[lang]/+page.svelte @@ -3,6 +3,7 @@ import { showSidebar } from "$lib/js/topbar.js"; import "$lib/css/base.css"; import "$lib/css/cv.css"; + import "$lib/css/pill.css"; import "/node_modules/flag-icons/css/flag-icons.min.css"; // Main @@ -23,6 +24,8 @@ mdiAccount, mdiEarth, mdiHeart, + mdiArrowDown, + mdiArrowUp, } from "@mdi/js"; import { onMount } from "svelte"; @@ -75,6 +78,35 @@ Sidebar = (await import("/src/lib/components/sidebar.svelte")).default; sidebarLoaded = true; }); + + // More pill handler + let pillShowMore = []; + let pillInstances = [[], []]; + $: pillActualIndex=0; + async function moreHandler(id) { + if (pillShowMore[id] === true) { + // show Less + pillShowMore[id] = false; + } else { + // Show More + pillShowMore[id] = true; + } + await new Promise((resolve) => setTimeout(resolve, 30)); + for (const pills of pillInstances) { + for (const p of pills) { + p.updatePill(); + } + } + } + + function needMore(skill) + { + for(const s of skill) + { + if(!s.is_shown) return true; + } + return false; + }
- {#each cv.skills as skill, index (index)} - -
- {#if sidebarLoaded} - {#each skill as pilldata, index (index)} - - {/each} - {/if} -
+ {#each cv.skills as skill, index} + + {#if sidebarLoaded} +
+ {#each skill as pilldata, pill_dataindex} + {#if pilldata.is_shown} + + {/if} + {/each} + {#if needMore(skill)} + + {/if} +
+
+ {#each skill as pilldata, pill_dataindex} + {#if !pilldata.is_shown} + + {/if} + {/each} +
+ {/if} {/each}