feat: Updated the generated html code and css code to be more mobile friendly even on small devices.

6 files changed, 120 insertions, 48 deletions

diff --git a/cgit.css b/cgit.css
index 6d166d5..45471a1 100644
--- a/cgit.css
+++ b/cgit.css
@@ -11,7 +11,7 @@ td.logo {
 div#cgit {
 	padding: 0em;
 	margin: 0em;
-	font-family: mono;
+	font-family: monospace;
 	font-size: 10pt;
 	color: #eee;
 	background: #222;
@@ -42,14 +42,21 @@ div#cgit table#header td.logo {
 }
 
 div#cgit table#header td.main {
-	font-size: 250%;
+	font-size: 200%;
 	padding-left: 10px;
 	white-space: nowrap;
 	color: #777;
+	width: 1rem;
 }
 
 div#cgit table#header td.main span#root-title {
 	color: #eee;
+	font-variant: small-caps;
+}
+
+div#cgit table#header td.main span.separator {
+	font-size: 2rem;
+	color: #999;
 }
 
 div#cgit table#header td.main a {
@@ -57,28 +64,43 @@ div#cgit table#header td.main a {
 }
 
 div#cgit table#header td.form {
-	text-align: right;
+	padding-top: 1em;
 	vertical-align: bottom;
 	padding-right: 1em;
-	padding-bottom: 2px;
+	padding-bottom: 0.2rem;
 	white-space: nowrap;
+	text-align: right;
 }
 
-div#cgit table#header td.form form,
-div#cgit table#header td.form input,
-div#cgit table#header td.form select {
-	font-size: 90%;
-}
 
+div#cgit table#header td.subem {
+	color: #777;
+	padding-top: 1em;
+	padding-right: 10px;
+	text-align: right;
+}
 div#cgit table#header td.sub {
 	color: #777;
 	border-top: solid 1px #777;
 	padding-left: 10px;
+	white-space: wrap;
+	width: 1rem;
+}
+
+div#cgit table.tabs::-webkit-scrollbar {
+	display: none;
 }
 
 div#cgit table.tabs {
+	display: block;
+	mask-image: linear-gradient(to right, black 0, black calc(100% - 4rem), transparent 100%);
+	overflow-x: scroll;
+	overflow-y: hidden;
+	-ms-overflow-style: none;  /* IE and Edge */
+  	scrollbar-width: none;  /* Firefox */
 	border-bottom: solid 1px #777;
 	border-collapse: collapse;
+	padding-right: 3rem;
 	margin-top: 2em;
 	margin-bottom: 0px;
 	width: 100%;
@@ -88,11 +110,13 @@ div#cgit table.tabs td {
 	padding: 0px 1em;
 	vertical-align: bottom;
 }
+div#cgit table.tabs tr td:first-child {
+	min-width: calc(100vw - 26em);
+}
 
 div#cgit table.tabs td a {
 	padding: 2px 0.75em;
 	color: #777;
-	font-size: 110%;
 }
 
 
@@ -113,6 +137,7 @@ div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https
 
 div#cgit table.tabs td.form {
 	text-align: right;
+	width: 16em;
 }
 
 div#cgit td.form input {
@@ -145,13 +170,11 @@ div#cgit td.form input[type=submit]:hover {
 
 div#cgit table.tabs td.form form {
 	padding-bottom: 2px;
-	font-size: 90%;
 	white-space: nowrap;
 }
 
 div#cgit table.tabs td.form input,
 div#cgit table.tabs td.form select {
-	font-size: 90%;
 }
 
 div#cgit div.path {
@@ -161,9 +184,19 @@ div#cgit div.path {
 	background-color: #333;
 }
 
+@media (width <= 50rem) {
+div#cgit div.content {
+	padding: 2em 0em 2em 0em;
+}
+}
+@media (width > 50rem) {
 div#cgit div.content {
-	margin: 0px;
 	padding: 2em;
+}
+}
+
+div#cgit div.content {
+	margin: 0px;
 	border-bottom: solid 1px #777;
 }
 
@@ -183,7 +216,18 @@ div#cgit table.list tr.logheader {
 }
 
 div#cgit table.list tr:nth-child(even) {
-	background: #333;
+	background: #2B2B2B;
+}
+
+@media (width <= 60rem) {
+div#cgit table.list tr td:nth-child(2),div#cgit table.list tr th:nth-child(2) {
+	max-width: 20ch;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+div#cgit table.list tr td:nth-child(3),div#cgit table.list tr th:nth-child(3),div#cgit table.list tr td:nth-child(5),div#cgit table.list tr th:nth-child(5),div#cgit table.list tr td:nth-child(6),div#cgit table.list tr th:nth-child(6),.decoration {
+	display: none;
+}
 }
 
 div#cgit table.list tr:nth-child(odd) {
@@ -223,6 +267,11 @@ div#cgit table.list th {
 	vertical-align: baseline;
 }
 
+div#cgit table.list td a.cloneurl {
+	display: block;
+	white-space: wrap;
+	overflow: wrap;
+}
 div#cgit table.list td {
 	border: none;
 	padding: 0.1em 0.5em 0.1em 0.5em;
@@ -307,6 +356,7 @@ div#cgit td#content {
 div#cgit div#summary {
 	vertical-align: top;
 	margin-bottom: 1em;
+	overflow: scroll;
 }
 
 div#cgit table#downloads {
@@ -348,7 +398,9 @@ div#cgit td.ls-mode {
 
 div#cgit table.blob {
 	margin-top: 0.5em;
-	border-top: solid 1px black;
+	border-top: solid 1px #777;
+	overflow-x: scroll;
+	display: block;
 }
 
 div#cgit table.blob td.hashes,
@@ -365,6 +417,10 @@ div#cgit table.blob td.linenumbers {
 	border-right: 1px solid gray;
 }
 
+div#cgit table.blob td.linenumbers pre {
+	line-height: 125%;
+	font-family: monospace;
+}
 div#cgit table.blob pre {
 	padding: 0; margin: 0;
 }
@@ -385,10 +441,10 @@ div#cgit table.blob td.linenumbers a:target:before {
 	color: #dc1aed;
 	display: inline-block;
 	content: "\21D2";
-	line-height: 0;
 	font-size: 1.8em;
 }
 
+
 div#cgit table.blame td.hashes,
 div#cgit table.blame td.lines,
 div#cgit table.blame td.linenumbers {
@@ -405,11 +461,11 @@ div#cgit table.blame td.linenumbers div.alt {
 }
 
 div#cgit table.blame div.alt:nth-child(even) {
-	background: #333;
+	background: #2B2B2B;
 }
 
 div#cgit table.blame div.alt:nth-child(odd) {
-	background: white;
+	background: #222;
 }
 
 div#cgit table.blame td.lines > div {
@@ -446,7 +502,6 @@ div#cgit table.bin-blob td {
 }
 
 div#cgit table.nowrap td {
-	white-space: nowrap;
 }
 
 div#cgit table.commit-info {
@@ -524,11 +579,15 @@ div#cgit div.notes-footer {
 }
 
 div#cgit div.diffstat-header {
+	display: block;
 	font-weight: bold;
 	padding-top: 1.5em;
 }
 
 div#cgit table.diffstat {
+	display: block;
+	width: 100%;
+	overflow-x: scroll;
 	border-collapse: collapse;
 	border: solid 1px #aaa;
 	background-color: #333;
@@ -598,7 +657,9 @@ div#cgit div.diffstat-summary {
 }
 
 div#cgit table.diff {
+	display: block;
 	width: 100%;
+	overflow: scroll;
 }
 
 div#cgit table.diff td {
@@ -624,10 +685,18 @@ div#cgit table.diff td div.del {
 	color: red;
 }
 
+@media (width <= 50rem) {
+div#cgit .oid {
+	font-family: monospace;
+	font-size: 70%;
+}
+}
+@media (width > 50rem) {
 div#cgit .oid {
 	font-family: monospace;
 	font-size: 90%;
 }
+}
 
 div#cgit .left {
 	text-align: left;
@@ -639,25 +708,26 @@ div#cgit .right {
 
 div#cgit table.list td.reposection {
 	font-style: italic;
-	color: #dc1aed;
+	color: #bbb;
 	padding-top: 1em;
 	background-color: #222;
 }
 
 div#cgit table.list td.reposectionsingle {
 	font-style: italic;
-	color: #dc1aed;
+	color: #bbb;
 	padding-top: 1em;
 	padding-bottom: 1rem;
 	background-color: #222;
+	border-bottom: 1px dashed #777;
 }
 
 div#cgit table.list td.reposectiondesc {
 	color: #777;
-	padding-left: 1rem;
 	padding-bottom: 1rem;
 	background-color: #222;
 	font-size: 85%;
+	white-space: wrap;
 }
 
 div#cgit a.button {
diff --git a/ui-commit.c b/ui-commit.c
index 972e9bc..acf0b25 100644
--- a/ui-commit.c
+++ b/ui-commit.c
@@ -49,7 +49,7 @@ void cgit_print_commit(char *hex, const char *prefix)
 	cgit_print_layout_start();
 	cgit_print_diff_ctrls();
 	html("<table summary='commit info' class='commit-info'>\n");
-	html("<tr><th>author</th><td>");
+	html("<tr><th>author</th><td colspan='2'>");
 	cgit_open_filter(ctx.repo->email_filter, info->author_email, "commit");
 	html_txt(info->author);
 	if (!ctx.cfg.noplainemail) {
@@ -57,7 +57,7 @@ void cgit_print_commit(char *hex, const char *prefix)
 		html_txt(info->author_email);
 	}
 	cgit_close_filter(ctx.repo->email_filter);
-	html("</td><td class='right'>");
+	html("</td></tr><tr><td></td><td colspan='2' style='text-align: center'>");
 	html_txt(show_date(info->author_date, info->author_tz,
 				cgit_date_mode(DATE_ISO8601)));
 	html("</td></tr>\n");
@@ -69,7 +69,7 @@ void cgit_print_commit(char *hex, const char *prefix)
 		html_txt(info->committer_email);
 	}
 	cgit_close_filter(ctx.repo->email_filter);
-	html("</td><td class='right'>");
+	html("</td></tr><tr><td></td><td colspan='2' style='text-align: center'>");
 	html_txt(show_date(info->committer_date, info->committer_tz,
 				cgit_date_mode(DATE_ISO8601)));
 	html("</td></tr>\n");
diff --git a/ui-diff.c b/ui-diff.c
index 6cfa697..010d5c8 100644
--- a/ui-diff.c
+++ b/ui-diff.c
@@ -195,7 +195,7 @@ static void cgit_print_diffstat(const struct object_id *old_oid,
 {
 	int i;
 
-	html("<div class='diffstat-header'>");
+	html("<div style='display:block'><div class='diffstat-header'>");
 	cgit_diff_link("Diffstat", NULL, NULL, ctx.qry.head, ctx.qry.oid,
 		       ctx.qry.oid2, NULL);
 	if (prefix) {
@@ -214,7 +214,7 @@ static void cgit_print_diffstat(const struct object_id *old_oid,
 	html("<div class='diffstat-summary'>");
 	htmlf("%d files changed, %d insertions, %d deletions",
 	      files, total_adds, total_rems);
-	html("</div>");
+	html("</div></div>");
 }
 
 
diff --git a/ui-repolist.c b/ui-repolist.c
index ed6f12c..328a770 100644
--- a/ui-repolist.c
+++ b/ui-repolist.c
@@ -328,8 +328,7 @@ void cgit_print_repolist(void)
 			}
 			last_section = section;
 		}
-		htmlf("<tr><td class='%s'>",
-		      !sorted && section ? "sublevel-repo" : "toplevel-repo");
+		html("<tr><td>");
 		cgit_summary_link(ctx.repo->name, NULL, NULL, NULL);
 		html("</td><td>");
 		repourl = cgit_repourl(ctx.repo->url);
diff --git a/ui-shared.c b/ui-shared.c
index 9ee2e5b..9a33806 100644
--- a/ui-shared.c
+++ b/ui-shared.c
@@ -1020,22 +1020,8 @@ static void print_header(void)
 	html("<td class='main'>");
 	if (ctx.repo) {
 		cgit_index_link("index", NULL, NULL, NULL, NULL, 0, 1);
-		html(" > ");
+		html("<span class=\"separator\"> ❧ </span>");
 		cgit_summary_link(ctx.repo->name, NULL, NULL, NULL);
-		if (ctx.env.authenticated) {
-			html("</td><td class='form'>");
-			html("<form method='get'>\n");
-			cgit_add_hidden_formfields(0, 1, ctx.qry.page);
-			html("<select name='h' onchange='this.form.submit();'>\n");
-			refs_for_each_branch_ref(get_main_ref_store(the_repository),
-						 print_branch_option, ctx.qry.head);
-			if (ctx.repo->enable_remote_branches)
-				refs_for_each_remote_ref(get_main_ref_store(the_repository),
-							 print_branch_option, ctx.qry.head);
-			html("</select> ");
-			html("<input type='submit' value='switch'/>");
-			html("</form>");
-		}
 	} else {
 		html("<span id='root-title'>");
 		html_txt(ctx.cfg.root_title);
@@ -1043,10 +1029,10 @@ static void print_header(void)
 	}
 	html("</td></tr>\n");
 
-	html("<tr><td class='sub'>");
+	html("<tr><td colspan='2' class='sub'>");
 	if (ctx.repo) {
 		html_txt(ctx.repo->desc);
-		html("</td><td class='sub right'>");
+		html("</td></tr><tr><td colspan='2' class='subem'>");
 		if (ctx.repo->owner_filter) {
 			cgit_open_filter(ctx.repo->owner_filter);
 			html_txt(ctx.repo->owner);
@@ -1054,11 +1040,28 @@ static void print_header(void)
 		} else {
 			html_txt(ctx.repo->owner);
 		}
+		html("</td></tr><tr>");
+		if (ctx.env.authenticated) {
+			html("<td></td><td class='form'>");
+			html("<form method='get'>\n");
+			cgit_add_hidden_formfields(0, 1, ctx.qry.page);
+			html("<select name='h' onchange='this.form.submit();'>\n");
+			refs_for_each_branch_ref(get_main_ref_store(the_repository),
+						 print_branch_option, ctx.qry.head);
+			if (ctx.repo->enable_remote_branches)
+				refs_for_each_remote_ref(get_main_ref_store(the_repository),
+							 print_branch_option, ctx.qry.head);
+			html("</select> ");
+			html("<input type='submit' value='switch'/>");
+			html("</form>");
+		}
+		html("</td>");
+
 	} else {
 		if (ctx.cfg.root_desc)
 			html_txt(ctx.cfg.root_desc);
 	}
-	html("</td></tr></table>\n");
+	html("</tr></table>\n");
 }
 
 void cgit_print_pageheader(void)
diff --git a/ui-summary.c b/ui-summary.c
index 947812a..2a30ca6 100644
--- a/ui-summary.c
+++ b/ui-summary.c
@@ -31,7 +31,7 @@ static void print_url(const char *url)
 		htmlf("<tr class='nohover'><th class='left' colspan='%d'>Clone</th></tr>\n", columns);
 	}
 
-	htmlf("<tr><td colspan='%d'><a rel='vcs-git' href='", columns);
+	htmlf("<tr><td colspan='%d'><a rel='vcs-git' class='cloneurl' href='", columns);
 	html_url_path(url);
 	html("' title='");
 	html_attr(ctx.repo->name);