browser: click title to expand
authorMischa POSLAWSKY <perl@shiar.org>
Sun, 5 Dec 2010 16:49:14 +0000 (17:49 +0100)
committerMischa POSLAWSKY <perl@shiar.org>
Mon, 6 Dec 2010 00:04:46 +0000 (01:04 +0100)
Layout changing on hover is annoying.  Prefer click event to toggle
visibility, with links and CSS3 selector for scriptless fallback.

base.css
browser.plp

index 4c01d2b..2a1a6fc 100644 (file)
--- 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 */
index ea23d0a..ce56bdb 100644 (file)
@@ -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};