generated from cms/tibi-docs
98 lines
2.7 KiB
Svelte
98 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { navigate } from "svelte-routing/src/history"
|
|
import { openExtendableNr, rerender, scrollToRowNr } from "../../store"
|
|
export let pages: Page[]
|
|
export let pageReference: string
|
|
let jobOffers = pages.map((p) => p.jobOffer)
|
|
let focused = -1
|
|
</script>
|
|
|
|
<div class="link-container">
|
|
{#each jobOffers as job, i}
|
|
{#if i < 3}
|
|
<button
|
|
class="row-ref fill"
|
|
on:click="{() => {
|
|
$rerender = $rerender + 1
|
|
navigate(pageReference + '?elem=' + pages[i].id)
|
|
}}"
|
|
on:mouseenter="{() => {
|
|
focused = i
|
|
}}"
|
|
on:mouseleave="{() => {
|
|
focused = -1
|
|
}}"
|
|
>
|
|
<div>
|
|
{job.title}
|
|
</div>
|
|
<svg
|
|
data-src="/media/arrow-r.svg"
|
|
stroke="{i == focused ? '#fff' : '#343a40'}"
|
|
fill="{i == focused ? '#fff' : '#343a40'}"
|
|
style="z-index: 9999; position: relative;"></svg>
|
|
</button>
|
|
{:else}
|
|
<button
|
|
on:mouseenter="{() => {
|
|
focused = i
|
|
}}"
|
|
on:mouseleave="{() => {
|
|
focused = -1
|
|
}}"
|
|
on:click="{() => {
|
|
$rerender = $rerender + 1
|
|
navigate(pageReference)
|
|
}}"
|
|
class="page-ref"
|
|
>
|
|
<div>Mehr offene Stellen</div>
|
|
</button>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
.link-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
|
|
button {
|
|
background-color: @bg-color;
|
|
color: @font-color;
|
|
|
|
padding: 2px 15px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
font-size: 0.7rem;
|
|
@media @tablet {
|
|
font-size: initial;
|
|
}
|
|
}
|
|
|
|
.row-ref {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border: 2px solid @bg-color-secondary;
|
|
img {
|
|
width: 20px;
|
|
height: auto;
|
|
}
|
|
&:hover {
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
.page-ref {
|
|
background-color: @signal-color;
|
|
color: @font-color-secondary;
|
|
border: 2px solid @signal-color;
|
|
}
|
|
}
|
|
</style>
|