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

footer margin

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-09-24 02:19:38 +00:00
parent 738be6e667
commit daa87c0255
2 changed files with 27 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/src/App.vue
View file

@ -4,7 +4,7 @@
<TitleBar />
<Dashboard>
<template slot="message">
<div class="d-flex flex-column fill-height pb-sm-12">
<div class="d-flex flex-column fill-height">
<Message :html="message_html" />
<ImageCarousel
class="mt-auto"
@ -19,7 +19,6 @@
<template slot="calendars">
<CalendarCarousel :speed="calendar_speed" :data="calendar_data" />
<DashboardInfo
class="pb-12 pb-sm-0"
:server_host="server_host"
:server_name="server_name"
:version="dashboard_version"

41
ui/src/components/TickerBar.vue
View file

@ -1,9 +1,12 @@
<template>
<v-footer :color="color" :dark="is_dark" fixed>
<span ref="marquee" class="text-h6">
<div ref="content" v-html="content" />
</span>
</v-footer>
<div>
<v-footer :color="color" :dark="is_dark" fixed>
<span ref="marquee" class="text-h6" v-html="content" />
</v-footer>
<v-footer>
<span class="text-h6" v-html="content" />
</v-footer>
</div>
</template>
<script lang="ts">
@ -43,9 +46,12 @@ export default class TickerBar extends Vue {
@Watch("content", { immediate: true })
private set_marquee_duration(): void {
this.$nextTick((): void => {
const width = parseFloat(
window.getComputedStyle(this._content).getPropertyValue("width")
);
const style = window.getComputedStyle(this._marquee);
const width =
parseFloat(style.getPropertyValue("width")) -
parseFloat(style.getPropertyValue("padding-left")) -
parseFloat(style.getPropertyValue("padding-right"));
// 10 seconds + another second per 40px
const duration = 10 + Math.round(width / 40);
@ -69,15 +75,20 @@ export default class TickerBar extends Vue {
.v-footer {
white-space: nowrap;
overflow: hidden;
z-index: 0;
> span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 30s linear infinite;
&:first-child {
z-index: 999;
&:hover {
animation-play-state: paused;
> span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 30s linear infinite;
&:hover {
animation-play-state: paused;
}
}
}