ui/src/App.vue

@@ -1,10 +1,11 @@
 <template>
   <v-app>
     <v-main>
-      <TitleBar :title="title_html" />
+      <TitleBar>
+        <div v-html="title_html" />
+      </TitleBar>
       <HelloWorld />
     </v-main>
-    <TickerBar :content="ticker_html" />
   </v-app>
 </template>
 
@@ -12,18 +13,15 @@
 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

@@ -1,60 +0,0 @@
-<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>

ui/src/components/TitleBar.vue

@@ -5,10 +5,9 @@
         <THWLogo :above="logo_above" :below="logo_below" />
       </div>
 
-      <div
-        class="d-flex justify-center text-center mx-auto text-h6 text-md-h5"
-        v-html="title"
-      />
+      <div class="d-flex justify-center text-center mx-auto text-h6 text-md-h5">
+        <slot> <h1>TITLE</h1> </slot>
+      </div>
 
       <div class="d-none d-sm-flex justify-end text-right text-no-wrap">
         <div class="flex-column">
@@ -47,11 +46,6 @@ export default class TitleBar extends Vue {
     default: "OV Musterstadt",
   })
   public logo_below!: string;
-
-  @Prop({
-    default: "TITLE",
-  })
-  public title!: string;
 }
 </script>