List for cgit developers and users
 help / color / Atom feed
* [PATCH 0/4] improve rendering w/o CSS reliance
@ 2019-01-01 11:44 e
  2019-01-01 11:44 ` [PATCH 1/4] ui-shared: improve pageheader display on text-based browsers e
                   ` (5 more replies)
  0 siblings, 6 replies; 8+ messages in thread
From: e @ 2019-01-01 11:44 UTC (permalink / raw)


Here are a few changes to improve rendering for people with
low-end machines using text-based browsers (w3m, lynx) or
lightweight GUI browsers such as dillo, which has incomplete CSS
support.

The only incompatible (with existing CSS customisations) change
might be the one to use <pre> instead of <div> for commit-msg.
I'm not sure how much of a stable interface the CSS styles are
expected to be for this project.

All my recent changes (including the 32-bit fix) are also
available at at my git/cgit repository:

  https://80x24.org/cgit.git

(I also use a custom CSS there which forces monospace and
 uniform font-size all around to make it easier for people
 who need to use gigantic fonts).

Eric Wong (4):
  ui-shared: improve pageheader display on text-based browsers
  ui-{commit,tag}: use <pre> for commit-msg
  ui-log: improve decoration display for browsers without CSS
  ui-diff: preserve spaces w/o CSS on context lines

 cgit.css              |  7 -------
 html.c                | 46 +++++++++++++++++++++++++++++++++++++++++++
 html.h                |  1 +
 tests/t0105-commit.sh |  2 +-
 ui-commit.c           |  4 ++--
 ui-diff.c             |  5 +----
 ui-log.c              |  5 +++++
 ui-shared.c           | 15 +++++++++++---
 ui-tag.c              |  4 ++--
 9 files changed, 70 insertions(+), 19 deletions(-)

-- 
EW


^ permalink raw reply	[flat|nested] 8+ messages in thread

* [PATCH 1/4] ui-shared: improve pageheader display on text-based browsers
  2019-01-01 11:44 [PATCH 0/4] improve rendering w/o CSS reliance e
@ 2019-01-01 11:44 ` e
  2019-01-01 11:44 ` [PATCH 2/4] ui-{commit,tag}: use <pre> for commit-msg e
                   ` (4 subsequent siblings)
  5 siblings, 0 replies; 8+ messages in thread
From: e @ 2019-01-01 11:44 UTC (permalink / raw)


Text-based browsers (and some GUI browsers such as dillo) display
the pageheader as:

  "summaryrefslogtreecommitdiff"

This is difficult-to-read.  Improve accessibility for users who
cannot run memory-hungry browsers by using whitespace instead of
relying on CSS.
---
 cgit.css    |  1 -
 ui-shared.c | 15 ++++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/cgit.css b/cgit.css
index d4aadbf..8c313e2 100644
--- a/cgit.css
+++ b/cgit.css
@@ -75,7 +75,6 @@ div#cgit table.tabs td {
 }
 
 div#cgit table.tabs td a {
-	padding: 2px 0.75em;
 	color: #777;
 	font-size: 110%;
 }
diff --git a/ui-shared.c b/ui-shared.c
index 7a4c726..017fe30 100644
--- a/ui-shared.c
+++ b/ui-shared.c
@@ -1029,32 +1029,41 @@ void cgit_print_pageheader(void)
 
 	html("<table class='tabs'><tr><td>\n");
 	if (ctx.env.authenticated && ctx.repo) {
-		if (ctx.repo->readme.nr)
+		if (ctx.repo->readme.nr) {
 			reporevlink("about", "about", NULL,
 				    hc("about"), ctx.qry.head, NULL,
 				    NULL);
+			html(" ");
+		}
 		cgit_summary_link("summary", NULL, hc("summary"),
 				  ctx.qry.head);
+		html(" ");
 		cgit_refs_link("refs", NULL, hc("refs"), ctx.qry.head,
 			       ctx.qry.sha1, NULL);
+		html(" ");
 		cgit_log_link("log", NULL, hc("log"), ctx.qry.head,
 			      NULL, ctx.qry.vpath, 0, NULL, NULL,
 			      ctx.qry.showmsg, ctx.qry.follow);
+		html(" ");
 		if (ctx.qry.page && !strcmp(ctx.qry.page, "blame"))
 			cgit_blame_link("blame", NULL, hc("blame"), ctx.qry.head,
 				        ctx.qry.sha1, ctx.qry.vpath);
 		else
 			cgit_tree_link("tree", NULL, hc("tree"), ctx.qry.head,
 				       ctx.qry.sha1, ctx.qry.vpath);
+		html(" ");
 		cgit_commit_link("commit", NULL, hc("commit"),
 				 ctx.qry.head, ctx.qry.sha1, ctx.qry.vpath);
+		html(" ");
 		cgit_diff_link("diff", NULL, hc("diff"), ctx.qry.head,
 			       ctx.qry.sha1, ctx.qry.sha2, ctx.qry.vpath);
-		if (ctx.repo->max_stats)
+		if (ctx.repo->max_stats) {
+			html(" ");
 			cgit_stats_link("stats", NULL, hc("stats"),
 					ctx.qry.head, ctx.qry.vpath);
+		}
 		if (ctx.repo->homepage) {
-			html("<a href='");
+			html(" <a href='");
 			html_attr(ctx.repo->homepage);
 			html("'>homepage</a>");
 		}
-- 
EW



^ permalink raw reply	[flat|nested] 8+ messages in thread

* [PATCH 2/4] ui-{commit,tag}: use <pre> for commit-msg
  2019-01-01 11:44 [PATCH 0/4] improve rendering w/o CSS reliance e
  2019-01-01 11:44 ` [PATCH 1/4] ui-shared: improve pageheader display on text-based browsers e
@ 2019-01-01 11:44 ` e
  2019-01-01 11:44 ` [PATCH 3/4] ui-log: improve decoration display for browsers without CSS e
                   ` (3 subsequent siblings)
  5 siblings, 0 replies; 8+ messages in thread
From: e @ 2019-01-01 11:44 UTC (permalink / raw)


This preserves formatting readable for users of text-based browsers
without CSS support.
---
 cgit.css              | 5 -----
 tests/t0105-commit.sh | 2 +-
 ui-commit.c           | 4 ++--
 ui-tag.c              | 4 ++--
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/cgit.css b/cgit.css
index 8c313e2..9f70d14 100644
--- a/cgit.css
+++ b/cgit.css
@@ -436,11 +436,6 @@ div#cgit div.commit-subject {
 	padding: 0em;
 }
 
-div#cgit div.commit-msg {
-	white-space: pre;
-	font-family: monospace;
-}
-
 div#cgit div.notes-header {
 	font-weight: bold;
 	padding-top: 1.5em;
diff --git a/tests/t0105-commit.sh b/tests/t0105-commit.sh
index 9cdf55c..9e34abd 100755
--- a/tests/t0105-commit.sh
+++ b/tests/t0105-commit.sh
@@ -11,7 +11,7 @@ test_expect_success 'find commit subject' '
 	grep "<div class=.commit-subject.>commit 5<" tmp
 '
 
-test_expect_success 'find commit msg' 'grep "<div class=.commit-msg.></div>" tmp'
+test_expect_success 'find commit msg' 'grep "<pre class=.commit-msg.></pre>" tmp'
 test_expect_success 'find diffstat' 'grep "<table summary=.diffstat. class=.diffstat.>" tmp'
 
 test_expect_success 'find diff summary' '
diff --git a/ui-commit.c b/ui-commit.c
index 9a47b54..1c04c87 100644
--- a/ui-commit.c
+++ b/ui-commit.c
@@ -120,11 +120,11 @@ void cgit_print_commit(char *hex, const char *prefix)
 	cgit_close_filter(ctx.repo->commit_filter);
 	show_commit_decorations(commit);
 	html("</div>");
-	html("<div class='commit-msg'>");
+	html("<pre class='commit-msg'>");
 	cgit_open_filter(ctx.repo->commit_filter);
 	html_txt(info->msg);
 	cgit_close_filter(ctx.repo->commit_filter);
-	html("</div>");
+	html("</pre>");
 	if (notes.len != 0) {
 		html("<div class='notes-header'>Notes</div>");
 		html("<div class='notes'>");
diff --git a/ui-tag.c b/ui-tag.c
index f530224..9e54d2c 100644
--- a/ui-tag.c
+++ b/ui-tag.c
@@ -25,9 +25,9 @@ static void print_tag_content(char *buf)
 	html_txt(buf);
 	html("</div>");
 	if (p) {
-		html("<div class='commit-msg'>");
+		html("<pre class='commit-msg'>");
 		html_txt(++p);
-		html("</div>");
+		html("</pre>");
 	}
 }
 
-- 
EW



^ permalink raw reply	[flat|nested] 8+ messages in thread

* [PATCH 3/4] ui-log: improve decoration display for browsers without CSS
  2019-01-01 11:44 [PATCH 0/4] improve rendering w/o CSS reliance e
  2019-01-01 11:44 ` [PATCH 1/4] ui-shared: improve pageheader display on text-based browsers e
  2019-01-01 11:44 ` [PATCH 2/4] ui-{commit,tag}: use <pre> for commit-msg e
@ 2019-01-01 11:44 ` e
  2019-01-01 11:44 ` [PATCH 4/4] ui-diff: preserve spaces w/o CSS on context lines e
                   ` (2 subsequent siblings)
  5 siblings, 0 replies; 8+ messages in thread
From: e @ 2019-01-01 11:44 UTC (permalink / raw)


Text-based browsers without CSS support show all the decorations
bunched together without spacing.  Rely on a whitespace instead
of CSS support.
---
 cgit.css | 1 -
 ui-log.c | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/cgit.css b/cgit.css
index 9f70d14..6fcd984 100644
--- a/cgit.css
+++ b/cgit.css
@@ -708,7 +708,6 @@ div#cgit div.commit-subject a.tag-deco,
 div#cgit div.commit-subject a.tag-annotated-deco,
 div#cgit div.commit-subject a.remote-deco,
 div#cgit div.commit-subject a.deco {
-	margin-left: 1em;
 	font-size: 75%;
 }
 
diff --git a/ui-log.c b/ui-log.c
index 3bcb657..10dc286 100644
--- a/ui-log.c
+++ b/ui-log.c
@@ -67,6 +67,7 @@ void show_commit_decorations(struct commit *commit)
 	while (deco) {
 		struct object_id peeled;
 		int is_annotated = 0;
+
 		strlcpy(buf, prettify_refname(deco->name), sizeof(buf));
 		switch(deco->type) {
 		case DECORATION_NONE:
@@ -74,11 +75,13 @@ void show_commit_decorations(struct commit *commit)
 			 * don't display anything. */
 			break;
 		case DECORATION_REF_LOCAL:
+			html(" ");
 			cgit_log_link(buf, NULL, "branch-deco", buf, NULL,
 				ctx.qry.vpath, 0, NULL, NULL,
 				ctx.qry.showmsg, 0);
 			break;
 		case DECORATION_REF_TAG:
+			html(" ");
 			if (!peel_ref(deco->name, &peeled))
 				is_annotated = !oidcmp(&commit->object.oid, &peeled);
 			cgit_tag_link(buf, NULL, is_annotated ? "tag-annotated-deco" : "tag-deco", buf);
@@ -86,12 +89,14 @@ void show_commit_decorations(struct commit *commit)
 		case DECORATION_REF_REMOTE:
 			if (!ctx.repo->enable_remote_branches)
 				break;
+			html(" ");
 			cgit_log_link(buf, NULL, "remote-deco", NULL,
 				oid_to_hex(&commit->object.oid),
 				ctx.qry.vpath, 0, NULL, NULL,
 				ctx.qry.showmsg, 0);
 			break;
 		default:
+			html(" ");
 			cgit_commit_link(buf, NULL, "deco", ctx.qry.head,
 					oid_to_hex(&commit->object.oid),
 					ctx.qry.vpath);
-- 
EW



^ permalink raw reply	[flat|nested] 8+ messages in thread

* [PATCH 4/4] ui-diff: preserve spaces w/o CSS on context lines
  2019-01-01 11:44 [PATCH 0/4] improve rendering w/o CSS reliance e
                   ` (2 preceding siblings ...)
  2019-01-01 11:44 ` [PATCH 3/4] ui-log: improve decoration display for browsers without CSS e
@ 2019-01-01 11:44 ` e
  2019-01-04 10:32   ` e
  2019-01-04 22:23 ` [PATCH 5/4] ui-{tree,repolist}: improve button spacing for browsers w/o CSS e
  2020-02-08 18:44 ` [PATCH 0/4] improve rendering w/o CSS reliance e
  5 siblings, 1 reply; 8+ messages in thread
From: e @ 2019-01-01 11:44 UTC (permalink / raw)


We need to use a non-breaking space entity to preserve
spacing for browsers without CSS support.
---
 html.c    | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 html.h    |  1 +
 ui-diff.c |  5 +----
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/html.c b/html.c
index 7f81965..138c649 100644
--- a/html.c
+++ b/html.c
@@ -156,6 +156,52 @@ ssize_t html_ntxt(const char *txt, size_t len)
 	return slen;
 }
 
+ssize_t html_ntxt_pre(const char *txt, size_t len)
+{
+	const char *t = txt;
+	ssize_t slen;
+	int prev = 0;
+
+	if (len > SSIZE_MAX)
+		return -1;
+
+	slen = (ssize_t) len;
+	while (t && *t && slen--) {
+		int c = *t;
+		if (c == '<' || c == '>' || c == '&' || c == ' ' || c == '\t') {
+			html_raw(txt, t - txt);
+			if (c == '>')
+				html("&gt;");
+			else if (c == '<')
+				html("&lt;");
+			else if (c == '&')
+				html("&amp;");
+			else if (c == ' ') {
+				if (!prev || prev == ' ' || prev == '\t') {
+					html("&#160;");
+					/* next byte can be unescaped ' ' */
+					c = 160;
+				} else {
+					html(" ");
+				}
+			} else if (c == '\t') {
+				html("&#160;&#160;&#160;&#160;"
+				     "&#160;&#160;&#160;&#160;");
+				/* next byte can be unescaped ' ' */
+				c = 160;
+			}
+			txt = t + 1;
+		}
+		prev = c;
+		t++;
+	}
+	if (t != txt)
+		html_raw(txt, t - txt);
+	return slen;
+}
+
+
+
 void html_attrf(const char *fmt, ...)
 {
 	va_list ap;
diff --git a/html.h b/html.h
index fa4de77..4479b8e 100644
--- a/html.h
+++ b/html.h
@@ -20,6 +20,7 @@ extern void html_attrf(const char *format,...);
 
 extern void html_txt(const char *txt);
 extern ssize_t html_ntxt(const char *txt, size_t len);
+extern ssize_t html_ntxt_pre(const char *txt, size_t len);
 extern void html_attr(const char *txt);
 extern void html_url_path(const char *txt);
 extern void html_url_arg(const char *txt);
diff --git a/ui-diff.c b/ui-diff.c
index 70dcc91..ca19f9e 100644
--- a/ui-diff.c
+++ b/ui-diff.c
@@ -222,7 +222,6 @@ static void cgit_print_diffstat(const struct object_id *old_oid,
 static void print_line(char *line, int len)
 {
 	char *class = "ctx";
-	char c = line[len-1];
 
 	if (line[0] == '+')
 		class = "add";
@@ -232,10 +231,8 @@ static void print_line(char *line, int len)
 		class = "hunk";
 
 	htmlf("<div class='%s'>", class);
-	line[len-1] = '\0';
-	html_txt(line);
+	html_ntxt_pre(line, len - 1);
 	html("</div>");
-	line[len-1] = c;
 }
 
 static void header(const struct object_id *oid1, char *path1, int mode1,
-- 
EW



^ permalink raw reply	[flat|nested] 8+ messages in thread

* [PATCH 4/4] ui-diff: preserve spaces w/o CSS on context lines
  2019-01-01 11:44 ` [PATCH 4/4] ui-diff: preserve spaces w/o CSS on context lines e
@ 2019-01-04 10:32   ` e
  0 siblings, 0 replies; 8+ messages in thread
From: e @ 2019-01-04 10:32 UTC (permalink / raw)


Eric Wong <e at 80x24.org> wrote:
> We need to use a non-breaking space entity to preserve
> spacing for browsers without CSS support.

Btw, an alternative patch which could save bandwidth but
possibly break compatibility with existing CSS would be to wrap
the whole diff area in a <pre>, and use <span class='...'>
instead of <div class='...'>


^ permalink raw reply	[flat|nested] 8+ messages in thread

* [PATCH 5/4] ui-{tree,repolist}: improve button spacing for browsers w/o CSS
  2019-01-01 11:44 [PATCH 0/4] improve rendering w/o CSS reliance e
                   ` (3 preceding siblings ...)
  2019-01-01 11:44 ` [PATCH 4/4] ui-diff: preserve spaces w/o CSS on context lines e
@ 2019-01-04 22:23 ` e
  2020-02-08 18:44 ` [PATCH 0/4] improve rendering w/o CSS reliance e
  5 siblings, 0 replies; 8+ messages in thread
From: e @ 2019-01-04 22:23 UTC (permalink / raw)


For browsers on low-end machines running browsers without CSS
support, the default tree view displayed "logplain" when it
should be "log plain".  Stop relying on CSS and add a space
in between elements to improve accessibility.
---
 cgit.css      |  1 -
 ui-repolist.c |  2 ++
 ui-tree.c     | 12 +++++++++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/cgit.css b/cgit.css
index 6fcd984..d4f2418 100644
--- a/cgit.css
+++ b/cgit.css
@@ -575,7 +575,6 @@ div#cgit table.list td.reposection {
 
 div#cgit a.button {
 	font-size: 80%;
-	padding: 0em 0.5em;
 }
 
 div#cgit a.primary {
diff --git a/ui-repolist.c b/ui-repolist.c
index 41424c0..6187101 100644
--- a/ui-repolist.c
+++ b/ui-repolist.c
@@ -353,8 +353,10 @@ void cgit_print_repolist(void)
 		if (ctx.cfg.enable_index_links) {
 			html("<td>");
 			cgit_summary_link("summary", NULL, "button", NULL);
+			html(" ");
 			cgit_log_link("log", NULL, "button", NULL, NULL, NULL,
 				      0, NULL, NULL, ctx.qry.showmsg, 0);
+			html(" ");
 			cgit_tree_link("tree", NULL, "button", NULL, NULL, NULL);
 			html("</td>");
 		}
diff --git a/ui-tree.c b/ui-tree.c
index df8ad82..436c2b3 100644
--- a/ui-tree.c
+++ b/ui-tree.c
@@ -245,15 +245,21 @@ static int ls_item(const struct object_id *oid, struct strbuf *base,
 	cgit_log_link("log", NULL, "button", ctx.qry.head,
 		      walk_tree_ctx->curr_rev, fullpath.buf, 0, NULL, NULL,
 		      ctx.qry.showmsg, 0);
-	if (ctx.repo->max_stats)
+	if (ctx.repo->max_stats) {
+		html(" ");
 		cgit_stats_link("stats", NULL, "button", ctx.qry.head,
 				fullpath.buf);
-	if (!S_ISGITLINK(mode))
+	}
+	if (!S_ISGITLINK(mode)) {
+		html(" ");
 		cgit_plain_link("plain", NULL, "button", ctx.qry.head,
 				walk_tree_ctx->curr_rev, fullpath.buf);
-	if (!S_ISDIR(mode) && ctx.cfg.enable_blame)
+	}
+	if (!S_ISDIR(mode) && ctx.cfg.enable_blame) {
+		html(" ");
 		cgit_blame_link("blame", NULL, "button", ctx.qry.head,
 				walk_tree_ctx->curr_rev, fullpath.buf);
+	}
 	html("</td></tr>\n");
 	free(name);
 	strbuf_release(&fullpath);
-- 
EW


^ permalink raw reply	[flat|nested] 8+ messages in thread

* [PATCH 0/4] improve rendering w/o CSS reliance
  2019-01-01 11:44 [PATCH 0/4] improve rendering w/o CSS reliance e
                   ` (4 preceding siblings ...)
  2019-01-04 22:23 ` [PATCH 5/4] ui-{tree,repolist}: improve button spacing for browsers w/o CSS e
@ 2020-02-08 18:44 ` e
  5 siblings, 0 replies; 8+ messages in thread
From: e @ 2020-02-08 18:44 UTC (permalink / raw)


Eric Wong <e at 80x24.org> wrote:
> Here are a few changes to improve rendering for people with
> low-end machines using text-based browsers (w3m, lynx) or
> lightweight GUI browsers such as dillo, which has incomplete CSS
> support.

Ping.  Any feedback on this series?  Thanks.


^ permalink raw reply	[flat|nested] 8+ messages in thread

end of thread, back to index

Thread overview: 8+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2019-01-01 11:44 [PATCH 0/4] improve rendering w/o CSS reliance e
2019-01-01 11:44 ` [PATCH 1/4] ui-shared: improve pageheader display on text-based browsers e
2019-01-01 11:44 ` [PATCH 2/4] ui-{commit,tag}: use <pre> for commit-msg e
2019-01-01 11:44 ` [PATCH 3/4] ui-log: improve decoration display for browsers without CSS e
2019-01-01 11:44 ` [PATCH 4/4] ui-diff: preserve spaces w/o CSS on context lines e
2019-01-04 10:32   ` e
2019-01-04 22:23 ` [PATCH 5/4] ui-{tree,repolist}: improve button spacing for browsers w/o CSS e
2020-02-08 18:44 ` [PATCH 0/4] improve rendering w/o CSS reliance e

List for cgit developers and users

Archives are clonable: git clone --mirror http://inbox.vuxu.org/cgit

Example config snippet for mirrors

Newsgroup available over NNTP:
	nntp://inbox.vuxu.org/vuxu.archive.cgit


AGPL code for this site: git clone https://public-inbox.org/public-inbox.git