A lot sof small qualtiy of life upgrades

This commit is contained in:
Simon Martens
2025-09-16 17:02:58 +02:00
parent 3ebfcd410f
commit ca51a6317b
17 changed files with 2109 additions and 1407 deletions

View File

@@ -2,73 +2,78 @@
{{ if $model.Images.HasImages }}
<!-- Container with proper padding -->
<div class="px-4 lg:px-6 xl:px-8">
<div class="">
<!-- Three-column layout -->
<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen mt-8">
<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
<!-- Column 1: Sticky Inhaltsverzeichnis -->
<div class="lg:w-1/4 xl:w-1/5 flex-shrink-0">
<div class="lg:sticky lg:top-12 lg:max-h-[calc(100vh-2rem)] lg:overflow-y-auto">
{{ template "_title_nav" . }}
{{ template "_inhaltsverzeichnis" . }}
<div class="lg:w-1/4 xl:w-1/5 flex-shrink-0 bg-slate-50 px-8 py-4">
<div class="lg:sticky lg:top-8 lg:overflow-y-auto">
<div class="bg-slate-50">
{{ template "_title_nav" . }}
</div>
<div class="">
{{ template "_inhaltsverzeichnis" . }}
</div>
</div>
</div>
<!-- Column 2: Newspaper pages -->
<div class="lg:w-3/5 xl:w-3/5 flex-1">
<div class="lg:w-3/5 xl:w-3/5 flex-1 py-4">
{{ template "_newspaper_layout" . }}
</div>
<!-- Column 3: Navigation buttons -->
<div class="w-16 lg:w-20 xl:w-24 flex-shrink-0">
<div class="w-16 lg:w-20 xl:w-24 flex-shrink-0 ">
<div class="lg:sticky lg:top-12 lg:max-h-[calc(100vh-2rem)]">
<div class="space-y-3 flex flex-col items-center px-2 pt-8">
<button
id="prevPageBtn"
onclick="scrollToPreviousPage()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Vorherige Seite"
style="display: none;">
<i class="ri-arrow-up-line text-lg lg:text-xl"></i>
</button>
<button
id="prevPageBtn"
onclick="scrollToPreviousPage()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Vorherige Seite"
style="display: none;">
<i class="ri-arrow-up-line text-lg lg:text-xl"></i>
</button>
<button
id="nextPageBtn"
onclick="scrollToNextPage()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Nächste Seite">
<i class="ri-arrow-down-line text-lg lg:text-xl"></i>
</button>
<button
id="nextPageBtn"
onclick="scrollToNextPage()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Nächste Seite">
<i class="ri-arrow-down-line text-lg lg:text-xl"></i>
</button>
{{ if $model.AdditionalPieces.Pages }}
<button
id="beilageBtn"
onclick="scrollToBeilage()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 border border-amber-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Zu Beilage">
<i class="ri-attachment-line text-lg lg:text-xl"></i>
</button>
{{ end }}
{{ if $model.HasBeilageButton }}
<button
id="beilageBtn"
onclick="scrollToBeilage()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 border border-amber-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Zu Beilage">
<i class="ri-attachment-line text-lg lg:text-xl"></i>
</button>
{{ end }}
<!-- Separator for utility buttons -->
<div class="w-full border-t border-gray-200 my-4"></div>
<!-- Share Link Button -->
<button
id="shareLinkBtn"
onclick="shareCurrentPage()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-blue-100 hover:bg-blue-200 text-blue-700 hover:text-blue-800 border border-blue-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Link zur aktuellen Seite teilen">
<i class="ri-share-line text-lg lg:text-xl"></i>
</button>
<!-- Separator for utility buttons -->
<div class="w-full border-t border-gray-200 my-4"></div>
<!-- Citation Button -->
<button
id="citationBtn"
onclick="generateCitation()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-green-100 hover:bg-green-200 text-green-700 hover:text-green-800 border border-green-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Zitation für diese Seite generieren">
<i class="ri-file-text-line text-lg lg:text-xl"></i>
</button>
<!-- Share Link Button -->
<button
id="shareLinkBtn"
onclick="shareCurrentPage()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-blue-100 hover:bg-blue-200 text-blue-700 hover:text-blue-800 border border-blue-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Link zur aktuellen Seite teilen">
<i class="ri-share-line text-lg lg:text-xl"></i>
</button>
<!-- Citation Button -->
<button
id="citationBtn"
onclick="generateCitation()"
class="w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-green-100 hover:bg-green-200 text-green-700 hover:text-green-800 border border-green-300 transition-colors duration-200 flex items-center justify-center cursor-pointer"
title="Zitation für diese Seite generieren">
<i class="ri-file-text-line text-lg lg:text-xl"></i>
</button>
</div>
</div>
</div>