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

Use Props, more classless scoped styling

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-09-12 11:48:45 +00:00
parent bbddadef64
commit 2c9efb1df8
2 changed files with 27 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/src/components/THWLogo.vue
View file

@ -1,8 +1,8 @@
<template>
<div class="d-flex flex-column text-wrap">
<div class="d-flex justify-start justify-md-end">
<span class="d-none d-md-flex text-right thw-logo-font above mr-2">
<slot name="above">Technisches Hilfswerk</slot>
<span class="d-none d-md-flex text-right thw-logo-font mr-2">
{{ above }}
</span>
<v-img
class="d-none d-sm-flex"
@ -12,17 +12,23 @@
/>
</div>
<v-divider class="d-none d-md-block my-1" />
<span class="d-none d-md-flex thw-logo-font below">
<slot>OV Musterstadt</slot>
<span class="d-none d-md-flex thw-logo-font">
{{ below }}
</span>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class THWLogo extends Vue {}
export default class THWLogo extends Vue {
@Prop()
public above!: string;
@Prop()
public below!: string;
}
</script>
<style scoped>
@ -36,13 +42,13 @@ export default class THWLogo extends Vue {}
border-color: white;
}
.above {
div.flex-column > div > span:first-child {
font-size: 28px;
line-height: 28px;
align-items: center;
}
.below {
div.flex-column > span:last-child {
font-size: 15px;
line-height: 15px;
}

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

@ -2,7 +2,7 @@
<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 />
<THWLogo :above="logo_above" :below="logo_below" />
</div>
<div class="d-flex justify-center text-center mx-auto text-h6 text-md-h5">
@ -26,7 +26,7 @@
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component, Prop, Vue } from "vue-property-decorator";
import Clock from "./Clock.vue";
import THWLogo from "./THWLogo.vue";
@ -36,7 +36,17 @@ import THWLogo from "./THWLogo.vue";
THWLogo,
},
})
export default class TitleBar extends Vue {}
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>