fix:#92 added responsive design for more subpages

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">
+<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">
-  <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"/>
+  <g transform="matrix(1 0 0 1 0 -71)">
-  <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"/>
+    <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>

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>

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") }}

frontend/src/components/MenuBar.vue

@@ -46,15 +46,15 @@ const items = computed(() => [
         <Button 
           severity="secondary"
           text
-          class="p-0 mx-2 my-1"
+          class="p-0 mx-2"
           @click="navigate"
         >
           <img
-            width="35"
+            width="50"
-            height="40"
+            height="50"
+            class="w-full"
             src="../../public/htwk.svg"
             alt="Logo"
-            class="mx-3"
           />
         </Button>
       </router-link>
@@ -64,9 +64,9 @@ const items = computed(() => [
         <Button
           :label="String(item.label)"
           :icon="item.icon"
-          severity="secondary"
           text
           @click="navigate"
+          severity="secondary"
         />
       </router-link>
     </template>

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>

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>

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>