From daa87c0255f68605738d067e9521e98f72b43e1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Sat, 24 Sep 2022 02:19:38 +0000
Subject: [PATCH] footer margin

---
 ui/src/App.vue                  |  3 +--
 ui/src/components/TickerBar.vue | 41 +++++++++++++++++++++------------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index ab44f7d..4e2db3c 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -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"
diff --git a/ui/src/components/TickerBar.vue b/ui/src/components/TickerBar.vue
index 7a0da7c..6202a0f 100644
--- a/ui/src/components/TickerBar.vue
+++ b/ui/src/components/TickerBar.vue
@@ -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;
+      }
     }
   }