HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-08-10 13:43:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #101 from HTWK-Leipzig/92-frontend-changes

Browse Source 
92 frontend changes
This commit is contained in:
masterElmar
2023-12-05 14:05:21 +01:00
committed by GitHub
parent fbaff30f09 3996fd3ec9
commit 49cec0154f
20 changed files with 12101 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/htwk.svg" /> <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
<link id="theme-link" rel="stylesheet" href="themes/lara-light-blue/theme.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTWKalender</title> <title>HTWKalender</title>
</head> </head>

8
frontend/public/htwk.svg
View File

@@ -1,7 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with PhotoLine 24.00 (www.pl32.de) --> <!-- 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"> <!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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 757 B

After

Width:  |  Height:  |  Size: 810 B

5951
frontend/public/themes/lara-dark-blue/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

5951
frontend/public/themes/lara-light-blue/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

6
frontend/src/components/CalendarLink.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import tokenStore from "../store/tokenStore.ts"; import tokenStore from "../store/tokenStore.ts";
import { useToast } from "primevue/usetoast"; import { useToast } from "primevue/usetoast";
import { onMounted } from "vue"; import {computed, onMounted} from "vue";
import router from "../router"; import router from "../router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
@@ -59,7 +59,7 @@ const forwardToMicrosoft = () => {
); );
}; };
const actions = [ const actions = computed(() => [
{ {
label: t("calendarLink.copyToClipboard"), label: t("calendarLink.copyToClipboard"),
icon: "pi pi-copy", icon: "pi pi-copy",
@@ -75,7 +75,7 @@ const actions = [
icon: "pi pi-microsoft", icon: "pi pi-microsoft",
command: forwardToMicrosoft, command: forwardToMicrosoft,
}, },
]; ]);
</script> </script>
<template> <template>

6
frontend/src/components/CalendarPreview.vue
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

45
frontend/src/components/DarkModeSwitcher.vue Normal file
View File

@@ -0,0 +1,45 @@
<script lang="ts" setup>
import { ref } from "vue";
import { usePrimeVue } from 'primevue/config';
const PrimeVue = usePrimeVue();
const isDark = ref(true);
const darkTheme = ref('lara-dark-blue'),
lightTheme = ref('lara-light-blue');
function toggleTheme() {
isDark.value = !isDark.value;
setTheme(isDark.value);
}
function setTheme(shouldBeDark: boolean) {
isDark.value = shouldBeDark;
const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
PrimeVue.changeTheme(oldTheme, newTheme, 'theme-link', () => {});
}
// set theme matching browser preference
setTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
setTheme(e.matches);
});
</script>
<template>
<Button
size="small"
class="p-button-rounded w-full md:w-auto"
id="dark-mode-switcher"
style="margin-right: 1rem"
:severity="isDark ? 'warning' : 'info'"
@click="toggleTheme"
>
<i class="pi pi-sun" v-if="isDark"></i>
<i class="pi pi-moon" v-else></i>
</Button>
</template>

2
frontend/src/components/FaqPage.vue
View File

@@ -6,7 +6,7 @@
<h1>{{ $t("faqView.headline") }}</h1> <h1>{{ $t("faqView.headline") }}</h1>
</div> </div>
<div class="flex flex-column col-7"> <div class="flex flex-column lg:col-7">
<div class="grid my-2"> <div class="grid my-2">
<div class="col"> <div class="col">
{{ $t("faqView.firstQuestion") }} {{ $t("faqView.firstQuestion") }}

35
frontend/src/components/MenuBar.vue
View File

@@ -2,6 +2,7 @@
import { computed } from "vue"; import { computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import LocaleSwitcher from "./LocaleSwitcher.vue"; import LocaleSwitcher from "./LocaleSwitcher.vue";
import DarkModeSwitcher from "./DarkModeSwitcher.vue"
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
const items = computed(() => [ const items = computed(() => [
@@ -39,29 +40,41 @@ 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"
class="h-10 w-10 mr-3" @click="navigate"
/> >
<img
width="50"
height="50"
class="w-full"
src="../../public/htwk.svg"
alt="Logo"
/>
</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>
<Button <Button
:label="String(item.label)" :label="String(item.label)"
:icon="item.icon" :icon="item.icon"
severity="secondary"
text text
@click="navigate" @click="navigate"
severity="secondary"
/> />
</router-link> </router-link>
</template> </template>
<template #end> <template #end class="align-items-stretch">
<LocaleSwitcher></LocaleSwitcher> <div class="flex align-items-stretch justify-content-center">
<DarkModeSwitcher></DarkModeSwitcher>
<LocaleSwitcher></LocaleSwitcher>
</div>
</template> </template>
</Menubar> </Menubar>
</template> </template>

2
frontend/src/components/ModuleInformation.vue
View File

@@ -30,7 +30,7 @@ function sortModuleEventsByStart(events: Event[]) {
<template> <template>
<div> <div>
<h2>{{ module.name }}</h2> <h2>{{ module.name }}</h2>
<table> <table class="w-full">
<tr> <tr>
<td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td> <td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td>
</tr> </tr>

120
frontend/src/components/ModuleSelection.vue
View File

@@ -42,73 +42,63 @@ 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 mx-2">
> <p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.name }}</p>
<div <ToggleButton
class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 gap-4" class="w-9rem align-self-end my-2"
> off-icon="pi pi-times"
<div :off-label="$t('moduleSelection.unselected')"
class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3" on-icon="pi pi-check"
> :on-label="$t('moduleSelection.selected')"
<p class="text-lg">{{ slotProps.data.name }}</p> :model-value="store.hasModule(slotProps.data)"
</div> @update:model-value="toggleModule(slotProps.data)"
<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> </div>
</template> </div>
</DataView> </template>
</div> </DataView>
</div> </div>
</template> </template>

2
frontend/src/i18n/translations/de.json
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",

30
frontend/src/i18n/translations/en.json
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",

2
frontend/src/main.ts
View File

@@ -12,7 +12,6 @@ import Card from "primevue/card";
import DataView from "primevue/dataview"; import DataView from "primevue/dataview";
import Dialog from "primevue/dialog"; import Dialog from "primevue/dialog";
import ToggleButton from "primevue/togglebutton"; import ToggleButton from "primevue/togglebutton";
import "primevue/resources/themes/tailwind-light/theme.css";
import "primeicons/primeicons.css"; import "primeicons/primeicons.css";
import "primeflex/primeflex.css"; import "primeflex/primeflex.css";
import router from "./router"; import router from "./router";
@@ -67,4 +66,5 @@ app.component("Column", Column);
app.component("DynamicDialog", DynamicDialog); app.component("DynamicDialog", DynamicDialog);
app.component("ProgressSpinner", ProgressSpinner); app.component("ProgressSpinner", ProgressSpinner);
app.component("Checkbox", Checkbox); app.component("Checkbox", Checkbox);
app.mount("#app"); app.mount("#app");

2
frontend/src/router/index.ts
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({

16
frontend/src/view/AdditionalModules.vue
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>

41
frontend/src/components/CourseSelection.vue → frontend/src/view/CourseSelection.vue
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>

23
frontend/src/view/EditCalendarView.vue
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>

2
frontend/src/view/ImprintPage.vue
View File

@@ -5,7 +5,7 @@
<div class="flex align-items-center justify-content-center h-4rem mt-2"> <div class="flex align-items-center justify-content-center h-4rem mt-2">
<h3 class="text-4xl">{{ $t("imprint") }}</h3> <h3 class="text-4xl">{{ $t("imprint") }}</h3>
</div> </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> <p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p>
<h2>Kontakt</h2> <h2>Kontakt</h2>

2
frontend/src/view/PrivacyPolicy.vue
View File

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