ui/src/components/Clock.vue

@@ -14,15 +14,12 @@ export default class Clock extends Vue {
   @Prop()
   public format!: string;
 
-  private update(): void {
-    this.formatted = DateTime.now()
-      .setLocale(navigator.language)
-      .toFormat(this.format);
-  }
-
   public created(): void {
-    this.update();
+    this.interval = setInterval((): void => {
-    this.interval = setInterval(this.update, 10000);
+      this.formatted = DateTime.now()
+        .setLocale(navigator.language)
+        .toFormat(this.format);
+    }, 1000);
   }
 
   public beforeDestroy(): void {

ui/src/components/TitleBar.vue

@@ -1,19 +1,30 @@
 <template>
   <v-toolbar color="primary" prominent dark>
-    <v-container class="d-flex pa-0" fluid fill-height>
+    <v-row class="d-flex">
-      <div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
+      <v-col
+        cols="3"
+        class="d-flex flex-grow-1 flex-shrink-1 justify-start text-left"
+      >
+        LOGO
+      </v-col>
 
-      <div class="d-flex justify-center text-center mx-auto thw-font">
+      <v-col
+        cols="6"
+        class="d-flex flex-grow-0 flex-shrink-1 justify-center text-center"
+      >
         TITLE
-      </div>
+      </v-col>
 
-      <div class="d-flex justify-end slim text-right text-no-wrap">
+      <v-col
+        cols="3"
+        class="d-flex flex-grow-1 flex-shrink-1 justify-end text-right"
+      >
         <div class="flex-column">
           <Clock class="d-flex justify-end" format="DDD" />
           <Clock class="d-flex justify-end" format="T" />
         </div>
-      </div>
+      </v-col>
-    </v-container>
+    </v-row>
   </v-toolbar>
 </template>
 
@@ -29,12 +40,5 @@ import Clock from "./Clock.vue";
 export default class TitleBar extends Vue {}
 </script>
 
-<style lang="css" scoped>
+<style>
-.slim {
-  max-width: 0;
-}
-
-.thw-font {
-  font-family: "Lubalin Graph", "Roboto", sans-serif !important;
-}
 </style>