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.
58 lines
2.9 KiB
58 lines
2.9 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>
|
|
|
|
<div class="relative min-h-0 flex-1 overflow-hidden bg-black">
|
|
<img src="{{.Current.RawURL}}" alt="{{.Current.Filename}}" class="h-full max-h-[calc(100vh-15rem)] min-h-[18rem] w-full object-contain">
|
|
<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">Prev</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">Next</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}}
|
|
|