♻️ Refactor frontend code

src/views/HistoryView.vue

@@ -78,7 +78,7 @@ function getColor(type) {
   border-radius: 11px;
   margin: 10px 0px;
   padding: 10px 10px;
-  grid-template-columns: 40px auto;
+  grid-template-columns: min-content auto;
   gap: 5px;
 }
 

src/views/SettingsView.vue

@@ -13,6 +13,7 @@ const gitHash = GITVERSION;
 
 <template>
   <div class="settings">
+    <!-- Filtering -->
     <h2>{{ $t("settings.heading.filtering") }}</h2>
     <p>{{ $t("settings.text.filtering") }}</p>
     <select v-model="classFilter">
@@ -23,6 +24,8 @@ const gitHash = GITVERSION;
       <option value="other">{{ $t("settings.other") }}</option>
     </select>
     <div class="spacer"></div>
+
+    <!-- Timetable Groups -->
     <h2>{{ $t("settings.heading.timetableGroups") }}</h2>
     <p>{{ $t("settings.text.timetableGroups") }}</p>
     <select v-model="timetableGroups" multiple>
@@ -36,6 +39,8 @@ const gitHash = GITVERSION;
       </option>
     </select>
     <div class="spacer"></div>
+
+    <!-- Language -->
     <h2>{{ $t("settings.heading.language") }}</h2>
     <p>{{ $t("settings.text.language") }}</p>
     <select v-model="language">
@@ -48,6 +53,8 @@ const gitHash = GITVERSION;
       </option>
     </select>
     <div class="spacer"></div>
+
+    <!-- About -->
     <h2>{{ $t("settings.heading.about") }}</h2>
     <p>{{ $t("settings.text.about") }}</p>
     <div class="spacer"></div>
@@ -74,6 +81,12 @@ select {
   outline: none;
   border: 2px solid var(--element-border-input);
   border-radius: 5px;
+  background-color: var(--element-color);
+  transition: background-color 0.2s;
+}
+
+select:hover {
+  background-color: var(--element-color-hover);
 }
 
 select[multiple] {

src/views/SubstitutionView.vue

@@ -36,14 +36,10 @@ const substitutions = computed(() => {
   padding: 0px 10px 80px 10px;
 }
 
-.title {
-  font-size: 18px;
-}
-
 .substitution {
   display: grid;
   background-color: var(--substitution-background-unchanged);
-  min-height: 35px;
+  min-height: 50px;
   border-radius: 11px;
   margin: 10px 0px;
   padding: 10px 15px;

src/views/TimetableView.vue

@@ -12,11 +12,14 @@ import { getSubstitutionColor } from "../util";
 import { computed } from "vue";
 import TimetableSetup from "../components/initial-setup.vue";
 
+// Link the timetable with the substitutions
 const linkedTimetable = computed(() => {
   const currentDay = parsedTimetable.value[selectedDay.value];
   if (!currentDay) return [];
+
   const newDay = currentDay.map((e, index) => {
     const newElement = { ...e };
+    // Find a substitution mathing this lesson
     newElement.substitution = substitutions.value.find((entry) => {
       const entryDay = new Date(entry.date).getTime();
       return (
@@ -32,16 +35,14 @@ const linkedTimetable = computed(() => {
 
 function isChanged(lesson, key) {
   const substitution = lesson.substitution;
-  if (!substitution) return false;
-  if (!substitution.change) return false;
+  if (!(substitution && substitution.change)) return false;
   const changedKeys = Object.keys(substitution.change);
   if (!changedKeys.includes(key)) return false;
   return lesson[key] != substitution.change[key];
 }
 
 function getNotes(substitution) {
-  if (!substitution) return;
-  if (!substitution.notes) return;
+  if (!(substitution && substitution.notes)) return;
   return substitution.notes;
 }
 
@@ -52,7 +53,7 @@ function isCancelled(substitution) {
 </script>
 <template>
   <TimetableSetup
-    v-show="!classFilter || classFilter == 'none'"
+    v-show="classFilter == 'none'"
     :options="classList"
     v-model="classFilter"
   />
@@ -113,8 +114,8 @@ function isCancelled(substitution) {
   justify-content: center;
 }
 .trust-warning {
-  border: 1px solid #b71c1c;
-  background-color: #412727;
+  border: 1px solid var(--timetable-trust-warning-border);
+  background-color: var(--timetable-trust-warning-background);
   border-radius: 4px;
   padding: 3px 10px;
   margin-top: 10px;
@@ -127,7 +128,7 @@ function isCancelled(substitution) {
   min-height: 50px;
   border-radius: 11px;
   margin: 10px 0px;
-  padding: 15px 15px;
+  padding: 15px;
   grid-template-columns: max-content auto;
   gap: 15px;
 }