frontend session

api/collections/content.yml

@@ -15,6 +15,7 @@ meta:
               label: Allgemein
               subFields:
                   - source: path
+
             - name: teaser
               label: Teaser
               subFields:
@@ -84,6 +85,7 @@ fields:
           helperText: "Ein Pfad sollte mit einem / starten und ohne eins enden."
 
     - !include fields/teaserHomepage.yml
+
     - name: rows
       type: object[]
       meta:

frontend/src/App.svelte

@@ -44,6 +44,13 @@
     getPages()
 
     let activeMenu = false
+    $: {
+        if (activeMenu) {
+            document.body.classList.add("overflow")
+        } else {
+            document.body.classList.remove("overflow")
+        }
+    }
 </script>
 
 <main class="">
@@ -69,9 +76,68 @@
 <style lang="less" global>
     @import "./lib/assets/css/main.less";
     @import "./lib/assets/css/base.less";
+    @import "swiper/swiper.less";
+    @import "swiper/modules/effect-fade/effect-fade.less";
+    @import "swiper/modules/navigation/navigation.less";
+    @import "swiper/modules/pagination/pagination.less";
+
+    .swiper-button-prev,
+    .swiper-button-next {
+        color: @font-color;
+        height: 70px;
+        width: 70px;
+        bottom: 0px !important;
+        top: initial !important;
+        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 {
+            bottom: initial !important;
+            top: 100px !important;
+            transform: scale(0.8);
+            transform-origin: center !important;
+        }
+        .swiper-button-prev {
+            left: 0% !important;
+            right: initial !important;
+            left: initial !important;
+        }
+        .swiper-button-next {
+            right: 0% !important;
+            transform-origin: right;
+        }
+    }
+
+    @media @desktop {
+        .swiper-button-prev,
+        .swiper-button-next {
+            top: 110px !important;
+            transform: scale(1);
+        }
+    }
+    h1,
+    h2 {
+      
+        font-family: "Libre Caslon Text", serif;
+    }
+
+    .overflow {
+        overflow: hidden !important;
+    }
     main {
         overflow: hidden;
         min-height: 100vh;
+        background-color: @bg-color;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -79,9 +145,11 @@
         width: 100%;
         @media @mobile {
             font-size: @bodyfontsize;
+            line-height: 1.4;
         }
         @media @tablet {
             font-size: @bodyfontsize_desktop;
+            line-height: 1.6;
         }
     }
     @font-face {
@@ -91,4 +159,12 @@
         font-weight: 400;
         src: url("./lib/assets/fonts/libre-franklin-v13-latin-regular.woff2") format("woff2");
     }
+
+    @font-face {
+        font-display: swap;
+        font-family: "Libre Caslon Text";
+        font-style: normal;
+        font-weight: 400;
+        src: url("./lib/assets/fonts/LibreCaslonText-Regular.woff2") format("woff2");
+    }
 </style>

frontend/src/lib/assets/css/base.less

@@ -3,12 +3,13 @@
     padding: 0;
     box-sizing: border-box;
 }
-
+html {
+    background-color: black;
+}
 body {
     color: #333 !important;
     height: 100%;
     background-color: #f9f9f9;
-    overflow: hidden !important;
 }
 
 ul {

frontend/src/lib/components/Menu/Header.svelte

@@ -3,7 +3,7 @@
     export let opened = false
 </script>
 
-<div class="header">
+<div class="header" class:fixed="{!opened}">
     <div class="logo">
         <img src="/media/Logo Quer.svg" alt="Logo Quer" />
     </div>
@@ -19,7 +19,13 @@
 
 <style lang="less">
     @import "../../assets/css/main.less";
+    .fixed {
+        position: fixed;
+        top: 0px;
+        z-index: 100;
+    }
     .header {
+        background-color: @bg-color;
         width: 100%;
         padding: 10.4px 5px;
         @media @tablet {

frontend/src/lib/components/Menu/Menu.svelte

@@ -35,7 +35,7 @@
 <style lang="less">
     @import "../../assets/css/main.less";
     .menu {
-        position: absolute;
+        position: fixed;
         background-color: @bg-color;
         z-index: 1000;
         top: 110vh;

frontend/src/lib/components/Pagebuilder/Homepage.svelte

@@ -1,5 +1,158 @@
 <script lang="ts">
-    export let row: Row
+    import { pages } from "../../store"
+    import { register } from "swiper/element/bundle"
+    import { onMount } from "svelte"
+    import TextLink from "../widgets/textLink.svelte"
+
+    let teasers = Object.values($pages)?.map((page) => ({ teaser: page.teaser, path: page.path }))
+
+    register(false)
+    let swiper
+
+    onMount(async () => {
+        if (swiper !== undefined) {
+            const response = await fetch("/dist/index.css")
+            const cssText = await response.text()
+
+            const params = {
+                injectStyles: [cssText],
+            }
+
+            Object.assign(swiper, params)
+            swiper.initialize()
+        }
+    })
+
+    $: console.log(teasers, "teasers")
+    let teaser = teasers[0]
 </script>
 
-<stlye lang="less"></stlye>
+{#if teaser}
+    <div class="container">
+        <swiper-container
+            bind:this="{swiper}"
+            slides-per-view="1"
+            loop="{true}"
+            direction="horizontal"
+            effect="slide"
+            navigation="{true}"
+            init="{false}"
+            speed="600"
+            class="relative"
+        >
+            {#each teasers as teaser}
+                {#if teaser.teaser.showTeaser}
+                    <swiper-slide class="relative">
+                        <div class="inner-container">
+                            <div class="titles">
+                                <h2>{teaser?.teaser?.subTitle}</h2>
+                                <h1>{teaser?.teaser?.teaserTitle}</h1>
+                            </div>
+                            <div class="description">
+                                <div class="placeholder"></div>
+                                <TextLink description="{teaser?.teaser?.teaserDescription}" path="{teaser?.path}" />
+                                <div class="placeholder"></div>
+                            </div>
+                        </div>
+                    </swiper-slide>
+                {/if}
+            {/each}
+        </swiper-container>
+    </div>
+{/if}
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+
+    .container {
+        padding: 150px 0px;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        .inner-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: fit-content;
+
+            .titles {
+                font-weight: normal;
+                h1 {
+                    font-size: 2rem;
+                    padding: 10px 0px;
+                    margin: 10px 0px 20px 0px;
+                    text-decoration: underline;
+                }
+                h2 {
+                    font-size: 1.2rem;
+                }
+            }
+            .description {
+                display: flex;
+                flex-direction: row;
+                & > div {
+                    flex: 0 0 5%;
+                    min-width: 0px;
+                }
+                & > div:nth-child(2) {
+                    flex: 0 0 90%;
+                    min-width: 0px;
+                }
+            }
+            @media @tablet {
+                .titles {
+                    font-weight: normal;
+                    h1 {
+                        font-size: 4rem;
+                        padding: 20px 0px;
+                        margin: 20px 0px 40px 0px;
+                        text-decoration: underline;
+                    }
+                    h2 {
+                        font-size: 1.6rem;
+                    }
+                }
+                .description {
+                    display: flex;
+                    flex-direction: row;
+                    & > div {
+                        flex: 0 0 25%;
+                        min-width: 0px;
+                    }
+                    & > div:nth-child(2) {
+                        flex: 0 0 50%;
+                        min-width: 0px;
+                    }
+                }
+            }
+
+            @media @desktop {
+                .titles {
+                    font-weight: normal;
+                    h1 {
+                        font-size: 5rem;
+                        padding: 20px 0px;
+                        margin: 20px 0px 40px 0px;
+                        text-decoration: underline;
+                    }
+                    h2 {
+                        font-size: 1.6rem;
+                    }
+                }
+
+                .description {
+                    display: flex;
+                    flex-direction: row;
+                    & > div {
+                        flex: 0 0 33.33%;
+                        min-width: 0px;
+                    }
+                }
+                .titles {
+                }
+            }
+        }
+    }
+</style>

frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte

@@ -1,8 +1,65 @@
 <script lang="ts">
+    import Image from "../widgets/image.svelte"
+    import Text from "../widgets/text.svelte"
+    import TextLink from "../widgets/textLink.svelte"
+
     export let row: Row
+    export let pageId: string
+    console.log(row, "row")
+    console.log(row.columns)
 </script>
 
-<div></div>
+{#if Object.keys(row).length}
+    {#if row.topTitle}
+        <h3>{row.topTitle}</h3>
+    {/if}
+    {#if row.pageTitle}
+        <h1>{row.pageTitle}</h1>
+    {/if}
+    {#if row.title}
+        <h2>{row.title}</h2>
+    {/if}
+    {#if row.subTitle}
+        <h3>{row.subTitle}</h3>
+    {/if}
+    <div class="row">
+        {#each row?.columns as col}
+            <div class="col">
+                {#if col?.contentType == "text"}
+                    <Text text="{col?.text}" />
+                {:else if col?.contentType == "textLink"}
+                    <TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" />
+                {:else if col.contentType == "image"}
+                    <Image image="{col?.image}" pageId="{pageId}" />
+                {/if}
+            </div>
+        {/each}
+    </div>
+{/if}
 
 <style lang="less">
+    @import "../../assets/css/main.less";
+    h3 {
+        font-size: 1.2rem;
+        padding-bottom: 20px;
+    }
+    h2 {
+        font-size: 3.2rem;
+    }
+    h1 {
+        font-size: 5rem;
+    }
+    h1,
+    h2 {
+        padding-bottom: 40px;
+    }
+
+    .row {
+        display: flex;
+        & > .col {
+            padding: 10px;
+            flex: 1;
+            min-width: 0;
+        }
+    }
 </style>

frontend/src/lib/components/Pagebuilder/Rows.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { init } from "svelte/internal"
     import { pages } from "../../store"
+    import Homepage from "./Homepage.svelte"
+    import Pagebuilder from "./Pagebuilder.svelte"
 
     export let path
     export let homepage = false
@@ -17,11 +18,23 @@
     }
 </script>
 
-<div>
+<div class="rows">
     {#if page}
-        {page.path}
+        {#if path == "/"}<Homepage />{/if}
+        {#each page.rows as row}
+            <div class="row">
+                <Pagebuilder row="{row.row}" pageId="{page.id}" />
+            </div>
+        {/each}
     {/if}
 </div>
 
 <style lang="less">
+    @import "../../assets/css/main.less";
+
+    .rows {
+        display: flex;
+        flex-direction: column;
+        gap: 80px;
+    }
 </style>

frontend/src/lib/components/widgets/image.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    export let image: FileField
+    export let pageId: string
+</script>
+
+<div class="image-container">
+    <img src="{`${apiBaseURL}page/${pageId}/${image?.src}`}" alt="img" />
+</div>
+
+<style lang="less">
+    .image-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+            object-fit: contain;
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>

frontend/src/lib/components/widgets/moreBtn.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { navigate } from "svelte-routing"
+
+    export let path: string
+</script>
+
+<button class="more" on:click="{() => navigate(path)}"> mehr </button>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .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;
+    }
+</style>

frontend/src/lib/components/widgets/text.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    export let text: string
+</script>
+
+<div class="text">
+    {@html text}
+</div>
+
+<style>
+    .text {
+        text-align: left;
+    }
+</style>

frontend/src/lib/components/widgets/textLink.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import MoreBtn from "../widgets/moreBtn.svelte"
+    import Text from "../widgets/text.svelte"
+    export let description = ""
+    export let path = ""
+</script>
+
+<div class="textLink">
+    <Text text="{description}" />
+    <MoreBtn path="{path}" />
+</div>
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .textLink {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        gap: 20px;
+    }
+</style>

types/global.d.ts

@@ -1,10 +1,16 @@
+interface FileField {
+    path: string
+    src: string
+    type: string
+}
+
 interface Pages {
     [key: string]: Page
 }
 
 interface Page {
     path: string
-    teaserHomepage: teaserHomepage
+    teaser: teaserHomepage
     sectionHomepage: Row
     rows: Row[]
     id: string
@@ -12,9 +18,9 @@ interface Page {
 
 interface teaserHomepage {
     showTeaser: boolean
-    subtitle: string
+    subTitle: string
-    title: string
+    teaserTitle: string
-    description: string
+    teaserDescription: string
 }
 
 interface Row {
@@ -48,6 +54,7 @@ interface Column {
     iconCycleSquare?: IconCycleSquare
     iconCycleCircle?: IconCycleCircle
     text: string
+    textLink: TextLink
     infoBoard: InfoBoard
     worldCard: WorldCard
     nestedCard: NestedCard