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

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

@ -2,7 +2,7 @@
<v-toolbar color="primary" prominent dark> <v-toolbar color="primary" prominent dark>
<v-container class="d-flex pa-0" fluid fill-height> <v-container class="d-flex pa-0" fluid fill-height>
<div class="d-flex justify-start text-left text-no-wrap"> <div class="d-flex justify-start text-left text-no-wrap">
<THWLogo /> <THWLogo :above="logo_above" :below="logo_below" />
</div> </div>
<div class="d-flex justify-center text-center mx-auto text-h6 text-md-h5"> <div class="d-flex justify-center text-center mx-auto text-h6 text-md-h5">
@ -26,7 +26,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import Clock from "./Clock.vue"; import Clock from "./Clock.vue";
import THWLogo from "./THWLogo.vue"; import THWLogo from "./THWLogo.vue";
@ -36,7 +36,17 @@ import THWLogo from "./THWLogo.vue";
THWLogo, 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> </script>
<style scoped> <style scoped>