Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Declutter the interface on small screens
| -rw-r--r-- | assets/cgit.css | 48 | |
| -rw-r--r-- | source/ui-log.c | 12 | |
| -rw-r--r-- | source/ui-refs.c | 8 |
3 files changed, 32 insertions, 36 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. */ diff --git a/source/ui-log.c b/source/ui-log.c index 5f774e2..ff02d9a 100644 --- a/source/ui-log.c +++ b/source/ui-log.c @@ -245,7 +245,7 @@ static void print_commit(struct commit *commit, struct rev_info *revs) cgit_commit_link(info->subject, NULL, NULL, ctx.qry.head, oid_to_hex(&commit->object.oid), ctx.qry.vpath); show_commit_decorations(commit); - html("</td><td>"); + html("</td><td class='col-author'>"); cgit_open_filter(ctx.repo->email_filter, info->author_email, "log"); html_txt(info->author); cgit_close_filter(ctx.repo->email_filter); @@ -264,9 +264,9 @@ static void print_commit(struct commit *commit, struct rev_info *revs) } if (ctx.repo->enable_log_filecount) - htmlf("</td><td>%d", files); + htmlf("</td><td class='col-count'>%d", files); if (ctx.repo->enable_log_linecount) - htmlf("</td><td><span class='deletions'>-%d</span>/" + htmlf("</td><td class='col-count'><span class='deletions'>-%d</span>/" "<span class='insertions'>+%d</span>", rem_lines, add_lines); html("</td></tr>\n"); @@ -486,15 +486,15 @@ void cgit_print_log(const char *tip, int ofs, int cnt, char *grep, char *pattern ctx.qry.follow); html(")"); } - html("</th><th class='left'>Author</th>"); + html("</th><th class='left col-author'>Author</th>"); if (rev.graph) html("<th class='left'>Age</th>"); if (ctx.repo->enable_log_filecount) { - html("<th class='left'>Files</th>"); + html("<th class='left col-count'>Files</th>"); columns++; } if (ctx.repo->enable_log_linecount) { - html("<th class='left'>Lines</th>"); + html("<th class='left col-count'>Lines</th>"); columns++; } html("</tr>\n"); diff --git a/source/ui-refs.c b/source/ui-refs.c index a38bfc4..c64b344 100644 --- a/source/ui-refs.c +++ b/source/ui-refs.c @@ -70,7 +70,7 @@ static int print_branch(struct refinfo *ref) if (ref->object->type == OBJ_COMMIT) { cgit_commit_link(info->subject, NULL, NULL, name, NULL, NULL); - html("</td><td>"); + html("</td><td class='col-author'>"); cgit_open_filter(ctx.repo->email_filter, info->author_email, "refs"); html_txt(info->author); cgit_close_filter(ctx.repo->email_filter); @@ -88,7 +88,7 @@ static void print_tag_header(void) { html("<tr class='nohover'><th class='left'>Tag</th>" "<th class='left'>Download</th>" - "<th class='left'>Author</th>" + "<th class='left col-author'>Author</th>" "<th class='left' colspan='2'>Age</th></tr>\n"); } @@ -114,7 +114,7 @@ static int print_tag(struct refinfo *ref) cgit_print_snapshot_links(ctx.repo, name, " "); else cgit_object_link(obj); - html("</td><td>"); + html("</td><td class='col-author'>"); if (info) { if (info->tagger) { cgit_open_filter(ctx.repo->email_filter, info->tagger_email, "refs"); @@ -188,7 +188,7 @@ static void print_branch_header(void) { html("<tr class='nohover'><th class='left'>Branch</th>" "<th class='left'>Commit message</th>" - "<th class='left'>Author</th>" + "<th class='left col-author'>Author</th>" "<th class='left' colspan='2'>Age</th></tr>\n"); } |