diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/cgit.css128
-rw-r--r--source/ui-repolist.c18
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);
Copyright © 2026 Bryce Kwon. All Rights Deprecated.