sc: spread related data over second line on small screens

Reduced width option to fit on tablets and (landscape) phones (~550px).

diff --git a/sc.css b/sc.css
index 45d86382cd05ebd05180ef4c7f20fa74a98f2d3a..2d73ee0537a7b98370cf066264de98fdc8ac9974 100644 (file)
--- a/sc.css
+++ b/sc.css
@@ -9,6 +9,7 @@
        padding: 0 0.2em;
        background: transparent;
        text-align: left;
+       vertical-align: top;
 }
 tr.alt td {
        font-size: 70%;
@@ -157,3 +158,76 @@ tbody .unit-shield {
        margin-right: 2em;
 }
 
+@media (max-width: 52em) {
+       .units {
+               width: auto;
+       }
+       .units th {
+       }
+       .units td {
+               height: 2em;
+       }
+
+       .units tbody .cat {
+               position: absolute;
+               visibility: hidden;
+       }
+       .units td:nth-child(2) {
+               max-width: 6.5em;
+               white-space: normal;
+               overflow: hidden;
+       }
+
+       .units thead th:first-child,
+       .units .cat,
+       .units .unit-speed,
+       .units .hurtrel,
+       .units .unit-pop, .units .unit-type,
+       .units .unit-shield,
+       .units .gas {
+               padding: 0;
+               position: absolute;
+               margin-top: 3.2ex;
+               margin-top: 1rem;
+               min-width: 4em;
+               text-align: right;
+               margin-left: -4.3em;
+               font-size: 70%;
+       }
+       .units th.unit-attr {
+               position: absolute;
+       }
+       .units .unit-type {
+               text-align: left;
+               margin-left: 0;
+       }
+       .units .unit-speed {
+               margin-left: -6em;
+       }
+       .units .alt thead th:first-child,
+       .units .alt .cat,
+       .units .alt .unit-speed,
+       .units .alt .hurtrel,
+       .units .alt .unit-pop, .units .alt .unit-type,
+       .units .alt .unit-shield,
+       .units .alt .gas {
+               margin-top: 2ex;
+       }
+       .units .cat {
+               margin-top: -2ex;
+               margin-left: 0;
+               text-align: left;
+       }
+
+       .units thead th:first-child {
+               margin-left: 0.5em;
+       }
+       .units thead th:first-child,
+       .units th.unit-speed,
+       .units th.hurtrel,
+       .units th.unit-shield,
+       .units th.gas {
+               margin-top: 2.2ex;
+       }
+}
+

diff --git a/sc.plp b/sc.plp
index c7aec309352f933ba9c2348fd7fe56aac4e320a9..0a4101821ff6d35f33d2a50b11a0e2d4c4ea9088 100644 (file)
--- a/sc.plp
+++ b/sc.plp
@@ -103,12 +103,12 @@ sub coltoggle {
 :><table class="units">
 <thead><tr>
        <th><:= coltoggle(exists $get{order} ? 'race' : 'source' => '') :></th>
-       <th><:= coltoggle(name => 'name') :></th>
+       <th class="unit-name"><:= coltoggle(name => 'name') :></th>
        <th class="val min" title=minerals><:= coltoggle(cost => 'cost') :></th>
        <th class="val gas">gas</th>
        <th class="val time"><:= coltoggle(build => 'build') :></th>
        <th class="unit" colspan="2"><:= coltoggle(qw'size size') :></th>
-       <th class="unit" colspan="2">attr</th>
+       <th class="unit unit-attr" colspan="2">attr</th>
        <th class="val unit-hp"><:= coltoggle(HP => 'hp') :></th>
        <th class="val unit-shield">shield</th>
        <th class="val unit-armor" title="armor">⛨</th>
@@ -290,7 +290,7 @@ sub showrangeint {
                                ),
                                defined $_->{size} && sprintf('⌀%.1f ', $_->{size}),
                        ),
-                       sprintf('<td class="val unit%s">%s',
+                       sprintf('<td class="val unit unit-pop%s">%s',
                                defined $_->{pop} && $_->{pop} < 0 && ' unit-supply',
                                defined $_->{pop} && $_->{pop} == .5 ? '½' : $_->{pop},
                        ),
@@ -349,10 +349,10 @@ sub showrangeint {
                                && qq'<span class="unit unit-jump" title="$_->{attr}->{jump}">↕</span>',
                        '<td class="unit-magic">' . showmagic($_),
                        !$_->{attack}->[1] ? () : (
-                               '<tr><td colspan=12>', showattack($_, 1), '<td colspan=3>'
+                               '<tr><th class="cat" colspan="2"><td colspan=10>', showattack($_, 1), '<td colspan=3>'
                        ),
                        !$_->{attack}->[2] ? () : (
-                               '<tr><td colspan=12>', showattack($_, 2), '<td colspan=3>'
+                               '<tr><th class="cat" colspan="2"><td colspan=10>', showattack($_, 2), '<td colspan=3>'
                        ),
                        "\n"
                );