Make every clickable control look clickable, in two shared styles (closes #375) #447

Merged
clawbot merged 1 commits from issue-375-clickable-controls into next 2026-10-02 18:32:19 +02:00
Collaborator

Every clickable control now looks clickable at rest, in one of two shared styles in static/css/style.css. The layout now loads that file after tailwind.css; it held only a comment, so loading it changes nothing else.

  • Buttons: btn-primary, btn-secondary, btn-danger, now with a pointer cursor.
  • Secondary or inline actions: btn-small, bordered, with hover and focus states.

Controls changed:

  • Navigation: the site name, Webhooks, Settings, profile, Logout (desktop and phone menu), and the phone menu button.
  • Webhook list: each card, a link as a whole, shows an Open label in btn-small and takes its focus outline.
  • Webhook page: Back to webhooks, both Add, Copy, each entrypoint's Activate/Deactivate and Delete, each target's Edit, Activate/Deactivate and Delete, Full Event Log under recent events.
  • Event log: the back link, Resubmit, Replay, "download the full body", and each event's and delivery's row, now buttons so they work by keyboard. Replay sits beside its delivery's row.
  • Create webhook, Edit webhook, Edit target: the back links.
  • Footer: both links.

Copy already showed "Copied"; the browser test now checks that, and that Copy and both Add are buttons.

Webhook page before:

before

After:

after

  • Judgement call: the row Delete buttons keep red text.
  • Rows on the webhook page and in the event log now wrap at phone width.
  • btn-text is unused but stays in input.css and tailwind.css until #231: make css needs a tailwindcss binary that this host lacks and the repo does not yet pin.
  • The browser test grants the headless browser clipboard permission, which a real tab gets on a click.

Model: opus-5-5

Every clickable control now looks clickable at rest, in one of two shared styles in `static/css/style.css`. The layout now loads that file after `tailwind.css`; it held only a comment, so loading it changes nothing else. - Buttons: `btn-primary`, `btn-secondary`, `btn-danger`, now with a pointer cursor. - Secondary or inline actions: `btn-small`, bordered, with hover and focus states. Controls changed: - Navigation: the site name, Webhooks, Settings, profile, Logout (desktop and phone menu), and the phone menu button. - Webhook list: each card, a link as a whole, shows an Open label in `btn-small` and takes its focus outline. - Webhook page: Back to webhooks, both Add, Copy, each entrypoint's Activate/Deactivate and Delete, each target's Edit, Activate/Deactivate and Delete, Full Event Log under recent events. - Event log: the back link, Resubmit, Replay, "download the full body", and each event's and delivery's row, now buttons so they work by keyboard. Replay sits beside its delivery's row. - Create webhook, Edit webhook, Edit target: the back links. - Footer: both links. Copy already showed "Copied"; the browser test now checks that, and that Copy and both Add are buttons. Webhook page before: ![before](https://git.eeqj.de/attachments/8aaee3a9-d3d6-4cf0-8564-146d5aad1e1b) After: ![after](https://git.eeqj.de/attachments/c5d92f01-bdd2-4ad8-b85d-d5ae3fcba62a) - Judgement call: the row Delete buttons keep red text. - Rows on the webhook page and in the event log now wrap at phone width. - `btn-text` is unused but stays in `input.css` and `tailwind.css` until https://git.eeqj.de/sneak/webhooker/issues/231: `make css` needs a `tailwindcss` binary that this host lacks and the repo does not yet pin. - The browser test grants the headless browser clipboard permission, which a real tab gets on a click. Model: opus-5-5
clawbot added the needs-review label 2026-10-02 16:44:47 +02:00
clawbot self-assigned this 2026-10-02 16:44:47 +02:00
Author
Collaborator

Review of #447 against #375: needs rework.

  1. templates/navbar.html line 5: the site name "Webhooker" in the bar is a link home, but on every page it is still plain dark text at rest, with only a colour change on hover. The same link in the footer was made a bordered button. The definition of done covers every clickable control, and the issue does not exempt this one. Acceptable: the link uses one of the two shared styles, with hover and focus states.

  2. templates/sources_list.html line 20: each card on the webhook list is a link covering the whole card. At rest it looks exactly like the cards that are not clickable, with the same white card and shadow as Statistics on the webhook page. Only hovering raises it. Acceptable: at rest, each card shows in one of the two shared styles that it opens the webhook, and it has a visible focus state.

  3. templates/source_logs.html line 68: the delivery row button does not wrap and leaves no gap between its two halves. At phone width the status runs into the attempt count ("failed1 attempt") and the target name breaks over two lines. The PR says the event log rows now wrap at phone width. Acceptable: the delivery row wraps, with a gap between its halves, as the event row above it does.

  4. static/css/input.css line 56: no template uses .btn-text any more, but it is still in input.css and in the committed tailwind.css. The PR says it is unused, but not why it must stay. Also, input.css is the hand-written source, so it is never regenerated. Acceptable: remove it from input.css and regenerate tailwind.css. If that has to wait for #231, the PR should say so as the reason it stays.

  5. README.md line 3029: the file tree calls style.css "the shared button styles". But btn-primary, btn-secondary and btn-danger are defined in input.css. style.css holds btn-small and the pointer cursor for those three. Acceptable: the line says what the file holds.

Model: opus-5-5

Review of https://git.eeqj.de/sneak/webhooker/pulls/447 against https://git.eeqj.de/sneak/webhooker/issues/375: needs rework. 1. `templates/navbar.html` line 5: the site name "Webhooker" in the bar is a link home, but on every page it is still plain dark text at rest, with only a colour change on hover. The same link in the footer was made a bordered button. The definition of done covers every clickable control, and the issue does not exempt this one. Acceptable: the link uses one of the two shared styles, with hover and focus states. 2. `templates/sources_list.html` line 20: each card on the webhook list is a link covering the whole card. At rest it looks exactly like the cards that are not clickable, with the same white card and shadow as Statistics on the webhook page. Only hovering raises it. Acceptable: at rest, each card shows in one of the two shared styles that it opens the webhook, and it has a visible focus state. 3. `templates/source_logs.html` line 68: the delivery row button does not wrap and leaves no gap between its two halves. At phone width the status runs into the attempt count ("failed1 attempt") and the target name breaks over two lines. The PR says the event log rows now wrap at phone width. Acceptable: the delivery row wraps, with a gap between its halves, as the event row above it does. 4. `static/css/input.css` line 56: no template uses `.btn-text` any more, but it is still in `input.css` and in the committed `tailwind.css`. The PR says it is unused, but not why it must stay. Also, `input.css` is the hand-written source, so it is never regenerated. Acceptable: remove it from `input.css` and regenerate `tailwind.css`. If that has to wait for https://git.eeqj.de/sneak/webhooker/issues/231, the PR should say so as the reason it stays. 5. `README.md` line 3029: the file tree calls `style.css` "the shared button styles". But `btn-primary`, `btn-secondary` and `btn-danger` are defined in `input.css`. `style.css` holds `btn-small` and the pointer cursor for those three. Acceptable: the line says what the file holds. Model: opus-5-5
clawbot added needs-rework and removed needs-review labels 2026-10-02 17:43:55 +02:00
clawbot force-pushed issue-375-clickable-controls from d1e32515ee to eb2ce085eb 2026-10-02 17:47:35 +02:00 Compare
clawbot added 1 commit 2026-10-02 18:12:55 +02:00
Buttons keep btn-primary, btn-secondary and btn-danger and gain a
pointer cursor; the site name and the navigation links become
btn-secondary buttons. Every control that was plain coloured text
(Copy, both Add, the row actions, Resubmit, Replay, the back, footer
and download links) now uses btn-small, bordered at rest with hover
and focus states. Each card on the webhook list shows an Open label in
btn-small and takes its focus outline. Both styles are in
static/css/style.css, which the layout now loads.

The event log's clickable rows become buttons, so they work by
keyboard; Replay moves beside its delivery's row. Rows on the webhook
page and in the event log wrap at phone width. The browser test now
checks that Copy reads "Copied".

Model: opus-5-5
clawbot force-pushed issue-375-clickable-controls from eb2ce085eb to 06083b19a2 2026-10-02 18:12:55 +02:00 Compare
clawbot added needs-review and removed needs-rework labels 2026-10-02 18:13:06 +02:00
Author
Collaborator

Rework for the review of 2 October, 17:43.

  1. The site name in the bar is now a btn-secondary button at its old text size, with that style's hover and focus states.
  2. Each card on the webhook list shows an Open label in btn-small beside its retention, and the card takes the btn-small focus outline.
  3. The delivery row in the event log wraps at phone width, with a gap between its halves, as the event row does.
  4. btn-text stays until #231: make css needs a tailwindcss binary that this host lacks and the repo does not yet pin. The PR body says so.
  5. The README file tree now says style.css holds btn-small, the pointer cursor for the input.css buttons, and the focus outline of the webhook list cards.

The PR body's after screenshot of the webhook page is replaced, and the branch is rebased onto next.

  • Judgement call: the Open label is a plain label inside the card's link, not a control of its own, so the whole card stays one link.

Model: opus-5-5

Rework for the review of 2 October, 17:43. 1. The site name in the bar is now a `btn-secondary` button at its old text size, with that style's hover and focus states. 2. Each card on the webhook list shows an Open label in `btn-small` beside its retention, and the card takes the `btn-small` focus outline. 3. The delivery row in the event log wraps at phone width, with a gap between its halves, as the event row does. 4. `btn-text` stays until https://git.eeqj.de/sneak/webhooker/issues/231: `make css` needs a `tailwindcss` binary that this host lacks and the repo does not yet pin. The PR body says so. 5. The README file tree now says `style.css` holds `btn-small`, the pointer cursor for the `input.css` buttons, and the focus outline of the webhook list cards. The PR body's after screenshot of the webhook page is replaced, and the branch is rebased onto `next`. - Judgement call: the Open label is a plain label inside the card's link, not a control of its own, so the whole card stays one link. Model: opus-5-5
Author
Collaborator

Review passed: all five findings from the review of 2 October are fixed.

Model: opus-5-5

Review passed: all five findings from the review of 2 October are fixed. Model: opus-5-5
clawbot merged commit 806c95e305 into next 2026-10-02 18:32:19 +02:00
clawbot deleted branch issue-375-clickable-controls 2026-10-02 18:32:19 +02:00
Sign in to join this conversation.
No Reviewers
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: sneak/webhooker#447