collin/anvil · 680a0d93
fix(ui): trim top padding and polish kanban card styling
Collin Richards · 2026-06-10 14:11 UTC · 680a0d939353393fd452cb6854f4fb17fa83da82 · parent cbbb196c · browse files
modifiedTODO.md+7 −12
| ⋯ 58 unchanged lines | |||
| 59 | 59 | - [ ] maybe: per-repo drill-down, and a cheap cached/periodic variant if the | |
| 60 | 60 | on-demand disk walk gets slow on large instances. | |
| 61 | 61 | ||
| 62 | - | ## adjust padding | |
| 63 | - | ||
| 64 | - | There's too much vertical padding at the top of the screen. | |
| 65 | - | ||
| 66 | - | ## todo kanban styling | |
| 67 | - | ||
| 68 | - | I'm not a big fan of how the kanban styling looks currently. take a look here. I think the detail thing that needs to be clicked doesn't look very good. And also the text is Dee emphasized after you view the summary and clicking the detail thing. I don't want it to be deemphasized when viewing the details. | |
| 69 | - | ||
| 70 | - |  | |
| 71 | - | ||
| 72 | - | ## kanban board styling image sizing | |
| 62 | + | ## UI polish (done) | |
| 73 | 63 | ||
| 74 | - | The kanban board images are too huge when rendered in the board view. They look fine in the rendered markdown page though. | |
| 64 | + | - [x] less vertical padding at the top of the screen (`main` top padding 24→12px) | |
| 65 | + | - [x] kanban card details: the disclosure toggle restyled to a clean uppercase | |
| 66 | + | marker, and the expanded detail text is no longer de-emphasized (full `--fg`, | |
| 67 | + | not muted) | |
| 68 | + | - [x] kanban card images constrained to the card width (`max-width:100%`); they | |
| 69 | + | were rendering at natural size on the board while fine on the rendered page | |
modifiedcrates/anvil-web/src/ui.rs+9 −5
| ⋯ 96 unchanged lines | |||
| 97 | 97 | .container { max-width:980px; margin:0 auto; padding:0 16px; } | |
| 98 | 98 | header.top .container { display:flex; align-items:center; gap:12px; } | |
| 99 | 99 | .brand { font-weight:700; font-size:16px; color:var(--fg); } | |
| 100 | - | main { padding:24px 0; } | |
| 100 | + | main { padding:12px 0 24px; } | |
| 101 | 101 | h1,h2 { font-weight:600; } h1 { font-size:20px; } h2 { font-size:15px; margin:20px 0 8px; } | |
| 102 | 102 | .muted { color:var(--muted); } | |
| 103 | 103 | .repo-list { list-style:none; padding:0; margin:0; } | |
| ⋯ 90 unchanged lines | |||
| 194 | 194 | .kanban .card .title p { margin:0; font-weight:500; } | |
| 195 | 195 | .kanban .card.done .title { color:var(--muted); text-decoration:line-through; font-weight:400; } | |
| 196 | 196 | .kanban .card details { margin-top:7px; } | |
| 197 | - | .kanban .card summary { cursor:pointer; font-size:12px; color:var(--accent); list-style:none; } | |
| 197 | + | .kanban .card summary { cursor:pointer; font-size:11px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); list-style:none; display:inline-flex; align-items:center; gap:5px; user-select:none; } | |
| 198 | + | .kanban .card summary:hover { color:var(--accent); } | |
| 198 | 199 | .kanban .card summary::-webkit-details-marker { display:none; } | |
| 199 | - | .kanban .card summary::before { content:"›"; display:inline-block; width:12px; transition:transform .15s ease; } | |
| 200 | + | .kanban .card summary::before { content:"\25B8"; font-size:9px; transition:transform .15s ease; } | |
| 201 | + | .kanban .card details[open] summary { margin-bottom:5px; } | |
| 200 | 202 | .kanban .card details[open] summary::before { transform:rotate(90deg); } | |
| 201 | - | .kanban .card .card-details { padding:7px 0 1px; font-size:12px; color:var(--muted); } | |
| 202 | - | .kanban .card .card-details p { margin:0 0 5px; } | |
| 203 | + | .kanban .card .card-details { font-size:13px; color:var(--fg); line-height:1.5; } | |
| 204 | + | .kanban .card .card-details p { margin:0 0 6px; } | |
| 203 | 205 | .kanban .card .card-details ul { margin:4px 0; padding-left:16px; } | |
| 206 | + | .kanban .card .card-details img { max-width:100%; height:auto; border-radius:4px; margin:2px 0; } | |
| 204 | 207 | .kanban .card .card-details > :last-child { margin-bottom:0; } | |
| 208 | + | .kanban .card .title img { max-width:100%; height:auto; border-radius:4px; } | |
| 205 | 209 | .todo-board-head { font-size:13px; font-weight:600; margin:20px 0 10px; } | |
| 206 | 210 | .todo-notes { margin:8px 2px; } | |
| 207 | 211 | .todo-notes > summary { cursor:pointer; font-size:13px; color:var(--muted); } | |
| ⋯ 2161 unchanged lines | |||