61 lines
No EOL
1.4 KiB
Vue
61 lines
No EOL
1.4 KiB
Vue
<template>
|
|
<v-toolbar color="primary" prominent dark>
|
|
<v-container class="d-flex pa-0" fluid fill-height>
|
|
<div class="d-flex justify-start text-left text-no-wrap">
|
|
<THWLogo :above="logo_above" :below="logo_below" />
|
|
</div>
|
|
|
|
<div class="d-flex justify-center text-center mx-auto text-h6 text-md-h5">
|
|
<slot> <h1>TITLE</h1> </slot>
|
|
</div>
|
|
|
|
<div class="d-none d-sm-flex justify-end text-right text-no-wrap">
|
|
<div class="flex-column">
|
|
<Clock
|
|
class="d-flex justify-end font-weight-light text-h6 text-md-h5"
|
|
format="DDD"
|
|
/>
|
|
<Clock
|
|
class="d-flex justify-end font-weight-bold text-h5 text-md-h4"
|
|
format="T"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</v-container>
|
|
</v-toolbar>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
import Clock from "./Clock.vue";
|
|
import THWLogo from "./THWLogo.vue";
|
|
|
|
@Component({
|
|
components: {
|
|
Clock,
|
|
THWLogo,
|
|
},
|
|
})
|
|
export default class TitleBar extends Vue {
|
|
@Prop({
|
|
default: "Technisches Hilfswerk",
|
|
})
|
|
public logo_above!: string;
|
|
|
|
@Prop({
|
|
default: "OV Musterstadt",
|
|
})
|
|
public logo_below!: string;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-toolbar {
|
|
user-select: none;
|
|
}
|
|
|
|
.container > div:first-child,
|
|
.container > div:last-child {
|
|
max-width: 0;
|
|
}
|
|
</style> |