From 8dfe8a48369b018606251d220f7081f4ab5423ce Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com.>
Date: Mon, 4 Dec 2023 02:39:08 +0100
Subject: [PATCH] 92 frontend refinements, clickable logo

---
 frontend/src/components/CalendarPreview.vue   |   6 +-
 frontend/src/components/MenuBar.vue           |  25 ++--
 frontend/src/components/ModuleSelection.vue   | 122 ++++++++----------
 frontend/src/i18n/translations/de.json        |   2 +-
 frontend/src/i18n/translations/en.json        |  30 ++---
 frontend/src/router/index.ts                  |   2 +-
 frontend/src/view/AdditionalModules.vue       |  16 +--
 .../{components => view}/CourseSelection.vue  |  41 +++---
 frontend/src/view/EditCalendarView.vue        |  23 ++--
 9 files changed, 135 insertions(+), 132 deletions(-)
 rename frontend/src/{components => view}/CourseSelection.vue (70%)

diff --git a/frontend/src/components/CalendarPreview.vue b/frontend/src/components/CalendarPreview.vue
index c9da149..4cd58d8 100644
--- 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
diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 99910e5..e38ebe3 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -39,15 +39,24 @@ 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 my-1"
+          @click="navigate"
+        >
+          <img
+            width="35"
+            height="40"
+            src="../../public/htwk.svg"
+            alt="Logo"
+            class="mx-3"
+          />
+        </Button>
+      </router-link>
     </template>
     <template #item="{ item }">
       <router-link v-slot="{ navigate }" :to="item.route" custom>
diff --git a/frontend/src/components/ModuleSelection.vue b/frontend/src/components/ModuleSelection.vue
index 7c6f1f8..db90cc4 100644
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -42,73 +42,65 @@ 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"
+          >
+            <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>
 
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index 7d3694c..709debc 100644
--- 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",
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index 64a3d09..8b6ebf8 100644
--- 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",
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 92cabe8..191a3eb 100644
--- 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({
diff --git a/frontend/src/view/AdditionalModules.vue b/frontend/src/view/AdditionalModules.vue
index f4f4ed1..67f8654 100644
--- 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>
diff --git a/frontend/src/components/CourseSelection.vue b/frontend/src/view/CourseSelection.vue
similarity index 70%
rename from frontend/src/components/CourseSelection.vue
rename to frontend/src/view/CourseSelection.vue
index 88b9134..7324ae7 100644
--- a/frontend/src/components/CourseSelection.vue
+++ b/frontend/src/view/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>
diff --git a/frontend/src/view/EditCalendarView.vue b/frontend/src/view/EditCalendarView.vue
index 9ee6a2c..51dcbf2 100644
--- 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>