🎨 Improve CSS around Swiper component

src/App.vue

@@ -41,7 +41,9 @@ const isDataView = computed(() => {
     <div class="center">
       <main>
         <DateSelector v-show="isDataView" />
-        <RouterView />
+        <div class="wrapper">
+          <RouterView />
+        </div>
       </main>
       <BottomNavbar v-show="$route.name != 'title.login'" />
     </div>
@@ -83,5 +85,13 @@ main {
   width: 100%;
   max-width: 900px;
   overflow: hidden;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+</style>
+
+<style scoped>
+.wrapper {
+  overflow: hidden;
 }
 </style>

src/components/day-carousel.vue

@@ -4,6 +4,7 @@ import { Swiper, SwiperSlide } from "swiper/vue";
 import { Virtual } from "swiper";
 import { ref, watch } from "vue";
 import { getDateSkippingWeekend } from "../util";
+import ScrollableContainer from "../components/scrollable-container.vue";
 
 defineProps({
   element: {
@@ -109,9 +110,9 @@ watch(changeDate, (date) => {
       :key="index"
       :virtualIndex="index"
     >
-      <div class="content">
+      <ScrollableContainer>
         <component :is="element" :date="date" />
-      </div>
+      </ScrollableContainer>
     </swiper-slide>
   </swiper>
 </template>
@@ -122,15 +123,9 @@ watch(changeDate, (date) => {
 
 <style scoped>
 .swiper {
-  padding: 10px;
+  padding: 5px 10px 0px 10px;
   z-index: 0;
   height: 100%;
-}
-
-.content {
-  height: calc(100% - 150px);
-  overflow-y: auto;
-  padding-bottom: 100px;
-  touch-action: pan-y;
+  box-sizing: border-box;
 }
 </style>

src/components/scrollable-container.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="scroll">
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scroll {
+  overflow-y: auto;
+  touch-action: pan-y;
+  height: 100%;
+}
+
+.content {
+  padding-bottom: 90px;
+}
+</style>

src/views/HistoryView.vue

@@ -4,13 +4,5 @@ import HistoryList from "../components/history-list.vue";
 </script>
 
 <template>
-  <div class="history">
-    <DayCarousel :element="HistoryList" />
-  </div>
+  <DayCarousel :element="HistoryList" />
 </template>
-
-<style scoped>
-.history {
-  height: 100%;
-}
-</style>

src/views/SettingsView.vue

@@ -1,4 +1,5 @@
 <script setup>
+import ScrollableContainer from "../components/scrollable-container.vue";
 import {
   classList,
   classFilter,
@@ -13,7 +14,7 @@ const gitHash = GITVERSION;
 </script>
 
 <template>
-  <div class="settings">
+  <ScrollableContainer class="settings">
     <!-- Filtering -->
     <h2>{{ $t("settings.heading.filtering") }}</h2>
     <p>{{ $t("settings.text.filtering") }}</p>
@@ -70,15 +71,12 @@ const gitHash = GITVERSION;
     <p>{{ $t("settings.text.about") }}</p>
     <div class="spacer"></div>
     <p class="gray">{{ $t("settings.version") }}: {{ gitHash }}</p>
-  </div>
+  </ScrollableContainer>
 </template>
 
 <style scoped>
 .settings {
-  padding: 15px 10px 80px 10px;
-  height: calc(100% - 100px);
-  overflow-y: auto;
-  padding-bottom: 90px;
+  padding: 15px 10px 0px 10px;
 }
 
 h2 {

src/views/SubstitutionView.vue

@@ -4,13 +4,5 @@ import SubstitutionList from "../components/substitution-list.vue";
 </script>
 
 <template>
-  <div class="substitutions">
-    <DayCarousel :element="SubstitutionList" />
-  </div>
+  <DayCarousel :element="SubstitutionList" />
 </template>
-
-<style scoped>
-.substitutions {
-  height: 100%;
-}
-</style>

src/views/TimetableView.vue

@@ -11,13 +11,5 @@ import TimetableList from "../components/timetable-list.vue";
     :options="classList"
     v-model="classFilter"
   />
-  <div class="timetable">
-    <DayCarousel :element="TimetableList" />
-  </div>
+  <DayCarousel v-show="classFilter != 'none'" :element="TimetableList" />
 </template>
-
-<style scoped>
-.timetable {
-  height: 100%;
-}
-</style>