diff --git a/frontend/index.html b/frontend/index.html index 096d706..9c4c796 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,18 @@ + + pictureFrame + - - frontend + + + + + + + +
diff --git a/frontend/public/icons/apple-touch-icon.png b/frontend/public/icons/apple-touch-icon.png new file mode 100644 index 0000000..313b1d6 Binary files /dev/null and b/frontend/public/icons/apple-touch-icon.png differ diff --git a/frontend/public/icons/icon-192.png b/frontend/public/icons/icon-192.png new file mode 100644 index 0000000..6b2df89 Binary files /dev/null and b/frontend/public/icons/icon-192.png differ diff --git a/frontend/public/icons/icon-512-maskable.png b/frontend/public/icons/icon-512-maskable.png new file mode 100644 index 0000000..fb7cb5a Binary files /dev/null and b/frontend/public/icons/icon-512-maskable.png differ diff --git a/frontend/public/icons/icon-512.png b/frontend/public/icons/icon-512.png new file mode 100644 index 0000000..0e1248f Binary files /dev/null and b/frontend/public/icons/icon-512.png differ diff --git a/frontend/public/manifest.webmanifest b/frontend/public/manifest.webmanifest new file mode 100644 index 0000000..65eb837 --- /dev/null +++ b/frontend/public/manifest.webmanifest @@ -0,0 +1,32 @@ +{ + "name": "pictureFrame", + "short_name": "pictureFrame", + "description": "Manage photos for your e-ink picture frames.", + "id": "/", + "start_url": "/", + "scope": "/", + "display": "standalone", + "orientation": "portrait", + "background_color": "#fdf6ee", + "theme_color": "#fdf6ee", + "icons": [ + { + "src": "/build/icons/icon-192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/build/icons/icon-512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/build/icons/icon-512-maskable.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ] +} diff --git a/frontend/src/App.vue b/frontend/src/App.vue index f382cf4..82bd89b 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -18,10 +18,7 @@ const { applyTheme } = useTheme() onMounted(() => { const stamped = document.documentElement.dataset.theme - if (stamped && auth.user) { - auth.user.theme = stamped - } else if (auth.user?.theme) { - applyTheme(auth.user.theme) - } + const resolved = stamped || auth.user?.theme + if (resolved) applyTheme(resolved) }) diff --git a/frontend/src/components/BaseBottomSheet.vue b/frontend/src/components/BaseBottomSheet.vue index f954c32..0075bba 100644 --- a/frontend/src/components/BaseBottomSheet.vue +++ b/frontend/src/components/BaseBottomSheet.vue @@ -68,7 +68,7 @@ watch(() => props.modelValue, async (open) => { width: 100%; background: var(--color-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; - padding: var(--space-3) var(--space-4) var(--space-6); + padding: var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); max-height: 90dvh; overflow-y: auto; outline: none; diff --git a/frontend/src/components/BottomNav.vue b/frontend/src/components/BottomNav.vue index 2dcb63b..6451c3d 100644 --- a/frontend/src/components/BottomNav.vue +++ b/frontend/src/components/BottomNav.vue @@ -4,13 +4,13 @@ v-for="tab in tabs" :key="tab.name" :to="tab.to" - :class="['bottom-nav__tab', { 'bottom-nav__tab--active': isActive(tab.to) }]" + :class="['bottom-nav__tab', { 'bottom-nav__tab--active': tab.isActive(route) }]" :aria-label="tab.label" - :aria-current="isActive(tab.to) ? 'page' : undefined" + :aria-current="tab.isActive(route) ? 'page' : undefined" >