cms/tibi-svelte-starter
Template
4
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Sebastian Frank
2021-03-22 16:54:31 +01:00
parent 626e83d010
commit 61ddf2e5d0
5 changed files with 294 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/ContentBlocks.svelte Normal file
View File

@@ -0,0 +1,105 @@
{#if blocks?.length}
<section class="section_padding">
<div class="container">
{#each blocks as box, idx}
<!-- Teaserbox -->
<div class="row center_row">
{#if box.images?.length && (box.layout == 1 || box.layout == 3)}
<div class="col-md-{box.layout < 3 ? 6 : 12}">
<img
loading="lazy"
src="{imageBase + box.images[0].file.src}"
alt="{box.images[0].label || ''}"
/>
</div>
{/if}
{#if box.text || box.title || (box.button_text && box.button_url)}
<div class="col-md-{box.layout < 3 ? 6 : 12}">
{#if box.subtitle}
<div class="subline">{box.subtitle}</div>
{/if}
{#if box.title}
{#if accordeon == true}
<h2
class="h2_nooffset acc_trigger"
class:active="{activeAccordeons[idx]}"
on:click="{() => {
activeAccordeons[idx] = !activeAccordeons[idx]
}}"
>
{box.title}
<span class="icon">\/</span>
</h2>
{:else}
<h2 class="h2_nooffset">{box.title}</h2>
{/if}
{/if}
<div
class="boxText"
class:hideText="{accordeon && box.title && !activeAccordeons[idx]}"
>
{@html box.text}
{#if box.button_text && box.button_url}
<a
href="{box.button_url}"
class="btn btn_blue"
>{box.button_text}</a>
{/if}
</div>
</div>
{/if}
{#if box.images?.length && (box.layout == 2 || box.layout == 4)}
<div class="col-md-{box.layout < 3 ? 6 : 12}">
<img
loading="lazy"
src="{imageBase + box.images[0].file.src}"
alt="{box.images[0].label || ''}"
/>
</div>
{/if}
</div>
{/each}
</div>
</section>
{/if}
<style lang="less">
.acc_trigger {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-bottom: solid 1px #ccc;
padding-bottom: 10px;
.icon {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
font-size: 30px;
transform: rotate(0deg);
transition: all 0.3s;
}
&.active {
.icon {
transform: rotate(180deg);
}
}
}
.hideText {
display: none;
}
</style>
<script lang="typescript">
export let blocks: ContentBlock[]
export let imageBase: string
export let accordeon = false
let activeAccordeons: {
[key: number]: boolean
} = {}
</script>