Viewer & Icon enhancements

This commit is contained in:
Simon Martens
2025-09-23 01:44:47 +02:00
parent b579539e66
commit fc5e8ae8a4
12 changed files with 497 additions and 281 deletions

View File

@@ -25,7 +25,7 @@
{{ end }}</span
>
<a
href="/{{ $model.Year }}/{{ $model.Number.No }}/{{ $page }}"
href="#page-{{ $page }}"
class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 no-underline relative"
data-page-number="{{ $page }}">
<span class="page-label">{{ $page }}</span>
@@ -160,7 +160,7 @@
{{ end }}</span
>
<a
href="/{{ $model.Datum.When.Year }}/{{ $model.Number.No }}/b1-{{ $page }}"
href="#beilage-{{ $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 }}">
<span class="page-label">{{ $page }}</span>

View File

@@ -125,7 +125,13 @@
{{ $idPrefix = "beilage-1-page" }}
{{ end }}
<div class="newspaper-page-container" id="{{ $idPrefix }}-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}"{{ if $isBeilage }} data-beilage="true"{{ end }}>
<div class="newspaper-page-container" id="{{ $idPrefix }}-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}" data-page-icon-type="{{ $page.PageIcon }}"{{ if $isBeilage }} data-beilage="true"{{ end }}>
<!-- Anchor for navigation -->
{{ if $isBeilage }}
<div id="beilage-{{ $page.PageNumber }}"></div>
{{ else }}
<div id="page-{{ $page.PageNumber }}"></div>
{{ end }}
<!-- Page indicator row -->
<div class="flex {{ if $isLeft }}justify-end{{ else }}justify-start{{ end }} items-center gap-1 mb-2">
{{ if $isLeft }}
@@ -141,15 +147,15 @@
</button>
<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
{{ $page.PageNumber }}
<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm scale-x-[-1]"></i>
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage) }}
{{ if $isBeilage }}<span class="text-amber-600">{{ PageIcon $page.PageIcon }}</span>{{ else }}{{ PageIcon $page.PageIcon }}{{ end }}
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $.isBeilage) }}
</span>
{{ else }}
<!-- Right page: page number then buttons -->
<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm"></i>
{{ if $isBeilage }}<span class="text-amber-600">{{ PageIcon $page.PageIcon }}</span>{{ else }}{{ PageIcon $page.PageIcon }}{{ end }}
{{ $page.PageNumber }}
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage) }}
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $.isBeilage) }}
</span>
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this{{ if $isBeilage }}, true{{ end }})" 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>

View File

@@ -1,17 +1,21 @@
{{- /*
Red dot indicator for directly linked pages
Usage: {{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $targetPage) }}
Usage: {{ template "_page_link_indicator" (dict "pageNumber" $page "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $isTargetBeilage) }}
Parameters:
- pageNumber (int): The page number being displayed
- targetPage (int): The target page from URL (0 if none)
- isBeilage (bool): Whether this page is a Beilage page
- isTargetBeilage (bool): Whether the target page is a Beilage page
Shows a red dot with tooltip when pageNumber matches targetPage
Shows a red dot with tooltip when pageNumber matches targetPage and page types match (both Beilage or both regular)
*/ -}}
{{ $pageNumber := .pageNumber }}
{{ $targetPage := .targetPage }}
{{ $isBeilage := .isBeilage }}
{{ $isTargetBeilage := .isTargetBeilage }}
{{ if and $targetPage (eq $pageNumber $targetPage) }}
{{ if and $targetPage (eq $pageNumber $targetPage) (eq $isBeilage $isTargetBeilage) }}
<span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10" title="verlinkte Seite"></span>
{{ end }}

View File

@@ -42,7 +42,9 @@
{{ range $pageEntry := $model.AllPages }}
<!-- Find the issue ref for this page to get date -->
{{ range $issueRef := $model.AllIssueRefs }}
{{ if and (eq $issueRef.When.Year $pageEntry.IssueYear) (eq $issueRef.Nr $pageEntry.IssueNumber) (le $issueRef.Von $pageEntry.PageNumber) (ge $issueRef.Bis $pageEntry.PageNumber) }}
{{ $bis := $issueRef.Bis }}
{{ if eq $bis 0 }}{{ $bis = $issueRef.Von }}{{ end }}
{{ if and (eq $issueRef.When.Year $pageEntry.IssueYear) (eq $issueRef.Nr $pageEntry.IssueNumber) (le $issueRef.Von $pageEntry.PageNumber) (ge $bis $pageEntry.PageNumber) }}
<!-- Individual page entry matching issue view style -->
<div class="mb-4 pl-4 border-l-4 border-slate-300 page-entry {{ if not $pageEntry.OtherPieces }}py-2{{ end }}"
data-page-container="{{ $pageEntry.PageNumber }}">

View File

@@ -18,7 +18,7 @@
{{- end -}}
<!-- Page container -->
<div class="piece-page-container newspaper-page-container" id="piece-page-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}">
<div class="piece-page-container newspaper-page-container" id="piece-page-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}" data-page-icon-type="{{ $page.PageIcon }}">
<!-- Page indicator row -->
<div class="flex justify-start items-center gap-2 mb-3">
<span class="part-number bg-slate-100 text-slate-800 text-sm font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">