92 frontend refinements, clickable logo

2025-08-04 02:39:14 +02:00 · 2023-12-04 02:39:08 +01:00
parent fbaff30f09
commit 8dfe8a4836
9 changed files with 135 additions and 132 deletions
--- 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/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>
--- 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>

--- 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/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>