generated from cms/tibi-docs
123 lines
3.3 KiB
Svelte
123 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { pages, scrollToRowNr } from "../../store"
|
|
import Homepage from "./Homepage.svelte"
|
|
import Pagebuilder from "./Pagebuilder.svelte"
|
|
import { apiBaseURL } from "../../../config"
|
|
import { onMount } from "svelte"
|
|
|
|
export let path
|
|
export let homepage = false
|
|
export let image: FileField
|
|
let page: Page
|
|
function initPage() {
|
|
page = $pages[path]
|
|
}
|
|
|
|
onMount(() => {
|
|
if ($scrollToRowNr !== -1) {
|
|
console.log("test321-", $scrollToRowNr)
|
|
if (!$scrollToRowNr) {
|
|
$scrollToRowNr = -1
|
|
return
|
|
}
|
|
let element = document.getElementById("row-" + $scrollToRowNr)
|
|
console.log(element)
|
|
if (!element) {
|
|
$scrollToRowNr = -1
|
|
return
|
|
}
|
|
|
|
element?.scrollIntoView({
|
|
behavior: "smooth",
|
|
})
|
|
$scrollToRowNr = -1
|
|
}
|
|
})
|
|
|
|
$: {
|
|
if (Object.keys($pages).length) {
|
|
initPage()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="rows" class:HP="{path == '/'}">
|
|
{#if page}
|
|
{#if path == "/"}<Homepage />{/if}
|
|
{#each page.rows as row, i}
|
|
<div
|
|
class="row"
|
|
id="row-{i}"
|
|
style="{path == '/' && i == page.rows.length - 1 ? 'padding-bottom: 300px;' : ''}"
|
|
>
|
|
{#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
|
|
isHP="{path == '/'}"
|
|
row="{row.row}"
|
|
pageId="{page.id}"
|
|
bright="{!!row.row.backgroundImage}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
|
|
.rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
gap: 10px;
|
|
|
|
& > .row {
|
|
padding: 10px;
|
|
padding: 30px 10px;
|
|
@media @tablet {
|
|
padding: 80px 10px;
|
|
}
|
|
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: 1800px;
|
|
padding: 0px 2.5vw;
|
|
position: relative;
|
|
&.bright {
|
|
color: @font-color-secondary !important;
|
|
}
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
</style>
|