92 integrate roomfinder and faq design

This commit is contained in:
survellow
2023-12-07 21:33:25 +01:00
parent 15d15f0063
commit 9f0f4ff204
10 changed files with 152 additions and 124 deletions

View File

@@ -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')"
/>

View File

@@ -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") }}

View File

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

View File

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

View File

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