Theodor-Springmann-Stiftung/kgpz_web
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git synced 2025-10-29 09:05:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

scrollspy fix

Browse Source
This commit is contained in:
Simon Martens
2025-09-21 21:29:36 +02:00
parent 810de82442
commit de9b048b85
4 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

15
views/routes/akteure/body.gohtml
View File

@@ -70,6 +70,19 @@
{{ end }} {{ end }}
</div> </div>
{{ template "_scrollspy_layout" .model }} <!-- Two Column Layout: Scrollspy + Content -->
<div class="flex gap-8">
{{ template "_scrollspy_layout" .model }}
<!-- People List - Main Content -->
<div class="flex-1 space-y-6 bg-white">
{{ range $_, $id := $.model.Sorted }}
{{ $a := index $.model.Agents $id }}
<div id="author-{{ $id }}" class="p-6 scroll-mt-8 author-section">
{{ template "_akteur" $a }}
</div>
{{ end }}
</div> </div>
</div>
{{ end }} {{ end }}

14
views/routes/autoren/body.gohtml
View File

@@ -19,5 +19,19 @@
</div> </div>
</div> </div>
<!-- Two Column Layout: Scrollspy + Content -->
<div class="flex gap-8">
{{ template "_scrollspy_layout" .model }} {{ template "_scrollspy_layout" .model }}
<!-- People List - Main Content -->
<div class="flex-1 space-y-6 bg-white">
{{ range $_, $id := $.model.Sorted }}
{{ $a := index $.model.Agents $id }}
<div id="author-{{ $id }}" class="p-6 scroll-mt-8 author-section">
{{ template "_akteur" $a }}
</div>
{{ end }}
</div>
</div>
</div> </div>

26
views/routes/components/_scrollspy_layout.gohtml
View File

@@ -1,35 +1,25 @@
{{- /* Shared two-column layout with scrollspy navigation for agent pages */ -}}
{{- $agents := .Agents -}}
{{- $sorted := .Sorted -}}
<!-- Two Column Layout: Scrollspy + Content --> {{- /* Shared two-column layout with scrollspy navigation for agent pages */ -}}
<div class="flex gap-8"> {{- $agents := .Agents -}}
<!-- Scrollspy Navigation - Hidden on smaller screens, shown on 2xl+ --> {{- $sorted := .Sorted -}}
<div class="hidden 2xl:block w-96 flex-shrink-0"> <div class="hidden 2xl:block w-96 flex-shrink-0">
<div class="sticky top-0 max-h-screen bg-white rounded py-4 flex flex-col border-x-6 border-white"> <div class="sticky top-0 max-h-screen bg-white rounded py-4 flex flex-col ">
<nav class="flex-1 overflow-y-auto overscroll-contain relative" id="scrollspy-nav"> <nav class="flex-1 overflow-y-auto overscroll-contain relative" id="scrollspy-nav">
<!-- Sliding red background element --> <!-- Sliding red background element -->
<div id="scrollspy-slider" class="absolute left-0 bg-red-100 rounded-sm transition-all duration-300 ease-out opacity-0 z-0" style="width: 100%; height: 0; top: 0;"></div> <div id="scrollspy-slider" class="absolute bg-red-100 rounded-sm transition-all duration-300 ease-out opacity-0 z-0" style="width: calc(100% - 1.5rem); height: 0; top: 0; left: 0.75rem;"></div>
{{ range $_, $id := $sorted }} {{ range $_, $id := $sorted }}
{{ $a := index $agents $id }} {{ $a := index $agents $id }}
<div class="mx-3">
<a href="#author-{{ $id }}" <a href="#author-{{ $id }}"
class="block px-2 py-0.5 text-lg text-gray-900 scrollspy-link no-underline box-content relative z-10 scrollspy-hover" class="block px-2 py-0.5 text-lg text-gray-900 scrollspy-link no-underline box-content relative z-10 scrollspy-hover"
data-target="author-{{ $id }}"> data-target="author-{{ $id }}">
{{ index $a.Names 0 }} {{ index $a.Names 0 }}
</a> </a>
</div>
{{ end }} {{ end }}
</nav> </nav>
</div> </div>
</div> </div>
<!-- People List - Main Content -->
<div class="flex-1 space-y-6 bg-white">
{{ range $_, $id := $sorted }}
{{ $a := index $agents $id }}
<div id="author-{{ $id }}" class="p-6 scroll-mt-8 author-section">
{{ template "_akteur" $a }}
</div>
{{ end }}
</div>
</div>