Diff options
| -rw-r--r-- | assets/cgit.css | 128 | |
| -rw-r--r-- | source/ui-repolist.c | 18 |
2 files changed, 138 insertions, 8 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index a65bc49..4504702 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -1235,3 +1235,131 @@ div#cgit table.ssdiff td.space { div#cgit table.ssdiff td.space div { min-height: 3em; } + + +/* ---- Small screens ---------------------------------------------------- */ + +@media (max-width: 640px) { + div#cgit { + --gutter: 0.85rem; + /* Grow the controls into comfortable tap targets on a touch + * screen; the toggle, selects, inputs and buttons all track this. */ + --control-h: 2.5em; + } + /* Keep the index to name and age on a phone; the description, owner + * and the summary/log/tree shortcuts drop away since tapping the + * name already opens the repository. Auto layout is deliberate: with + * table-layout fixed the hidden columns still reserve equal width and + * squeeze the name, so we let the name take all the slack and the age + * hug its own text instead. */ + div#cgit .col-desc, + div#cgit .col-owner, + div#cgit .col-links { + display: none; + } + div#cgit table.repolist { + width: 100%; + } + div#cgit table.repolist th.col-name, + div#cgit table.repolist td.col-name { + width: 100%; + overflow-wrap: anywhere; + } + div#cgit table.repolist th.col-idle, + div#cgit table.repolist td.col-idle { + width: 1%; + white-space: nowrap; + text-align: right; + } + /* Give the tabs a finger-sized target while keeping them tight enough + * to wrap onto as few rows as possible. */ + div#cgit .tabs a { + 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. */ + 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; + } + /* Stack the masthead: logo, title and toggle across the top, then the + * description, owner and branch switcher each on their own full row. */ + div#cgit #header { + grid-template-columns: auto 1fr auto; + grid-template-areas: + "logo heading theme" + "desc desc desc" + "owner owner owner" + "switch switch switch"; + column-gap: 8px; + row-gap: 6px; + } + div#cgit #header .logo img { + max-width: 56px; + } + div#cgit #header h1.main { + white-space: normal; + overflow-wrap: anywhere; + min-width: 0; + font-size: 190%; + } + div#cgit #header .owner { + justify-self: start; + text-align: left; + } + /* Stretch the branch switcher across the row, the select taking the + * slack and the submit hugging its label. */ + 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; + } + /* Unfloat the side panels so they stack full width instead of + * squeezing the content into a sliver beside them. */ + div#cgit div.cgit-panel, + div#cgit table#downloads, + div#cgit div.notes { + float: none; + margin-left: 0; + } + div#cgit div.cgit-panel { + margin: 1em 0; + } + div#cgit table#downloads { + width: 100%; + } + div#cgit table.commit-info { + width: 100%; + } + div#cgit table.nowrap td { + white-space: normal; + } +} + +@media (max-width: 380px) { + /* Reclaim width on the smallest phones by shrinking the logo and the + * title further so the masthead does not crowd out the content. */ + div#cgit #header .logo img { + max-width: 44px; + } + div#cgit #header h1.main { + font-size: 160%; + } + div#cgit .tabs a { + padding: 0.55em 0.55em; + } +} diff --git a/source/ui-repolist.c b/source/ui-repolist.c index 1b224cf..5174c5a 100644 --- a/source/ui-repolist.c +++ b/source/ui-repolist.c @@ -129,7 +129,7 @@ static int any_repos_visible(void) static void print_sort_header(const char *title, const char *sort) { char *currenturl = cgit_currenturl(); - html("<th class='left'><a href='"); + htmlf("<th class='left col-%s'><a href='", sort); html_attr(currenturl); htmlf("?s=%s", sort); if (ctx.qry.search) { @@ -149,7 +149,7 @@ static void print_header(void) print_sort_header("Owner", "owner"); print_sort_header("Idle", "idle"); if (ctx.cfg.enable_index_links) - html("<th class='left'>Links</th>"); + html("<th class='left col-links'>Links</th>"); html("</tr>\n"); } @@ -293,7 +293,7 @@ void cgit_print_repolist(void) else if (ctx.cfg.section_sort) sort_repolist("section"); - html("<table summary='repository list' class='list nowrap'>"); + html("<table class='list nowrap repolist'>"); for (i = 0; i < cgit_repolist.count; i++) { ctx.repo = &cgit_repolist.repos[i]; if (!is_visible(ctx.repo)) @@ -319,18 +319,19 @@ void cgit_print_repolist(void) html("</td></tr>"); last_section = section; } - htmlf("<tr><td class='%s'>", + htmlf("<tr><td class='col-name %s'>", !sorted && section ? "sublevel-repo" : "toplevel-repo"); cgit_summary_link(ctx.repo->name, NULL, NULL, NULL); - html("</td><td>"); + html("</td><td class='col-desc'>"); repourl = cgit_repourl(ctx.repo->url); html_link_open(repourl, NULL, NULL); free(repourl); if (html_ntxt(ctx.repo->desc, ctx.cfg.max_repodesc_len) < 0) html("..."); html_link_close(); - html("</td><td>"); + html("</td>"); if (ctx.cfg.enable_index_owner) { + html("<td class='col-owner'>"); if (ctx.repo->owner_filter) { cgit_open_filter(ctx.repo->owner_filter); html_txt(ctx.repo->owner); @@ -346,12 +347,13 @@ void cgit_print_repolist(void) html("</a>"); free(currenturl); } - html("</td><td>"); + html("</td>"); } + html("<td class='col-idle'>"); print_modtime(ctx.repo); html("</td>"); if (ctx.cfg.enable_index_links) { - html("<td>"); + html("<td class='col-links'>"); cgit_summary_link("summary", NULL, "button", NULL); cgit_log_link("log", NULL, "button", NULL, NULL, NULL, 0, NULL, NULL, ctx.qry.showmsg, 0); |