fix(web): the tree stays in its column (refs #152) 1656dc14c2ac
The wider sidebar's grid let the tree's last-change and age columns run under it. The tree now has a fixed column grid that fills its column: names and change titles end in an ellipsis, and on a phone the last-change column closes to nothing. Folders are blue in the GitHub look too.
- Author
- Andy McCall @andymccall <[email protected]>
- When
- · 2026-10-13 16:52 UTC
- Signature
- ✔ signed by Andy McCall
- Hash
1656dc14c2ac72212fd969ea185b8be449aff000a45b3956f1cf51d156132dbe- Depends on
- 749d9a5fcd9f 883c77eaf2c9 c9aacc0e7dc1 d23464c0ac60
- Depended on by
- f8cf54e99879
- In bookmarks
- api-unknown-fields cancel-landed-runs diffusion-pin-bookmark draft-ready main oh-comment-body-file proposal-list-fast
- In tags
- v0.5.0 v0.5.1 v0.5.2 v0.6.0 v0.6.1 v0.7.0 v0.8.0 v0.9.0 v0.9.1 v0.9.11 v0.9.15 v0.9.16 v0.9.19 v0.9.2 v0.9.20 v0.9.21 v0.9.22 v0.9.23 v0.9.24 v0.9.3 v0.9.4 v0.9.5 v0.9.6 v0.9.7 v0.9.8 v0.9.9
- Edits
- 7 atoms, 0 tree operations, 3 files
Browse the tree at this change
modified assets/github.css +1 −0
| … | 195 unchanged lines |
||
| 196 | 196 | /* The tree under its shaded head (#152): the head takes the top corners. */ |
|
| 197 | 197 | :root[data-look="github"] .tree-box .tree-head + table.tree { border-top-left-radius: 0; border-top-right-radius: 0; } |
|
| 198 | 198 | :root[data-look="github"] .side-card > h3 { font-size: 14px; } |
|
| 199 | + | :root[data-look="github"] table.tree td.g.ic-dir { color: #54aeff; } |
modified templates/style.css +17 −7
| … | 170 unchanged lines |
||
| 171 | 171 | .bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } |
|
| 172 | 172 | .ref { color: var(--acc); } |
|
| 173 | 173 | .crumbs a { color: var(--ink); } |
|
| 174 | + | /* The tree fills its column and never more (#152): a fixed column grid, |
|
| 175 | + | long names and change titles cut with an ellipsis, so nothing runs |
|
| 176 | + | under the sidebar. */ |
|
| 177 | + | table.tree { width: 100%; table-layout: fixed; } |
|
| 178 | + | table.tree col.c-g { width: 44px; } |
|
| 179 | + | table.tree col.c-name { width: 30%; } |
|
| 180 | + | table.tree col.c-age { width: 8.5em; } |
|
| 174 | 181 | table.tree td { padding: 6px 10px; } |
|
| 175 | - | table.tree td.g { width: 1.6em; color: var(--acc); text-align: center; } |
|
| 176 | - | table.tree td.last { color: var(--mute); max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
|
| 182 | + | table.tree td.g { color: var(--acc); text-align: center; } |
|
| 183 | + | table.tree td.name, table.tree td.last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
|
| 184 | + | table.tree td.last { color: var(--mute); } |
|
| 177 | 185 | table.tree td.last a { color: var(--mute); } |
|
| 178 | - | table.tree td.age { width: 9em; text-align: right; white-space: nowrap; } |
|
| 186 | + | table.tree td.age { text-align: right; white-space: nowrap; } |
|
| 179 | 187 | article.doc { max-width: 60rem; background: var(--panel); border: 1px solid var(--line); padding: 18px 24px; margin-top: 14px; } |
|
| 180 | 188 | article.doc h1 { font-size: 26px; font-weight: 500; margin: 0 0 12px; } |
|
| 181 | 189 | article.doc h2 { font-size: 20px; margin: 18px 0 8px; } |
|
| … | 345 unchanged lines |
||
| 527 | 535 | @media (max-width: 760px) { |
|
| 528 | 536 | .tabs-in { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } |
|
| 529 | 537 | .side-layout > * { min-width: 0; } |
|
| 530 | - | table.tree { table-layout: fixed; width: 100%; } |
|
| 531 | - | table.tree td.last { display: none; } |
|
| 532 | - | table.tree td.age { width: 7.5em; text-align: right; white-space: nowrap; } |
|
| 533 | - | table.tree td.g { width: 1.6em; } |
|
| 538 | + | /* No room for the last change: its column closes to nothing (the cells |
|
| 539 | + | stay, so the age keeps its own column). */ |
|
| 540 | + | table.tree col.c-name { width: auto; } |
|
| 541 | + | table.tree col.c-last { width: 0; } |
|
| 542 | + | table.tree col.c-age { width: 7.5em; } |
|
| 543 | + | table.tree td.last { padding: 0; font-size: 0; } |
|
| 534 | 544 | article.doc, .panel { overflow-x: auto; } |
|
| 535 | 545 | article.doc pre, article.doc table { max-width: 100%; overflow-x: auto; } |
|
| 536 | 546 | .tabs-in > * { flex-shrink: 0; } |
|
| … | 547 unchanged lines |
modified templates/tree_rows.html +1 −0
| … | 1 unchanged lines |
||
| 2 | 2 | <p class="empty">Nothing here yet. <a href="{{ repo.url }}">The overview</a> shows how to make a first push.</p> |
|
| 3 | 3 | {% else %} |
|
| 4 | 4 | <table class="tree" data-last="{{ repo.url }}/last/{{ t.target.label }}" data-change="{{ repo.url }}/change/"> |
|
| 5 | + | <colgroup><col class="c-g"><col class="c-name"><col class="c-last"><col class="c-age"></colgroup> |
|
| 5 | 6 | {% if !t.path.is_empty() %} |
|
| 6 | 7 | <tr><td class="g ic-file">{{ crate::web::icons::svg("up")|safe }}</td><td colspan="3"><a href="{{ repo.url }}/tree/{{ t.target.label }}{% if let Some((_, p)) = t.crumbs.iter().rev().nth(1) %}/{{ p }}{% endif %}">..</a></td></tr> |
|
| 7 | 8 | {% endif %} |
|
| … | 15 unchanged lines |