mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 17:15:31 +00:00
grid view
This commit is contained in:
Simon Martens
@@ -7,11 +7,11 @@
|
||||
{{- if $images.MainPages }}
|
||||
<div class="mb-6">
|
||||
<h4 class="text-md font-medium mb-2">Hauptausgabe</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{- range $images.MainPages -}}
|
||||
{{- if .Available -}}
|
||||
<div class="border rounded-lg p-2">
|
||||
<h5 class="text-sm font-medium mb-2">Seite {{ .PageNumber }}</h5>
|
||||
<h5 class="font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-sm mb-2">Seite {{ .PageNumber }}</h5>
|
||||
<img src="{{ .ImagePath }}" alt="Seite {{ .PageNumber }}" class="w-full h-auto border" loading="lazy">
|
||||
</div>
|
||||
{{- end -}}
|
||||
@@ -24,11 +24,11 @@
|
||||
{{- if $pages }}
|
||||
<div class="mb-6">
|
||||
<h4 class="text-md font-medium mb-2">Beilage {{ $beilageNum }}</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{- range $pages -}}
|
||||
{{- if .Available -}}
|
||||
<div class="border rounded-lg p-2">
|
||||
<h5 class="text-sm font-medium mb-2">Seite {{ .PageNumber }}</h5>
|
||||
<h5 class="font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-sm mb-2">Seite {{ .PageNumber }}</h5>
|
||||
<img src="{{ .ImagePath }}" alt="Beilage {{ $beilageNum }}, Seite {{ .PageNumber }}" class="w-full h-auto border" loading="lazy">
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
{{ $pageItems := (index $model.Pieces.Items $page) }}
|
||||
{{ $maxEndPage := $page }}
|
||||
{{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }}
|
||||
<a href="#page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-xs transition-colors duration-200 hover:bg-blue-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a>
|
||||
<a href="#page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-blue-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a>
|
||||
</div>
|
||||
<button class="page-permalink-btn text-slate-400 hover:text-blue-600 text-xs p-1 rounded hover:bg-blue-50 transition-colors duration-200"
|
||||
title="Link zu dieser Seite kopieren"
|
||||
@@ -109,7 +109,7 @@
|
||||
{{ $pageItems := (index $model.AdditionalPieces.Items $page) }}
|
||||
{{ $maxEndPage := $page }}
|
||||
{{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }}
|
||||
<a href="#beilage-1-page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-amber-50 px-2 py-1 rounded text-xs transition-colors duration-200 hover:bg-amber-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a>
|
||||
<a href="#beilage-1-page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-amber-50 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-amber-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a>
|
||||
</div>
|
||||
<button class="page-permalink-btn text-slate-400 hover:text-amber-600 text-xs p-1 rounded hover:bg-amber-50 transition-colors duration-200"
|
||||
title="Link zu dieser Seite kopieren"
|
||||
|
||||
@@ -7,78 +7,103 @@
|
||||
{{ $pages := $images.MainPages }}
|
||||
{{ $pageCount := len $pages }}
|
||||
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- First page (single) -->
|
||||
<!-- 2-column grid with proper empty spaces -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Page 1: Left, Row 1 -->
|
||||
{{ if ge $pageCount 1 }}
|
||||
{{ $firstPage := index $pages 0 }}
|
||||
{{ if $firstPage.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $firstPage.PageNumber }}">
|
||||
{{ $page1 := index $pages 0 }}
|
||||
{{ if $page1.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $page1.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-black"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $firstPage.PageNumber }}">{{ $firstPage.PageNumber }}</span>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page1.PageNumber }}">{{ $page1.PageNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
<img src="{{ $firstPage.ImagePath }}"
|
||||
alt="Seite {{ $firstPage.PageNumber }}"
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
<img src="{{ $page1.ImagePath }}"
|
||||
alt="Seite {{ $page1.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $firstPage.PageNumber }}, false)"
|
||||
data-page="{{ $firstPage.PageNumber }}"
|
||||
onclick="enlargePage(this, {{ $page1.PageNumber }}, false)"
|
||||
data-page="{{ $page1.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Middle pages (double spread) -->
|
||||
{{ if ge $pageCount 4 }}
|
||||
{{ $middlePage1 := index $pages 1 }}
|
||||
{{ $middlePage2 := index $pages 2 }}
|
||||
{{ if and $middlePage1.Available $middlePage2.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}" data-pages="{{ $middlePage1.PageNumber }},{{ $middlePage2.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-black" style="transform: scaleX(-1); margin-right: -8px;"></i><i class="ri-file-text-line text-black"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $middlePage1.PageNumber }}">{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}</span>
|
||||
</div>
|
||||
<!-- Empty space: Right, Row 1 -->
|
||||
<div></div>
|
||||
|
||||
<!-- Common header for pages 2 and 3 -->
|
||||
{{ if and (ge $pageCount 2) (ge $pageCount 3) }}
|
||||
{{ $page2 := index $pages 1 }}
|
||||
{{ $page3 := index $pages 2 }}
|
||||
{{ if and $page2.Available $page3.Available }}
|
||||
<div class="col-span-2 mb-2">
|
||||
<div class="flex items-center justify-center gap-2 mb-4">
|
||||
<i class="ri-file-text-line text-black" style="transform: scaleX(-1);"></i>
|
||||
<i class="ri-file-text-line text-black"></i>
|
||||
<span class="text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded">{{ $page2.PageNumber }}-{{ $page3.PageNumber }}</span>
|
||||
</div>
|
||||
<div class="double-spread bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
<img src="{{ $middlePage1.ImagePath }}"
|
||||
alt="Seite {{ $middlePage1.PageNumber }}"
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Page 2: Left, Row 2 -->
|
||||
{{ if ge $pageCount 2 }}
|
||||
{{ $page2 := index $pages 1 }}
|
||||
{{ if $page2.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $page2.PageNumber }}">
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
<img src="{{ $page2.ImagePath }}"
|
||||
alt="Seite {{ $page2.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $middlePage1.PageNumber }}, true)"
|
||||
data-page="{{ $middlePage1.PageNumber }}"
|
||||
loading="lazy">
|
||||
<img src="{{ $middlePage2.ImagePath }}"
|
||||
alt="Seite {{ $middlePage2.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $middlePage2.PageNumber }}, true)"
|
||||
data-page="{{ $middlePage2.PageNumber }}"
|
||||
onclick="enlargePage(this, {{ $page2.PageNumber }}, false)"
|
||||
data-page="{{ $page2.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Last page (single) -->
|
||||
<!-- Page 3: Right, Row 2 -->
|
||||
{{ if ge $pageCount 3 }}
|
||||
{{ $page3 := index $pages 2 }}
|
||||
{{ if $page3.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $page3.PageNumber }}">
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
<img src="{{ $page3.ImagePath }}"
|
||||
alt="Seite {{ $page3.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page3.PageNumber }}, false)"
|
||||
data-page="{{ $page3.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Empty space: Left, Row 3 -->
|
||||
<div></div>
|
||||
|
||||
<!-- Page 4: Right, Row 3 -->
|
||||
{{ if ge $pageCount 4 }}
|
||||
{{ $lastPage := index $pages 3 }}
|
||||
{{ if $lastPage.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $lastPage.PageNumber }}">
|
||||
{{ $page4 := index $pages 3 }}
|
||||
{{ if $page4.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $page4.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-black" style="transform: scaleX(-1);"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $lastPage.PageNumber }}">{{ $lastPage.PageNumber }}</span>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page4.PageNumber }}">{{ $page4.PageNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
<img src="{{ $lastPage.ImagePath }}"
|
||||
alt="Seite {{ $lastPage.PageNumber }}"
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
<img src="{{ $page4.ImagePath }}"
|
||||
alt="Seite {{ $page4.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $lastPage.PageNumber }}, false)"
|
||||
data-page="{{ $lastPage.PageNumber }}"
|
||||
onclick="enlargePage(this, {{ $page4.PageNumber }}, false)"
|
||||
data-page="{{ $page4.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,7 +115,7 @@
|
||||
<!-- Beilage Pages -->
|
||||
{{ range $beilageNum, $beilagePages := $images.AdditionalPages }}
|
||||
{{ if $beilagePages }}
|
||||
<div class="space-y-6 mt-12 pt-8 border-t-2 border-amber-200">
|
||||
<div class="mt-12 pt-8 border-t-2 border-amber-200">
|
||||
<!-- Header for beilage -->
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<i class="ri-attachment-line text-2xl text-amber-600"></i>
|
||||
@@ -98,102 +123,109 @@
|
||||
</div>
|
||||
{{ $pageCount := len $beilagePages }}
|
||||
|
||||
<!-- First page of beilage -->
|
||||
{{ if ge $pageCount 1 }}
|
||||
{{ $firstPage := index $beilagePages 0 }}
|
||||
{{ if $firstPage.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $firstPage.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<!-- 2-column grid with proper empty spaces -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Page 1: Left, Row 1 -->
|
||||
{{ if ge $pageCount 1 }}
|
||||
{{ $page1 := index $beilagePages 0 }}
|
||||
{{ if $page1.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page1.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-amber-600"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page1.PageNumber }}">{{ $page1.PageNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $page1.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $page1.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page1.PageNumber }}, false)"
|
||||
data-page="{{ $page1.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Empty space: Right, Row 1 -->
|
||||
<div></div>
|
||||
|
||||
<!-- Common header for pages 2 and 3 -->
|
||||
{{ if and (ge $pageCount 2) (ge $pageCount 3) }}
|
||||
{{ $page2 := index $beilagePages 1 }}
|
||||
{{ $page3 := index $beilagePages 2 }}
|
||||
{{ if and $page2.Available $page3.Available }}
|
||||
<div class="col-span-2 mb-2">
|
||||
<div class="flex items-center justify-center gap-2 mb-4">
|
||||
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></i>
|
||||
<i class="ri-file-text-line text-amber-600"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $firstPage.PageNumber }}">{{ $firstPage.PageNumber }}</span>
|
||||
<span class="text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded">{{ $page2.PageNumber }}-{{ $page3.PageNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $firstPage.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $firstPage.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $firstPage.PageNumber }}, false)"
|
||||
data-page="{{ $firstPage.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- If beilage has 4+ pages, show middle spread -->
|
||||
{{ if ge $pageCount 4 }}
|
||||
{{ $middlePage1 := index $beilagePages 1 }}
|
||||
{{ $middlePage2 := index $beilagePages 2 }}
|
||||
{{ if and $middlePage1.Available $middlePage2.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}" data-pages="{{ $middlePage1.PageNumber }},{{ $middlePage2.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1); margin-right: -8px;"></i><i class="ri-file-text-line text-amber-600"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $middlePage1.PageNumber }}">{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}</span>
|
||||
<!-- Page 2: Left, Row 2 -->
|
||||
{{ if ge $pageCount 2 }}
|
||||
{{ $page2 := index $beilagePages 1 }}
|
||||
{{ if $page2.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page2.PageNumber }}">
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $page2.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $page2.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page2.PageNumber }}, false)"
|
||||
data-page="{{ $page2.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="double-spread bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $middlePage1.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $middlePage1.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $middlePage1.PageNumber }}, true)"
|
||||
data-page="{{ $middlePage1.PageNumber }}"
|
||||
loading="lazy">
|
||||
<img src="{{ $middlePage2.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $middlePage2.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $middlePage2.PageNumber }}, true)"
|
||||
data-page="{{ $middlePage2.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else if eq $pageCount 2 }}
|
||||
<!-- If only 2 pages, show as spread -->
|
||||
{{ $page2 := index $beilagePages 1 }}
|
||||
{{ if $page2.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page2.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page2.PageNumber }}">{{ $page2.PageNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $page2.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $page2.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page2.PageNumber }}, false)"
|
||||
data-page="{{ $page2.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Last page of beilage (if 4+ pages) -->
|
||||
{{ if ge $pageCount 4 }}
|
||||
{{ $lastPage := index $beilagePages 3 }}
|
||||
{{ if $lastPage.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $lastPage.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $lastPage.PageNumber }}">{{ $lastPage.PageNumber }}</span>
|
||||
<!-- Page 3: Right, Row 2 -->
|
||||
{{ if ge $pageCount 3 }}
|
||||
{{ $page3 := index $beilagePages 2 }}
|
||||
{{ if $page3.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page3.PageNumber }}">
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $page3.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $page3.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page3.PageNumber }}, false)"
|
||||
data-page="{{ $page3.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $lastPage.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $lastPage.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $lastPage.PageNumber }}, false)"
|
||||
data-page="{{ $lastPage.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Empty space: Left, Row 3 -->
|
||||
<div></div>
|
||||
|
||||
<!-- Page 4: Right, Row 3 -->
|
||||
{{ if ge $pageCount 4 }}
|
||||
{{ $page4 := index $beilagePages 3 }}
|
||||
{{ if $page4.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page4.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></i>
|
||||
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page4.PageNumber }}">{{ $page4.PageNumber }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $page4.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $page4.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page4.PageNumber }}, false)"
|
||||
data-page="{{ $page4.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user