TickerBar component

ui/src/App.vue

@@ -6,6 +6,7 @@
       </TitleBar>
       <HelloWorld />
     </v-main>
+    <TickerBar :content="ticker_html" />
   </v-app>
 </template>
 
@@ -13,15 +14,18 @@
 import { Component, Vue } from "vue-property-decorator";
 import HelloWorld from "./components/HelloWorld.vue";
 import TitleBar from "./components/TitleBar.vue";
+import TickerBar from "./components/TickerBar.vue";
 
 @Component({
   components: {
     HelloWorld,
     TitleBar,
+    TickerBar,
   },
 })
 export default class App extends Vue {
   private title_html = "<h1>changeme</h1>";
+  private ticker_html = "<p>changeme</p>";
 }
 </script>
 

ui/src/components/TickerBar.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-footer color="primary" dark>
+    <span
+      class="text-h6"
+      :style="{ 'animation-duration': marqueeDuration }"
+      ref="slotWrapper"
+    >
+      <div v-html="content" />
+    </span>
+  </v-footer>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class TickerBar extends Vue {
+  @Prop()
+  public content!: string;
+
+  get marqueeDuration(): string {
+    // 10 seconds + another second per 7 chars
+    let dv = this.content ? Math.round(this.content.length / 7) : 0;
+    return 10 + dv + "s";
+  }
+}
+</script>
+
+<style lang="scss">
+@keyframes marquee {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-100%, 0);
+  }
+}
+
+.v-footer {
+  white-space: nowrap;
+  overflow: hidden;
+
+  > span {
+    display: inline-block;
+    padding-left: 100%;
+    text-indent: 0;
+    animation: marquee 30s linear infinite;
+
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+}
+</style>
+
+<style>
+.v-footer p {
+  margin: 0;
+}
+</style>