mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2025-10-29 17:25:32 +00:00
lesekabinett pdfs & literaturangaben
This commit is contained in:
Simon Martens
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 MiB |
BIN
views/public/hintergrund.webp
Normal file
BIN
views/public/hintergrund.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
views/public/hintergrund_lower.webp
Normal file
BIN
views/public/hintergrund_lower.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 749 KiB |
|
Before Width: | Height: | Size: 5.3 MiB After Width: | Height: | Size: 5.3 MiB |
@@ -73,9 +73,9 @@
|
||||
</div>
|
||||
|
||||
{{- if .result.BResult -}}
|
||||
<div class="container-normal flex flex-col font-serif mt-7 gap-y-6">
|
||||
<h2 class="border-b font-sans flex flex-row justify-between items-end">
|
||||
<div>
|
||||
<div class="container-normal flex flex-col font-serif mt-7">
|
||||
<h2 class=" font-sans flex flex-row items-center gap-x-3 mb-6">
|
||||
<div class="-ml-0.5">
|
||||
<i class="ri-book-line"></i>
|
||||
{{ if eq $model.result.LenEntries 1 }}
|
||||
<b>Ein Band</b>
|
||||
@@ -92,61 +92,94 @@
|
||||
</div>
|
||||
|
||||
{{- if len $model.result.CResult -}}
|
||||
<div class="flex flex-row bg-stone-100 px-2 py-1 items-center">
|
||||
<a class="" href="#almanachcontents"> Zu den Beiträgen</a>
|
||||
<div>·</div>
|
||||
<div class="flex flex-row py-1 items-center text-base">
|
||||
<i class="ri-arrow-down-double-line mr-1"></i>
|
||||
<a class="" href="#almanachcontents">Beiträge</a>
|
||||
<div
|
||||
class="inline-block mx-2 text-xs bg-slate-800 text-white font-bold px-1.5 py-0.5
|
||||
rounded">
|
||||
{{- $model.result.LenContents -}}
|
||||
</div>
|
||||
<i class="ri-arrow-down-double-line"></i>
|
||||
</div>
|
||||
{{- end -}}
|
||||
</h2>
|
||||
{{ range $id, $r := .result.BResult }}
|
||||
<div class="grow-0 max-w-[48rem]">
|
||||
<div>
|
||||
<span class="font-bold">{{ $r.Title }}</span>
|
||||
</div>
|
||||
{{ if $r.Annotation }}
|
||||
<div class="max-w-[48rem]">
|
||||
<span class="">{{ Safe $r.Annotation }}</span>
|
||||
<div class="flex flex-col gap-y-6 mb-6">
|
||||
{{ range $id, $r := .result.BResult }}
|
||||
<div class="grow-0 max-w-[48rem]">
|
||||
<div>
|
||||
<span class="font-bold">{{ $r.Title }}</span>
|
||||
</div>
|
||||
{{ if $r.Annotation }}
|
||||
<div class="max-w-[48rem]">
|
||||
<span class="">{{ Safe $r.Annotation }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="">
|
||||
{{- $bds := index $model.result.EntriesSeries $r.Id -}}
|
||||
{{ template "personreiherelations" (Arr $r $bds $model.result.Entries true
|
||||
$model.result.EntriesAgents)
|
||||
}}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="">
|
||||
{{- $bds := index $model.result.EntriesSeries $r.Id -}}
|
||||
{{ template "personreiherelations" (Arr $r $bds $model.result.Entries true
|
||||
$model.result.EntriesAgents)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{- if len $model.result.CResult -}}
|
||||
<div class="container-normal mt-16 pt-0" id="almanachcontents">
|
||||
<div class="font-sans border-b">
|
||||
<i class="ri-article-line"></i>
|
||||
{{ if eq $model.result.LenContents 1 }}
|
||||
<b>Ein Beitrag</b>
|
||||
{{- else }}
|
||||
<b>{{- $model.result.LenContents }}</b>
|
||||
Beiträge
|
||||
{{- end }}
|
||||
in
|
||||
{{- if eq (len $model.result.CResult) 1 }}
|
||||
<b>einem Band</b>
|
||||
{{- else }}
|
||||
<b>{{ len $model.result.CResult }}</b> Bänden
|
||||
{{- end }}
|
||||
<div class="container-normal mt-12 pt-0" id="almanachcontents">
|
||||
<div class="font-sans flex flex-row gap-x-3 mb-8">
|
||||
<div>
|
||||
<i class="ri-article-line"></i>
|
||||
{{ if eq $model.result.LenContents 1 }}
|
||||
<b>Ein Beitrag</b>
|
||||
{{- else }}
|
||||
<b>{{- $model.result.LenContents }}</b>
|
||||
Beiträge
|
||||
{{- end }}
|
||||
in
|
||||
{{- if eq (len $model.result.CResult) 1 }}
|
||||
<b>einem Band</b>
|
||||
{{- else }}
|
||||
<b>{{ len $model.result.CResult }}</b> Bänden
|
||||
{{- end }}
|
||||
</div>
|
||||
<div>·</div>
|
||||
<div>
|
||||
<input type="checkbox" id="showall" autocomplete="off" />
|
||||
<label for="showall" class="cursor-pointer select-none ml-1">Alle anzeigen</label>
|
||||
<script type="module">
|
||||
const tablist = document.getElementById("entries-tabs");
|
||||
const checkbox = document.getElementById("showall");
|
||||
{{- if eq (len $model.result.CResult) 1 -}}
|
||||
if (checkbox) {
|
||||
if (tablist) {
|
||||
tablist.showAll();
|
||||
}
|
||||
checkbox.checked = true;
|
||||
checkbox.disabled = true;
|
||||
}
|
||||
{{- else -}}
|
||||
if (tablist && checkbox) {
|
||||
checkbox.addEventListener("change", () => {
|
||||
if (checkbox && checkbox.checked) {
|
||||
tablist.showAll();
|
||||
} else {
|
||||
tablist.default();
|
||||
}
|
||||
});
|
||||
}
|
||||
{{- end -}}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<tab-list>
|
||||
<tab-list id="entries-tabs">
|
||||
{{- range $_, $e := $model.result.CResult -}}
|
||||
{{- $contents := index $model.result.Contents $e.Id -}}
|
||||
<div
|
||||
class="font-serif flex flex-row justify-between hover:text-slate-800 text-stone-600
|
||||
class="font-serif flex flex-row justify-between hover:text-slate-900 text-stone-600
|
||||
font-bold border-b pb-0.5 mb-2 tab-list-head items-end">
|
||||
<div>
|
||||
{{ $e.PreferredTitle }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{{ $model := . }}
|
||||
<div
|
||||
class="bg-[url(/assets/hintergrund.png)] w-full border-t border-b py-8 mt-9 relative"
|
||||
class="bg-[url(/assets/hintergrund.webp)] 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">
|
||||
|
||||
@@ -180,7 +180,7 @@ class FilterPill extends HTMLElement {
|
||||
render() {
|
||||
this.innerHTML = `
|
||||
<a href="${this.getURL()}" class="!no-underline block text-base" hx-target="#searchresults" hx-select="#searchresults" hx-swap="outerHTML show:window:top">
|
||||
<div class="flex flex-row filter-pill rounded-lg bg-orange-100 hover:-saturate-100 px-2.5 mt-2">
|
||||
<div class="flex flex-row filter-pill rounded-lg bg-orange-100 hover:saturate-50 px-2.5 mt-2">
|
||||
<div href="${this.getURL()}" class="filter-pill-close no-underline font-bold mr-1 text-orange-900 hover:text-orange-800">
|
||||
<i class="ri-close-circle-line"></i>
|
||||
</div>
|
||||
@@ -799,6 +799,7 @@ class Tablist extends HTMLElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._showall = false;
|
||||
this.shown = -1;
|
||||
this._headings = [];
|
||||
this._contents = [];
|
||||
@@ -807,15 +808,7 @@ class Tablist extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this._headings = Array.from(this.querySelectorAll(".tab-list-head"));
|
||||
this._contents = Array.from(this.querySelectorAll(".tab-list-panel"));
|
||||
for (let heading of this._headings) {
|
||||
heading.addEventListener("click", this.handleTabClick.bind(this));
|
||||
heading.classList.add("cursor-pointer");
|
||||
heading.classList.add("select-none");
|
||||
heading.setAttribute("role", "button");
|
||||
heading.setAttribute("aria-pressed", "false");
|
||||
heading.setAttribute("tabindex", "0");
|
||||
}
|
||||
|
||||
this.hookupEvtHandlers();
|
||||
this.hideDependent();
|
||||
|
||||
if (this._headings.length === 1) {
|
||||
@@ -841,6 +834,73 @@ class Tablist extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
hookupEvtHandlers() {
|
||||
for (let heading of this._headings) {
|
||||
heading.addEventListener("click", this.handleTabClick.bind(this));
|
||||
heading.classList.add("cursor-pointer");
|
||||
heading.classList.add("select-none");
|
||||
heading.setAttribute("role", "button");
|
||||
heading.setAttribute("aria-pressed", "false");
|
||||
heading.setAttribute("tabindex", "0");
|
||||
}
|
||||
|
||||
for (let content of this._contents) {
|
||||
content.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
restore() {
|
||||
for (let heading of this._headings) {
|
||||
heading.classList.add("cursor-pointer");
|
||||
heading.classList.add("select-none");
|
||||
heading.setAttribute("role", "button");
|
||||
heading.setAttribute("aria-pressed", "false");
|
||||
heading.setAttribute("tabindex", "0");
|
||||
heading.classList.remove("pointer-events-none");
|
||||
heading.classList.remove("!text-slate-900");
|
||||
}
|
||||
|
||||
for (let content of this._contents) {
|
||||
content.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
disable() {
|
||||
for (let heading of this._headings) {
|
||||
heading.classList.remove("cursor-pointer");
|
||||
heading.classList.remove("select-none");
|
||||
heading.removeAttribute("role");
|
||||
heading.removeAttribute("aria-pressed");
|
||||
heading.removeAttribute("tabindex");
|
||||
heading.classList.add("pointer-events-none");
|
||||
heading.classList.add("!text-slate-900");
|
||||
}
|
||||
}
|
||||
|
||||
showAll() {
|
||||
this._showall = true;
|
||||
this.shown = -1;
|
||||
this.disable();
|
||||
this._contents.forEach((content, i) => {
|
||||
content.classList.remove("hidden");
|
||||
let heading = this._headings[i];
|
||||
let showopened = heading.querySelectorAll(".show-opened");
|
||||
for (let e of showopened) {
|
||||
e.classList.add("hidden");
|
||||
}
|
||||
let showclosed = heading.querySelectorAll(".show-closed");
|
||||
for (let e of showclosed) {
|
||||
e.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
default() {
|
||||
this._showall = false;
|
||||
this.restore();
|
||||
this.hideDependent();
|
||||
}
|
||||
|
||||
hideDependent() {
|
||||
if (this.shown < 0) {
|
||||
for (const el of this._headings) {
|
||||
|
||||
@@ -485,6 +485,6 @@
|
||||
}
|
||||
|
||||
.tab-list-head[aria-pressed="true"] {
|
||||
@apply !text-slate-800 bg-stone-50;
|
||||
@apply !text-slate-900 bg-stone-50;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user