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;
+ }