wm-fontis/wm-fontis-tibi-2023
3
0
Fork 0
generated from cms/tibi-docs
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first version

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-11-12 10:02:26 +00:00
parent b107392907
commit 92ca030e6c
33 changed files with 1005 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/lib/components/widgets/persons.svelte
View File

@@ -1,39 +1,45 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { pages, rerender } from "../../store"
import { mediaLibrary, pages, rerender } from "../../store"
import { navigate } from "svelte-routing/src/history"
export let pageId: string
export let col: Column
export let persons: Page[]
let hover = -1
</script>
<div class="persons">
{#each col.personPreview as pp, i}
{#each persons as p, i}
<button
class="person"
on:click="{() => {
$rerender = $rerender + 1
navigate(Object.values($pages)?.find((o) => o.id == pp.link)?.path || '/')
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}page/${pageId}/${pp.initialImage?.src}`}"
src="{`${apiBaseURL}medialib/${p.personPreview.hoverImage}/${
$mediaLibrary[p.personPreview.initialImage]?.file?.src
}`}"
alt="img"
style="opacity: {hover == i ? 0 : 1}"
/>
<!-- Hover Image -->
<img
class="hover"
src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}"
src="{`${apiBaseURL}medialib/${p.personPreview.hoverImage}/${
$mediaLibrary[p.personPreview.hoverImage]?.file?.src
}`}"
alt="img"
style="opacity: {hover == i ? 1 : 0}"
/>
</div>
<div class="text">
{pp.name}
{p.personPreview.name}
</div>
</button>
{/each}
@@ -68,7 +74,7 @@
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s;
transition: opacity 0.3s;
}
}
.text {