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