foxandClaude Fable 5.1
3f719359de
/manage lists every photo; /manage/edit/{slug} rewrites the photo's
.toml sidecar (caption, date), /manage/delete/{slug} asks for
confirmation and then removes the image, its sidecar and everything
generated from them. Builds now drop day pages of days without photos
and pager pages past the last one, so a delete or a date change leaves
nothing behind.
The pages are off by default: the routes are only registered with
-manage, so an install that does not opt in has no such code path and
answers 404. NixOS gets services.photogallery.manage.enable, which
also adds the nginx location only when on. Like /upload, the pages
carry no auth of their own and are not linked from the public site.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
111 lines
3.2 KiB
HTML
111 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex">
|
|
<title>Edit — {{.Photo.Caption}}</title>
|
|
<link rel="stylesheet" href="{{.FontsURL}}">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<style>
|
|
:root { --serif: '{{.SerifFamily}}', Georgia, serif; --mj: '{{.MlFamily}}', sans-serif; }
|
|
.edit-page {
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
padding: 32px 20px;
|
|
}
|
|
.edit-page .back-btn {
|
|
color: var(--fg3);
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
}
|
|
.edit-page .back-btn:hover { color: var(--fg); }
|
|
.edit-page h2 {
|
|
font-family: var(--serif);
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--fg);
|
|
margin: 16px 0 24px;
|
|
}
|
|
.edit-img {
|
|
display: block;
|
|
width: 100%;
|
|
max-height: 340px;
|
|
object-fit: contain;
|
|
background: var(--bg0);
|
|
border: 1px solid var(--bg2);
|
|
margin-bottom: 8px;
|
|
}
|
|
.edit-slug {
|
|
font-size: 12px;
|
|
color: var(--fg4);
|
|
font-family: monospace;
|
|
margin-bottom: 24px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.field { margin-bottom: 18px; }
|
|
.field label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--fg4);
|
|
font-family: monospace;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 6px;
|
|
}
|
|
.field input[type="text"],
|
|
.field input[type="date"] {
|
|
width: 100%;
|
|
background: var(--bg0);
|
|
border: 1px solid var(--bg2);
|
|
color: var(--fg);
|
|
font-size: 16px;
|
|
padding: 10px 12px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.field input[type="text"] { font-family: var(--serif); }
|
|
.field input[type="date"] { font-family: monospace; font-size: 14px; color-scheme: dark; }
|
|
.field input:focus { border-color: var(--fg4); }
|
|
.submit-btn {
|
|
width: 100%;
|
|
background: var(--bg1);
|
|
border: 1px solid var(--bg2);
|
|
color: var(--fg2);
|
|
font-family: var(--serif);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
.submit-btn:hover { background: var(--bg2); color: var(--fg); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="edit-page">
|
|
<a href="/manage" class="back-btn">← Manage</a>
|
|
<h2>Edit photo</h2>
|
|
|
|
<img class="edit-img" src="/{{.Photo.Medium}}" alt="">
|
|
<p class="edit-slug">{{.Photo.Slug}}</p>
|
|
|
|
<!-- A plain form post, no script: the server answers with a redirect
|
|
back to /manage, so a reload never resubmits the edit. -->
|
|
<form method="post" action="/manage/edit/{{.Photo.Slug}}">
|
|
<div class="field">
|
|
<label for="caption">Caption</label>
|
|
<input type="text" id="caption" name="caption" value="{{.Photo.Caption}}" autocomplete="off" autofocus>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="date">Date</label>
|
|
<input type="date" id="date" name="date" value="{{.Photo.Date.Format "2006-01-02"}}" required>
|
|
</div>
|
|
|
|
<button class="submit-btn" type="submit">Save changes</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|