From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sun, 5 Dec 2010 16:49:14 +0000 (+0100)
Subject: browser: click title to expand
X-Git-Tag: v1.4~81
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/7c8362694ebd579891ee698bd069ba2ce702b89a

browser: click title to expand

Layout changing on hover is annoying.  Prefer click event to toggle
visibility, with links and CSS3 selector for scriptless fallback.
---

diff --git a/base.css b/base.css
index 4c01d2b..2a1a6fc 100644
--- a/base.css
+++ b/base.css
@@ -568,9 +568,9 @@ ul.legend-set li {
 #browser .aside p {
 	margin: 1ex 0;
 }
-#browser tr:hover .aside {
+#browser tr.target .aside,
+#browser tr:target .aside {
 	height: auto;
-	min-height: 5ex; /* browsers currently only transition to static values */
 }
 #browser td.X {
 	white-space: nowrap; /* some browsers break on dashes */
diff --git a/browser.plp b/browser.plp
index ea23d0a..ce56bdb 100644
--- a/browser.plp
+++ b/browser.plp
@@ -146,7 +146,15 @@ for my $id (sort {
 		my $cell = $_ ? lc $_->[0] : '-';
 		print '<th>', $cell;
 	}
-	print '<td>', $row->{title};
+	print '<td>', map {
+		sprintf('<a href="%s" onclick="%s">%s</a>',
+			"#$id",
+			sprintf("try { %s; return false } catch(err) { return true }",
+				"document.getElementById('$id').classList.toggle('target')",
+			),
+			$_,
+		);
+	} $row->{title};
 	print '<div class=aside>';
 	s/\.?$/./, print "<p>$_</p>" for map { ref $_ ? @$_ : $_ || () }
 		$row->{description}, $row->{notes};