From 08e4a27c0db7fc2867cce3eb6f80799148c03ba6 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <karan.jayachandra@nxp.com>
Date: Fri, 25 Jul 2025 15:30:07 +0200
Subject: Moved to a mobile friendly CSS framework

---
 app/templates/controls.j2 | 83 +++++++++++++++++++++++------------------------
 1 file changed, 41 insertions(+), 42 deletions(-)

(limited to 'app/templates/controls.j2')

diff --git a/app/templates/controls.j2 b/app/templates/controls.j2
index f67f745..a8cba89 100644
--- a/app/templates/controls.j2
+++ b/app/templates/controls.j2
@@ -1,47 +1,46 @@
 {% from "macros.j2" import court_button %}
-<div class="fixed-grid has-6-cols">
-    <div class="parent">
-    {% for court in courts %}
-        {{ court_button(court) }}
-    {% endfor %}
-    </div>
+<h3>Courts</h3>
+<div class="parent">
+{% for court in courts %}
+    {{ court_button(court) }}
+{% endfor %}
 </div>
-<div class="columns">
-    <div class="column">
-        <div class="select is-responsive">
-            <select name="levels">
-                <option>10 Levels</option>
-                <option>8 Levels</option>
-                <option>6 Levels</option>
-                <option>4 Levels</option>
-                <option>2 Levels</option>
-                <option>0 Levels</option>
-            </select>
-        </div>
-    </div>
-    <div class="column">
-        <div class="select is-responsive">
-            <select name="team">
-                <option>Random</option>
-                <option>Teams</option>
-            </select>
-        </div>
-    </div>
-    <div class="column">
-        <button class="button is-dark is-responsive" 
-                hx-post="/propose" 
-                hx-target="#games" 
-                hx-include="[name='levels'], [name='team']">Generate</button>
+<h3>Generation</h3>
+<div class="grid">
+    <div class="select is-responsive">
+        <select name="levels">
+            <option>10 Levels</option>
+            <option>8 Levels</option>
+            <option>6 Levels</option>
+            <option>4 Levels</option>
+            <option>2 Levels</option>
+            <option>0 Levels</option>
+        </select>
     </div>
-    <div class="column"></div>
-    <div class="column">
-        <button class="button is-dark is-responsive" 
-                hx-post="/confirm" 
-                hx-target="#games">Confirm</button>
-    </div>
-    <div class="column">
-        <button class="button is-dark is-responsive" 
-                hx-post="/reset" 
-                hx-target="#games">RESET!</button>
+    <div class="select is-responsive">
+        <select name="team">
+            <option>Random</option>
+            <option>Teams</option>
+        </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 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>
+    <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>
\ No newline at end of file
-- 
cgit v1.3.1