92 integrate roomfinder and faq design

frontend/src/components/CalendarLink.vue

@@ -80,9 +80,9 @@ const actions = computed(() => [
 
 <template>
 
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h2>
+  <div class="flex flex-column mt-8">
+    <div class="flex align-items-center justify-content-center m-2">
+      <h2 class="text-base md:text-2xl">
         {{ getLink() }}
       </h2>
     </div>

frontend/src/components/CalendarPreview.vue

@@ -70,6 +70,7 @@ const columns = computed(() => [
         icon="pi pi-calendar"
         :label="$t('calendarPreview.preview')"
         class="p-button-rounded p-button-primary"
+        raised
         @click="dialogVisible = true"
       />
     </template>

frontend/src/components/FaqPage.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+    <div class="flex align-items-center justify-content-center m-2">
       <h1>{{ $t("faqView.headline") }}</h1>
     </div>
 
@@ -216,4 +216,13 @@
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.grid > .col {
+  flex-basis: 15rem;
+}
+
+.grid > .col:first-child {
+  font-weight: bold;
+}
+
+</style>

frontend/src/components/RenameModules.vue

@@ -34,7 +34,7 @@ async function finalStep() {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center">
+  <div class="flex flex-column align-items-center mb-7">
     <div class="flex align-items-center justify-content-center m-2 gap-2">
       <h3>{{ $t("renameModules.subTitle") }}</h3>
       <ModuleTemplateDialog class=""/>

frontend/src/components/editCalendar/EditModules.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, Ref, ref } from "vue";
+import { computed, inject, Ref, ref } from "vue";
 import { Module } from "../../model/module.ts";
 import moduleStore from "../../store/moduleStore";
 import { fetchAllModules } from "../../api/fetchCourse.ts";
@@ -25,6 +25,7 @@ const tableData = computed(() =>
     };
   }),
 );
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 
 const columns = computed(() => [
   { field: "Course", header: t("moduleInformation.course") },
@@ -82,115 +83,118 @@ async function deleteFeed() {
 </script>
 
 <template>
-  <div class="flex flex-column card-container lg:mx-8 mt-2">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+  <div class="flex flex-column align-items-center mb-7">
+    <div class="flex align-items-center justify-content-center m-2 gap-2">
       <h3>{{ $t("renameModules.subTitle") }}</h3>
       <ModuleTemplateDialog />
     </div>
-    <div
-      class="card flex align-items-center justify-content-center border-round m-2"
-    >
-      <DataTable
-        :value="tableData"
-        edit-mode="cell"
-        table-class="editable-cells-table"
-        responsive-layout="scroll"
-        class="w-full lg:w-8"
+    <div class="w-full lg:w-8 flex flex-column">
+      <div
+        class="card flex align-items-center justify-content-center my-2"
       >
-        <template #header>
-          <div class="flex align-items-center justify-content-end">
-            {{ $t("renameModules.enableAllNotifications") }}
-            <InputSwitch
-              class="mx-4"
-              :model-value="
-                tableData.reduce(
-                  (acc, curr) => acc && curr.Module.reminder,
-                  true,
-                )
-              "
-              @update:model-value="
-                tableData.forEach((module) => (module.Module.reminder = $event))
-              "
-            />
-          </div>
-        </template>
-        <Column
-          v-for="col of columns"
-          :key="col.field"
-          :field="col.field"
-          :header="col.header"
-          :class="col.field === 'Reminder' ? 'text-center' : ''"
+        <DataTable
+          :value="tableData"
+          edit-mode="cell"
+          table-class="editable-cells-table"
+          responsive-layout="scroll"
+          :size="mobilePage ? 'small' : 'large'"
+          class="w-full"
         >
-          <!-- Text Body -->
-          <template #body="{ data, field }">
-            <template v-if="field === 'Module'">
-              {{
-                onlyWhitespace(data[field].userDefinedName)
-                  ? data[field].name
-                  : data[field].userDefinedName
-              }}
-            </template>
-            <template v-else-if="field === 'Reminder'">
-              <Button
-                icon="pi pi-bell"
-                :severity="data.Module.reminder ? 'warning' : 'secondary'"
-                rounded
-                outlined
-                class="small-button"
-                @click="data.Module.reminder = !data.Module.reminder"
-              ></Button>
-            </template>
-            <template v-else>
-              {{ data[field] }}
-            </template>
+          <template #header>
+            <div class="flex align-items-center justify-content-end">
+              {{ $t("renameModules.enableAllNotifications") }}
+              <InputSwitch
+                class="mx-4"
+                :model-value="
+                  tableData.reduce(
+                    (acc, curr) => acc && curr.Module.reminder,
+                    true,
+                  )
+                "
+                @update:model-value="
+                  tableData.forEach((module) => (module.Module.reminder = $event))
+                "
+              />
+            </div>
           </template>
-          <!-- Editor Body -->
-          <template #editor="{ data, field }">
-            <template v-if="field === 'Module'">
-              <InputText
-                v-model="data[field].userDefinedName"
-                class="w-full"
-                autofocus
+          <Column
+            v-for="col of columns"
+            :key="col.field"
+            :field="col.field"
+            :header="col.header"
+            :class="col.field === 'Reminder' ? 'text-center' : ''"
+          >
+            <!-- Text Body -->
+            <template #body="{ data, field }">
+              <template v-if="field === 'Module'">
+                {{
+                  onlyWhitespace(data[field].userDefinedName)
+                    ? data[field].name
+                    : data[field].userDefinedName
+                }}
+              </template>
+              <template v-else-if="field === 'Reminder'">
+                <Button
+                  icon="pi pi-bell"
+                  :severity="data.Module.reminder ? 'warning' : 'secondary'"
+                  rounded
+                  outlined
+                  class="small-button"
+                  @click="data.Module.reminder = !data.Module.reminder"
+                ></Button>
+              </template>
+              <template v-else>
+                {{ data[field] }}
+              </template>
+            </template>
+            <!-- Editor Body -->
+            <template #editor="{ data, field }">
+              <template v-if="field === 'Module'">
+                <InputText
+                  v-model="data[field].userDefinedName"
+                  class="w-full"
+                  autofocus
+                />
+              </template>
+              <template v-else-if="field === 'Reminder'">
+                <Button
+                  icon="pi pi-bell"
+                  :severity="data.Module.reminder ? 'warning' : 'secondary'"
+                  rounded
+                  outlined
+                  class="small-button"
+                  @click="data.Module.reminder = !data.Module.reminder"
+                ></Button>
+              </template>
+              <template v-else>
+                {{ data[field] }}
+              </template>
+            </template>
+          </Column>
+          <Column>
+            <template #body="{ data }">
+              <Button
+                icon="pi pi-trash"
+                class="small-button"
+                severity="danger"
+                outlined
+                rounded
+                aria-label="Cancel"
+                @click="deleteModule(data['Module'])"
               />
             </template>
-            <template v-else-if="field === 'Reminder'">
-              <Button
-                icon="pi pi-bell"
-                :severity="data.Module.reminder ? 'warning' : 'secondary'"
-                rounded
-                outlined
-                class="small-button"
-                @click="data.Module.reminder = !data.Module.reminder"
-              ></Button>
-            </template>
-            <template v-else>
-              {{ data[field] }}
-            </template>
+          </Column>
+          <template #footer>
+            <div
+                class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full"
+            >
+              <Button type="button" severity="danger" outlined @click="visible = true" icon="pi pi-trash" :label="$t('editCalendarView.delete')"/>
+              <Button type="button" severity="info" outlined @click="router.push('edit-additional-modules')" icon="pi pi-plus" :label="$t('editCalendarView.addModules')"/>
+              <Button type="button" severity="success" outlined @click="finalStep()" icon="pi pi-save" :label="$t('editCalendarView.save')"/>
+            </div>
           </template>
-        </Column>
-        <Column>
-          <template #body="{ data }">
-            <Button
-              icon="pi pi-trash"
-              class="small-button"
-              severity="danger"
-              outlined
-              rounded
-              aria-label="Cancel"
-              @click="deleteModule(data['Module'])"
-            />
-          </template>
-        </Column>
-        <template #footer>
-          <div
-              class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full"
-          >
-            <Button type="button" severity="danger" outlined @click="visible = true" icon="pi pi-trash" :label="$t('editCalendarView.delete')"/>
-            <Button type="button" severity="info" outlined @click="router.push('edit-additional-modules')" icon="pi pi-plus" :label="$t('editCalendarView.addModules')"/>
-            <Button type="button" severity="success" outlined @click="finalStep()" icon="pi pi-save" :label="$t('editCalendarView.save')"/>
-          </div>
-        </template>
-      </DataTable>
+        </DataTable>
+      </div>
     </div>
   </div>
   <div class="card flex justify-content-center">

frontend/src/view/AdditionalModules.vue

@@ -87,7 +87,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center w-full">
+  <div class="flex flex-column align-items-center w-full mb-7">
     <div class="flex align-items-center justify-content-center m-2">
       <h3>
         {{ $t("additionalModules.subTitle") }}
@@ -191,7 +191,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       <Button 
         :disabled="store.isEmpty()"
         @click="nextStep()"
-        class="md:col-4 justify-content-center mb-3 align-self-end"
+        class="col-12 md:col-4 mb-3 align-self-end"
         icon="pi pi-arrow-right"
         :label="$t('additionalModules.nextStep')"
       />

frontend/src/view/EditCalendarView.vue

@@ -66,7 +66,7 @@ function loadCalendar(): void {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out md:mt-8">
+  <div class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out md:mt-8 mb-7">
     <div class="flex align-items-center justify-content-center gap-2 mx-2">
       <h3 class="text-4xl">
         {{ $t("editCalendarView.headline") }}

frontend/src/view/ImprintPage.vue

@@ -2,8 +2,8 @@
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem mt-2">
-      <h3 class="text-4xl">{{ $t("imprint") }}</h3>
+    <div class="flex align-items-center justify-content-center mt-2">
+      <h1>{{ $t("imprint") }}</h1>
     </div>
     <div class="flex flex-column md:col-7">
       <p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p>

frontend/src/view/PrivacyPolicy.vue

@@ -2,8 +2,8 @@
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem mt-2">
-      <h3 class="text-4xl">{{ $t("privacy") }}</h3>
+    <div class="flex align-items-center justify-content-center mt-2">
+      <h1>{{ $t("privacy") }}</h1>
     </div>
     <div class="flex flex-column md:col-7">
       <h1>Datenschutzerklärung</h1>

frontend/src/view/RoomFinder.vue

@@ -19,26 +19,31 @@ rooms().then(
 </script>
 
 <template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3 class="text-4xl">{{ $t("roomFinderPage.headline") }}</h3>
+  <div 
+    class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
+    :class="{'md:mt-8': selectedRoom.name === ''}"
+  >
+    <div class="flex align-items-center justify-content-center gap-2 mx-2">
+      <h3 class="text-4xl">
+        {{ $t("roomFinderPage.headline") }}
+      </h3>
       <i
-        class="pi pi-search vertical-align-baseline ml-3"
+        class="pi pi-search"
         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("roomFinderPage.detail") }}</h5>
+      <h5 class="text-2xl m-2">{{ $t("roomFinderPage.detail") }}</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="selectedRoom"
         :options="roomsList"
-        class="w-full md:w-25rem mx-2"
+        class="flex-1 m-0"
         filter
         option-label="name"
         :placeholder="$t('roomFinderPage.dropDownSelect')"
@@ -46,8 +51,17 @@ rooms().then(
         :auto-filter-focus="true"
       />
     </div>
-    <div class="m-6">
-      <RoomOccupation :room="selectedRoom.name" />
+    <div 
+      :class="
+        [selectedRoom.name === ''? 
+          ['opacity-0', 'pointer-events-none'] : 
+          ['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
+        ,
+        'w-full', 'lg:w-8']"
+      >
+      <RoomOccupation
+        :room="selectedRoom.name"
+      />
     </div>
   </div>
 </template>