91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<script setup>
|
|
import { RouterView, useRoute } from "vue-router";
|
|
import TitleBar from "@/components/titlebar-element.vue";
|
|
import BottomNavbar from "@/components/bottom-navbar.vue";
|
|
import DateSelector from "@/components/date-selector.vue";
|
|
import LoadingElement from "@/components/loading-element.vue";
|
|
import { loading, loadingProgress, loadingFailed, theme } from "@/store";
|
|
import { computed, ref } from "vue";
|
|
|
|
const autoThemes = { true: "dark", false: "light" };
|
|
const autoTheme = ref("dark");
|
|
const colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
|
|
autoTheme.value = autoThemes[colorSchemeMedia.matches];
|
|
colorSchemeMedia.addEventListener(
|
|
"change",
|
|
(e) => (autoTheme.value = autoThemes[e.matches])
|
|
);
|
|
|
|
const route = useRoute();
|
|
const isDataView = computed(() => route.meta.dataView || false);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="app"
|
|
:class="theme == 'auto' ? `theme-${autoTheme}` : `theme-${theme}`"
|
|
>
|
|
<TitleBar />
|
|
<LoadingElement
|
|
:active="loading"
|
|
:progress="loadingProgress"
|
|
:error="loadingFailed"
|
|
/>
|
|
<div class="center">
|
|
<main>
|
|
<DateSelector v-show="isDataView" />
|
|
<div class="wrapper">
|
|
<RouterView />
|
|
</div>
|
|
</main>
|
|
<BottomNavbar v-show="$route.name != 'title.login'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
@import "./assets/base.css";
|
|
@import "./assets/themes.css";
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.app {
|
|
display: grid;
|
|
/* Make the loading bar 0px in height so it overlays
|
|
instead of being in between navbar and content */
|
|
grid-template-rows: auto 0 1fr;
|
|
color: var(--text-color);
|
|
background-color: var(--bg-color);
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: auto;
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.wrapper {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|