next session

This commit is contained in:
Robin Grenzdörfer 2023-07-15 16:15:17 +00:00
parent d4e21505ad
commit c6d43a95fa
28 changed files with 988 additions and 72 deletions

View File

@ -35,7 +35,7 @@
id: boxlist
- name: Ausfahrbare Box
id: extendableBox
id: extendableBoxes
- name: Text mit Link
id: textLink
@ -46,11 +46,11 @@
- name: Seitenlinks
id: pageLinkBlocks
- name: networkEvents
- name: Netzwerk Veranstaltungen
id: networkEvents
- name: publication
id: publication
- name: Veröffentlichungen
id: publications
- name: networkEvents
type: object[]
@ -79,17 +79,18 @@
meta:
label: downloadDatei
- name: publication
type: object
- name: publications
type: object[]
meta:
label: Publikationen
dependsOn:
eval: $parent.contentType == 'publication'
eval: $parent.contentType == 'publications'
subFields:
- name: content
type: string
meta:
label: Inhalt
widget: richtext
- name: file
type: file
@ -262,7 +263,7 @@
meta:
label: Beschreibung
- name: personPreview
type: object
type: object[]
meta:
label: Personenvorschau
dependsOn:
@ -284,6 +285,22 @@
meta:
label: Name
- name: link
type: string
meta:
label:
de: Seite
en: page
widget: select
choices:
endpoint: page
params:
sort: path
projection: navigation
mapping:
id: id
name: path
- name: boxList
type: object
meta:
@ -301,12 +318,12 @@
meta:
label: Name
- name: extendableBox
type: object
- name: extendableBoxes
type: object[]
meta:
label: Ausklappbare Box
dependsOn:
eval: $parent.contentType == 'extendableBox'
eval: $parent.contentType == 'extendableBoxes'
subFields:
- name: title
type: string
@ -318,6 +335,17 @@
meta:
widget: richtext
label: Text
- name: emailButton
type: boolean
meta:
label: E-Mail Button Anzeigen
- name: emailSubject
type: string
meta:
label: E-Mail default Betreff
dependsOn:
eval: $parent.emailButton == true
- name: textLink
type: object

View File

@ -0,0 +1,3 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44 24c0 .69-.56 1.25-1.25 1.25H10.304l12.822 12.609a1.251 1.251 0 1 1-1.752 1.782L6.386 24.903a1.245 1.245 0 0 1-.379-1.035c.032-.3.171-.58.393-.785L21.374 8.359a1.25 1.25 0 1 1 1.752 1.782L10.304 22.75H42.75c.69 0 1.25.56 1.25 1.25z" fill="#333"/>
</svg>

After

Width:  |  Height:  |  Size: 366 B

View File

@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.268 4.21a.75.75 0 0 0-1.04 1.08l8.275 7.96H3.75a.75.75 0 1 0 0 1.5h18.752l-8.273 7.96a.75.75 0 0 0 1.04 1.08l9.428-9.07a1 1 0 0 0 0-1.44l-9.428-9.07h-.001z" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 291 B

View File

@ -0,0 +1,3 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.5 7.875h-6.125V5.25a.875.875 0 0 0-1.75 0v2.625h-19.25V5.25a.875.875 0 0 0-1.75 0v2.625H10.5A2.625 2.625 0 0 0 7.875 10.5v35a2.625 2.625 0 0 0 2.625 2.625h35a2.625 2.625 0 0 0 2.625-2.625v-35A2.625 2.625 0 0 0 45.5 7.875zm-35 1.75h6.125v2.625a.875.875 0 1 0 1.75 0V9.625h19.25v2.625a.875.875 0 1 0 1.75 0V9.625H45.5a.875.875 0 0 1 .875.875v7.875H9.625V10.5a.875.875 0 0 1 .875-.875zm35 36.75h-35a.875.875 0 0 1-.875-.875V20.125h36.75V45.5a.875.875 0 0 1-.875.875z" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 599 B

10
frontend/media/down.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#kvekca80oa)">
<path d="m30.797 7.297 1.406 1.406L16.5 24.406.797 8.703l1.406-1.406L16.5 21.594 30.797 7.297z" fill="#000"/>
</g>
<defs>
<clipPath id="kvekca80oa">
<path fill="#fff" transform="translate(.5)" d="M0 0h32v32H0z"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 421 B

4
frontend/media/file.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.208 47.65a.875.875 0 0 0 .875-.874V11.958a.875.875 0 0 1 .875-.875h20.125v11.375a.875.875 0 0 0 .875.875h11.375v23.334a.875.875 0 0 0 1.75 0V22.458a.875.875 0 0 0-.256-.619L33.577 9.59a.875.875 0 0 0-.619-.256h-21a2.625 2.625 0 0 0-2.625 2.625v34.818c0 .232.256.618.256.618s.387.257.619.257zm23.625-35.33 9.262 9.263h-9.262V12.32z" fill="#000"/>
<path d="M10.102 48.523a2.625 2.625 0 0 1-.769-1.856h1.75a.875.875 0 0 0 .875.875h31.5a.875.875 0 0 0 .875-.875h1.75a2.625 2.625 0 0 1-2.625 2.625h-31.5a2.625 2.625 0 0 1-1.856-.77z" fill="#000"/>
</svg>

After

Width:  |  Height:  |  Size: 667 B

10
frontend/media/up.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#3k3057tu3a)">
<path d="M31.047 23.953 16.5 9.422 1.953 23.953.547 22.547 16.5 6.578l15.953 15.969-1.406 1.406z" fill="#000"/>
</g>
<defs>
<clipPath id="3k3057tu3a">
<path fill="#fff" transform="translate(.5)" d="M0 0h32v32H0z"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 423 B

View File

@ -4,7 +4,7 @@
import Menu from "./lib/components/Menu/Menu.svelte"
import NotFound from "./lib/components/NotFound.svelte"
import Rows from "./lib/components/Pagebuilder/Rows.svelte"
import { location, navigation, pages, serviceNavigation } from "./lib/store"
import { location, navigation, pages, serviceNavigation, rerender } from "./lib/store"
import { Route, Router } from "svelte-routing"
import { loadPages } from "./lib/functions/getPages"
import { loadNavigation } from "./lib/functions/loadNavigation"
@ -55,13 +55,16 @@
<main class="">
<Header bind:active="{activeMenu}" />
<div class="content-container" id="siteContainer" data-url="{url}">
<Router url="{url}">
<Route path="/">
<Rows path="/" homepage="{true}" />
</Route>
<Route path="/*path" let:params>
{#key $rerender}
<Rows path="/{params?.path}" homepage="{false}" />
{/key}
</Route>
<Route>
<NotFound />
@ -91,14 +94,17 @@
transform: scale(0.5);
transform-origin: bottom !important;
}
.swiper-button-prev {
right: 18%;
left: initial !important;
}
.swiper-button-next {
right: 3%;
transform-origin: right;
}
@media @tablet {
.swiper-button-prev,
.swiper-button-next {
@ -127,7 +133,6 @@
}
h1,
h2 {
font-family: "Libre Caslon Text", serif;
}
@ -135,7 +140,6 @@
overflow: hidden !important;
}
main {
overflow: hidden;
min-height: 100vh;
background-color: @bg-color;
display: flex;
@ -143,6 +147,14 @@
justify-content: space-between;
height: 100%;
width: 100%;
.content-container {
flex: 1;
}
}
html,
body {
@media @mobile {
font-size: @bodyfontsize;
line-height: 1.4;

View File

@ -21,6 +21,7 @@
<style lang="less">
@import "../assets/css/main.less";
.footer {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: flex-end;

View File

@ -1,10 +1,12 @@
<script lang="ts">
import { navigate } from "svelte-routing/src/history"
export let active = false
export let opened = false
</script>
<div class="header" class:fixed="{!opened}">
<div class="logo">
<div class="header" class:sticky="{!opened}">
<div class="logo" on:keydown on:click="{() => navigate('/')}">
<img src="/media/Logo Quer.svg" alt="Logo Quer" />
</div>
<button class="menu" on:click="{() => (active = !active)}">
@ -19,8 +21,8 @@
<style lang="less">
@import "../../assets/css/main.less";
.fixed {
position: fixed;
.sticky {
position: sticky;
top: 0px;
z-index: 100;
}
@ -37,6 +39,7 @@
gap: 25px;
.logo {
cursor: pointer;
flex-grow: 0;
flex-shrink: 1;

View File

@ -1,5 +1,8 @@
<script lang="ts">
import { navigate } from "svelte-routing/src/history"
import { navigation, pages } from "../../store"
import Header from "./Header.svelte"
$: console.log($navigation, "nav")
export let active = false
</script>
@ -7,12 +10,19 @@
<div class="menu-container">
<Header bind:active="{active}" opened="{true}" />
<div class="menu-content">
{#if $navigation}
<div class="container">
<div class="inner-container">
<div class="pages">
{#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
<button class="page">
{page}
{#each $navigation.pages as page}
<button
class="page"
on:click="{() => {
active = false
navigate(Object.values($pages)?.find((o) => o.id == page.page)?.path || '/')
}}"
>
{page.name}
</button>
{/each}
</div>
@ -28,6 +38,7 @@
</div>
</div>
</div>
{/if}
</div>
</div>
</div>

View File

@ -23,7 +23,6 @@
}
})
$: console.log(teasers, "teasers")
let teaser = teasers[0]
</script>
@ -41,7 +40,7 @@
class="relative"
>
{#each teasers as teaser}
{#if teaser.teaser.showTeaser}
{#if teaser?.teaser?.showTeaser}
<swiper-slide class="relative">
<div class="inner-container">
<div class="titles">
@ -65,7 +64,7 @@
@import "../../assets/css/main.less";
.container {
padding: 150px 0px;
padding: 20px 0px 150px 0px;
min-height: 100vh;
display: flex;
align-items: center;

View File

@ -1,18 +1,54 @@
<script lang="ts">
import { navigate } from "svelte-routing/src/history"
import Boxlist from "../widgets/boxlist.svelte"
import Events from "../widgets/events.svelte"
import ExtendableBox from "../widgets/extendableBox.svelte"
import IconBlock from "../widgets/iconBlock.svelte"
import Image from "../widgets/image.svelte"
import InfoBoard from "../widgets/infoBoard.svelte"
import NestedCard from "../widgets/nestedCard.svelte"
import PageLinkBlocks from "../widgets/pageLinkBlocks.svelte"
import Persons from "../widgets/persons.svelte"
import Publications from "../widgets/publications.svelte"
import Text from "../widgets/text.svelte"
import TextLink from "../widgets/textLink.svelte"
import TopDown from "../widgets/topDown.svelte"
import { rerender } from "../../store"
export let row: Row
export let pageId: string
console.log(row, "row")
console.log(row.columns)
export let bright: boolean
function checkNestedPath() {
const pathSegments = location.pathname.split("/").filter((segment) => segment.length)
if (pathSegments.length > 1) {
pathSegments.pop() // remove the last segment
return "/" + pathSegments.join("/")
}
return ""
}
let nestedPath = checkNestedPath()
</script>
{#if Object.keys(row).length}
{#if row.topTitle}
<h3>{row.topTitle}</h3>
{/if}
{#if nestedPath}
<h3
style="cursor: pointer;"
on:keydown
on:click="{() => {
$rerender = $rerender + 1
navigate(nestedPath)
}}"
>
<img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
</h3>
{/if}
{#if row.pageTitle}
<h1>{row.pageTitle}</h1>
{/if}
@ -28,9 +64,29 @@
{#if col?.contentType == "text"}
<Text text="{col?.text}" />
{:else if col?.contentType == "textLink"}
<TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" />
<TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" bright="{bright}" />
{:else if col.contentType == "image"}
<Image image="{col?.image}" pageId="{pageId}" />
{:else if col.contentType == "iconBlocks"}
<IconBlock pageId="{pageId}" col="{col}" />
{:else if col.contentType == "pageLinkBlocks"}
<PageLinkBlocks col="{col}" />
{:else if col.contentType == "networkEvents"}
<Events col="{col}" pageId="{pageId}" />
{:else if col.contentType == "publications"}
<Publications col="{col}" pageId="{pageId}" />
{:else if col.contentType == "topDown"}
<TopDown col="{col}" />
{:else if col.contentType == "infoBoard"}
<InfoBoard col="{col}" pageId="{pageId}" />
{:else if col.contentType == "nestedCard"}
<NestedCard col="{col}" />
{:else if col.contentType == "boxlist"}
<Boxlist col="{col}" />
{:else if col.contentType == "extendableBoxes"}
<ExtendableBox col="{col}" />
{:else if col.contentType == "personPreview"}
<Persons col="{col}" pageId="{pageId}" />
{/if}
</div>
{/each}
@ -39,9 +95,18 @@
<style lang="less">
@import "../../assets/css/main.less";
@media @tablet {
h3 {
font-size: 1.2rem;
padding-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
img {
width: 40px;
margin-right: 10px;
}
}
h2 {
font-size: 3.2rem;
@ -49,14 +114,26 @@
h1 {
font-size: 5rem;
}
}
h1,
h2 {
line-height: 1;
padding-bottom: 40px;
}
.row {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
@media (max-width: 640px) {
flex-direction: column-reverse;
}
& > .col {
min-width: 40% !important;
@media @desktop {
min-width: 30% !important;
}
padding: 10px;
flex: 1;
min-width: 0;

View File

@ -2,10 +2,11 @@
import { pages } from "../../store"
import Homepage from "./Homepage.svelte"
import Pagebuilder from "./Pagebuilder.svelte"
import { apiBaseURL } from "../../../config"
export let path
export let homepage = false
export let image: FileField
let page: Page
function initPage() {
page = $pages[path]
@ -23,7 +24,14 @@
{#if path == "/"}<Homepage />{/if}
{#each page.rows as row}
<div class="row">
<Pagebuilder row="{row.row}" pageId="{page.id}" />
{#if row.row.backgroundImage}
<div class="background-image">
<img src="{`${apiBaseURL}page/${page.id}/${row.row.backgroundImage?.src}`}" alt="img" />
</div>
{/if}
<div class="content" class:bright="{row.row.backgroundImage}">
<Pagebuilder row="{row.row}" pageId="{page.id}" bright="{!!row.row.backgroundImage}" />
</div>
</div>
{/each}
{/if}
@ -35,6 +43,45 @@
.rows {
display: flex;
flex-direction: column;
gap: 80px;
justify-content: flex-start;
width: 100%;
position: relative;
overflow-x: hidden;
gap: 10px;
& > .row {
padding: 10px;
padding-top: 80px;
width: 100%;
position: relative;
display: flex;
justify-content: center;
.background-image {
position: absolute;
width: 100%;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
& > .content {
width: 100%;
max-width: 1600px;
padding: 0px 2.5vw;
position: relative;
&.bright {
color: @font-color-secondary !important;
}
z-index: 2;
}
}
}
</style>

View File

@ -0,0 +1,27 @@
<script lang="ts">
export let col: Column
</script>
<div class="boxList">
{#each col.boxList.boxes as name}
<div class="box">
{name.name}
</div>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.boxList {
display: flex;
flex-wrap: wrap;
gap: 20px;
.box {
padding: 5px 10px;
background-color: @bg-color-secondary;
color: @font-color-secondary;
font-weight: bold;
}
}
</style>

View File

@ -0,0 +1,143 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
export let col: Column
export let pageId: string
let months = [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember",
]
let displayedItems = 4
const itemsPerPage = 4
function showMore() {
displayedItems += itemsPerPage
}
console.log("col:", col)
</script>
<div class="events">
{#each col.networkEvents.slice(0, displayedItems) as nE}
<div class="event">
<div class="calendar">
<div class="calendar-icon"><img src="/media/calendar.svg" alt="calendar" /></div>
<div class="date">
<div class="month">{months[new Date(nE.beginDate).getMonth()]}</div>
<div class="day">
{new Date(nE.beginDate).getDate()}
{#if nE.endDate}
- {new Date(nE.endDate).getDate()}
{/if}
</div>
</div>
</div>
<div class="details">
<em>{nE.title}</em>
<a href="{apiBaseURL}page/{pageId}/{nE.file.src}" download="{apiBaseURL}page/{pageId}/{nE.file.src}">
<button class="more">mehr</button></a
>
</div>
</div>
{/each}
{#if displayedItems < col.networkEvents.length}
<button on:click="{showMore}">Weitere Events</button>
{/if}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.events {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
button {
padding: 2px 15px;
border: 2px solid @bg-color-secondary;
margin-top: 40px;
font-weight: bold;
}
.event {
width: 100%;
display: flex;
.details {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding: 24px 20px;
gap: 10px;
@media @tablet {
padding: 0px 0px 0px 20px;
flex-direction: row;
align-items: center;
}
em {
font-weight: bold;
}
.more {
background-color: @bg-color-secondary;
color: @font-color-secondary;
border: none;
height: 36px;
padding: 2px 15px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
}
.calendar {
width: 110px;
min-width: 110px;
display: flex;
border-right: @bg-color-secondary 2px solid;
flex-direction: column;
align-items: center;
@media @tablet {
flex: 1;
gap: 10px;
padding: 32px 35px 0px 0px;
max-width: 210px;
flex-direction: row;
}
.calendar-icon {
width: 56px;
height: 56px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.date {
display: flex;
flex-direction: column;
justify-content: center;
width: fit-content;
.month {
font-size: 0.7rem;
}
.day {
font-size: 1.2rem;
font-family: "Libre Caslon Text", serif;
}
}
}
}
}
</style>

View File

@ -0,0 +1,81 @@
<script lang="ts">
export let col: Column
export let opened = -1
</script>
<div class="boxes">
{#each col.extendableBoxes as box, i}
<div class="box" class:opened="{i == opened}">
<div
class="upper"
on:keydown
on:click="{() => {
if (opened == i) opened = -1
else opened = i
}}"
>
<h4>
{box.title}
</h4>
<div>
{#if i !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
src="/media/up.svg"
alt="arrow"
/>{/if}
</div>
</div>
<div class="content" class:closed="{i !== opened}">
{@html box.text}
{#if box.emailButton}
<a href="mailto:info@fontis.de?subject={box.emailSubject || 'Bewerbung'}" class="button">
<button> bewerben </button>
</a>
{/if}
</div>
</div>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
button {
margin-top: 20px;
background-color: @bg-color-secondary;
color: @font-color-secondary;
border: 2px solid @bg-color-secondary;
padding: 2px 15px;
font-weight: bold;
}
.boxes {
display: flex;
flex-direction: column;
.box {
border-bottom: 2px dotted @bg-color-secondary;
display: flex;
transition: padding-bottom 1s;
padding-bottom: 0px;
flex-direction: column;
padding-top: 20px;
gap: 20px;
&.opened {
padding-bottom: 20px;
}
.upper {
font-size: 1.6rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
}
.content {
max-height: 1000px;
overflow: hidden;
transition: max-height 1s ease-in-out;
&.closed {
max-height: 0px;
}
}
}
}
</style>

View File

@ -0,0 +1,52 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
export let pageId: string
export let col: Column
</script>
<div class="iconBlock">
{#each col.iconBlocks as icon}
<div class="icon">
<img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
<div class="text">
<em>{icon.bigText}</em>
<p>{icon.smallText}</p>
</div>
</div>
{/each}
</div>
<style lang="less">
.iconBlock {
display: flex;
justify-content: start;
flex-wrap: wrap;
.icon {
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
width: 140px;
gap: 20px;
img {
width: 100%;
height: auto;
}
.text {
display: flex;
flex-direction: column;
gap: 10px;
em {
text-align: center;
font-size: 2.2rem;
font-family: "Libre Caslon Text", serif;
}
p {
text-align: center;
font-weight: bold;
}
}
}
}
</style>

View File

@ -0,0 +1,57 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
export let col: Column
export let pageId: string
</script>
<div class="infoBoard">
<div class="header">
<div class="icon">
<img src="{`${apiBaseURL}page/${pageId}/${col.infoBoard.icon?.src}`}" alt="img" />
</div>
<div class="title">
{col.infoBoard.title}
<div></div>
</div>
</div>
<div class="content">
{@html col.infoBoard.text}
</div>
</div>
<style lang="less">
@import "../../assets/css/main.less";
.infoBoard {
display: flex;
flex-direction: column;
padding: 15px;
gap: 40px;
.header {
display: flex;
align-items: center;
gap: 20px;
.icon {
width: 64px;
height: 64px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.title {
font-size: 1.5rem;
display: flex;
flex-direction: column;
div {
border-bottom: 1px solid @bg-color-secondary;
width: 50px;
}
}
}
.content {
text-align: left;
}
}
</style>

View File

@ -2,9 +2,10 @@
import { navigate } from "svelte-routing"
export let path: string
export let bright
</script>
<button class="more" on:click="{() => navigate(path)}"> mehr </button>
<button class="more" class:bright="{bright}" on:click="{() => navigate(path)}">mehr</button>
<style lang="less">
@import "../../assets/css/main.less";
@ -16,6 +17,8 @@
padding: 2px 15px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.bright {
border: 2px solid @bg-color;
}
</style>

View File

@ -0,0 +1,67 @@
<script lang="ts">
export let col: Column
</script>
<div class="cards">
{#each col.nestedCard as card}
<div class="card">
<div class="title">{card.title}</div>
<div class="description">{@html card.description}</div>
</div>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.cards {
display: flex;
flex-direction: column;
width: 100%;
flex-wrap: wrap;
gap: 40px;
@media @desktop {
gap: 50px;
flex-direction: row;
.card {
min-width: 35%;
max-width: 50%;
margin-bottom: 50px !important;
padding: 64px 0px 0px 80px !important;
.title {
padding: 13px 20px !important;
}
.description {
padding: 10px 20px !important;
}
}
}
.card {
overflow: hidden;
flex: 1;
margin-bottom: 40px;
position: relative;
padding: 54px 0px 0px 70px;
.title {
position: absolute;
left: 0px;
padding: 7px 10px;
color: @font-color-secondary;
font-family: "LibreCaslonText";
font-size: 1.2rem;
top: 0px;
height: 100px;
width: 320px;
z-index: 9;
background-color: @bg-color-secondary;
}
.description {
position: relative;
z-index: 10;
padding: 5px 10px;
background-color: @bg-color;
}
}
}
</style>

View File

@ -0,0 +1,60 @@
<script lang="ts">
import { navigate } from "svelte-routing/src/history"
import { pages } from "../../store"
export let col: Column
</script>
<div class="link-container">
{#each col.pageLinkBlocks as link}
{#if isNaN(link.rowNr)}
<button
class="page-ref"
on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
>
{link.name}
</button>
{:else}
<button
class="row-ref"
on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
>
{link.name} <img src="/media/arrow-r.svg" alt="arrow" />
</button>
{/if}
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.link-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
button {
background-color: @bg-color;
color: @font-color;
padding: 2px 15px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.row-ref {
display: flex;
align-items: center;
gap: 10px;
border: 2px solid @bg-color-secondary;
img {
width: 20px;
height: auto;
}
}
.page-ref {
background-color: @bg-color-secondary;
color: @font-color-secondary;
border: 2px solid @bg-color-secondary;
}
}
</style>

View File

@ -0,0 +1,64 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { pages, rerender } from "../../store"
import { navigate } from "svelte-routing/src/history"
export let pageId: string
export let col: Column
let hover = -1
</script>
<div class="persons">
{#each col.personPreview as pp, i}
<button
class="person"
on:click="{() => {
$rerender = $rerender + 1
navigate(Object.values($pages)?.find((o) => o.id == pp.link)?.path || '/')
}}"
>
<div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
{#if hover == i}
<img src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}" alt="img" />
{:else}
<img src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}" alt="img" />
{/if}
</div>
<div class="text">
{pp.name}
</div>
</button>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.persons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 80px;
.person {
cursor: pointer;
margin: 40px 0px;
display: flex;
flex-direction: column;
.image {
width: 290px;
height: 368px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.text {
width: 100%;
background-color: @bg-color-secondary;
color: @font-color-secondary;
border: 2px solid @bg-color-secondary;
padding: 2px 15px;
font-weight: bold;
}
}
}
</style>

View File

@ -0,0 +1,77 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
export let col: Column
export let pageId: string
let displayedItems = 3
const itemsPerPage = 3
function showMore() {
displayedItems += itemsPerPage
}
</script>
<div class="publications">
{#each col.publications.slice(0, displayedItems) as publication}
<div class="publication">
<div class="left"><img src="/media/file.svg" alt="file" /></div>
<div class="right">
<div class="content">{@html publication.content}</div>
<div class="download">
<a
href="{apiBaseURL}page/{pageId}/{publication.file.src}"
download="{apiBaseURL}page/{pageId}/{publication.file.src}"
>
<button class="download-button">zur Publikation</button>
</a>
</div>
</div>
</div>
{/each}
</div>
{#if displayedItems < col.publications.length}
<button on:click="{showMore}">Weitere Publikationen</button>
{/if}
<style lang="less">
@import "../../assets/css/main.less";
button {
padding: 2px 15px;
border: 2px solid @bg-color-secondary;
margin-top: 40px;
font-weight: bold;
}
.publications {
gap: 60px;
display: flex;
flex-direction: column;
@media @tablet {
flex-direction: row;
flex-wrap: wrap;
}
.publication {
max-width: 370px;
display: flex;
align-items: flex-start;
.left {
max-width: 75px;
flex: 1;
}
.right {
padding-left: 20px;
border-left: 2px solid @bg-color-secondary;
flex: 1;
button {
background-color: @bg-color-secondary;
color: @font-color-secondary;
border: 2px solid @bg-color-secondary;
padding: 2px 15px;
font-weight: bold;
cursor: pointer;
}
}
}
}
</style>

View File

@ -3,11 +3,12 @@
import Text from "../widgets/text.svelte"
export let description = ""
export let path = ""
export let bright = false
</script>
<div class="textLink">
<Text text="{description}" />
<MoreBtn path="{path}" />
<MoreBtn path="{path}" bright="{bright}" />
</div>
<style lang="less">

View File

@ -0,0 +1,66 @@
<script lang="ts">
export let col: Column
</script>
<div class="topDown">
{#each col.topDown.rows as row}
<div class="row">
<div class="capital">{row.inital}</div>
<div class="details">
<div class="upper">{row.rest}</div>
<div class="lower">{row.description}</div>
</div>
</div>
{/each}
</div>
<style lang="less">
@import "../../assets/css/main.less";
.topDown {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 20px;
.row {
display: flex;
gap: 10px;
.capital {
display: flex;
justify-content: center;
align-items: center;
min-width: 60px;
min-height: 100px;
padding: 10px;
background-color: @bg-color-secondary;
color: @font-color-secondary;
font-family: "LibreCaslonText";
font-size: 1.7rem;
@media @desktop {
font-size: 2.3rem;
min-width: 80px;
height: 120px;
}
}
.details {
min-height: 100px;
padding-top: 35px;
display: flex;
flex-direction: column;
.upper {
line-height: 1;
font-family: "LibreCaslonText";
font-size: 1.7rem;
}
.lower {
}
@media @desktop {
height: 120px;
padding-top: 40px;
.upper {
font-size: 2.3rem;
}
}
}
}
}
</style>

View File

@ -13,3 +13,4 @@ export const location = writable(initLoc)
export let navigation = writable<Navigation>()
export let pages = writable<Pages>({})
export let serviceNavigation = writable<Navigation>()
export let rerender = writable(0)

36
types/global.d.ts vendored
View File

@ -12,7 +12,7 @@ interface Page {
path: string
teaser: teaserHomepage
sectionHomepage: Row
rows: Row[]
rows: outerRow[]
id: string
}
@ -22,7 +22,9 @@ interface teaserHomepage {
teaserTitle: string
teaserDescription: string
}
interface outerRow {
row: Row
}
interface Row {
topTitle: string
subTitle: string
@ -43,12 +45,13 @@ interface Column {
| "nestedCard"
| "topDown"
| "personPreview"
| "boxList"
| "extendableBox"
| "boxlist"
| "extendableBoxes"
| "textLink"
| "iconBlock"
| "iconBlocks"
| "pageLinkBlocks"
| "publication"
| "publications"
| "networkEvents"
image?: FileField
iconCycleSquare?: IconCycleSquare
@ -57,15 +60,15 @@ interface Column {
textLink: TextLink
infoBoard: InfoBoard
worldCard: WorldCard
nestedCard: NestedCard
nestedCard: NestedCard[]
topDown: TopDown
personPreview: PersonPreview
personPreview: PersonPreview[]
boxList: BoxList
extendableBox: ExtendableBox
extendableBoxes: ExtendableBox[]
iconBlocks: iconBlock[]
pageLinkBlocks: pageLinkBlock[]
networkEvents: NetworkEvent[]
publication: Publication
publications: Publication[]
}
interface Publication {
@ -74,7 +77,7 @@ interface Publication {
}
interface NetworkEvent {
beginnDate: Date
beginDate: Date
endDate: Date
title: string
file: FileField
@ -133,19 +136,20 @@ interface TopDown {
}
interface TopDownRow {
initial: string
inital: string
rest: string
description: string
}
interface PersonPreview {
initalImage: FileField
initialImage: FileField
hoverImage: FileField
name: string
link: string
}
interface BoxList {
names: {
boxes: {
name: string
}[]
}
@ -153,6 +157,8 @@ interface BoxList {
interface ExtendableBox {
title: string
text: string
emailButton: boolean
emailSubject: string
}
interface FileField {
@ -168,7 +174,7 @@ interface TextLink {
interface Navigation {
tree: number
elemente: NavElement[]
pages: NavElement[]
}
interface NavElement {