gator/paytolaugh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Pets: click a thumbnail to see the photo full size

Browse source 
The thumbnails are 110px squares cropped square, which is too small to check
the thing they exist to record — the collar, the eye colour, the markings that
have to survive into the video.
This commit is contained in:
gator 2026-09-07 17:47:00 +00:00
parent 0771c990f4
commit 09cf5c44c2
1 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
pets.html
View file

@ -155,7 +155,9 @@ function petCard(p) {
? shots.map(function (s) {
return '<figure style="margin:0">'
+ '<img src="' + esc(s.url) + '" alt="' + esc(p.name + " " + s.kind) + '" '
+ 'style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block">'
+ 'data-full="' + esc(s.url) + '" data-cap="' + esc(p.name + " · " + s.kind) + '" '
+ 'title="Click to see it full size" '
+ 'style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block;cursor:zoom-in">'
+ '<figcaption style="font:11px/1.5 var(--mono);color:var(--muted);margin-top:5px;display:flex;justify-content:space-between;gap:6px">'
+ '<span>' + esc(s.kind) + '</span>'
+ '<button type="button" data-del="' + esc(s.id) + '" style="background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline;font:inherit">remove</button>'
@ -239,6 +241,31 @@ function resetForm() {
}
document.getElementById("cancel").addEventListener("click", resetForm);
// A 110px square crop is too small to check the collar, the eye colour or the
// markings — which is exactly what these photographs exist to record.
function showFull(src, caption) {
var back = document.createElement("div");
back.setAttribute("role", "dialog");
back.setAttribute("aria-label", caption || "Photo");
back.style.cssText = "position:fixed;inset:0;background:rgba(6,8,12,.9);z-index:9999;"
+ "display:flex;flex-direction:column;align-items:center;justify-content:center;"
+ "gap:14px;padding:26px;cursor:zoom-out";
back.innerHTML = '<img src="' + esc(src) + '" alt="' + esc(caption || "") + '" '
+ 'style="max-width:min(100%,900px);max-height:82vh;border-radius:12px;'
+ 'border:1px solid var(--line);display:block;background:#000">'
+ '<p style="margin:0;color:#c9cedb;font:13px/1.5 var(--mono);text-align:center">'
+ esc(caption || "") + '<br><span style="opacity:.65">click anywhere, or press Escape, to close</span></p>';
function close() {
document.removeEventListener("keydown", onKey);
if (back.parentNode) back.parentNode.removeChild(back);
}
function onKey(e) { if (e.key === "Escape") close(); }
back.addEventListener("click", close);
document.addEventListener("keydown", onKey);
document.body.appendChild(back);
}
document.getElementById("list").addEventListener("click", async function (e) {
var ed = e.target.closest("[data-edit]");
if (ed) {
@ -258,6 +285,11 @@ document.getElementById("list").addEventListener("click", async function (e) {
document.getElementById("formcard").scrollIntoView({ behavior: "smooth", block: "start" });
return;
}
var full = e.target.closest("[data-full]");
if (full) {
showFull(full.getAttribute("data-full"), full.getAttribute("data-cap"));
return;
}
var del = e.target.closest("[data-del]");
if (del) {
if (!confirm("Remove this photo?")) return;