supported-devices: Equal column height and vertical spacing for tablets

Signed-off-by: Paul Kocialkowski <contact@paulk.fr>

3 files changed, 41 insertions, 7 deletions

diff --git a/css/equal-height-columns.css b/css/equal-height-columns.css
new file mode 100644
index 0000000..5d78527
--- /dev/null
+++ b/css/equal-height-columns.css
@@ -0,0 +1,32 @@
+/*
+ * Row with equal height columns
+ * --------------------------------------------------
+ */
+.row-eq-height {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display:         flex;
+}
+
+.row-eq-height > div {
+  padding-bottom: 20px;
+}
+
+.row-eq-height > div > a {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.row-eq-height .vertical-spacer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+}
+
+.row-eq-height .vertical-spacer img {
+  width: 100%;
+}
diff --git a/include/header.php b/include/header.php
index cdbd411..0b5ca29 100644
--- a/include/header.php
+++ b/include/header.php
@@ -11,6 +11,7 @@
 
 	<link rel="stylesheet" href="css/bootstrap.css" />
 	<link rel="stylesheet" href="css/bootstrap-theme.css" />
+	<link rel="stylesheet" href="css/equal-height-columns.css" />
 	<link rel="stylesheet" href="css/replicant.css" />
 
 	<link rel="stylesheet" href="css/lightbox.css" />
diff --git a/supported-devices.php b/supported-devices.php
index 798df21..da390c6 100644
--- a/supported-devices.php
+++ b/supported-devices.php
@@ -3,7 +3,7 @@
 <div class="container" role="main">
 	<div class="page-header"><h2>Supported devices</h2></div>
 	<h3>Maintained devices</h3>
-	<div class="row">
+	<div class="row row-eq-height">
 		<div class="col-md-3">
 			<a href="//redmine.replicant.us/projects/replicant/wiki/NexusSI902x" class="thumbnail supported-device"><img src="images/supported-devices/crespo.png" alt="Nexus S (I902x)" /><br />Nexus S (I902x)</a>
 		</div>
@@ -17,7 +17,7 @@
 			<a href="//redmine.replicant.us/projects/replicant/wiki/GalaxyNoteN7000" class="thumbnail supported-device"><img src="images/supported-devices/n7000.png" alt="Galaxy Note (N7000)" /><br />Galaxy Note (N7000)</a>
 		</div>
 	</div>
-	<div class="row">
+	<div class="row row-eq-height">
 		<div class="col-md-3">
 			<a href="//redmine.replicant.us/projects/replicant/wiki/GalaxyNexusI9250" class="thumbnail supported-device"><img src="images/supported-devices/maguro.png" alt="Galaxy Nexus (I9250)" /><br />Galaxy Nexus (I9250)</a>
 		</div>
@@ -28,22 +28,23 @@
 			<a href="//redmine.replicant.us/projects/replicant/wiki/GalaxyNote2N7100" class="thumbnail supported-device"><img src="images/supported-devices/n7100.png" alt="Galaxy Note (N7000)" /><br />Galaxy Note 2 (N7100)</a>
 		</div>
 	</div>
-	<div class="row">
+	<div class="row row-eq-height">
 		<div class="col-md-6">
-			<a href="//redmine.replicant.us/projects/replicant/wiki/GalaxyTab270P31xx" class="thumbnail supported-device"><img src="images/supported-devices/p3100.png" alt="Galaxy Tab 2 7.0 (P31xx)" /><br />Galaxy Tab 2 7.0 (P31xx)</a>
+			<a href="//redmine.replicant.us/projects/replicant/wiki/GalaxyTab270P31xx" class="thumbnail supported-device"><span class="vertical-spacer"><img src="images/supported-devices/p3100.png" alt="Galaxy Tab 2 10.1 (P51xx)" /></span><br />Galaxy Tab 2 7.0 (P31xx)</a>
 		</div>
 		<div class="col-md-6">
-			<a href="//redmine.replicant.us/projects/replicant/wiki/GalaxyTab2101P51xx" class="thumbnail supported-device"><img src="images/supported-devices/p5100.png" alt="Galaxy Tab 2 10.1 (P51xx)" /><br />Galaxy Tab 2 10.1 (P51xx)</a>
+			<a href="//redmine.replicant.us/projects/replicant/wiki/GalaxyTab2101P51xx" class="thumbnail supported-device"><span class="vertical-spacer"><img src="images/supported-devices/p5100.png" alt="Galaxy Tab 2 10.1 (P51xx)" /></span><br />Galaxy Tab 2 10.1 (P51xx)</a>
 		</div>
 	</div>
+
 	<h3>Uncompleted devices</h3>
-	<div class="row">
+	<div class="row row-eq-height">
 		<div class="col-md-3">
 			<a href="//redmine.replicant.us/projects/replicant/wiki/GTA04" class="thumbnail supported-device"><img src="images/supported-devices/gta04.png" alt="GTA04" /><br />GTA04</a>
 		</div>
 	</div>
 	<h3>Unmaintained devices</h3>
-	<div class="row">
+	<div class="row row-eq-height">
 		<div class="col-md-3">
 			<a href="//redmine.replicant.us/projects/replicant/wiki/DreamMagic" class="thumbnail supported-device"><img src="images/supported-devices/dream_sapphire.png" alt="Dream/Magic" /><br />Dream/Magic</a>
 		</div>