From 404ceaa5633e21b60bcb0e986dfe9a99994b9f59 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 14:53:00 +0100 Subject: [PATCH 01/26] roadmap initial implementation --- docs/.vuepress/client.js | 2 + docs/.vuepress/components/RoadmapProgress.vue | 365 ++++++++++++++++++ docs/.vuepress/config/theme.js | 16 + docs/de/roadmap/README.md | 16 + docs/en/roadmap/README.md | 16 + docs/es/roadmap/README.md | 16 + docs/fr/roadmap/README.md | 16 + 7 files changed, 447 insertions(+) create mode 100644 docs/.vuepress/components/RoadmapProgress.vue create mode 100644 docs/de/roadmap/README.md create mode 100644 docs/en/roadmap/README.md create mode 100644 docs/es/roadmap/README.md create mode 100644 docs/fr/roadmap/README.md diff --git a/docs/.vuepress/client.js b/docs/.vuepress/client.js index f43f2d4..97e36a8 100644 --- a/docs/.vuepress/client.js +++ b/docs/.vuepress/client.js @@ -1,12 +1,14 @@ import { defineClientConfig } from "vuepress/client"; import DonationBar from "./components/DonationBar.vue"; import MiniBlog from "./components/MiniBlog.vue"; +import RoadmapProgress from "./components/RoadmapProgress.vue"; import RedirectHome from "./components/RedirectHome.vue"; export default defineClientConfig({ enhance({ app }) { app.component("DonationBar", DonationBar); app.component("MiniBlog", MiniBlog); + app.component("RoadmapProgress", RoadmapProgress); }, layouts: { RedirectHome, diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue new file mode 100644 index 0000000..1ac6c4b --- /dev/null +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -0,0 +1,365 @@ + + + + + diff --git a/docs/.vuepress/config/theme.js b/docs/.vuepress/config/theme.js index 89859ac..0a865b7 100644 --- a/docs/.vuepress/config/theme.js +++ b/docs/.vuepress/config/theme.js @@ -35,6 +35,10 @@ export default hopeTheme({ text: 'Funktionen', link: '/de/features/' }, + { + text: 'Roadmap', + link: '/de/roadmap/' + }, { text: 'Einstieg', link: '/de/get-started/' @@ -72,6 +76,10 @@ export default hopeTheme({ text: 'Features', link: '/en/features/' }, + { + text: 'Roadmap', + link: '/en/roadmap/' + }, { text: 'Get Started', link: '/en/get-started/' @@ -109,6 +117,10 @@ export default hopeTheme({ text: 'Funcionalidades', link: '/es/features/' }, + { + text: 'Roadmap', + link: '/es/roadmap/' + }, { text: 'Empezar', link: '/es/get-started/' @@ -147,6 +159,10 @@ export default hopeTheme({ text: 'Fonctionnalités', link: '/fr/features/' }, + { + text: 'Roadmap', + link: '/fr/roadmap/' + }, { text: 'Commencer', link: '/fr/get-started/' diff --git a/docs/de/roadmap/README.md b/docs/de/roadmap/README.md new file mode 100644 index 0000000..683915e --- /dev/null +++ b/docs/de/roadmap/README.md @@ -0,0 +1,16 @@ +--- +home: false +article: false +sidebar: false +lang: de-DE +title: Roadmap +description: Die Roadmap von ocelot.social zeigt die wichtigsten geplanten Features und den aktuellen Entwicklungsstand. +--- + +Hier siehst du die wichtigsten geplanten Features und den aktuellen Fortschritt der Entwicklung von *ocelot.social*. + + + + + +Du möchtest ein Feature unterstützen oder mitentwickeln? [Mach mit!](/de/contribute/) diff --git a/docs/en/roadmap/README.md b/docs/en/roadmap/README.md new file mode 100644 index 0000000..ee37387 --- /dev/null +++ b/docs/en/roadmap/README.md @@ -0,0 +1,16 @@ +--- +home: false +article: false +sidebar: false +lang: en-US +title: Roadmap +description: The ocelot.social roadmap shows the most important planned features and the current development status. +--- + +Here you can see the most important planned features and the current development progress of *ocelot.social*. + + + + + +Want to support a feature or contribute? [Get involved!](/en/contribute/) diff --git a/docs/es/roadmap/README.md b/docs/es/roadmap/README.md new file mode 100644 index 0000000..8e262b2 --- /dev/null +++ b/docs/es/roadmap/README.md @@ -0,0 +1,16 @@ +--- +home: false +article: false +sidebar: false +lang: es-ES +title: Roadmap +description: La hoja de ruta de ocelot.social muestra las funcionalidades más importantes planificadas y el estado actual del desarrollo. +--- + +Aquí puedes ver las funcionalidades más importantes planificadas y el progreso actual del desarrollo de *ocelot.social*. + + + + + +¿Quieres apoyar una funcionalidad o contribuir? [¡Participa!](/es/contribute/) diff --git a/docs/fr/roadmap/README.md b/docs/fr/roadmap/README.md new file mode 100644 index 0000000..1f11bcf --- /dev/null +++ b/docs/fr/roadmap/README.md @@ -0,0 +1,16 @@ +--- +home: false +article: false +sidebar: false +lang: fr-FR +title: Roadmap +description: La feuille de route d'ocelot.social présente les fonctionnalités les plus importantes prévues et l'état actuel du développement. +--- + +Découvrez les fonctionnalités les plus importantes prévues et la progression actuelle du développement d'*ocelot.social*. + + + + + +Vous souhaitez soutenir une fonctionnalité ou contribuer ? [Participez !](/fr/contribute/) From 7725902b335e52fca6381fb8527a0404438ac363 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 14:56:53 +0100 Subject: [PATCH 02/26] better progress bar --- docs/.vuepress/components/RoadmapProgress.vue | 408 ++++++++++-------- 1 file changed, 238 insertions(+), 170 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index 1ac6c4b..fde4be7 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -1,44 +1,58 @@ From b6e550de66a59a2c72e5ec42359c37e59c8f0883 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:04:17 +0100 Subject: [PATCH 03/26] different colors --- docs/.vuepress/components/RoadmapProgress.vue | 49 ++++++++----------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index fde4be7..04c0b1b 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -238,15 +238,15 @@ const connectorColor = (index) => { } .roadmap-legend-dot--done { - background: #10b981; + background: #059669; } .roadmap-legend-dot--in-progress { - background: #f59e0b; + background: #6366f1; } .roadmap-legend-dot--planned { - background: #d1d5db; + background: #86efac; } /* === Timeline === */ @@ -267,27 +267,19 @@ const connectorColor = (index) => { /* === Verbindungslinie zwischen Stationen === */ .roadmap-connector { position: absolute; - left: 11px; + left: 12px; + transform: translateX(-50%); top: 28px; bottom: -28px; width: 3px; z-index: 1; } -.roadmap-connector--done { - background: #10b981; -} - -.roadmap-connector--to-active { - background: linear-gradient(to bottom, #10b981, #f59e0b); -} - -.roadmap-connector--from-active { - background: linear-gradient(to bottom, #f59e0b, #d1d5db); -} - +.roadmap-connector--done, +.roadmap-connector--to-active, +.roadmap-connector--from-active, .roadmap-connector--planned { - background: #d1d5db; + background: #34d399; } /* === Marker === */ @@ -299,6 +291,7 @@ const connectorColor = (index) => { width: 24px; height: 24px; border-radius: 50%; + box-sizing: border-box; display: flex; align-items: center; justify-content: center; @@ -308,15 +301,15 @@ const connectorColor = (index) => { } .roadmap-marker--done { - background: #10b981; + background: #059669; color: #fff; font-size: 14px; font-weight: bold; } .roadmap-marker--in-progress { - background: #f59e0b; - box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); + background: #6366f1; + box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2); } .roadmap-marker-pulse { @@ -329,12 +322,12 @@ const connectorColor = (index) => { @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } - 50% { transform: scale(1.4); opacity: 0.7; } + 50% { transform: scale(1.3); opacity: 0.6; } } .roadmap-marker--planned { background: var(--vp-c-bg, #fff); - border: 3px solid #d1d5db; + border: 3px solid #86efac; } /* === Inhalt === */ @@ -371,13 +364,13 @@ const connectorColor = (index) => { } .roadmap-content-badge--in-progress { - background: #fef3c7; - color: #92400e; + background: #e0e7ff; + color: #4338ca; } .roadmap-content-badge--planned { - background: #f3f4f6; - color: #6b7280; + background: #ecfdf5; + color: #047857; } .roadmap-content-description { @@ -404,10 +397,10 @@ const connectorColor = (index) => { text-decoration: underline; } -/* === Hover-Effekt auf der aktiven Station === */ +/* === Hervorhebung der aktiven Station === */ .roadmap-station--in-progress .roadmap-content { padding-left: 4px; - border-left: 3px solid rgba(245, 158, 11, 0.3); + border-left: 3px solid rgba(99, 102, 241, 0.3); border-radius: 4px; margin-left: -4px; } From 26c2c470fe20c06fa0b17b8a9cc3462adb50a8bf Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:05:35 +0100 Subject: [PATCH 04/26] text position to circle --- docs/.vuepress/components/RoadmapProgress.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index 04c0b1b..2922b79 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -334,7 +334,7 @@ const connectorColor = (index) => { .roadmap-content { grid-column: 2; grid-row: 1; - padding: 10px 16px 24px 0; + padding: 16px 16px 24px 0; } .roadmap-content-header { From 8a4c4ba26f574d567be8a6bec1a220cdabd0c2c9 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:05:43 +0100 Subject: [PATCH 05/26] remove border --- docs/.vuepress/components/RoadmapProgress.vue | 7 ------- 1 file changed, 7 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index 2922b79..4e51152 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -397,13 +397,6 @@ const connectorColor = (index) => { text-decoration: underline; } -/* === Hervorhebung der aktiven Station === */ -.roadmap-station--in-progress .roadmap-content { - padding-left: 4px; - border-left: 3px solid rgba(99, 102, 241, 0.3); - border-radius: 4px; - margin-left: -4px; -} /* === Responsive === */ @media (max-width: 600px) { From 636dd3ab037ddb6eb93bedb9e363b784c73da3d5 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:07:04 +0100 Subject: [PATCH 06/26] fix line strength --- docs/.vuepress/components/RoadmapProgress.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index 4e51152..a9fc0a5 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -302,6 +302,7 @@ const connectorColor = (index) => { .roadmap-marker--done { background: #059669; + border: 3px solid #059669; color: #fff; font-size: 14px; font-weight: bold; @@ -309,6 +310,7 @@ const connectorColor = (index) => { .roadmap-marker--in-progress { background: #6366f1; + border: 3px solid #6366f1; box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2); } From cf0832ebe344a0c98cda445739fab3c25df2d696 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:08:24 +0100 Subject: [PATCH 07/26] show done --- docs/.vuepress/components/RoadmapProgress.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index a9fc0a5..923bb96 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -73,7 +73,7 @@ const items = [ es: 'Salas de chat para grupos para que los miembros puedan comunicarse en tiempo real.', fr: 'Salons de discussion pour les groupes afin que les membres puissent communiquer en temps réel.', }, - status: 'in-progress', + status: 'done', issues: [], }, { @@ -90,7 +90,7 @@ const items = [ es: 'Migración del frontend a Vue 3 para un mejor rendimiento y preparación para el futuro.', fr: 'Migration du frontend vers Vue 3 pour de meilleures performances et une pérennité assurée.', }, - status: 'planned', + status: 'in-progress', issues: [6384], }, { From eb4ed548f098cf2c68bf602dae8ffdfb999c8dbb Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:10:01 +0100 Subject: [PATCH 08/26] colors --- docs/.vuepress/components/RoadmapProgress.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index 923bb96..ac4b0d0 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -238,7 +238,7 @@ const connectorColor = (index) => { } .roadmap-legend-dot--done { - background: #059669; + background: #eab308; } .roadmap-legend-dot--in-progress { @@ -246,7 +246,7 @@ const connectorColor = (index) => { } .roadmap-legend-dot--planned { - background: #86efac; + background: #059669; } /* === Timeline === */ @@ -301,8 +301,8 @@ const connectorColor = (index) => { } .roadmap-marker--done { - background: #059669; - border: 3px solid #059669; + background: #eab308; + border: 3px solid #eab308; color: #fff; font-size: 14px; font-weight: bold; @@ -329,7 +329,7 @@ const connectorColor = (index) => { .roadmap-marker--planned { background: var(--vp-c-bg, #fff); - border: 3px solid #86efac; + border: 3px solid #059669; } /* === Inhalt === */ @@ -361,8 +361,8 @@ const connectorColor = (index) => { } .roadmap-content-badge--done { - background: #d1fae5; - color: #065f46; + background: #fef9c3; + color: #854d0e; } .roadmap-content-badge--in-progress { @@ -371,8 +371,8 @@ const connectorColor = (index) => { } .roadmap-content-badge--planned { - background: #ecfdf5; - color: #047857; + background: #d1fae5; + color: #065f46; } .roadmap-content-description { From 21ff04d4c241c2054a9e19298212943bc3a15dab Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:11:10 +0100 Subject: [PATCH 09/26] fix colors line --- docs/.vuepress/components/RoadmapProgress.vue | 27 +++++++++---------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index ac4b0d0..31f09f3 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -20,7 +20,7 @@ :class="'roadmap-station--' + item.status" > -
+
@@ -199,13 +199,17 @@ const statusLabel = (status) => { } // Farbe der Verbindungslinie zwischen Station[index] und Station[index+1] -const connectorColor = (index) => { - const current = items[index].status - const next = items[index + 1].status - if (current === 'done' && next === 'done') return 'done' - if (current === 'done' && next === 'in-progress') return 'to-active' - if (current === 'in-progress') return 'from-active' - return 'planned' +const statusColor = { + 'done': '#eab308', + 'in-progress': '#6366f1', + 'planned': '#059669', +} + +const connectorStyle = (index) => { + const from = statusColor[items[index].status] + const to = statusColor[items[index + 1].status] + if (from === to) return { background: from } + return { background: `linear-gradient(to bottom, ${from}, ${to})` } } @@ -275,13 +279,6 @@ const connectorColor = (index) => { z-index: 1; } -.roadmap-connector--done, -.roadmap-connector--to-active, -.roadmap-connector--from-active, -.roadmap-connector--planned { - background: #34d399; -} - /* === Marker === */ .roadmap-marker { grid-column: 1; From 7c8415e06d5dbf7cc033a16e2a85138628b36b69 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:14:21 +0100 Subject: [PATCH 10/26] font size --- docs/.vuepress/components/RoadmapProgress.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index 31f09f3..d5f0802 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -343,8 +343,9 @@ const connectorStyle = (index) => { gap: 10px; } -.roadmap-content-title { - font-size: 1.05em; +strong.roadmap-content-title { + font-size: 1.15em; + font-weight: 800; color: var(--vp-c-text-1, #213547); } @@ -407,8 +408,8 @@ const connectorStyle = (index) => { padding: 8px 0 20px 0; } - .roadmap-content-title { - font-size: 0.95em; + strong.roadmap-content-title { + font-size: 1.05em; } .roadmap-station--in-progress .roadmap-content { From 73339860a83565b385566cc511bcb36f9600e696 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:15:01 +0100 Subject: [PATCH 11/26] fix position --- docs/.vuepress/components/RoadmapProgress.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index d5f0802..a9f5063 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -333,7 +333,7 @@ const connectorStyle = (index) => { .roadmap-content { grid-column: 2; grid-row: 1; - padding: 16px 16px 24px 0; + padding: 14px 16px 24px 0; } .roadmap-content-header { From fc401ce35e9d3323de96b959d24693defc07de48 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:17:00 +0100 Subject: [PATCH 12/26] loading animation --- docs/.vuepress/components/RoadmapProgress.vue | 138 +++++++++++++++++- 1 file changed, 130 insertions(+), 8 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index a9f5063..cd12019 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -1,5 +1,5 @@ @@ -268,7 +277,7 @@ const connectorStyle = (index) => { min-height: 80px; } -/* === Verbindungslinie zwischen Stationen === */ +/* === Verbindungslinie === */ .roadmap-connector { position: absolute; left: 12px; @@ -277,6 +286,7 @@ const connectorStyle = (index) => { bottom: -28px; width: 3px; z-index: 1; + background: var(--conn-color, linear-gradient(to bottom, var(--conn-from), var(--conn-to))); } /* === Marker === */ @@ -397,6 +407,97 @@ strong.roadmap-content-title { text-decoration: underline; } +/* ========================================== + Animation: Punkte poppen auf, Linie zieht + ========================================== */ + +/* Vor der Animation: alles unsichtbar */ +.roadmap-station .roadmap-marker, +.roadmap-station .roadmap-content { + opacity: 0; + transform: scale(0.5); +} + +.roadmap-station .roadmap-connector { + transform: translateX(-50%) scaleY(0); + transform-origin: top center; +} + +/* Nach mounted: Animation starten */ +/* Timing pro Station: Marker poppt auf, Linie zieht, nächster Marker poppt */ +/* Station i: marker bei 0.3 + i*0.5s, connector bei 0.3 + i*0.5 + 0.15s */ + +.roadmap--animated .roadmap-station .roadmap-marker { + animation: markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, + markerGlow 0.5s ease calc(0.3s + var(--i) * 0.5s) forwards; + animation-delay: calc(0.3s + var(--i) * 0.5s); +} + +/* Content fliegt mit dem Marker ein */ +.roadmap--animated .roadmap-station .roadmap-content { + animation: contentFadeIn 0.4s ease forwards; + animation-delay: calc(0.3s + var(--i) * 0.5s); +} + +/* Linie zieht sich nach unten */ +.roadmap--animated .roadmap-station .roadmap-connector { + animation: lineGrow 0.4s ease forwards; + animation-delay: calc(0.45s + var(--i) * 0.5s); +} + +@keyframes markerPop { + 0% { + opacity: 0; + transform: scale(0); + } + 60% { + opacity: 1; + transform: scale(1.3); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes markerGlow { + 0% { + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); + } + 50% { + box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.4); + } + 100% { + box-shadow: none; + } +} + +@keyframes contentFadeIn { + 0% { + opacity: 0; + transform: translateX(-10px) scale(0.95); + } + 100% { + opacity: 1; + transform: translateX(0) scale(1); + } +} + +@keyframes lineGrow { + 0% { + transform: translateX(-50%) scaleY(0); + opacity: 0.5; + } + 100% { + transform: translateX(-50%) scaleY(1); + opacity: 1; + } +} + +/* Nach Animation: in-progress-Marker behält seinen box-shadow */ +.roadmap--animated .roadmap-marker--in-progress { + box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2); +} /* === Responsive === */ @media (max-width: 600px) { @@ -411,9 +512,30 @@ strong.roadmap-content-title { strong.roadmap-content-title { font-size: 1.05em; } +} - .roadmap-station--in-progress .roadmap-content { - padding-left: 4px; +/* Reduced motion: keine Animation */ +@media (prefers-reduced-motion: reduce) { + .roadmap-station .roadmap-marker, + .roadmap-station .roadmap-content { + opacity: 1; + transform: none; + } + + .roadmap-station .roadmap-connector { + transform: translateX(-50%) scaleY(1); + } + + .roadmap--animated .roadmap-station .roadmap-marker, + .roadmap--animated .roadmap-station .roadmap-content, + .roadmap--animated .roadmap-station .roadmap-connector { + animation: none; + opacity: 1; + transform: none; + } + + .roadmap--animated .roadmap-station .roadmap-connector { + transform: translateX(-50%); } } From 236930704ab08aef158584e3bdf9dad10bb6c75d Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:21:18 +0100 Subject: [PATCH 13/26] fix center circle --- docs/.vuepress/components/RoadmapProgress.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index cd12019..ebba165 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -327,6 +327,7 @@ const connectorStyle = (index) => { border-radius: 50%; background: #fff; animation: pulse 2s ease-in-out infinite; + margin: auto; } @keyframes pulse { From 8115017568fe6d029b37d6ed80f913eb4cb75e03 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:25:59 +0100 Subject: [PATCH 14/26] hover animation --- docs/.vuepress/components/RoadmapProgress.vue | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index ebba165..a778a01 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -275,12 +275,14 @@ const connectorStyle = (index) => { grid-template-rows: auto; column-gap: 20px; min-height: 80px; + margin-left: -12px; + padding-left: 12px; } /* === Verbindungslinie === */ .roadmap-connector { position: absolute; - left: 12px; + left: 24px; transform: translateX(-50%); top: 28px; bottom: -28px; @@ -408,6 +410,42 @@ strong.roadmap-content-title { text-decoration: underline; } +/* === Hover: Hintergrund über gesamte Zeile + Marker-Puls === */ +.roadmap-station { + cursor: default; + border-radius: 10px; + transition: background-color 0.25s ease; +} + +.roadmap-station:hover .roadmap-marker { + transition: transform 0.3s ease, box-shadow 0.3s ease; + transform: scale(1.25); +} + +.roadmap-station--done:hover { + background-color: rgba(234, 179, 8, 0.1); +} + +.roadmap-station--done:hover .roadmap-marker { + box-shadow: 0 0 12px 4px rgba(234, 179, 8, 0.35); +} + +.roadmap-station--in-progress:hover { + background-color: rgba(99, 102, 241, 0.1); +} + +.roadmap-station--in-progress:hover .roadmap-marker { + box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.35); +} + +.roadmap-station--planned:hover { + background-color: rgba(5, 150, 105, 0.1); +} + +.roadmap-station--planned:hover .roadmap-marker { + box-shadow: 0 0 12px 4px rgba(5, 150, 105, 0.35); +} + /* ========================================== Animation: Punkte poppen auf, Linie zieht ========================================== */ From f2dfaac4f5c1f8138b0356c86aaf994c6e331980 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:27:03 +0100 Subject: [PATCH 15/26] dark mode --- docs/.vuepress/components/RoadmapProgress.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index a778a01..b375b4f 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -359,7 +359,7 @@ const connectorStyle = (index) => { strong.roadmap-content-title { font-size: 1.15em; font-weight: 800; - color: var(--vp-c-text-1, #213547); + color: var(--vp-c-text); } .roadmap-content-badge { @@ -389,7 +389,8 @@ strong.roadmap-content-title { .roadmap-content-description { margin: 6px 0 0 0; font-size: 0.9em; - color: var(--vp-c-text-2, #666); + color: var(--vp-c-text); + opacity: 0.75; line-height: 1.6; } From 07ff82b49632b592b2503f3754043916d9df4880 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:33:52 +0100 Subject: [PATCH 16/26] wrench symbol --- docs/.vuepress/components/RoadmapProgress.vue | 35 +++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index b375b4f..0e9c244 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -26,7 +26,7 @@
✓ - +
@@ -323,18 +323,9 @@ const connectorStyle = (index) => { box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2); } -.roadmap-marker-pulse { +.roadmap-marker-svg { width: 10px; height: 10px; - border-radius: 50%; - background: #fff; - animation: pulse 2s ease-in-out infinite; - margin: auto; -} - -@keyframes pulse { - 0%, 100% { transform: scale(1); opacity: 1; } - 50% { transform: scale(1.3); opacity: 0.6; } } .roadmap-marker--planned { @@ -534,9 +525,25 @@ strong.roadmap-content-title { } } -/* Nach Animation: in-progress-Marker behält seinen box-shadow */ -.roadmap--animated .roadmap-marker--in-progress { - box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2); +/* Nach Einblend-Animation: in-progress pulsiert dauerhaft */ +.roadmap--animated .roadmap-station--in-progress .roadmap-marker { + animation: + markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, + markerGlow 0.5s ease forwards, + inProgressPulse 2s ease-in-out 1s infinite; + animation-delay: + calc(0.3s + var(--i) * 0.5s), + calc(0.3s + var(--i) * 0.5s), + calc(0.8s + var(--i) * 0.5s); +} + +@keyframes inProgressPulse { + 0%, 100% { + box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.2); + } + 50% { + box-shadow: 0 0 0 9px rgba(99, 102, 241, 0.35); + } } /* === Responsive === */ From 0621415dff6e5ae8ac74e39b4ac1eff6b379599e Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:41:53 +0100 Subject: [PATCH 17/26] previous entries --- docs/.vuepress/components/RoadmapProgress.vue | 134 +++++++++++++++--- 1 file changed, 112 insertions(+), 22 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index 0e9c244..5fda1d2 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -13,6 +13,16 @@
+ +
+
+ + + +
+ {{ t.previouslyCompleted }} +
+
{ const items = [ { id: 1, + title: { + de: 'Angepinnte Beiträge in Gruppen', + en: 'Pinned Posts in Groups', + es: 'Publicaciones fijadas en grupos', + fr: 'Publications épinglées dans les groupes', + }, + description: { + de: 'Wichtige Beiträge können in Gruppen oben angepinnt werden, damit sie sichtbar bleiben.', + en: 'Important posts can be pinned to the top of groups so they stay visible.', + es: 'Las publicaciones importantes se pueden fijar en la parte superior de los grupos para que permanezcan visibles.', + fr: 'Les publications importantes peuvent être épinglées en haut des groupes pour rester visibles.', + }, + status: 'done', + issues: [6233], + }, + { + id: 2, title: { de: 'Gruppen-Chat', en: 'Group Chat', @@ -83,25 +110,8 @@ const items = [ es: 'Salas de chat para grupos para que los miembros puedan comunicarse en tiempo real.', fr: 'Salons de discussion pour les groupes afin que les membres puissent communiquer en temps réel.', }, - status: 'done', - issues: [], - }, - { - id: 2, - title: { - de: 'Vue 2 → Vue 3 Migration', - en: 'Vue 2 → Vue 3 Migration', - es: 'Migración de Vue 2 → Vue 3', - fr: 'Migration Vue 2 → Vue 3', - }, - description: { - de: 'Migration des Frontends auf Vue 3 für bessere Performance und Zukunftssicherheit.', - en: 'Migration of the frontend to Vue 3 for better performance and future-proofing.', - es: 'Migración del frontend a Vue 3 para un mejor rendimiento y preparación para el futuro.', - fr: 'Migration du frontend vers Vue 3 pour de meilleures performances et une pérennité assurée.', - }, status: 'in-progress', - issues: [6384], + issues: [], }, { id: 3, @@ -188,13 +198,30 @@ const items = [ status: 'planned', issues: [2198, 4965], }, + { + id: 8, + title: { + de: 'Vue 2 → Vue 3 Migration', + en: 'Vue 2 → Vue 3 Migration', + es: 'Migración de Vue 2 → Vue 3', + fr: 'Migration Vue 2 → Vue 3', + }, + description: { + de: 'Migration des Frontends auf Vue 3 für bessere Performance und Zukunftssicherheit.', + en: 'Migration of the frontend to Vue 3 for better performance and future-proofing.', + es: 'Migración del frontend a Vue 3 para un mejor rendimiento y preparación para el futuro.', + fr: 'Migration du frontend vers Vue 3 pour de meilleures performances et une pérennité assurée.', + }, + status: 'planned', + issues: [6384], + }, ] const i18n = { - de: { done: 'Erledigt', inProgress: 'In Arbeit', planned: 'Geplant' }, - en: { done: 'Done', inProgress: 'In Progress', planned: 'Planned' }, - es: { done: 'Completado', inProgress: 'En curso', planned: 'Planificado' }, - fr: { done: 'Terminé', inProgress: 'En cours', planned: 'Planifié' }, + de: { done: 'Erledigt', inProgress: 'In Arbeit', planned: 'Geplant', previouslyCompleted: 'Bereits umgesetzt …' }, + en: { done: 'Done', inProgress: 'In Progress', planned: 'Planned', previouslyCompleted: 'Previously completed …' }, + es: { done: 'Completado', inProgress: 'En curso', planned: 'Planificado', previouslyCompleted: 'Ya completado …' }, + fr: { done: 'Terminé', inProgress: 'En cours', planned: 'Planifié', previouslyCompleted: 'Déjà réalisé …' }, } const t = i18n[locale] || i18n.de @@ -268,6 +295,60 @@ const connectorStyle = (index) => { padding-left: 0; } +/* === Drei Punkte: vorherige Umsetzungen === */ +.roadmap-past { + display: flex; + align-items: center; + gap: 16px; + margin-left: -12px; + padding-left: 12px; + padding-bottom: 20px; + position: relative; +} + +.roadmap-past-dots { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + width: 24px; +} + +.roadmap-past-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: #eab308; + opacity: 0.5; +} + +.roadmap-past-dot:nth-child(2) { + opacity: 0.7; +} + +.roadmap-past-dot:nth-child(3) { + opacity: 0.9; +} + +.roadmap-past-label { + font-size: 0.85em; + color: var(--vp-c-text); + opacity: 0.6; + font-style: italic; +} + +/* Verbindungslinie von den Punkten zum ersten Eintrag */ +.roadmap-past::after { + content: ''; + position: absolute; + left: 24px; + transform: translateX(-50%); + bottom: 0; + height: 20px; + width: 3px; + background: #eab308; +} + .roadmap-station { position: relative; display: grid; @@ -443,6 +524,15 @@ strong.roadmap-content-title { ========================================== */ /* Vor der Animation: alles unsichtbar */ +.roadmap-past { + opacity: 0; +} + +.roadmap--animated .roadmap-past { + animation: contentFadeIn 0.4s ease forwards; + animation-delay: 0.1s; +} + .roadmap-station .roadmap-marker, .roadmap-station .roadmap-content { opacity: 0; From d82edd1072c35f368330a87a89f5acfdb9bd4943 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:42:45 +0100 Subject: [PATCH 18/26] fix previous balken --- docs/.vuepress/components/RoadmapProgress.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index 5fda1d2..fdd576d 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -343,10 +343,11 @@ const connectorStyle = (index) => { position: absolute; left: 24px; transform: translateX(-50%); - bottom: 0; - height: 20px; + bottom: -28px; + height: 48px; width: 3px; background: #eab308; + z-index: 1; } .roadmap-station { From c0257047f71b0d54e7bf2de594bba20a53d9b83f Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 11 Mar 2026 15:44:26 +0100 Subject: [PATCH 19/26] only show 7 entries --- docs/.vuepress/components/RoadmapProgress.vue | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/docs/.vuepress/components/RoadmapProgress.vue b/docs/.vuepress/components/RoadmapProgress.vue index fdd576d..eaa5e57 100644 --- a/docs/.vuepress/components/RoadmapProgress.vue +++ b/docs/.vuepress/components/RoadmapProgress.vue @@ -64,7 +64,7 @@