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 4c01d2b0b24f20d8becc5e70387cedfe3b3aead7..2a1a6fceae0f1aa47ae8f492929f3d379b07e775 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 */

diff --git a/browser.plp b/browser.plp
index ea23d0afae18702ac0d47b3e0d9c63e9b95f9feb..ce56bdb0ddd10bc6b1af74b0f42d1937eae57495 100644 (file)
--- 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};