✨ Implement day navigation gestures with Swiper.js

src/components/substitution-list.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { substitutionsForDate } from "../store";
+import { getSubstitutionText, getSubstitutionColor } from "../util";
+import { computed } from "vue";
+
+const props = defineProps({
+  date: {
+    required: true,
+  },
+});
+
+const substitutions = computed(() => {
+  return substitutionsForDate.value[props.date.setUTCHours(0, 0, 0, 0)];
+});
+</script>
+
+<template>
+  <template v-for="substitution in substitutions" :key="substitution">
+    <div class="substitution" :style="getSubstitutionColor(substitution)">
+      <span class="hour">{{ substitution.lesson }}</span>
+      <div class="infos">
+        <span class="text">{{
+          $t(getSubstitutionText(substitution), {
+            subject: substitution.change.subject,
+            class: substitution.class.join(", "),
+            teacher: substitution.change.teacher || substitution.teacher,
+            room: substitution.change.room,
+          })
+        }}</span>
+        <span class="notes" v-if="substitution.notes">
+          {{ $t("timetable.notes") }} {{ substitution.notes }}
+        </span>
+      </div>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.substitution {
+  display: grid;
+  background-color: var(--substitution-background-unchanged);
+  min-height: 50px;
+  border-radius: 11px;
+  margin-bottom: 10px;
+  padding: 10px 15px;
+  grid-template-columns: max-content auto;
+  gap: 15px;
+}
+
+.hour {
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.infos {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.text {
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  word-wrap: break-word;
+}
+
+.notes {
+  font-size: 13px;
+  font-weight: 100;
+}
+</style>