141 lines
3.4 KiB
Svelte
141 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { str, strf } from "$lib/data/language";
|
|
import Icon from "./Icon.svelte";
|
|
|
|
/** The album. */
|
|
export let album: Album | undefined = undefined;
|
|
|
|
/** The title. Set to `undefined` (or leave unset) to use the title the album (if exists, `Galerie` otherwise). */
|
|
export let title: string | undefined = undefined;
|
|
|
|
/** The description. Set to `undefined` (or leave unset) to use the description the album (if exists, `Fotogalerie von Luca Bosin` otherwise). */
|
|
export let description: string | undefined = undefined;
|
|
|
|
/** The back link. Set to `undefined` (or leave unset) to hide the back link. */
|
|
export let back: string | undefined = undefined;
|
|
|
|
/** Base URL */
|
|
export let base = '';
|
|
|
|
$: displayTitle = title || (album && album.title ? $strf(album.title) : $str('gallery'));
|
|
$: displayDescription = description || (album && album.description ? $strf(album.description) : $str('gallery-description'));
|
|
$: displayAuthors = album && album.authors ? (
|
|
Array.isArray(album.authors) ?
|
|
album.authors.join(', '):
|
|
typeof album.authors === 'string' ?
|
|
album.authors:
|
|
"unknown author"):
|
|
"Luca Bosin";
|
|
$: displayAuthorsTitle = album && album.authors ? (
|
|
Array.isArray(album.authors) ?
|
|
album.authors.length > 1 ?
|
|
$str('authors'):
|
|
$str('author'):
|
|
typeof album.authors === 'string' ?
|
|
$str('author'):
|
|
"unknown author"):
|
|
$str('author');
|
|
</script>
|
|
|
|
<header>
|
|
<section>
|
|
{#if back}
|
|
<a href={back}>
|
|
<Icon mdi="arrow-left" />
|
|
</a>
|
|
{/if}
|
|
<h1>{displayTitle}</h1>
|
|
<p>{displayDescription}</p>
|
|
</section>
|
|
{#if album}
|
|
<section class="nospace">
|
|
<dl>
|
|
<dt>{displayAuthorsTitle}</dt>
|
|
<dd>{displayAuthors}</dd>
|
|
<dt>{$str('license')}</dt>
|
|
<dd><a href={`${base}/license`} tabindex="0">{album.license}</a></dd>
|
|
</dl>
|
|
<menu>
|
|
{#if album.allowDownload !== false}
|
|
<li>
|
|
<a href={`${base}/download`} tabindex="0">{$str('download-all')}</a>
|
|
</li>
|
|
{/if}
|
|
</menu>
|
|
</section>
|
|
{/if}
|
|
</header>
|
|
|
|
<style>
|
|
header {
|
|
display: block;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
section:not(.nospace) {
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
section {
|
|
padding-right: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
padding-left: 1.5rem;
|
|
margin: 0 auto;
|
|
max-width: 80rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1.2rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
dl {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
row-gap: .25rem;
|
|
column-gap: 1rem;
|
|
}
|
|
|
|
dt {
|
|
font-weight: 600;
|
|
}
|
|
|
|
dd a {
|
|
color: inherit;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
dd a:focus {
|
|
outline: 2px solid var(--main-text-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
menu {
|
|
list-style: none;
|
|
}
|
|
|
|
menu :has(> *) {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
menu a {
|
|
display: inline-block;
|
|
padding: .5rem 1rem;
|
|
border-radius: 8px;
|
|
background-color: var(--interactive-bg-color);
|
|
color: var(--interactive-text-color);
|
|
transition: background-color .2s, color .2s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
menu a:hover {
|
|
background-color: var(--interactive-bg-hover-color);
|
|
color: var(--interactive-text-hover-color);
|
|
}
|
|
|
|
menu a:focus {
|
|
outline: 2px solid var(--main-text-color);
|
|
}
|
|
</style>
|