Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Declutter the interface on small screens
Diffstat (limited to 'assets/cgit.css')
| -rw-r--r-- | assets/cgit.css | 48 |
1 file changed, 22 insertions, 26 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 3ff2513..94b4fd0 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -1452,6 +1452,19 @@ div#cgit table.ssdiff td.space div { div#cgit .col-links { display: none; } + /* Ref and log listings drop the author and file/line-count columns + * on a phone, since the subject and age carry the story and long + * author names otherwise wrap every row onto two lines. */ + div#cgit table.list th.col-author, + div#cgit table.list td.col-author, + div#cgit table.list th.col-count, + div#cgit table.list td.col-count { + display: none; + } + /* Keep any remaining long token from forcing a sideways page. */ + div#cgit table.list td { + overflow-wrap: anywhere; + } div#cgit table.repolist { width: 100%; } @@ -1472,29 +1485,19 @@ div#cgit table.ssdiff td.space div { font-size: 100%; padding: 0.55em 0.7em; } - /* Keep the search compact instead of stretching it across the row. - * The tab list grows to fill the line, so the search sits beside it - * or wraps just beneath at a natural, tappable size. */ + /* No search on a phone. Typing queries there is nobody's real + * workflow and the q= url form keeps working regardless. */ div#cgit .tabs .search { - display: flex; - align-items: center; - gap: 0.35em; - white-space: normal; - padding-bottom: 0; - } - div#cgit .tabs .search input.txt { - min-width: 0; - max-width: 11em; + display: none; } - /* Stack the masthead: logo, title and toggle across the top, then the - * description, owner and branch switcher each on their own full row. */ + /* Stack the masthead: logo, title and toggle across the top, then + * the description and owner on their own full rows. */ div#cgit #header { grid-template-columns: auto 1fr auto; grid-template-areas: "logo heading theme" "desc desc desc" - "owner owner owner" - "switch switch switch"; + "owner owner owner"; column-gap: 8px; row-gap: 6px; } @@ -1511,17 +1514,10 @@ div#cgit table.ssdiff td.space div { justify-self: start; text-align: left; } - /* Stretch the branch switcher across the row, the select taking the - * slack and the submit hugging its label. */ + /* No branch switcher on a phone. The refs page switches branches + * with less chrome, and every page link carries h= along. */ div#cgit #header .branch-switch { - justify-self: stretch; - display: flex; - gap: 0.4em; - } - div#cgit #header .branch-switch select { - flex: 1 1 auto; - min-width: 0; - max-width: none; + display: none; } /* Unfloat the side panels so they stack full width instead of * squeezing the content into a sliver beside them. */ |