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 /> <TitleBar />
<Dashboard> <Dashboard>
<template slot="message"> <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" /> <Message :html="message_html" />
<ImageCarousel <ImageCarousel
class="mt-auto" class="mt-auto"
@ -19,7 +19,6 @@
<template slot="calendars"> <template slot="calendars">
<CalendarCarousel :speed="calendar_speed" :data="calendar_data" /> <CalendarCarousel :speed="calendar_speed" :data="calendar_data" />
<DashboardInfo <DashboardInfo
class="pb-12 pb-sm-0"
:server_host="server_host" :server_host="server_host"
:server_name="server_name" :server_name="server_name"
:version="dashboard_version" :version="dashboard_version"

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

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