You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
3.8 KiB
80 lines
3.8 KiB
{{define "content"}}
|
|
{{with .Content}}
|
|
<div data-image-browser data-active-index="{{.ActiveIndex}}" class="flex h-full min-h-[calc(100vh-7rem)] flex-col gap-4">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h1 class="text-lg font-semibold text-slate-100">{{.Date}}</h1>
|
|
<p class="text-sm text-slate-400">Images</p>
|
|
</div>
|
|
{{if .Images}}
|
|
<div class="flex items-center gap-2">
|
|
<a href="/day/{{.Date}}/images?idx={{.PrevIndex}}" data-prev-index="{{.PrevIndex}}" class="rounded-md border border-slate-700 px-3 py-2 text-sm font-medium text-slate-100 hover:bg-slate-800">Prev</a>
|
|
<a href="/day/{{.Date}}/images?idx={{.NextIndex}}" data-next-index="{{.NextIndex}}" class="rounded-md border border-slate-700 px-3 py-2 text-sm font-medium text-slate-100 hover:bg-slate-800">Next</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
{{if .Images}}
|
|
<div class="h-28 shrink-0 overflow-x-auto border-y border-slate-800 py-3">
|
|
<div class="flex h-full gap-3">
|
|
{{range .Images}}
|
|
<a href="/day/{{$.Content.Date}}/images?idx={{.Index}}" class="h-full w-40 shrink-0 overflow-hidden rounded-md border border-slate-800 bg-slate-950 {{if .Active}}ring-2 ring-indigo-400{{end}}">
|
|
<img src="{{.ThumbURL}}" alt="{{.Filename}}" class="h-full w-full object-cover">
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Viewer: fixed height so the image always fits without page scroll. -->
|
|
<div class="relative h-[calc(100vh-18rem)] min-h-[16rem] overflow-hidden bg-black">
|
|
<!-- object-contain keeps the full image visible; the black bg fills letterbox gaps. -->
|
|
<img src="{{.Current.RawURL}}"
|
|
alt="{{.Current.Filename}}"
|
|
class="h-full w-full object-contain">
|
|
|
|
<!-- Prev / Next overlays -->
|
|
<a href="/day/{{.Date}}/images?idx={{.PrevIndex}}"
|
|
class="absolute left-3 top-1/2 -translate-y-1/2 rounded-md bg-slate-950/80 px-3 py-2 text-sm font-medium text-white hover:bg-slate-900">←</a>
|
|
<a href="/day/{{.Date}}/images?idx={{.NextIndex}}"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 rounded-md bg-slate-950/80 px-3 py-2 text-sm font-medium text-white hover:bg-slate-900">→</a>
|
|
|
|
<!-- Full-size button: opens raw image in a new tab at original resolution. -->
|
|
<a href="{{.Current.RawURL}}"
|
|
target="_blank"
|
|
rel="noopener"
|
|
title="Open full-size image"
|
|
class="absolute right-3 top-3 rounded-md bg-slate-950/80 p-2 text-white hover:bg-slate-900">
|
|
<!-- expand / external-link icon -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4
|
|
M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
const root = document.querySelector("[data-image-browser]");
|
|
if (!root) return;
|
|
const active = Number(root.dataset.activeIndex || "0");
|
|
const prev = root.querySelector("[data-prev-index]")?.dataset.prevIndex || "0";
|
|
const next = root.querySelector("[data-next-index]")?.dataset.nextIndex || "0";
|
|
const go = (index) => {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("idx", index);
|
|
window.location.href = url.toString();
|
|
};
|
|
window.history.replaceState({ idx: active }, "", window.location.href);
|
|
window.addEventListener("keydown", (event) => {
|
|
if (event.key === "ArrowLeft") go(prev);
|
|
if (event.key === "ArrowRight") go(next);
|
|
});
|
|
})();
|
|
</script>
|
|
{{else}}
|
|
<div class="border border-slate-800 bg-slate-950 p-6 text-sm text-slate-400">No images for this day.</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|