diff --git a/services/booth/README.md b/services/booth/README.md index 79653be..693f0ca 100644 --- a/services/booth/README.md +++ b/services/booth/README.md @@ -52,7 +52,17 @@ booth blur ... # hide from a glance booth unblur ... ``` -Or the ◌ / ◉ toggle in each item's caption row on the booth page. +Or the **`◌ blur` / `◉ blurred`** button on every item in the booth page — +in the caption row for images, video, audio and plain files, and in the doc bar +beside ⤢ ⬇ ✕ for inline docs. + +⚠ The toggle is emitted by ONE Jinja macro (`blurtoggle`) called from all three +item branches. booth.html renders docs, media and everything-else through +separate `
` blocks, and this feature was twice shipped having patched +only some of them — first the blur class, then the toggle itself. Add a fourth +branch and you must call the macro from it; +`test_every_item_kind_gets_exactly_one_blur_toggle` counts toggles against +figures across mixed kinds and will fail if you don't. - **State** is `.blurred` in the booth dir — one booth-relative item path per line, the same filesystem-is-the-state idiom as `.pins` and `.forever`. An diff --git a/services/booth/booth/templates/base.html b/services/booth/booth/templates/base.html index 021014a..5b77584 100644 --- a/services/booth/booth/templates/base.html +++ b/services/booth/booth/templates/base.html @@ -270,10 +270,17 @@ font:inherit;font-size:.72rem;line-height:1;padding:.24rem .5rem;cursor:pointer; border:1px solid var(--line);border-radius:.3rem;background:var(--bg);color:var(--fg)} .item.blurred .reveal:hover{background:var(--aus-blue);color:var(--fg-on-accent)} - .blurtoggle{display:inline;margin:0} - .blurtoggle button{font:inherit;font-size:.78rem;line-height:1;padding:0 .2rem; - cursor:pointer;border:0;background:none;color:var(--muted)} - .blurtoggle button:hover{color:var(--fg)} + /* Legible on purpose. v1 was a bare muted glyph with no border and no label, + and the operator's reaction to it was "no UI option to blur/unblur?" — a + control nobody can find is a control that is not there. */ + .blurtoggle{display:inline-block;margin:0} + .blurtoggle button{font:inherit;font-size:.7rem;line-height:1;padding:.2rem .4rem; + cursor:pointer;border:1px solid var(--line);border-radius:.3rem; + background:var(--bg);color:var(--fg);white-space:nowrap} + .blurtoggle button:hover{background:var(--aus-blue);color:var(--fg-on-accent)} + /* In the doc bar it sits beside ⤢ ⬇ ✕ and should not out-shout them. */ + .doc-bar .blurtoggle{margin-left:.35rem} + .doc-bar .blurtoggle button{font-size:.66rem;padding:.14rem .34rem} /* Cover thumbs on the index inherit the blur so the front page cannot undo it. */ .blurred-thumb{filter:blur(16px)} /* opaque dark control-scrim + always-light glyph — legible over any thumbnail diff --git a/services/booth/booth/templates/booth.html b/services/booth/booth/templates/booth.html index 6a6b36b..9830a0f 100644 --- a/services/booth/booth/templates/booth.html +++ b/services/booth/booth/templates/booth.html @@ -1,4 +1,18 @@ {% extends "base.html" %} +{# The blur toggle, defined ONCE. There are three item branches in this file + (doc / media / other) and the first cut of this feature patched only one of + them, so docs rendered with no control at all. A macro makes "patched two of + three" impossible rather than merely unlikely. #} +{% macro blurtoggle(name_url, it, cls='') -%} +
+ + + +
+{%- endmacro %} + {% block title %}{{ name }} · The Booth{% endblock %} {% block content %}
@@ -109,6 +123,7 @@ ⤢ ⬇ + {{ blurtoggle(name_url, it, 'doc-act') }} {% if it.rendered_html %} @@ -142,17 +157,17 @@ ⬇ {{ it.name }} {% endif %} {% if it.kind == 'other' %} - {% if it.caption %}
{{ it.caption }}
{% endif %} + {# Always render the caption row now: it carries the blur toggle, and + "no caption" is not a reason to deny an item its controls. #} +
+ {% if it.caption %}{{ it.caption }}{% endif %} + {{ blurtoggle(name_url, it) }} +
{% else %}
⬇ {{ it.caption or it.name }} -
- - - -
+ {{ blurtoggle(name_url, it) }}
{% endif %}
@@ -200,6 +215,10 @@ "collapse". Collapse stays available via the rest of the summary bar. With JS off the button is inert and collapse via
still works. */ (function () { + /* A form inside would otherwise collapse the doc on submit. */ + document.querySelectorAll('.doc-bar .blurtoggle').forEach(function (f) { + f.addEventListener('click', function (ev) { ev.stopPropagation(); }); + }); document.querySelectorAll('.doc-close').forEach(function (btn) { btn.addEventListener('click', function (ev) { ev.preventDefault(); diff --git a/services/booth/tests/test_booth.py b/services/booth/tests/test_booth.py index 0945922..ecc89e4 100644 --- a/services/booth/tests/test_booth.py +++ b/services/booth/tests/test_booth.py @@ -1447,3 +1447,43 @@ def test_blur_applies_to_inline_docs_not_just_images(client): assert body.count('
item-doc + _png(d / "pic.png") # -> item-image + (d / "blob.bin").write_bytes(b"\x00\x01binary") # -> item-other + + body = c.get("/b/bo/").text + figures = body.count('