generated from cms/tibi-docs
99 lines
2.9 KiB
Svelte
99 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte"
|
|
import { openExtendableNr } from "../../store"
|
|
|
|
export let pages: Page[]
|
|
export let opened = ""
|
|
let jobOffers = pages.map((p) => p.jobOffer)
|
|
onMount(() => {
|
|
opened = location.search.split("=").at(-1)
|
|
})
|
|
</script>
|
|
|
|
<div class="boxes">
|
|
{#each jobOffers as box, i}
|
|
<div class="box" class:opened="{pages[i].id == opened}">
|
|
<div
|
|
class="upper"
|
|
on:keydown
|
|
on:click="{() => {
|
|
if (opened == pages[i].id) opened = ''
|
|
else opened = pages[i].id
|
|
}}"
|
|
>
|
|
<h4>
|
|
{box.title}
|
|
</h4>
|
|
<div>
|
|
{#if pages[i].id !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
|
|
src="/media/up.svg"
|
|
alt="arrow"
|
|
/>{/if}
|
|
</div>
|
|
</div>
|
|
<div class="content" class:closed="{pages[i].id !== opened}">
|
|
{@html box.text}
|
|
{#if box.emailButton}
|
|
<a
|
|
href="mailto:bewerbung@fontis.de?subject={box.emailSubject || 'Bewerbung'}"
|
|
style="text-decoration: none;"
|
|
class="button"
|
|
>
|
|
<button> bewerben </button>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
button {
|
|
margin-top: 20px;
|
|
background-color: @bg-color-secondary;
|
|
color: @font-color-secondary;
|
|
border: 2px solid @bg-color-secondary;
|
|
padding: 2px 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.boxes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: "Libre Franklin", "sans-serif";
|
|
.box {
|
|
border-bottom: 2px dotted @bg-color-secondary;
|
|
display: flex;
|
|
transition: padding-bottom 1s;
|
|
padding-bottom: 0px;
|
|
flex-direction: column;
|
|
padding-top: 20px;
|
|
gap: 20px;
|
|
&.opened {
|
|
padding-bottom: 20px;
|
|
}
|
|
.upper {
|
|
cursor: pointer;
|
|
font-size: 1.4rem;
|
|
@media @tablet {
|
|
font-size: 1.6rem;
|
|
}
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.content {
|
|
max-height: 1000px;
|
|
overflow: hidden;
|
|
transition: max-height 1s ease-in;
|
|
|
|
&.closed {
|
|
max-height: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|