generated from cms/tibi-docs
frontend session
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user