114 lines
2.4 KiB
Vue
114 lines
2.4 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,
|
|
selectedDate,
|
|
selectedDay,
|
|
changeDay,
|
|
changeDate,
|
|
} 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">
|
|
<div class="container">
|
|
<DateSelector
|
|
:selectedDate="selectedDate"
|
|
:selectedDay="selectedDay"
|
|
@changeDay="(inc) => (changeDay += inc)"
|
|
@changeDate="(date) => (changeDate = date)"
|
|
v-show="isDataView"
|
|
/>
|
|
<main>
|
|
<div class="wrapper">
|
|
<RouterView />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<BottomNavbar v-show="!$route.meta.hideNav" />
|
|
</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 {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.container {
|
|
max-width: 900px;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
.wrapper {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|