Use layout for Handlungsfelder
This commit is contained in:
Christian Cueni
parent
a0ea8a18a6
commit
a198da395a
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import * as log from 'loglevel';
|
||||
import LinkCard from "@/components/mediacenter/LinkCard.vue";
|
||||
import { useRouter } from 'vue-router';
|
||||
import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
|
||||
|
||||
log.debug('Handlungsfeld created');
|
||||
|
||||
|
|
@ -50,6 +52,13 @@ const field = {
|
|||
linkText: 'PDF anzeigen',
|
||||
link: 'https://www.iterativ.ch'
|
||||
},
|
||||
{
|
||||
title: 'Die Motorfahrzeughaftpflicht',
|
||||
iconUrl: '/static/icons/demo/icon-hf-book.png',
|
||||
description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
|
||||
linkText: 'PDF anzeigen',
|
||||
link: 'https://www.iterativ.ch'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -115,14 +124,14 @@ const field = {
|
|||
items: [
|
||||
{
|
||||
title: 'Rechtsstreigkeiten',
|
||||
iconUrl: '',
|
||||
iconUrl: '/static/icons/demo/icon-hf-einkommenssicherung.svg',
|
||||
description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
|
||||
linkText: 'Handlungsfeldanzeigen',
|
||||
link: 'https://www.iterativ.ch'
|
||||
},
|
||||
{
|
||||
title: 'Rechtsstreigkeiten',
|
||||
iconUrl: '',
|
||||
iconUrl: '/static/icons/demo/icon-hf-einkommenssicherung.svg',
|
||||
description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
|
||||
linkText: 'Handlungsfeldanzeigen',
|
||||
link: 'https://www.iterativ.ch'
|
||||
|
|
@ -132,49 +141,84 @@ const field = {
|
|||
]
|
||||
}
|
||||
|
||||
const maxCardItems = 4;
|
||||
const maxListItems = 6;
|
||||
|
||||
const displayAsCard = (itemType: string): boolean => {
|
||||
return itemType === 'learnmedia' || itemType === 'realtiveLinks';
|
||||
}
|
||||
|
||||
const hasMoreItems = (items: object[], maxItems: number): boolean => {
|
||||
return items.length > maxItems
|
||||
}
|
||||
|
||||
const getMaxDisplayItems = (items: object[], maxItems: number) => {
|
||||
return items.slice(maxItems - 1);
|
||||
}
|
||||
|
||||
const getMaxDisplayItemsForType = (itemType: string, subItems: object[]) => {
|
||||
return displayAsCard(itemType) ? getMaxDisplayItems(subItems, maxCardItems) : getMaxDisplayItems(subItems, maxListItems);
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div class="px-16 fixed top-0 overflow-y-scroll bg-white h-full w-full">
|
||||
<div class="-mx-16 pt-4 pb-24 px-16 mb-20 bg-gray-200 flex justify-between">
|
||||
<div class="w-5/12">
|
||||
<h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
|
||||
<h1 class="mb-4">{{field.title}}</h1>
|
||||
<p>{{field.description}}</p>
|
||||
<HandlungsfeldLayout>
|
||||
<template #header>
|
||||
<div class="flex justify-between">
|
||||
<div class="w-5/12">
|
||||
<h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
|
||||
<h1 class="mb-4">{{field.title}}</h1>
|
||||
<p>{{field.description}}</p>
|
||||
</div>
|
||||
<img
|
||||
class="w-5/12"
|
||||
:src="field.icon"/>
|
||||
</div>
|
||||
<img
|
||||
class="w-5/12"
|
||||
:src="field.icon"/>
|
||||
</div>
|
||||
<section class="mb-20">
|
||||
<h2 class="mb-4">Das erwartet dich in diesem Handlungsfeld</h2>
|
||||
<p class="mb-4 lg:w-2/3">{{field.summary.text}}</p>
|
||||
<ul>
|
||||
<li
|
||||
v-for="item in field.summary.items"
|
||||
:key="item"
|
||||
class="mb-2">{{item}}</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section
|
||||
class="mb-20"
|
||||
v-for="item in field.items" :key="item.title">
|
||||
<h2 class="mb-4">{{item.title}}</h2>
|
||||
<ul class="grid gap-4 grid-cols-2">
|
||||
<li v-for="subItem in item.items" :key="subItem.link">
|
||||
<LinkCard
|
||||
v-if="item.type === 'learnmedia'"
|
||||
:title="subItem.title"
|
||||
:icon="subItem.iconUrl"
|
||||
:description="subItem.description"
|
||||
:url="subItem.link"
|
||||
:link-text="subItem.linkText" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<section class="mb-20">
|
||||
<h2 class="mb-4">Das erwartet dich in diesem Handlungsfeld</h2>
|
||||
<p class="mb-4 lg:w-2/3">{{field.summary.text}}</p>
|
||||
<ul>
|
||||
<li
|
||||
v-for="item in field.summary.items"
|
||||
:key="item"
|
||||
class="mb-2 h-10 leading-10 flex items-center">
|
||||
<it-icon-check class="text-sky-500 bg-[url('/static/icons/icon-check.svg')] bg-no-repeat h-10 w-10 mr-2"></it-icon-check>
|
||||
{{item}}
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section
|
||||
class="mb-20"
|
||||
v-for="item in field.items" :key="item.title">
|
||||
<h2 class="mb-4">{{item.title}}</h2>
|
||||
<ul :class="{
|
||||
'grid gap-4 grid-cols-2': displayAsCard(item.type),
|
||||
'border-t': !displayAsCard(item.type)
|
||||
}">
|
||||
<li v-for="subItem in item.items" :key="subItem.link">
|
||||
<LinkCard
|
||||
v-if="displayAsCard(item.type)"
|
||||
:title="subItem.title"
|
||||
:icon="subItem.iconUrl"
|
||||
:description="subItem.description"
|
||||
:url="subItem.link"
|
||||
:link-text="subItem.linkText" />
|
||||
<div v-else class="flex items-center justify-between border-b py-4">
|
||||
<h4 class="text-bold">{{subItem.title}}</h4>
|
||||
<router-link :to="subItem.link" class="link">{{subItem.linkText}}</router-link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
</HandlungsfeldLayout>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div class="px-16 fixed top-0 overflow-y-scroll bg-white h-full w-full">
|
||||
<div class="-mx-16 pt-4 pb-24 px-16 mb-20 bg-gray-200">
|
||||
<nav>
|
||||
<a
|
||||
class="block my-9 cursor-pointer flex items-center"
|
||||
@click="router.go(-1)"><it-icon-arrow-left /><span>zurück</span></a>
|
||||
</nav>
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.it-icon-hf {
|
||||
color: blue
|
||||
}
|
||||
.it-icon-hf > * {
|
||||
@apply m-auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import * as log from 'loglevel';
|
||||
import OverviewCard from '@/components/mediacenter/OverviewCard.vue';
|
||||
|
||||
log.debug('HandlungsfelderOverview created');
|
||||
|
||||
|
|
@ -70,10 +69,12 @@ const fields = [
|
|||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
>
|
||||
<router-link to="/mediacenter/handlungsfeld">
|
||||
<img
|
||||
class="m-auto"
|
||||
:src="`/static/icons/demo/${field.icon}.svg`"/>
|
||||
<h3 class="text-base text-center">{{field.name}}</h3>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue