+Startseite u. Suche Baic styling

This commit is contained in:
Simon Martens
2025-09-29 18:29:17 +02:00
parent 0d7886a664
commit 52758c0124
16 changed files with 669 additions and 361 deletions

View File

@@ -5,10 +5,12 @@
<div class="">
<!-- Two-column layout for piece view -->
<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
<!-- Column 1: Table of Contents ONLY -->
<!-- Column 1: Table of Contents with Scrollspy -->
<div class="lg:w-1/4 xl:w-1/4 2xl:w-1/4 3xl:w-1/5 flex-shrink-0 bg-slate-50 px-4 py-4">
<div class="sticky top-0 max-h-screen overflow-y-auto overscroll-contain bg-slate-50">
{{ template "_piece_inhaltsverzeichnis" . }}
<inhaltsverzeichnis-scrollspy>
{{ template "_piece_inhaltsverzeichnis" . }}
</inhaltsverzeichnis-scrollspy>
</div>
</div>
@@ -18,6 +20,9 @@
</div>
</div>
</div>
<!-- Scroll to top button -->
<scroll-to-top-button></scroll-to-top-button>
{{ else }}
<!-- No images fallback with debug info -->
<div class="container mx-auto px-4 py-8">

View File

@@ -19,7 +19,7 @@
<!-- Actual piece content description (larger) -->
<div class="mb-3">
<div class="text-base font-semibold text-slate-800 leading-snug">
{{ template "_unified_piece_entry" (dict "Piece" $firstPiece.PieceByIssue "DisplayMode" "piece" "ShowPlaceTags" true "UseColonFormat" false "ShowContinuation" true) }}
{{ template "_unified_piece_entry" (dict "Piece" $firstPiece.PieceByIssue.Piece "DisplayMode" "piece" "ShowPlaceTags" true "UseColonFormat" false "ShowContinuation" true) }}
</div>
</div>
{{ end }}
@@ -88,7 +88,7 @@
{{ range $otherPiece := $pageEntry.OtherPieces }}
<div class="inhalts-entry py-1 px-0 bg-slate-50 rounded hover:bg-slate-100 transition-colors duration-200"
data-page="{{ $pageEntry.PageNumber }}">
{{ template "_unified_piece_entry" (dict "Piece" $otherPiece.PieceByIssue "DisplayMode" "piece" "ShowPlaceTags" true "UseColonFormat" false "ShowContinuation" true) }}
{{ template "_unified_piece_entry" (dict "Piece" $otherPiece.PieceByIssue.Piece "DisplayMode" "piece" "ShowPlaceTags" true "UseColonFormat" false "ShowContinuation" true) }}
</div>
{{ end }}
{{ else }}

View File

@@ -30,23 +30,7 @@
</span>
<!-- Action buttons -->
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this)"
class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
title="Link zu Seite {{ $page.PageNumber }} kopieren">
<i class="ri-share-line text-xs"></i>
</button>
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)"
class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
title="Zitation für Seite {{ $page.PageNumber }} generieren">
<i class="ri-file-text-line text-xs"></i>
</button>
<button onclick="enlargePage(document.querySelector('#piece-page-{{ $page.PageNumber }} .piece-page-image'), {{ $page.PageNumber }}, false, {{ $pageEntry.PartNumber }})"
class="w-6 h-6 bg-purple-100 hover:bg-purple-200 text-purple-700 border border-purple-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
title="Seite {{ $page.PageNumber }} vergrößern">
<i class="ri-zoom-in-line text-xs"></i>
</button>
{{ template "_page_action_buttons" (dict "PageNumber" $page.PageNumber "IsBeilage" false "PartNumber" $pageEntry.PartNumber "ImageElement" (printf "#piece-page-%d .piece-page-image" $page.PageNumber) "ButtonSize" "small" "ShowZoom" true) }}
</div>
<!-- Page image -->
@@ -79,17 +63,5 @@
{{ end }}
</div>
<!-- Modal for enlarged view - reuse existing modal -->
<div
id="pageModal"
class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center backdrop-blur-sm"
onclick="closeModal()">
<div class="relative max-w-full max-h-full p-4">
<img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain rounded-lg" />
<button
onclick="closeModal()"
class="absolute top-2 right-2 text-white bg-slate-800 bg-opacity-80 rounded-full w-10 h-10 flex items-center justify-center hover:bg-opacity-100 transition-all duration-200">
<i class="ri-close-line text-xl"></i>
</button>
</div>
</div>
<!-- Modal for enlarged view -->
{{ template "_page_modal" }}