generated from cms/tibi-docs
93 lines
2.9 KiB
Svelte
93 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { apiBaseURL } from "../../../config"
|
|
import { mediaLibrary, pages, rerender } from "../../store"
|
|
import { navigate } from "svelte-routing/src/history"
|
|
|
|
export let pageId: string
|
|
export let persons: Page[]
|
|
|
|
let hover = -1
|
|
</script>
|
|
|
|
<div class="persons">
|
|
{#each persons as p, i}
|
|
<button
|
|
class="person"
|
|
on:click="{() => {
|
|
$rerender = $rerender + 1
|
|
navigate(p.path)
|
|
}}"
|
|
>
|
|
<div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
|
|
<!-- Initial Image -->
|
|
<img
|
|
class="initial"
|
|
src="{`${apiBaseURL}medialib/${p?.personPreview?.initialImage}/${
|
|
$mediaLibrary[p?.personPreview?.initialImage]?.file?.src
|
|
}`}"
|
|
style="opacity: {hover == i ? 0 : 1}"
|
|
alt="{$mediaLibrary[p?.personPreview?.initialImage]?.alt || ''}"
|
|
title="{$mediaLibrary[p?.personPreview?.initialImage]?.title || ''}"
|
|
/>
|
|
<!-- Hover Image -->
|
|
<img
|
|
class="hover"
|
|
src="{`${apiBaseURL}medialib/${p?.personPreview?.hoverImage}/${
|
|
$mediaLibrary[p?.personPreview?.hoverImage]?.file?.src
|
|
}`}"
|
|
style="opacity: {hover == i ? 1 : 0}"
|
|
alt="{$mediaLibrary[p?.personPreview?.hoverImage]?.alt || ''}"
|
|
title="{$mediaLibrary[p?.personPreview?.hoverImage]?.title || ''}"
|
|
/>
|
|
</div>
|
|
<div class="text">
|
|
{p?.personPreview?.name}
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
.persons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
@media @tablet {
|
|
gap: 80px;
|
|
}
|
|
.person {
|
|
cursor: pointer;
|
|
@media @tablet {
|
|
margin: 40px 0px;
|
|
}
|
|
display: flex;
|
|
flex-direction: column;
|
|
.image {
|
|
width: 290px;
|
|
height: 368px;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
}
|
|
.text {
|
|
width: 100%;
|
|
background-color: @signal-color;
|
|
color: @font-color-secondary;
|
|
border: 2px solid @bg-color-secondary;
|
|
padding: 2px 15px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
</style>
|