From 9f1aad6e442dbb3a88210a379d645db842d00def Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 23 Apr 2018 17:37:52 +0200
Subject: [PATCH] sc: spread related data over second line on small screens

Reduced width option to fit on tablets and (landscape) phones (~550px).
---
 sc.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 sc.plp | 10 ++++----
 2 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/sc.css b/sc.css
index 45d8638..2d73ee0 100644
--- 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 c7aec30..0a41018 100644
--- 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"
 		);
-- 
2.30.0