[PATCH] Convert pager navigation into a unordered list

* [PATCH] Convert pager navigation into a unordered list
@ 2013-03-07  7:56 cgit
  2013-03-20 20:03 ` Jason
  0 siblings, 1 reply; 5+ messages in thread
From: cgit @ 2013-03-07  7:56 UTC (permalink / raw)


It is common practice and semantically appropriate to use unordered
lists for long navigation lists.

This also fixes the layout of very long pager navigations in
Webkit-based browsers.

Signed-off-by: Lukas Fleischer <cgit at cryptocrack.de>
---
 cgit.css      | 14 ++++++++++----
 ui-log.c      |  9 ++++++---
 ui-repolist.c |  6 ++++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/cgit.css b/cgit.css
index 54da076..a50d62b 100644
--- a/cgit.css
+++ b/cgit.css
@@ -538,17 +538,23 @@ div#cgit table.list td.sublevel-repo {
 	padding-left: 1.5em;
 }
 
-div#cgit div.pager {
+div#cgit ul.pager {
+	list-style-type: none;
 	text-align: center;
 	margin: 1em 0em 0em 0em;
+	padding: 0;
 }
 
-div#cgit div.pager a {
+div#cgit ul.pager li {
+	display: inline-block;
+	margin: 0.25em 0.5em;
+}
+
+div#cgit ul.pager a {
 	color: #777;
-	margin: 0em 0.5em;
 }
 
-div#cgit div.pager .current {
+div#cgit ul.pager .current {
 	font-weight: bold;
 }
 
diff --git a/ui-log.c b/ui-log.c
index 954d3e1..aaffb4e 100644
--- a/ui-log.c
+++ b/ui-log.c
@@ -405,21 +405,24 @@ void cgit_print_log(const char *tip, int ofs, int cnt, char *grep, char *pattern
 		commit->parents = NULL;
 	}
 	if (pager) {
-		html("</table><div class='pager'>");
+		html("</table><ul class='pager'>");
 		if (ofs > 0) {
+			html("<li>");
 			cgit_log_link("[prev]", NULL, NULL, ctx.qry.head,
 				      ctx.qry.sha1, ctx.qry.vpath,
 				      ofs - cnt, ctx.qry.grep,
 				      ctx.qry.search, ctx.qry.showmsg);
-			html("&nbsp;");
+			html("</li>");
 		}
 		if ((commit = get_revision(&rev)) != NULL) {
+			html("<li>");
 			cgit_log_link("[next]", NULL, NULL, ctx.qry.head,
 				      ctx.qry.sha1, ctx.qry.vpath,
 				      ofs + cnt, ctx.qry.grep,
 				      ctx.qry.search, ctx.qry.showmsg);
+			html("</li>");
 		}
-		html("</div>");
+		html("</ul>");
 	} else if ((commit = get_revision(&rev)) != NULL) {
 		htmlf("<tr class='nohover'><td colspan='%d'>", columns);
 		cgit_log_link("[...]", NULL, NULL, ctx.qry.head, NULL,
diff --git a/ui-repolist.c b/ui-repolist.c
index 66c88c4..a9751f6 100644
--- a/ui-repolist.c
+++ b/ui-repolist.c
@@ -128,13 +128,15 @@ static void print_pager(int items, int pagelen, char *search, char *sort)
 {
 	int i, ofs;
 	char *class = NULL;
-	html("<div class='pager'>");
+	html("<ul class='pager'>");
 	for (i = 0, ofs = 0; ofs < items; i++, ofs = i * pagelen) {
 		class = (ctx.qry.ofs == ofs) ? "current" : NULL;
+		html("<li>");
 		cgit_index_link(fmt("[%d]", i + 1), fmt("Page %d", i + 1),
 				class, search, sort, ofs);
+		html("</li>");
 	}
-	html("</div>");
+	html("</ul>");
 }
 
 static int cmp(const char *s1, const char *s2)
-- 
1.8.2.rc2.352.g908df73





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