generated from cms/tibi-docs
frontend session
This commit is contained in:
parent
897b9ae2cf
commit
d4e21505ad
@ -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:
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
BIN
frontend/src/lib/assets/fonts/LibreCaslonText-Regular.woff2
Normal file
BIN
frontend/src/lib/assets/fonts/LibreCaslonText-Regular.woff2
Normal file
Binary file not shown.
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
24
frontend/src/lib/components/widgets/image.svelte
Normal file
24
frontend/src/lib/components/widgets/image.svelte
Normal file
@ -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>
|
||||
21
frontend/src/lib/components/widgets/moreBtn.svelte
Normal file
21
frontend/src/lib/components/widgets/moreBtn.svelte
Normal file
@ -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>
|
||||
13
frontend/src/lib/components/widgets/text.svelte
Normal file
13
frontend/src/lib/components/widgets/text.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
export let text: string
|
||||
</script>
|
||||
|
||||
<div class="text">
|
||||
{@html text}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
21
frontend/src/lib/components/widgets/textLink.svelte
Normal file
21
frontend/src/lib/components/widgets/textLink.svelte
Normal file
@ -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>
|
||||
15
types/global.d.ts
vendored
15
types/global.d.ts
vendored
@ -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
|
||||
title: string
|
||||
description: string
|
||||
subTitle: string
|
||||
teaserTitle: 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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user