ui/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-layout column fill-height>
+    <v-main>
       <TitleBar
         :logo_above="logo_above"
         :logo_below="logo_below"
@@ -9,12 +9,12 @@
       <Dashboard :message="message_html">
         <CalendarCarousel />
       </Dashboard>
+    </v-main>
     <TickerBar
       v-if="ticker_html !== ''"
       :content="ticker_html"
       color="primary"
     />
-    </v-layout>
   </v-app>
 </template>
 

ui/src/components/Dashboard.vue

@@ -1,13 +1,11 @@
 <template>
-  <v-container fill-height>
+  <v-container>
-    <v-layout>
     <v-row>
       <v-col cols="5" v-html="message" />
       <v-col cols="7">
         <slot>CALENDARS</slot>
       </v-col>
     </v-row>
-    </v-layout>
   </v-container>
 </template>
 

ui/src/components/calendar/Calendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list class="py-0">
+  <v-list>
     <span class="text-h5 text-md-h4 text-truncate d-inline-block mb-2">
       {{ title }}
     </span>

ui/src/components/calendar/CalendarCarousel.vue

@@ -1,6 +1,5 @@
 <template>
   <v-carousel
-    ref="main"
     cycle
     :interval="speed"
     height="auto"
@@ -15,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Ref, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import Calendar from "./Calendar.vue";
 import { CalendarData, CalendarModel } from "./CalendarModel";
 
@@ -25,42 +24,9 @@ import { CalendarData, CalendarModel } from "./CalendarModel";
   },
 })
 export default class CalendarCarousel extends Vue {
-  private interval?: number;
-
   @Prop({ default: 10000 })
   private readonly speed!: number;
 
-  @Ref("main")
-  private readonly _main?: Vue;
-
-  private update_height(): void {
-    const diff = 150;
-
-    if (this._main === undefined) return;
-
-    const parentElement = this._main.$el.parentElement;
-    if (parentElement === null) return;
-
-    const divElement = this._main.$el.querySelector("div");
-    if (divElement === null) return;
-
-    const divHeightPX = window
-      .getComputedStyle(parentElement)
-      .getPropertyValue("height");
-    const maxHeight = parseFloat(divHeightPX) - diff;
-
-    divElement.style.setProperty("max-height", maxHeight + "px");
-  }
-
-  public mounted(): void {
-    this.update_height();
-    this.interval = setInterval(this.update_height, 10000);
-  }
-
-  public beforeDestroy(): void {
-    clearInterval(this.interval);
-  }
-
   private readonly data: Array<CalendarData> = [
     {
       title: "Lorem Ipsum",
@@ -110,81 +76,6 @@ export default class CalendarCarousel extends Vue {
         },
       ],
     },
-    {
-      title: "Vivamus elementum semper nisi",
-      events: [
-        {
-          summary: "Phasellus viverra nulla 1",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 2",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 3",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 4",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 5",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 6",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 7",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 8",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 9",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-        {
-          summary: "Phasellus viverra nulla 10",
-          description:
-            "Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
-          dtstart: "2022-09-08T07:00:00+00:00",
-          dtend: "2022-09-08T16:00:00+00:00",
-        },
-      ],
-    },
   ];
 
   private get calendars(): Array<CalendarModel> {
@@ -197,9 +88,3 @@ export default class CalendarCarousel extends Vue {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.v-carousel:deep() > div {
-  max-height: 500px;
-}
-</style>