skycel
64b1a33d10
- Add ZoneCard component for zone display with status indicators - Add CheminLibre drawer with vertical zone cards and path decoration - Add BottomBar with Map, Progress, and Settings buttons - Add ProgressDetail modal showing visited sections - Add SettingsDrawer with language, consent, and reset options - Add i18n translations for zone, cheminLibre, bottomBar, settings - Add --bottom-bar-height CSS variable for spacing - Modify layouts to include BottomBar on mobile (< 768px) - Support safe-area-inset for iOS devices - Touch targets minimum 48x48px for WCAG compliance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
const emit = defineEmits<{
|
|
close: []
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
const progressionStore = useProgressionStore()
|
|
|
|
const sections = computed(() => [
|
|
{
|
|
key: 'projets',
|
|
name: t('progress.sections.projects'),
|
|
visited: progressionStore.visitedSections.includes('projets'),
|
|
},
|
|
{
|
|
key: 'competences',
|
|
name: t('progress.sections.skills'),
|
|
visited: progressionStore.visitedSections.includes('competences'),
|
|
},
|
|
{
|
|
key: 'temoignages',
|
|
name: t('progress.sections.testimonials'),
|
|
visited: progressionStore.visitedSections.includes('temoignages'),
|
|
},
|
|
{
|
|
key: 'parcours',
|
|
name: t('progress.sections.journey'),
|
|
visited: progressionStore.visitedSections.includes('parcours'),
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="progress-detail">
|
|
<!-- Handle -->
|
|
<div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4 md:hidden" />
|
|
|
|
<h2 class="text-xl font-ui font-bold text-sky-text mb-4">
|
|
{{ t('progress.title') }}
|
|
</h2>
|
|
|
|
<!-- Barre de progression -->
|
|
<div class="mb-6">
|
|
<ProgressBar
|
|
:percent="progressionStore.completionPercent"
|
|
:show-tooltip="false"
|
|
compact
|
|
/>
|
|
</div>
|
|
|
|
<!-- Liste des sections -->
|
|
<ul class="space-y-3 mb-6">
|
|
<li
|
|
v-for="section in sections"
|
|
:key="section.key"
|
|
class="flex items-center gap-3"
|
|
>
|
|
<span
|
|
class="shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-sm"
|
|
:class="
|
|
section.visited
|
|
? 'bg-green-500/20 text-green-400'
|
|
: 'bg-sky-dark-100 text-sky-text-muted'
|
|
"
|
|
>
|
|
{{ section.visited ? '✓' : '○' }}
|
|
</span>
|
|
<span :class="section.visited ? 'text-sky-text' : 'text-sky-text-muted'">
|
|
{{ section.name }}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Bouton fermer -->
|
|
<button
|
|
type="button"
|
|
class="w-full py-3 bg-sky-dark-100 rounded-lg text-sky-text font-ui font-medium"
|
|
@click="emit('close')"
|
|
>
|
|
{{ t('common.close') }}
|
|
</button>
|
|
</div>
|
|
</template>
|