generated from cms/tibi-docs
114 lines
3.0 KiB
Svelte
114 lines
3.0 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}">
|
|
{#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}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
|
|
.rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
overflow-x: hidden;
|
|
gap: 10px;
|
|
|
|
& > .row {
|
|
padding: 10px;
|
|
padding-top: 30px;
|
|
@media @tablet {
|
|
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: 1800px;
|
|
padding: 0px 2.5vw;
|
|
position: relative;
|
|
&.bright {
|
|
color: @font-color-secondary !important;
|
|
}
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
</style>
|