Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 53d545abe0 | |||
| 01afdf4860 |
@@ -22,6 +22,7 @@ import { EpochSpan } from '@/types/date';
|
||||
|
||||
// Vuetify display
|
||||
const display = useDisplay();
|
||||
const isMobile = computed(() => display.mdAndDown.value);
|
||||
|
||||
// Check if chrono manager is available
|
||||
const moduleStore = useModuleStore();
|
||||
@@ -163,7 +164,7 @@ function selectSectionFromRoute() {
|
||||
<template>
|
||||
<div class="chrono-container">
|
||||
<!-- Top Navigation Bar -->
|
||||
<v-toolbar elevation="0" class="chrono-toolbar border-b">
|
||||
<v-toolbar elevation="0" density="compact" class="chrono-toolbar">
|
||||
<template #prepend>
|
||||
<v-btn
|
||||
icon="mdi-menu"
|
||||
@@ -173,8 +174,8 @@ function selectSectionFromRoute() {
|
||||
</template>
|
||||
|
||||
<v-toolbar-title class="d-flex align-center">
|
||||
<v-icon size="28" color="primary" class="mr-2">mdi-calendar-month</v-icon>
|
||||
<span class="text-h6 font-weight-bold">Chrono</span>
|
||||
<v-icon size="24" color="primary" class="mr-2">mdi-calendar-month</v-icon>
|
||||
<span class="text-subtitle-1 font-weight-bold">Chrono</span>
|
||||
</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
@@ -202,8 +203,8 @@ function selectSectionFromRoute() {
|
||||
<v-navigation-drawer
|
||||
v-model="sidebarVisible"
|
||||
contained
|
||||
:permanent="display.mdAndUp.value"
|
||||
:temporary="display.smAndDown.value"
|
||||
:permanent="sidebarVisible && !isMobile"
|
||||
:temporary="isMobile"
|
||||
width="280"
|
||||
class="chrono-sidebar"
|
||||
>
|
||||
@@ -353,6 +354,7 @@ function selectSectionFromRoute() {
|
||||
}
|
||||
|
||||
.chrono-toolbar {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgb(var(--v-border-color)) !important;
|
||||
}
|
||||
|
||||
@@ -385,10 +387,6 @@ function selectSectionFromRoute() {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom: 1px solid rgb(var(--v-border-color));
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 960px) {
|
||||
.chrono-main {
|
||||
|
||||
Reference in New Issue
Block a user