Adapt the layout to small screens

On a phone the description, owner and shortcut columns crowded the
index and pushed the age off screen, and tapping the name already
opens the repository, so the index collapses to name and age.

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);