80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
|
import * as log from "loglevel";
|
|
import { computed } from "vue";
|
|
import type { MediaLibraryCategoryPage, MediaLibraryContentPage } from "@/types";
|
|
|
|
const props = defineProps<{
|
|
categorySlug: string;
|
|
contentSlug: string;
|
|
}>();
|
|
|
|
log.debug("MediaLibraryContentPage created", props);
|
|
|
|
const mediaStore = useMediaLibraryStore();
|
|
|
|
const parentCategory = computed(() => {
|
|
return mediaStore.mediaLibraryPage?.children.find((c) =>
|
|
c.frontend_url.endsWith(props.categorySlug)
|
|
) as MediaLibraryCategoryPage | undefined;
|
|
});
|
|
|
|
const mediaCategory = computed(() => {
|
|
return parentCategory.value?.children.find((c) =>
|
|
c.frontend_url.endsWith(props.contentSlug)
|
|
) as MediaLibraryContentPage | undefined;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="mediaStore.mediaLibraryPage && mediaCategory"
|
|
class="fixed top-0 h-full w-full overflow-y-scroll bg-white"
|
|
>
|
|
<div class="bg-gray-200 pb-4 lg:pb-12">
|
|
<div class="container-large">
|
|
<nav class="py-4 lg:pb-8">
|
|
<router-link
|
|
class="btn-text inline-flex items-center pl-0"
|
|
:to="
|
|
parentCategory?.frontend_url || mediaStore.mediaLibraryPage.frontend_url
|
|
"
|
|
>
|
|
<it-icon-arrow-left />
|
|
<span>{{ $t("general.back") }}</span>
|
|
</router-link>
|
|
</nav>
|
|
<div class="flex justify-between md:flex-col lg:flex-row">
|
|
<div class="lg:w-6/12">
|
|
<h3 class="text-large mb-3 font-normal text-gray-900">
|
|
{{ $t("mediaLibrary.handlungsfelder.title_one") }}
|
|
</h3>
|
|
<h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<p
|
|
class="default-wagtail-rich-text text-large"
|
|
v-html="mediaCategory.description"
|
|
></p>
|
|
</div>
|
|
<div>
|
|
<img
|
|
class="float-left hidden md:mt-8 md:block lg:float-right lg:mt-0 lg:h-full lg:w-[505px]"
|
|
:src="mediaCategory.icon_detail_url"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-large">
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<section
|
|
class="default-wagtail-rich-text mb-20 mt-8 lg:w-2/3"
|
|
v-html="mediaCategory.body"
|
|
></section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|