vikingowl
5fac66a38c
- Add mobile card view for packages (replaces table on small screens) - Implement design tokens system for consistent styling - Add dark/light theme toggle with system preference support - Create reusable StatusBadge and EmptyState components - Add accessible form labels to package filters - Add compact mobile stats display in navigation - Add safe area insets for notched devices - Add reduced motion support for accessibility - Improve touch targets for WCAG compliance - Add unit tests for composables - Update Vuetify configuration and styling
70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<v-app class="app-root">
|
|
<main-nav />
|
|
|
|
<v-main class="main-content">
|
|
<v-container class="content-container" fluid>
|
|
<build-server-stats />
|
|
<currently-building />
|
|
<packages />
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import MainNav from '@/components/MainNav.vue'
|
|
import BuildServerStats from '@/components/BuildServerStats.vue'
|
|
import CurrentlyBuilding from '@/components/CurrentlyBuilding.vue'
|
|
import Packages from '@/components/Packages.vue'
|
|
import { useStatsStore } from '@/stores/statsStore'
|
|
import { onBeforeMount } from 'vue'
|
|
import { usePackagesStore } from '@/stores'
|
|
import { useAutoRefresh } from '@/composables/useAutoRefresh'
|
|
|
|
const statsStore = useStatsStore()
|
|
const packagesStore = usePackagesStore()
|
|
|
|
const intervalMinutes = Number(import.meta.env.VITE_UPDATE_INTERVAL) || 5
|
|
const { start: startAutoRefresh } = useAutoRefresh(() => {
|
|
statsStore.fetchStats()
|
|
packagesStore.fetchPackages()
|
|
packagesStore.fetchCurrentlyBuilding()
|
|
}, intervalMinutes * 60 * 1000)
|
|
|
|
onBeforeMount(() => {
|
|
statsStore.fetchStats()
|
|
packagesStore.fetchPackages(true)
|
|
packagesStore.fetchCurrentlyBuilding()
|
|
startAutoRefresh()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-root {
|
|
background: var(--color-bg-primary) !important;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.main-content {
|
|
padding-top: var(--space-4);
|
|
padding-bottom: var(--space-8);
|
|
}
|
|
|
|
.content-container {
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.main-content {
|
|
padding-top: var(--space-2);
|
|
}
|
|
|
|
.content-container {
|
|
padding: var(--space-4);
|
|
}
|
|
}
|
|
</style>
|