keyboard/altgr/index: html table with column header

diff --git a/base.css b/base.css
index 061ca166fcf06ab0fdcc70881bbdea3eb823ab3e..52a97e5c385a6151bc3773f7f0168332a04059a0 100644 (file)
--- a/base.css
+++ b/base.css
@@ -282,6 +282,7 @@ dl.legend dt,
        color: #FFF;
        line-height: 2.25ex;
 }
+.keys.big.cmp td b,
 .keys.big .meta td b,
 .keys.big .shift td b {
        display: none;
@@ -655,6 +656,7 @@ dl.legend dt.new,
 .keys td.new {
        border-style: dashed;
 }
+.ext,
 dl.legend dt.ext,
 .keys td.ext {
        opacity: .6;

diff --git a/keyboard/altgr/index.inc.plp b/keyboard/altgr/index.inc.plp
index 057d6a9e053b2b1a738d08a00f7a92cfe43346c6..ccb7fb63fc3388bacad4d944102fda5cc2e28906 100644 (file)
--- a/keyboard/altgr/index.inc.plp
+++ b/keyboard/altgr/index.inc.plp
@@ -20,18 +20,32 @@ Html({
        data => ['keyboard/altgr/index.inc.plp', @incs],
        raw => <<'.',
 <style>
-table.keys {
-       display: inline-table;
+.keys.cmp {
+       display: inline-table; /* centered */
+       float: none;
        margin: 0;
+       border-collapse: separate;
+       border-spacing: 2px;
+       border-spacing: .4vw; /* inline td margin equivalent */
 }
-dt {
-       display: flex;
-       flex-direction: column;
-       justify-content: center;
+.keys.big.cmp tbody {
+       font-size: 150%;
 }
-dt img {
-       max-height: 10ex;
+.keys.cmp tbody {
+       display: table-row-group;
 }
+.keys.cmp tr {
+       display: table-row;
+}
+.keys.cmp tr > * {
+       display: table-cell;
+       position: static; /* under sticky thead */
+}
+.keys.cmp tbody th {
+       padding-right: 1ex;
+       text-align: right;
+}
+
 img {
        object-fit: cover;
        height: 100%;
@@ -44,19 +58,24 @@ img {
 :>
 <h1>Extended keyboards</h1>
 
-<p>Available key layouts with AltGr or similar modifier keys.</p>
+<p>Overview of available key layouts with AltGr or similar modifier keys.</p>
 
 <:
 my @sample = split /(?<!\+)/, $get{sample} // 'asSci1!+1';
 require Shiar_Sheet::Keyboard;
 
 printf '<section class="%s">', @sample ? 'section' : 'gallery';
-print '<dl>' if @sample;
+if (@sample) {
+       print '<table class="big keys cmp">';
+       print '<thead><tr><th>';
+       print "<th>$_" for @sample;
+       say '</tr></thead>';
+}
 my %idx = map {s/\Q.inc.pl\E$//; ($_ => eval{ Data($_) })} @incs;
 for my $inc (sort {
        $idx{$a}{category} cmp $idx{$b}{category} || $a cmp $b
 } keys %idx) {
-       print @sample ? '<dt>' : '<figure>';
+       print @sample ? '<tr><th>' : '<figure>';
        printf '<a href="/%s">', $inc =~ s/\.eng$//r;
        my $table = $idx{$inc};
        my $title = $table && $table->{title} || $inc;
@@ -73,13 +92,12 @@ for my $inc (sort {
                print $title;
                print '</a>';
                my $keys = Shiar_Sheet::Keyboard->new($table);
-               print join(' ', map { $keys->{key}{$_} =~ s/\s.*//r } grep {$_} keys %{$_})
+               print '<br>', join(' ', map { $keys->{key}{$_} =~ s/\s.*//r } grep {$_} keys %{$_})
                        for $keys->{mode} || ();
-               say '<dd><table class="keys big"><tr>';
                $keys->print_key('', $_, $keys->{def}{''}{$_} // 'ni') for @sample;
-               print '</tr></table>';
-               say '</dd>';
+               say '</tr>';
        }
 }
-:></dl></section>
+print '</table>' if @sample;
+:></section>