karim
42f2823ff0
Archiv-Unterseiten (Büroführung etc.): .collection-Wrapper mit --palette-kusa, .collection-title statt .section-header — gleiche Optik wie Archiv/Library-Übersichten. Artikel-Grid: auto-fill minmax(220px) → 3+ Spalten. Datum unter Titel (card-layout). Archiv-Toggle-Pills: font-family-display (wie Dialog-Pill), margin von spacing-md → 0.5em. Library-Übersicht: A-Z-Index → Kategorie-Pills (Gruppe ausgeschrieben, aktiv = ichigo), Atlas als 2-Spalten-Grid (.atlas--grid2), Suche kombiniert mit Gruppe-Filter. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
90 lines
3.6 KiB
HTML
90 lines
3.6 KiB
HTML
{{ define "main" }}
|
|
<div class="collection" style="--section-color: var(--palette-ichigo)">
|
|
<h1 class="collection-title">{{ .Title }}</h1>
|
|
<div class="collection-inner">
|
|
{{ .Content }}
|
|
|
|
{{ $pages := where site.RegularPages "Section" "library" }}
|
|
|
|
{{ if $pages }}
|
|
{{/* Gruppen sammeln + sortieren */}}
|
|
{{ $groups := dict }}
|
|
{{ range $pages }}
|
|
{{ $g := .Params.group | default "Allgemein" }}
|
|
{{ $existing := index $groups $g | default slice }}
|
|
{{ $groups = merge $groups (dict $g ($existing | append .)) }}
|
|
{{ end }}
|
|
{{ $groupNames := slice }}
|
|
{{ range $g, $_ := $groups }}{{ $groupNames = $groupNames | append $g }}{{ end }}
|
|
{{ $groupNames = sort $groupNames }}
|
|
|
|
<div class="lib-filter">
|
|
<input id="lib-search" class="lib-search" type="search" placeholder="Suchen …" autocomplete="off" spellcheck="false">
|
|
<div class="lib-pills">
|
|
<button class="lib-pill active" data-group="">Alle</button>
|
|
{{ range $groupNames }}<button class="lib-pill" data-group="{{ . }}">{{ . }}</button>{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<section class="atlas atlas--grid2">
|
|
{{ range $groupNames }}
|
|
{{ $ps := index $groups . }}
|
|
<article class="atlas-section" data-group="{{ . }}">
|
|
<h2>{{ . }}</h2>
|
|
<ul class="atlas-list">
|
|
{{ range sort $ps "Title" }}
|
|
{{ $norm := lower .Title }}
|
|
{{ $norm = replace $norm "ä" "a" }}
|
|
{{ $norm = replace $norm "ö" "o" }}
|
|
{{ $norm = replace $norm "ü" "u" }}
|
|
{{ $norm = replace $norm "ß" "ss" }}
|
|
<li data-title="{{ $norm }}">
|
|
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
|
{{ with .Params.summary }}<span class="list-meta text-muted"> — {{ . }}</span>{{ end }}
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</article>
|
|
{{ end }}
|
|
</section>
|
|
|
|
<script>
|
|
(function(){
|
|
var input = document.getElementById('lib-search');
|
|
var pills = document.querySelectorAll('.lib-pill');
|
|
var activeGroup = '';
|
|
|
|
function filter() {
|
|
var q = input.value.trim().toLowerCase()
|
|
.replace(/ä/g,'a').replace(/ö/g,'o').replace(/ü/g,'u').replace(/ß/g,'ss');
|
|
document.querySelectorAll('.atlas-section').forEach(function(sec) {
|
|
var groupMatch = !activeGroup || sec.dataset.group === activeGroup;
|
|
if (!groupMatch) { sec.style.display = 'none'; return; }
|
|
var visible = 0;
|
|
sec.querySelectorAll('li[data-title]').forEach(function(li) {
|
|
var matchQ = !q || li.dataset.title.indexOf(q) !== -1;
|
|
li.style.display = matchQ ? '' : 'none';
|
|
if (matchQ) visible++;
|
|
});
|
|
sec.style.display = visible ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
input.addEventListener('input', filter);
|
|
pills.forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
pills.forEach(function(b){ b.classList.remove('active'); });
|
|
this.classList.add('active');
|
|
activeGroup = this.dataset.group || '';
|
|
filter();
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{{ else }}
|
|
<p class="text-muted"><em>Noch keine Einträge — der erste entsteht im Redaktions-Editor.</em></p>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|