Rework CSS theme (app.css), navbar layout, dashboard page, machine detail, catalog pages, and various form/display components for better consistency and mobile responsiveness. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<template>
|
|
<div class="min-h-screen flex flex-col bg-base-200/40">
|
|
<!-- Subtle dot pattern background -->
|
|
<div class="fixed inset-0 -z-10 bg-[radial-gradient(oklch(85%_0.02_260)_1px,transparent_1px)] bg-[size:24px_24px] opacity-40" />
|
|
|
|
<AppNavbar
|
|
@open-settings="displaySettingsOpen = true"
|
|
@logout="handleLogout"
|
|
/>
|
|
|
|
<main class="flex-1">
|
|
<NuxtPage :transition="{ name: 'page', mode: 'out-in' }" />
|
|
</main>
|
|
|
|
<ToastContainer />
|
|
|
|
<ConfirmModal />
|
|
|
|
<DisplaySettings
|
|
:is-open="displaySettingsOpen"
|
|
@close="displaySettingsOpen = false"
|
|
@update-settings="handleSettingsUpdate"
|
|
/>
|
|
|
|
<footer class="border-t border-base-300/50 bg-base-100/60 backdrop-blur-sm">
|
|
<div class="container mx-auto flex items-center justify-between px-6 py-3">
|
|
<p class="text-xs text-base-content/40 font-medium tracking-wide">
|
|
© Malio {{ new Date().getFullYear() }}
|
|
</p>
|
|
<NuxtLink
|
|
to="/changelog"
|
|
class="text-xs text-base-content/40 hover:text-primary transition-colors font-medium"
|
|
>
|
|
v{{ appVersion }}
|
|
</NuxtLink>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { navigateTo, useRuntimeConfig } from '#imports'
|
|
import { useProfileSession } from '~/composables/useProfileSession'
|
|
|
|
const displaySettingsOpen = ref(false)
|
|
const { ensureSession, logout } = useProfileSession()
|
|
const runtimeConfig = useRuntimeConfig()
|
|
const appVersion = computed(() => (runtimeConfig.public?.appVersion as string) ?? '0.1.0')
|
|
|
|
const handleSettingsUpdate = (_settings: unknown) => {
|
|
// Placeholder for future persistence
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
await logout()
|
|
await navigateTo('/profiles')
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await ensureSession()
|
|
})
|
|
</script>
|