Finally happy with the work

3 files changed, 52 insertions, 48 deletions

diff --git a/app/static/custom.css b/app/static/custom.css
index 8aa5b57..a5ca36f 100644
--- a/app/static/custom.css
+++ b/app/static/custom.css
@@ -12,15 +12,23 @@ td {
 footer {
     text-align: center;
 }
-.parent {
+.parent, .timer {
     display: grid;
     grid-column-gap: 20px;
     grid-row-gap: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
+    grid-auto-columns: 1fr;
+    grid-auto-rows: 1fr;
 }
-@media (min-width: 800px) {
+@media (min-width: 900px) {
+    table {
+        font-size: xx-large;
+    }
     .parent {
         grid-template-columns: repeat(4, 1fr);
     }
+    .timer {
+        grid-template-columns: 4fr repeat(2, 1fr);
+    }
 }
diff --git a/app/templates/controls.j2 b/app/templates/controls.j2
index 8e7440e..97351bf 100644
--- a/app/templates/controls.j2
+++ b/app/templates/controls.j2
@@ -1,6 +1,28 @@
 {% from "macros.j2" import court_button %}
+<h3>Timer</h3>
+<div class="timer">
+    <div role="group" style="height: 100%">
+        <button id="timer-dec"><i class="fas fa-light fa-minus"></i></button>
+        <input id="timer-display" type="text" style="text-align:center; height: 100%" readonly></input>
+        <button id="timer-inc"><i class="fas fa-light fa-plus"></i></button>
+    </div>
+    <button id="timer-start"><i class="fas fa-light fa-play"></i></button>
+    <button id="timer-stop"><i class="fas fa-light fa-stop"></i></button>
+</div>
 <h3>Generation</h3>
 <div class="grid">
+    <button class="button is-dark is-responsive" 
+            hx-post="/propose" 
+            hx-target="#games" 
+            hx-include="[name='levels'], [name='team']">Generate</button>
+    <button class="button is-dark is-responsive" 
+            hx-post="/confirm" 
+            hx-target="#games">Confirm</button>
+    <button class="button is-dark is-responsive" 
+            hx-post="/reset" 
+            hx-target="#games">RESET!</button>
+</div>
+<div class="grid">
     <div class="select is-responsive">
         <select name="levels">
             <option>10 Levels</option>
@@ -18,30 +40,6 @@
         </select>
     </div>
 </div>
-<div class="grid">
-    <button class="button is-dark is-responsive" 
-            hx-post="/propose" 
-            hx-target="#games" 
-            hx-include="[name='levels'], [name='team']">Generate</button>
-    <button class="button is-dark is-responsive" 
-            hx-post="/confirm" 
-            hx-target="#games">Confirm</button>
-    <button class="button is-dark is-responsive" 
-            hx-post="/reset" 
-            hx-target="#games">RESET!</button>
-</div>
-<h3>Timer</h3>
-<div class="grid">
-    <div role="group">
-        <button id="timer-dec"><i class="fas fa-light fa-minus"></i></button>
-        <input id="timer-display" type="text" style="text-align:center; " readonly></input>
-        <button id="timer-inc"><i class="fas fa-light fa-plus"></i></button>
-    </div>
-</div>
-<div class="grid">
-<button id="timer-start"><i class="fas fa-light fa-play"></i></button>
-<button id="timer-stop"><i class="fas fa-light fa-stop"></i></button>
-</div>
 <h3>Courts</h3>
 <div class="parent">
 {% for court in courts %}
diff --git a/app/templates/games.j2 b/app/templates/games.j2
index 5041ce1..00ffb71 100644
--- a/app/templates/games.j2
+++ b/app/templates/games.j2
@@ -1,23 +1,21 @@
-<div class="overflow-auto">
-<table id="games">
-<thead>
-    <th colspan="5" align="center"> {{ title }} </th>
-</thead>
-<thead>
-    <th align="center"> Court </th>
-    <th colspan="2" align="center"> Team 1 </th>
-    <th colspan="2" align="center"> Team 2 </th>
-</thead>
-<tbody>
-{% for game in games %}
-    <tr {% if game.team_1[0].first_name == 'RESERVED' %} data-theme="dark" {% endif %}>
-        <th align="center" style="width: 8%;">{{ game.court.id }}</th>
-        <td style="width: 23%;"><strong>{{ game.team_1[0].first_name }}</strong>{{ " " + game.team_1[0].last_name }}</th>
-        <td style="width: 23%;"><strong>{{ game.team_1[1].first_name }}</strong>{{ " " + game.team_1[1].last_name }}</th>
-        <td style="width: 23%;"><strong>{{ game.team_2[0].first_name }}</strong>{{ " " + game.team_2[0].last_name }}</th>
-        <td style="width: 23%;"><strong>{{ game.team_2[1].first_name }}</strong>{{ " " + game.team_2[1].last_name }}</th>
-    </tr>
-{% endfor %}
-</tbody>
-</table>
+<div id="games" class="overflow-auto">
+    <h3> {{ title }} </h3>
+    <table>
+        <thead>
+            <th align="center"> Court </th>
+            <th colspan="2" align="center"> Team 1 </th>
+            <th colspan="2" align="center"> Team 2 </th>
+        </thead>
+        <tbody>
+        {% for game in games %}
+            <tr {% if game.team_1[0].first_name == 'RESERVED' %} data-theme="dark" {% endif %}>
+                <td align="center" style="width: 8%;">{{ game.court.id }}</th>
+                <td style="width: 23%;"><strong>{{ game.team_1[0].first_name }}</strong>{{ " " + game.team_1[0].last_name }}</th>
+                <td style="width: 23%;"><strong>{{ game.team_1[1].first_name }}</strong>{{ " " + game.team_1[1].last_name }}</th>
+                <td style="width: 23%;"><strong>{{ game.team_2[0].first_name }}</strong>{{ " " + game.team_2[0].last_name }}</th>
+                <td style="width: 23%;"><strong>{{ game.team_2[1].first_name }}</strong>{{ " " + game.team_2[1].last_name }}</th>
+            </tr>
+        {% endfor %}
+        </tbody>
+    </table>
 <div>
\ No newline at end of file