mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2025-10-29 17:25:32 +00:00
Personenliste fertig
This commit is contained in:
60
views/routes/reihen/components/alphabet.gohtml
Normal file
60
views/routes/reihen/components/alphabet.gohtml
Normal file
@@ -0,0 +1,60 @@
|
||||
{{ $model := . }}
|
||||
|
||||
{{ if $model.letters }}
|
||||
<div class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14">
|
||||
<div id="alphabet" class="alphabet flex flex-row items-end text-xl">
|
||||
{{ range $id, $r := .letters }}
|
||||
<a
|
||||
class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
|
||||
px-2 no-underline transition-all duration-75
|
||||
{{ if not $model.active -}}inactive{{- end -}}"
|
||||
:class="search ? 'inactive' : 'active'"
|
||||
href="?letter={{ $r }}"
|
||||
{{ if eq $model.active $r }}aria-current="page"{{ end }}
|
||||
hx-select="main"
|
||||
hx-target="main"
|
||||
hx-swap="outerHTML scroll:#pageheading:top"
|
||||
>{{ $r }}</a
|
||||
>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="flex-grow"></div>
|
||||
|
||||
<div class="min-w-[22.5rem] max-w-96 flex flex-row bg-stone-50 relative">
|
||||
<div class="pb-0">
|
||||
<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
|
||||
</div>
|
||||
<div class="pb-0 border-b-4 border-zinc-300 grow">
|
||||
<input
|
||||
class="px-1.5 font-serif placeholder:italic w-full"
|
||||
type="search"
|
||||
name="search"
|
||||
value="{{ $model.search }}"
|
||||
placeholder="Almanach-Nr oder Suchbegriff"
|
||||
x-model="search"
|
||||
hx-get=""
|
||||
hx-trigger="input changed delay=500ms, keyup[key=='Enter']"
|
||||
hx-sync="this:replace"
|
||||
hx-select="#searchcontent"
|
||||
hx-target="#searchcontent"
|
||||
autocomplete="off"
|
||||
{{ if $model.active }}autofocus="true"{{ end }}
|
||||
{{ if $model.search }}disabled="true"{{ end }} />
|
||||
</div>
|
||||
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
|
||||
<tool-tip position="right" x-show="search">
|
||||
<a
|
||||
:href="'/reihen/?search=' + search"
|
||||
x-show="search"
|
||||
class="inline-block px-1
|
||||
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
|
||||
hx-boost="false">
|
||||
<i class="ri-links-line"></i
|
||||
></a>
|
||||
<div class="data-tip">Link zu dieser Suchanfrage</div>
|
||||
</tool-tip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
73
views/routes/reihen/components/filter.gohtml
Normal file
73
views/routes/reihen/components/filter.gohtml
Normal file
@@ -0,0 +1,73 @@
|
||||
{{ $model := . }}
|
||||
<div
|
||||
class="hidden lg:flex min-w-[32rem] max-w-[32rem] float-right ml-6 flex-col gap-y-8 [&>*]:pb-12
|
||||
[&>*]:px-12 [&>*]:pt-8 [&>*]:bg-slate-100">
|
||||
{{ if .agents }}
|
||||
<div class="">
|
||||
<h2 class="mb-6">Herausgeber:innen, Verlage & Druckereien</h2>
|
||||
<filter-list
|
||||
id="agent-list"
|
||||
data-url="/reihen/?agent="
|
||||
data-placeholder="Personen und Körperschaften filtern..."></filter-list>
|
||||
</div>
|
||||
<script type="module">
|
||||
let agentList = document.getElementById("agent-list");
|
||||
if (agentList) {
|
||||
agentList.items = {{ .agents }};
|
||||
|
||||
agentList.setSearchTextFunc((item) => {
|
||||
return item.name;
|
||||
});
|
||||
|
||||
agentList.setLinkTextFunc((item) => {
|
||||
return `
|
||||
<span class="filter-list-searchable">${item.name}</span>
|
||||
<span class="text-xs text-stone-500 whitespace-nowrap font-sans">
|
||||
${item.corporate_body ? "Verlag/Druck/Vertrieb" : item.biographical_data}
|
||||
</span>
|
||||
`;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
{{ if .places }}
|
||||
<div>
|
||||
<h2 class="mb-6">Erscheinungsorte</h2>
|
||||
<filter-list
|
||||
id="place-list"
|
||||
data-url="/reihen/?place="
|
||||
data-placeholder="Erscheinungsorte filtern..."></filter-list>
|
||||
</div>
|
||||
<script type="module">
|
||||
let placeList = document.getElementById("place-list");
|
||||
if (placeList) placeList.items = {{ .places }};
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
{{ if .years }}
|
||||
<div>
|
||||
<h2 class="mb-6">Geltungsjahre</h2>
|
||||
<filter-list
|
||||
id="year-list"
|
||||
data-url="/reihen/?year="
|
||||
data-filterstart="true"
|
||||
data-placeholder="Nach Geltungsjahren filtern..."></filter-list>
|
||||
</div>
|
||||
<script type="module">
|
||||
let yearList = document.getElementById("year-list");
|
||||
if (yearList) {
|
||||
yearList.items = {{ .years }};
|
||||
|
||||
yearList.setHREFFunc((item) => {
|
||||
return String(item);
|
||||
});
|
||||
|
||||
yearList.setLinkTextFunc((item) => {
|
||||
if (item === 0) return "ohne Jahr";
|
||||
return String(item);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{ end }}
|
||||
</div>
|
||||
26
views/routes/reihen/components/hero.gohtml
Normal file
26
views/routes/reihen/components/hero.gohtml
Normal file
@@ -0,0 +1,26 @@
|
||||
{{ $model := . }}
|
||||
<div
|
||||
class="bg-[url(/assets/hintergrund.png)] w-full border-t border-b py-8 mt-9 relative"
|
||||
x-data="{ open: true }"
|
||||
x-show="open">
|
||||
<div class="container-extraoversize flex flex-row gap-x-8">
|
||||
<div class="max-w-[52rem] font-serif text-lg hyphens-auto">
|
||||
{{ Safe $model.record.Text }}
|
||||
</div>
|
||||
<div class="-mr-16 pt-2 grow-0 shrink-0">
|
||||
<img src="{{ $model.record.ImagePath }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 m-4 mr-8">
|
||||
<tool-tip position="left">
|
||||
<div class="data-tip">Hinweis schließen</div>
|
||||
<button
|
||||
@click="open = false"
|
||||
class="text-3xl text-stone-500 opacity-85 hover:opacity-100 transition-opacity
|
||||
duration-200 hover:text-stone-900 leading-none
|
||||
hover:cursor-pointer">
|
||||
<i class="ri-close-circle-fill"></i>
|
||||
</button>
|
||||
</tool-tip>
|
||||
</div>
|
||||
</div>
|
||||
71
views/routes/reihen/components/notifier.gohtml
Normal file
71
views/routes/reihen/components/notifier.gohtml
Normal file
@@ -0,0 +1,71 @@
|
||||
{{ $model := . }}
|
||||
|
||||
|
||||
<div class="flex flex-row justify-center ">
|
||||
{{ if .letter }}
|
||||
<div class="notifier" x-show="!search">
|
||||
<i class="ri-sort-alphabet-asc"></i>
|
||||
<span class="filtercategory">Alle Reihen</span> ·
|
||||
<span class="">Anfangsbuchstabe <span class="filterterm">{{ .letter }}</span></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div class="notifier" x-show="search">
|
||||
<i class="ri-search-line"></i>
|
||||
<span class="filtercategory">Suche</span>
|
||||
· <span class="filterterm" x-text="search"></span>
|
||||
</div>
|
||||
|
||||
{{ if .search }}
|
||||
<div class="notifier" x-show="search">
|
||||
<i class="ri-links-line"></i>
|
||||
<span class="filtercategory">Link</span>
|
||||
· <span class="filterterm" x-text="window.location.href"></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .a }}
|
||||
<div class="notifier" x-show="!search">
|
||||
{{ if .a.CorporateBody }}
|
||||
<i class="ri-team-line"></i>
|
||||
<span class="filtercategory">Verlag, Druckerei oder Vertrieb</span> ·
|
||||
{{ else }}
|
||||
<i class="ri-user-line"></i>
|
||||
<span class="filtercategory">Herausgeber:in</span> ·
|
||||
{{ end }}
|
||||
<span class="filterterm">{{ .a.Name }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .p }}
|
||||
<div class="notifier" x-show="!search">
|
||||
<i class="ri-map-pin-line"></i>
|
||||
<span class="filtercategory">Erscheinungsort</span> ·
|
||||
<span class="filterterm">{{ .p.Name }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .year }}
|
||||
<div class="notifier" x-show="!search">
|
||||
<i class="ri-calendar-line"></i>
|
||||
<span class="filtercategory">Geltungsjahr</span> ·
|
||||
<span class="filterterm">{{ .year }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if not .letter }}
|
||||
<div class="notifier ml-2" x-show="!search">
|
||||
<a href="/reihen" class="no-underline">
|
||||
<i class="ri-arrow-left-long-line"></i> Alle Reihen anzeigen
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div class="notifier ml-2" x-show="search">
|
||||
<a href="/reihen" class="no-underline">
|
||||
<i class="ri-arrow-left-long-line"></i> Alle Reihen anzeigen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user