Merge pull request #101 from HTWK-Leipzig/92-frontend-changes

92 frontend changes
2025-08-09 13:17:46 +02:00 · 2023-12-05 14:05:21 +01:00
parent fbaff30f09 3996fd3ec9
commit 49cec0154f
20 changed files with 12101 additions and 146 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
+    <link id="theme-link" rel="stylesheet" href="themes/lara-light-blue/theme.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTWKalender</title>
  </head>
--- a/frontend/public/htwk.svg
+++ b/frontend/public/htwk.svg
@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with PhotoLine 24.00 (www.pl32.de) -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="627" height="666" viewBox="0 0 627 666" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <rect id="Quadrat/Rechteck" transform="matrix(0.82674 -0.3298 1.134154 2.843093 -772.813049 -1590.353027)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
-  <rect id="Quadrat/Rechteck" transform="matrix(0.832138 -0.331953 1.134154 2.843093 -414.361572 -1608.206054)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
+<svg width="627" height="537" viewBox="0 0 627 537" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="matrix(1 0 0 1 0 -71)">
+    <rect id="Quadrat/Rechteck" transform="matrix(0.692624 -0.276299 0.950168 2.381878 -618.56427 -1339.071411)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
+    <rect id="Quadrat/Rechteck" transform="matrix(0.697146 -0.278103 0.950168 2.381878 -318.261779 -1354.028198)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
+  </g>
 </svg>
--- a/frontend/public/themes/lara-dark-blue/theme.css
+++ b/frontend/public/themes/lara-dark-blue/theme.css
--- a/frontend/public/themes/lara-light-blue/theme.css
+++ b/frontend/public/themes/lara-light-blue/theme.css
--- a/frontend/src/components/CalendarLink.vue
+++ b/frontend/src/components/CalendarLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import tokenStore from "../store/tokenStore.ts";
 import { useToast } from "primevue/usetoast";
-import { onMounted } from "vue";
+import {computed, onMounted} from "vue";
 import router from "../router";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
@@ -59,7 +59,7 @@ const forwardToMicrosoft = () => {
  );
 };

-const actions = [
+const actions = computed(() => [
  {
    label: t("calendarLink.copyToClipboard"),
    icon: "pi pi-copy",
@@ -75,7 +75,7 @@ const actions = [
    icon: "pi pi-microsoft",
    command: forwardToMicrosoft,
  },
-];
+]);
 </script>

 <template>
--- a/frontend/src/components/CalendarPreview.vue
+++ b/frontend/src/components/CalendarPreview.vue
@@ -44,7 +44,7 @@ window.addEventListener("resize", updateMobile);
    :draggable="false"
    :header="$t('calendarPreview.preview-long')"
    class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
-    position="bottomright"
+    position="bottomleft"
    @update:visible="dialogVisible = $event"
  >
    <DataTable
@@ -52,6 +52,8 @@ window.addEventListener("resize", updateMobile);
      edit-mode="cell"
      table-class="editable-cells-table"
      responsive-layout="scroll"
+      class="w-full"
+      :size="mobilePage ? 'small' : 'large'"
    >
      <Column
        v-for="column in columns"
@@ -68,7 +70,7 @@ window.addEventListener("resize", updateMobile);
  </Dialog>
  <SpeedDial
    v-if="previewOn && !dialogVisible"
-    :style="{ position: 'fixed', bottom: '2rem', right: '2rem' }"
+    :style="{ position: 'fixed', bottom: '2rem', left: '2rem' }"
  >
    <template #button>
      <Button
--- a/frontend/src/components/DarkModeSwitcher.vue
+++ b/frontend/src/components/DarkModeSwitcher.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { usePrimeVue } from 'primevue/config';
+
+const PrimeVue = usePrimeVue();
+
+const isDark = ref(true);
+const darkTheme = ref('lara-dark-blue'),
+  lightTheme = ref('lara-light-blue');
+
+function toggleTheme() {
+  isDark.value = !isDark.value;
+  setTheme(isDark.value);
+}
+
+function setTheme(shouldBeDark: boolean) {
+  isDark.value = shouldBeDark;
+  const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
+    oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
+  PrimeVue.changeTheme(oldTheme, newTheme, 'theme-link', () => {});
+}
+
+// set theme matching browser preference
+setTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+   setTheme(e.matches); 
+});
+</script>
+
+<template>
+
+<Button
+  size="small"
+  class="p-button-rounded w-full md:w-auto"
+  id="dark-mode-switcher"
+  style="margin-right: 1rem"
+  :severity="isDark ? 'warning' : 'info'"
+  @click="toggleTheme"
+  >
+  <i class="pi pi-sun" v-if="isDark"></i>
+  <i class="pi pi-moon" v-else></i>
+</Button>
+
+</template>
--- a/frontend/src/components/FaqPage.vue
+++ b/frontend/src/components/FaqPage.vue
@@ -6,7 +6,7 @@
      <h1>{{ $t("faqView.headline") }}</h1>
    </div>

-    <div class="flex flex-column col-7">
+    <div class="flex flex-column lg:col-7">
      <div class="grid my-2">
        <div class="col">
          {{ $t("faqView.firstQuestion") }}
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
+import DarkModeSwitcher from "./DarkModeSwitcher.vue"
 const { t } = useI18n({ useScope: "global" });

 const items = computed(() => [
@@ -39,29 +40,41 @@ const items = computed(() => [
 </script>

 <template>
-  <Menubar :model="items" class="menubar justify-content-between">
+  <Menubar :model="items" class="menubar justify-content-between flex-wrap">
    <template #start>
-      <img
-        width="35"
-        height="40"
-        src="../../public/htwk.svg"
-        alt="Logo"
-        class="h-10 w-10 mr-3"
-      />
+      <router-link v-slot="{ navigate }" :to="`/`" custom>
+        <Button 
+          severity="secondary"
+          text
+          class="p-0 mx-2"
+          @click="navigate"
+        >
+          <img
+            width="50"
+            height="50"
+            class="w-full"
+            src="../../public/htwk.svg"
+            alt="Logo"
+          />
+        </Button>
+      </router-link>
    </template>
    <template #item="{ item }">
      <router-link v-slot="{ navigate }" :to="item.route" custom>
        <Button
          :label="String(item.label)"
          :icon="item.icon"
-          severity="secondary"
          text
          @click="navigate"
+          severity="secondary"
        />
      </router-link>
    </template>
-    <template #end>
-      <LocaleSwitcher></LocaleSwitcher>
+    <template #end class="align-items-stretch">
+      <div class="flex align-items-stretch justify-content-center">
+        <DarkModeSwitcher></DarkModeSwitcher>
+        <LocaleSwitcher></LocaleSwitcher>
+      </div>
    </template>
  </Menubar>
 </template>
--- a/frontend/src/components/ModuleInformation.vue
+++ b/frontend/src/components/ModuleInformation.vue
@@ -30,7 +30,7 @@ function sortModuleEventsByStart(events: Event[]) {
 <template>
  <div>
    <h2>{{ module.name }}</h2>
-    <table>
+    <table class="w-full">
      <tr>
        <td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td>
      </tr>
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -42,73 +42,63 @@ function nextStep() {
 </script>

 <template>
-  <div class="flex flex-column card-container mx-8 mt-2">
-    <div class="flex align-items-center justify-content-center mb-3">
-      <Button
-        :disabled="store.isEmpty()"
-        class="col-4 justify-content-center"
-        @click="nextStep()"
-        >{{ $t("moduleSelection.nextStep") }}
-      </Button>
-    </div>
-    <div class="flex align-items-center justify-content-center">
-      <DataView :value="modules" data-key="uuid">
-        <template #header>
-          <div class="flex justify-content-between flex-wrap">
-            <div class="flex align-items-center justify-content-center">
-              <h3>
-                {{ $t("moduleSelection.modules") }} -
-                {{ store.countModules() }}
-              </h3>
-            </div>
-            <div class="flex align-items-center justify-content-center">
-              {{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
-              <InputSwitch
-                class="mx-4"
-                :disabled="modules.length === 0"
-                :model-value="allSelected"
-                @update:model-value="toggleAllModules()"
-              />
-            </div>
+  <div class="flex flex-column mx-8 mt-2 w-full">
+    <Button
+      :disabled="store.isEmpty()"
+      class="col-12 md:col-4 mb-3 align-self-end"
+      @click="nextStep()"
+      icon="pi pi-arrow-right"
+      :label="$t('moduleSelection.nextStep')"
+    />
+    <DataView 
+      :value="modules"
+      data-key="uuid"
+      :class="
+        [modules.length === 0? 
+          ['opacity-0', 'pointer-events-none'] : 
+          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
+        ,
+        'w-full']"
+      >
+      <template #header>
+        <div class="flex justify-content-between align-items-center flex-wrap">
+            <h3>
+              {{ $t("moduleSelection.modules") }} -
+              {{ store.countModules() }}
+            </h3>
+          <div class="flex flex-1 align-items-center justify-content-end white-space-nowrap">
+            {{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
+            <InputSwitch
+              class="mx-4"
+              :disabled="modules.length === 0"
+              :model-value="allSelected"
+              @update:model-value="toggleAllModules()"
+            />
          </div>
-        </template>
-        <template #empty>
-          <p class="p-4 text-2xl font-bold text-900 empty-message">
-            {{ $t("moduleSelection.noModulesAvailable") }}
-          </p>
-        </template>
-        <template #list="slotProps">
-          <div class="col-12">
-            <div
-              class="flex flex-column xl:flex-row xl:align-items-start p-2 gap-4"
-            >
-              <div
-                class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 gap-4"
-              >
-                <div
-                  class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
-                >
-                  <p class="text-lg">{{ slotProps.data.name }}</p>
-                </div>
-                <div
-                  class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
-                >
-                  <ToggleButton
-                    class="w-9rem"
-                    off-icon="pi pi-times"
-                    :off-label="$t('moduleSelection.unselected')"
-                    on-icon="pi pi-check"
-                    :on-label="$t('moduleSelection.selected')"
-                    :model-value="store.hasModule(slotProps.data)"
-                    @update:model-value="toggleModule(slotProps.data)"
-                  />
-                </div>
-              </div>
-            </div>
+        </div>
+      </template>
+      <template #empty>
+        <p class="p-4 text-2xl font-bold text-900 empty-message">
+          {{ $t("moduleSelection.noModulesAvailable") }}
+        </p>
+      </template>
+      <template #list="slotProps">
+        <div class="col-12">
+          <div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2">
+            <p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.name }}</p>
+            <ToggleButton
+              class="w-9rem align-self-end my-2"
+              off-icon="pi pi-times"
+              :off-label="$t('moduleSelection.unselected')"
+              on-icon="pi pi-check"
+              :on-label="$t('moduleSelection.selected')"
+              :model-value="store.hasModule(slotProps.data)"
+              @update:model-value="toggleModule(slotProps.data)"
+            />
          </div>
-        </template>
-      </DataView>
-    </div>
+        </div>
+      </template>
+    </DataView>
  </div>
 </template>

--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -119,7 +119,7 @@
    "preview": "Vorschau",
    "preview-long": "Kalendervorschau",
    "module": "Modul",
-    "course": "Seminargruppe"
+    "course": "Gruppe"
  },
  "faqView": {
    "headline": "Fragen und Antworten",
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -9,19 +9,19 @@
  "english": "English",
  "german": "German",
  "courseSelection": {
-    "headline": "Welcome to HTWKalender",
+    "headline": "welcome to HTWKalender",
    "winterSemester": "winter semester",
    "summerSemester": "summer semester",
-    "subTitle": "Please select a course and semester",
-    "courseDropDown": "Please select a course",
-    "noCoursesAvailable": "No courses listed",
-    "semesterDropDown": "Please select a semester"
+    "subTitle": "please select a course and semester",
+    "courseDropDown": "please select a course",
+    "noCoursesAvailable": "no courses listed",
+    "semesterDropDown": "please select a semester"
  },
  "roomFinderPage": {
    "headline": "room finder",
-    "detail": "Please select a room to view the occupancy",
-    "dropDownSelect": "Please select a room",
-    "noRoomsAvailable": "No rooms listed",
+    "detail": "please select a room to view the occupancy",
+    "dropDownSelect": "please select a room",
+    "noRoomsAvailable": "no rooms listed",
    "available": "available",
    "occupied": "occupied"
  },
@@ -64,13 +64,13 @@
    "toast": {
      "success": "Success",
      "error": "Error",
-      "successDetail": "Calendar successfully deleted",
-      "errorDetail": "Calendar could not be deleted"
+      "successDetail": "calendar successfully deleted",
+      "errorDetail": "calendar could not be deleted"
    }
  },
  "additionalModules": {
-    "subTitle": "Select additional modules that are not listed in the regular semester for your course",
-    "dropDown": "Select additional modules",
+    "subTitle": "select additional modules that are not listed in the regular semester for your course",
+    "dropDown": "select additional modules",
    "module": "module",
    "modules": "modules",
    "footerModulesSelected": "{count} module selected | {count} modules selected",
@@ -88,8 +88,8 @@
  "renameModules": {
    "reminder": "reminder",
    "enableAllNotifications": "enable all notifications",
-    "subTitle": "Configure your selected Modules to your liking.",
-    "nextStep": "Save"
+    "subTitle": "configure your selected modules to your liking",
+    "nextStep": "save"
  },
  "moduleTemplateDialog": {
    "explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.",
@@ -107,7 +107,7 @@
    "eventTyp": "event type"
  },
  "calendarLink": {
-    "copyToastNotification": "Link copied to clipboard",
+    "copyToastNotification": "link copied to clipboard",
    "copyToastSummary": "information",
    "copyToastError": "error",
    "copyToastErrorDetail": "could not copy link to clipboard",
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -12,7 +12,6 @@ import Card from "primevue/card";
 import DataView from "primevue/dataview";
 import Dialog from "primevue/dialog";
 import ToggleButton from "primevue/togglebutton";
-import "primevue/resources/themes/tailwind-light/theme.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
 import router from "./router";
@@ -67,4 +66,5 @@ app.component("Column", Column);
 app.component("DynamicDialog", DynamicDialog);
 app.component("ProgressSpinner", ProgressSpinner);
 app.component("Checkbox", Checkbox);
+
 app.mount("#app");
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -9,7 +9,7 @@ import RoomFinder from "../view/RoomFinder.vue";
 import EditCalendarView from "../view/EditCalendarView.vue";
 import EditAdditionalModules from "../components/editCalendar/EditAdditionalModules.vue";
 import EditModules from "../components/editCalendar/EditModules.vue";
-import CourseSelection from "../components/CourseSelection.vue";
+import CourseSelection from "../view/CourseSelection.vue";
 import i18n from "../i18n";

 const router = createRouter({
--- a/frontend/src/view/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -85,13 +85,13 @@ function unselectModule(event: DataTableRowUnselectEvent) {
 </script>

 <template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+  <div class="flex flex-column align-items-center w-full">
+    <div class="flex align-items-center justify-content-center m-2">
      <h3>
        {{ $t("additionalModules.subTitle") }}
      </h3>
    </div>
-    <div class="card flex align-items-center justify-content-center m-2">
+    <div class="m-2 lg:w-10 w-full">
      <DynamicDialog />
      <DataTable
        v-model:filters="filters"
@@ -116,7 +116,6 @@ function unselectModule(event: DataTableRowUnselectEvent) {
        :show-gridlines="true"
        :striped-rows="true"
        :select-all="false"
-        class="w-10"
        @row-select="selectModule"
        @row-unselect="unselectModule"
      >
@@ -184,13 +183,14 @@ function unselectModule(event: DataTableRowUnselectEvent) {
        </template>
      </DataTable>
    </div>
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+    <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
      <Button 
        :disabled="store.isEmpty()"
        @click="nextStep()"
-      >{{
-        $t("additionalModules.nextStep")
-      }}</Button>
+        class="md:col-4 justify-content-center mb-3 align-self-end"
+        icon="pi pi-arrow-right"
+        :label="$t('additionalModules.nextStep')"
+      />
    </div>
  </div>
 </template>
--- a/frontend/src/components/CourseSelection.vue
+++ b/frontend/src/components/CourseSelection.vue
@@ -4,7 +4,7 @@ import {
  fetchCourse,
  fetchModulesByCourseAndSemester,
 } from "../api/fetchCourse";
-import ModuleSelection from "./ModuleSelection.vue";
+import ModuleSelection from "../components/ModuleSelection.vue";
 import { Module } from "../model/module.ts";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
@@ -52,28 +52,31 @@ async function getModules() {
 </script>

 <template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+  <div 
+    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
+    :class="{'md:mt-8': modules.length === 0}"
+  >
+    <div class="flex align-items-center justify-content-center gap-2 mx-2">
      <h3 class="text-4xl">
        {{ $t("courseSelection.headline") }}
-        <i
-          class="pi pi-calendar vertical-align-baseline"
-          style="font-size: 2rem"
-        ></i>
      </h3>
+      <i
+        class="pi pi-calendar"
+        style="font-size: 2rem"
+      ></i>
    </div>
    <div
-      class="flex align-items-center justify-content-center h-4rem border-round m-2"
+      class="flex justify-content-center"
    >
-      <h5 class="text-2xl">{{ $t("courseSelection.subTitle") }}</h5>
+      <h5 class="text-2xl m-2">{{ $t("courseSelection.subTitle") }}</h5>
    </div>
    <div
-      class="flex align-items-center justify-content-center border-round m-2"
+      class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8"
    >
      <Dropdown
        v-model="selectedCourse"
        :options="countries"
-        class="w-full md:w-25rem mx-2"
+        class="flex-1 m-0"
        filter
        option-label="name"
        :placeholder="$t('courseSelection.courseDropDown')"
@@ -84,21 +87,15 @@ async function getModules() {
      <Dropdown
        v-model="selectedSemester"
        :options="semesters"
-        class="w-full md:w-25rem mx-2"
+        class="flex-1 m-0"
        option-label="name"
        :placeholder="$t('courseSelection.semesterDropDown')"
        @change="getModules()"
      ></Dropdown>
    </div>
-
-    <div
-      class="flex align-items-center justify-content-center border-round m-2"
-    >
-      <div class="flex flex-wrap justify-content-center">
-        <div class="flex align-items-center">
-          <ModuleSelection :modules="modules" />
-        </div>
-      </div>
-    </div>
+    <ModuleSelection
+      :modules="modules"
+      class="lg:w-8"
+    />
  </div>
 </template>
--- a/frontend/src/view/EditCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@@ -66,36 +66,39 @@ function loadCalendar(): void {
 </script>

 <template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem mt-2">
+  <div class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out md:mt-8">
+    <div class="flex align-items-center justify-content-center gap-2 mx-2">
      <h3 class="text-4xl">
        {{ $t("editCalendarView.headline") }}
-        <i
-          class="pi pi-pencil vertical-align-baseline ml-2"
-          style="font-size: 2rem"
-        ></i>
      </h3>
+      <i
+        class="pi pi-pencil"
+        style="font-size: 2rem"
+      ></i>
    </div>
    <div
-      class="flex align-items-center justify-content-center h-4rem border-round"
+      class="flex justify-content-center"
    >
-      <p class="text-2xl">{{ $t("editCalendarView.subTitle") }}</p>
+      <p class="text-2xl m-2">{{ $t("editCalendarView.subTitle") }}</p>
    </div>
    <div
-      class="flex align-items-center justify-content-center border-round m-2"
+      class="flex align-items-center justify-content-center m-4 w-full lg:w-8"
    >
      <InputText
        v-model="token"
        type="text"
+        class="w-full"
        autofocus
        @keyup.enter="loadCalendar"
      />
    </div>
    <div
-      class="flex align-items-center justify-content-center border-round m-2"
+      class="flex align-items-center justify-content-end m-2 w-full lg:w-8"
    >
      <Button
        :label="$t('editCalendarView.loadCalendar')"
+        icon="pi pi-arrow-down"
+        class="col-12 md:col-4 mb-3 align-self-end"
        @click="loadCalendar"
      />
    </div>
--- a/frontend/src/view/ImprintPage.vue
+++ b/frontend/src/view/ImprintPage.vue
@@ -5,7 +5,7 @@
    <div class="flex align-items-center justify-content-center h-4rem mt-2">
      <h3 class="text-4xl">{{ $t("imprint") }}</h3>
    </div>
-    <div class="flex flex-column col-7">
+    <div class="flex flex-column md:col-7">
      <p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p>

      <h2>Kontakt</h2>
--- a/frontend/src/view/PrivacyPolicy.vue
+++ b/frontend/src/view/PrivacyPolicy.vue
@@ -5,7 +5,7 @@
    <div class="flex align-items-center justify-content-center h-4rem mt-2">
      <h3 class="text-4xl">{{ $t("privacy") }}</h3>
    </div>
-    <div class="flex flex-column col-7">
+    <div class="flex flex-column md:col-7">
      <h1>Datenschutzerklärung</h1>
      <p>Stand: 19. September 2023</p>
      <p>