OEKZident.de/ovdashboard
2
0
Fork 0
Code Releases 1 Packages Activity

better titlebar layout

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-09-11 22:24:48 +00:00
parent eaa4c17d4d
commit 3d3183c5f1
1 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ui/src/components/TitleBar.vue
View file

@ -1,30 +1,17 @@
<template>
<v-toolbar color="primary" prominent dark>
<v-row class="d-flex">
<v-col
cols="3"
class="d-flex flex-grow-1 flex-shrink-1 justify-start text-left"
>
LOGO
</v-col>
<v-container class="d-flex pa-0" fluid fill-height>
<div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
<v-col
cols="6"
class="d-flex flex-grow-0 flex-shrink-1 justify-center text-center"
>
TITLE
</v-col>
<div class="d-flex justify-center text-center mx-auto">TITLE</div>
<v-col
cols="3"
class="d-flex flex-grow-1 flex-shrink-1 justify-end text-right"
>
<div class="d-flex justify-end slim text-right text-no-wrap">
<div class="flex-column">
<Clock class="d-flex justify-end" format="DDD" />
<Clock class="d-flex justify-end" format="T" />
</div>
</v-col>
</v-row>
</div>
</v-container>
</v-toolbar>
</template>
@ -40,5 +27,8 @@ import Clock from "./Clock.vue";
export default class TitleBar extends Vue {}
</script>
<style>
<style lang="css" scoped>
.slim {
max-width: 0;
}
</style>