From 02b32dd5ef0d42dee78f1824ab16d5e89da99ea4 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Fri, 6 Oct 2023 23:00:22 +0100
Subject: [PATCH] Use Bootstrap CSS columns for space launches

Closes: #17
---
 templates/index.html | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 64c650c..b3a8b20 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -117,17 +117,19 @@
   {% endfor %}
 
   <h3>Space launches</h3>
-  <table class="table table-hover">
   {% for launch in rockets %}
-    <tr>
-      <td class="text-nowrap text-end">{{ launch.t0_date }}
+    <div class="row">
+      <div class="col-md-1 text-nowrap text-md-end">{{ launch.t0_date }}
 
-        {% if launch.t0_time %}<br/>{{ launch.t0_time }}{% endif %}</td>
-      <td class="text-nowrap"><abbr title="{{ launch.status.name }}">{{ launch.status.abbrev }}</abbr></td>
-      <td>{{ launch.rocket }}
-        &mdash;
-        {{launch.mission.name }}
-        &mdash;
+        {% if launch.t0_time %}<br class="d-none d-md-block"/>{{ launch.t0_time }}{% endif %}</div>
+      <div class="col-md-1 text-md-nowrap">
+        <span class="d-md-none">launch status:</span>
+        <abbr title="{{ launch.status.name }}">{{ launch.status.abbrev }}</abbr>
+      </div>
+      <div class="col">{{ launch.rocket }}
+        &ndash;
+        <strong>{{launch.mission.name }}</strong>
+        &ndash;
 
         {% if launch.launch_provider_abbrev %}
         <abbr title="{{ launch.launch_provider }}">{{ launch.launch_provider_abbrev }}</abbr>
@@ -145,10 +147,9 @@
           <p>{{ line }}</p>
         {% endfor %}
 
-      </td>
-    </tr>
+      </div>
+    </div>
   {% endfor %}
-  </table>
   </div>
 
 <pre>{{ events | pprint }}</pre>