- 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>
32 lines
562 B
Vue
32 lines
562 B
Vue
<template>
|
|
<div class="min-h-screen bg-sky-dark text-sky-text flex flex-col">
|
|
<LayoutAppHeader />
|
|
|
|
<main class="flex-1 pb-mobile-nav md:pb-0">
|
|
<slot />
|
|
</main>
|
|
|
|
<LayoutAppFooter class="hidden md:block" />
|
|
|
|
<ClientOnly>
|
|
<LayoutConsentBanner />
|
|
</ClientOnly>
|
|
|
|
<ClientOnly>
|
|
<LayoutBottomBar />
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pb-mobile-nav {
|
|
padding-bottom: calc(var(--bottom-bar-height, 64px) + 1rem);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.pb-mobile-nav {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|