Ehrenamt/ff-webpage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 11 Packages Wiki Activity Actions

navigation on collections and dynamic routing improvements

Browse source
This commit is contained in:
Julian Krauser 2024-11-03 11:21:44 +01:00
parent 5c56af0dad
commit 44b55d9bbb
11 changed files with 117 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/CollectionDetail.vue Normal file
View file

@ -0,0 +1,18 @@
<template>
<div class="min-h-[calc(100vh-9rem)] container mx-auto py-12">
{{ data }}
</div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type SharedHero from "../types/component/sharedHero";
import type { ComponentTypes } from "../types/component/baseComponent";
import type Article from "../types/collection/article";
import type Operation from "../types/collection/operation";
import type Event from "../types/collection/event";
defineProps({
data: Object as PropType<Article | Operation | Event>,
});
</script>

24
components/ContentBuilder.vue
View file

@ -1,14 +1,16 @@
<template>
<SharedHero v-if="hero" :data="hero" />
<div class="container mx-auto py-12 min-h-[50vh]">
<div v-for="item in content" class="contents">
<DynamicZoneColumnImageText v-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
<DynamicZoneDualColumnText v-else-if="item.__component == 'dynamic-zone.dual-column-text'" :data="item" />
<DynamicZoneEmphasiseArticle v-else-if="item.__component == 'dynamic-zone.emphasise-article'" :data="item" />
<DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
<DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
<DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
<SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
<div class="min-h-[calc(100vh-9rem)] w-full">
<SharedHero v-if="hero" :data="hero" />
<div class="container mx-auto py-12 min-h-[50vh]">
<div v-for="item in content" class="contents">
<DynamicZoneColumnImageText v-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
<DynamicZoneDualColumnText v-else-if="item.__component == 'dynamic-zone.dual-column-text'" :data="item" />
<DynamicZoneEmphasiseArticle v-else-if="item.__component == 'dynamic-zone.emphasise-article'" :data="item" />
<DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
<DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
<DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
<SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
</div>
</div>
</div>
</template>
@ -19,7 +21,7 @@ import type SharedHero from "../types/component/sharedHero";
import type { ComponentTypes } from "../types/component/baseComponent";
defineProps({
hero: Object as PropType<SharedHero>,
hero: { type: Object as PropType<SharedHero>, required: false, default: null },
content: Array<ComponentTypes>,
});
</script>

4
components/Header.vue
View file

@ -9,7 +9,7 @@
primary-link
v-for="link in navbar.navbar_items"
:key="link.id"
:to="`/${link.URL}/${link.default_active_child}`"
:to="`/${link.URL}/${link.default_active_child ?? ''}`"
:class="link.URL == params?.[0] ? 'active' : ''"
>
{{ link.name }}
@ -26,7 +26,7 @@
v-for="sublink in navbar_sub_items"
:key="sublink.id"
:to="`/${params?.[0]}/${sublink.URL}`"
:class="sublink.URL == params?.[1] ? 'active' : ''"
:class="sublink.URL == params?.[1] && !params[2] ? 'active' : ''"
>
{{ sublink.name }}
</NuxtLink>

8
components/shared/Hero.vue
View file

@ -1,13 +1,13 @@
<template>
<div class="w-full max-h-60 h-60">
<div class="flex flex-col w-full max-h-72 h-72 overflow-hidden">
<NuxtPicture
preload
loading="lazy"
class="w-full h-full object-cover object-center"
class="w-full h-60 object-cover object-center"
:src="baseUrl + data?.banner.url"
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
:imgAttrs="{ class: 'w-full h-60 object-cover object-center' }"
/>
<div primary class="h-12 w-full px-12 justify-center items-center gap-5 flex">
<div primary class="h-12 min-h-12 w-full px-12 justify-center items-center gap-5 flex">
<p>{{ data?.title }}</p>
</div>
</div>