92 frontend refinements, clickable logo

This commit is contained in:
survellow
2023-12-04 02:39:08 +01:00
parent fbaff30f09
commit 8dfe8a4836
9 changed files with 135 additions and 132 deletions

View File

@@ -44,7 +44,7 @@ window.addEventListener("resize", updateMobile);
:draggable="false" :draggable="false"
:header="$t('calendarPreview.preview-long')" :header="$t('calendarPreview.preview-long')"
class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2" class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
position="bottomright" position="bottomleft"
@update:visible="dialogVisible = $event" @update:visible="dialogVisible = $event"
> >
<DataTable <DataTable
@@ -52,6 +52,8 @@ window.addEventListener("resize", updateMobile);
edit-mode="cell" edit-mode="cell"
table-class="editable-cells-table" table-class="editable-cells-table"
responsive-layout="scroll" responsive-layout="scroll"
class="w-full"
:size="mobilePage ? 'small' : 'large'"
> >
<Column <Column
v-for="column in columns" v-for="column in columns"
@@ -68,7 +70,7 @@ window.addEventListener("resize", updateMobile);
</Dialog> </Dialog>
<SpeedDial <SpeedDial
v-if="previewOn && !dialogVisible" v-if="previewOn && !dialogVisible"
:style="{ position: 'fixed', bottom: '2rem', right: '2rem' }" :style="{ position: 'fixed', bottom: '2rem', left: '2rem' }"
> >
<template #button> <template #button>
<Button <Button

View File

@@ -39,15 +39,24 @@ const items = computed(() => [
</script> </script>
<template> <template>
<Menubar :model="items" class="menubar justify-content-between"> <Menubar :model="items" class="menubar justify-content-between flex-wrap">
<template #start> <template #start>
<img <router-link v-slot="{ navigate }" :to="`/`" custom>
width="35" <Button
height="40" severity="secondary"
src="../../public/htwk.svg" text
alt="Logo" class="p-0 mx-2 my-1"
class="h-10 w-10 mr-3" @click="navigate"
/> >
<img
width="35"
height="40"
src="../../public/htwk.svg"
alt="Logo"
class="mx-3"
/>
</Button>
</router-link>
</template> </template>
<template #item="{ item }"> <template #item="{ item }">
<router-link v-slot="{ navigate }" :to="item.route" custom> <router-link v-slot="{ navigate }" :to="item.route" custom>

View File

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

View File

@@ -119,7 +119,7 @@
"preview": "Vorschau", "preview": "Vorschau",
"preview-long": "Kalendervorschau", "preview-long": "Kalendervorschau",
"module": "Modul", "module": "Modul",
"course": "Seminargruppe" "course": "Gruppe"
}, },
"faqView": { "faqView": {
"headline": "Fragen und Antworten", "headline": "Fragen und Antworten",

View File

@@ -9,19 +9,19 @@
"english": "English", "english": "English",
"german": "German", "german": "German",
"courseSelection": { "courseSelection": {
"headline": "Welcome to HTWKalender", "headline": "welcome to HTWKalender",
"winterSemester": "winter semester", "winterSemester": "winter semester",
"summerSemester": "summer semester", "summerSemester": "summer semester",
"subTitle": "Please select a course and semester", "subTitle": "please select a course and semester",
"courseDropDown": "Please select a course", "courseDropDown": "please select a course",
"noCoursesAvailable": "No courses listed", "noCoursesAvailable": "no courses listed",
"semesterDropDown": "Please select a semester" "semesterDropDown": "please select a semester"
}, },
"roomFinderPage": { "roomFinderPage": {
"headline": "room finder", "headline": "room finder",
"detail": "Please select a room to view the occupancy", "detail": "please select a room to view the occupancy",
"dropDownSelect": "Please select a room", "dropDownSelect": "please select a room",
"noRoomsAvailable": "No rooms listed", "noRoomsAvailable": "no rooms listed",
"available": "available", "available": "available",
"occupied": "occupied" "occupied": "occupied"
}, },
@@ -64,13 +64,13 @@
"toast": { "toast": {
"success": "Success", "success": "Success",
"error": "Error", "error": "Error",
"successDetail": "Calendar successfully deleted", "successDetail": "calendar successfully deleted",
"errorDetail": "Calendar could not be deleted" "errorDetail": "calendar could not be deleted"
} }
}, },
"additionalModules": { "additionalModules": {
"subTitle": "Select additional modules that are not listed in the regular semester for your course", "subTitle": "select additional modules that are not listed in the regular semester for your course",
"dropDown": "Select additional modules", "dropDown": "select additional modules",
"module": "module", "module": "module",
"modules": "modules", "modules": "modules",
"footerModulesSelected": "{count} module selected | {count} modules selected", "footerModulesSelected": "{count} module selected | {count} modules selected",
@@ -88,8 +88,8 @@
"renameModules": { "renameModules": {
"reminder": "reminder", "reminder": "reminder",
"enableAllNotifications": "enable all notifications", "enableAllNotifications": "enable all notifications",
"subTitle": "Configure your selected Modules to your liking.", "subTitle": "configure your selected modules to your liking",
"nextStep": "Save" "nextStep": "save"
}, },
"moduleTemplateDialog": { "moduleTemplateDialog": {
"explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.", "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" "eventTyp": "event type"
}, },
"calendarLink": { "calendarLink": {
"copyToastNotification": "Link copied to clipboard", "copyToastNotification": "link copied to clipboard",
"copyToastSummary": "information", "copyToastSummary": "information",
"copyToastError": "error", "copyToastError": "error",
"copyToastErrorDetail": "could not copy link to clipboard", "copyToastErrorDetail": "could not copy link to clipboard",

View File

@@ -9,7 +9,7 @@ import RoomFinder from "../view/RoomFinder.vue";
import EditCalendarView from "../view/EditCalendarView.vue"; import EditCalendarView from "../view/EditCalendarView.vue";
import EditAdditionalModules from "../components/editCalendar/EditAdditionalModules.vue"; import EditAdditionalModules from "../components/editCalendar/EditAdditionalModules.vue";
import EditModules from "../components/editCalendar/EditModules.vue"; import EditModules from "../components/editCalendar/EditModules.vue";
import CourseSelection from "../components/CourseSelection.vue"; import CourseSelection from "../view/CourseSelection.vue";
import i18n from "../i18n"; import i18n from "../i18n";
const router = createRouter({ const router = createRouter({

View File

@@ -85,13 +85,13 @@ function unselectModule(event: DataTableRowUnselectEvent) {
</script> </script>
<template> <template>
<div class="flex flex-column"> <div class="flex flex-column align-items-center w-full">
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center m-2">
<h3> <h3>
{{ $t("additionalModules.subTitle") }} {{ $t("additionalModules.subTitle") }}
</h3> </h3>
</div> </div>
<div class="card flex align-items-center justify-content-center m-2"> <div class="m-2 lg:w-10 w-full">
<DynamicDialog /> <DynamicDialog />
<DataTable <DataTable
v-model:filters="filters" v-model:filters="filters"
@@ -116,7 +116,6 @@ function unselectModule(event: DataTableRowUnselectEvent) {
:show-gridlines="true" :show-gridlines="true"
:striped-rows="true" :striped-rows="true"
:select-all="false" :select-all="false"
class="w-10"
@row-select="selectModule" @row-select="selectModule"
@row-unselect="unselectModule" @row-unselect="unselectModule"
> >
@@ -184,13 +183,14 @@ function unselectModule(event: DataTableRowUnselectEvent) {
</template> </template>
</DataTable> </DataTable>
</div> </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 <Button
:disabled="store.isEmpty()" :disabled="store.isEmpty()"
@click="nextStep()" @click="nextStep()"
>{{ class="md:col-4 justify-content-center mb-3 align-self-end"
$t("additionalModules.nextStep") icon="pi pi-arrow-right"
}}</Button> :label="$t('additionalModules.nextStep')"
/>
</div> </div>
</div> </div>
</template> </template>

View File

@@ -4,7 +4,7 @@ import {
fetchCourse, fetchCourse,
fetchModulesByCourseAndSemester, fetchModulesByCourseAndSemester,
} from "../api/fetchCourse"; } from "../api/fetchCourse";
import ModuleSelection from "./ModuleSelection.vue"; import ModuleSelection from "../components/ModuleSelection.vue";
import { Module } from "../model/module.ts"; import { Module } from "../model/module.ts";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
@@ -52,28 +52,31 @@ async function getModules() {
</script> </script>
<template> <template>
<div class="flex flex-column"> <div
<div class="flex align-items-center justify-content-center h-4rem m-2"> 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"> <h3 class="text-4xl">
{{ $t("courseSelection.headline") }} {{ $t("courseSelection.headline") }}
<i
class="pi pi-calendar vertical-align-baseline"
style="font-size: 2rem"
></i>
</h3> </h3>
<i
class="pi pi-calendar"
style="font-size: 2rem"
></i>
</div> </div>
<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>
<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 <Dropdown
v-model="selectedCourse" v-model="selectedCourse"
:options="countries" :options="countries"
class="w-full md:w-25rem mx-2" class="flex-1 m-0"
filter filter
option-label="name" option-label="name"
:placeholder="$t('courseSelection.courseDropDown')" :placeholder="$t('courseSelection.courseDropDown')"
@@ -84,21 +87,15 @@ async function getModules() {
<Dropdown <Dropdown
v-model="selectedSemester" v-model="selectedSemester"
:options="semesters" :options="semesters"
class="w-full md:w-25rem mx-2" class="flex-1 m-0"
option-label="name" option-label="name"
:placeholder="$t('courseSelection.semesterDropDown')" :placeholder="$t('courseSelection.semesterDropDown')"
@change="getModules()" @change="getModules()"
></Dropdown> ></Dropdown>
</div> </div>
<ModuleSelection
<div :modules="modules"
class="flex align-items-center justify-content-center border-round m-2" class="lg:w-8"
> />
<div class="flex flex-wrap justify-content-center">
<div class="flex align-items-center">
<ModuleSelection :modules="modules" />
</div>
</div>
</div>
</div> </div>
</template> </template>

View File

@@ -66,36 +66,39 @@ function loadCalendar(): void {
</script> </script>
<template> <template>
<div class="flex flex-column"> <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 h-4rem mt-2"> <div class="flex align-items-center justify-content-center gap-2 mx-2">
<h3 class="text-4xl"> <h3 class="text-4xl">
{{ $t("editCalendarView.headline") }} {{ $t("editCalendarView.headline") }}
<i
class="pi pi-pencil vertical-align-baseline ml-2"
style="font-size: 2rem"
></i>
</h3> </h3>
<i
class="pi pi-pencil"
style="font-size: 2rem"
></i>
</div> </div>
<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>
<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 <InputText
v-model="token" v-model="token"
type="text" type="text"
class="w-full"
autofocus autofocus
@keyup.enter="loadCalendar" @keyup.enter="loadCalendar"
/> />
</div> </div>
<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 <Button
:label="$t('editCalendarView.loadCalendar')" :label="$t('editCalendarView.loadCalendar')"
icon="pi pi-arrow-down"
class="col-12 md:col-4 mb-3 align-self-end"
@click="loadCalendar" @click="loadCalendar"
/> />
</div> </div>