From d2ab9051851a3b1ab7fb86e04253c775c513d8e1 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Fri, 16 Feb 2024 15:30:00 +0100
Subject: [PATCH] Frontend improvements

---
 templates/race.jinja  | 15 +++++++---
 templates/users.jinja | 67 ++++++++++++++++++++++++-------------------
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/templates/race.jinja b/templates/race.jinja
index f6bd238..b145df1 100644
--- a/templates/race.jinja
+++ b/templates/race.jinja
@@ -6,12 +6,15 @@
 
 {% block navbar_center %}
     <div class="dropdown">
-        <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown"
+                aria-expanded="false">
             {{ chosenusername }}
         </button>
         <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="/race/Everyone">Everyone</a></li>
-            <li><hr class="dropdown-divider"></li>
+            <li>
+                <hr class="dropdown-divider">
+            </li>
             {% for user in users %}
                 <li><a class="dropdown-item" href="/race/{{ user.name }}">{{ user.name }}</a></li>
             {% endfor %}
@@ -25,7 +28,11 @@
         <thead>
         <tr>
             <th scope="col" rowspan="2" class="text-center" style="width: 200px;">Race</th>
-            <th scope="col" colspan="{{ chosenusers | length }}" class="text-center">Call</th>
+
+            {% if chosenusers | length > 0 %}
+                <th scope="col" colspan="{{ chosenusers | length }}" class="text-center">Call</th>
+            {% endif %}
+
             <th scope="col" rowspan="2" class="text-center" style="width: 200px;">Result</th>
         </tr>
         </thead>
@@ -37,7 +44,7 @@
             <td>&nbsp;</td>
 
             {% for user in chosenusers %}
-                <td class="text-center text-nowrap">{{ user.name }}</td>
+                <td class="text-center text-nowrap" style="min-width: 100px;">{{ user.name }}</td>
             {% endfor %}
 
             <td>&nbsp;</td>
diff --git a/templates/users.jinja b/templates/users.jinja
index 454bba5..f4d81bf 100644
--- a/templates/users.jinja
+++ b/templates/users.jinja
@@ -13,7 +13,8 @@
             <form action="/adduser" method="post">
                 <div class="input-group">
                     <div class="form-floating">
-                        <input type="text" class="form-control" id="select-add-user" name="select-add-user" placeholder="Username:">
+                        <input type="text" class="form-control" id="select-add-user" name="select-add-user"
+                               placeholder="Username:">
                         <label for="select-add-user">Username:</label>
                     </div>
 
@@ -23,41 +24,47 @@
         </div>
     </div>
 
-    <div class="card mt-2">
-        <div class="card-body">
-            <h5 class="card-title">Registered Users</h5>
+    {% if users | length > 0 %}
+        <div class="card mt-2">
+            <div class="card-body">
+                <h5 class="card-title">Registered Users</h5>
 
-            <ul class="list-group list-group-flush">
-                {% for user in users %}
-                    <li class="list-group-item">{{ user.name }}</li>
-                {% endfor %}
-            </ul>
+                <ul class="list-group list-group-flush">
+                    {% for user in users %}
+                        <li class="list-group-item">{{ user.name }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
-    </div>
 
-    <div class="card mt-2">
-        <div class="card-body">
-            <h5 class="card-title">Delete User</h5>
+        <div class="card mt-2">
+            <div class="card-body">
+                <h5 class="card-title">Delete User</h5>
 
-            <form action="/deleteuser" method="post">
-                <div class="input-group">
-                    <select class="form-control form-select" aria-label="select-delete-user" name="select-delete-user">
-                        <option selected="selected">Select User</option>
-                        {% for user in users %}
-                            <option value="{{ user.name }}">{{ user.name }}</option>
-                        {% endfor %}
-                    </select>
+                <form action="/deleteuser" method="post">
+                    <div class="input-group">
+                        <select class="form-control form-select" aria-label="select-delete-user"
+                                name="select-delete-user">
+                            <option selected="selected" disabled="disabled" hidden="hidden">Select User</option>
+                            {% for user in users %}
+                                <option value="{{ user.name }}">{{ user.name }}</option>
+                            {% endfor %}
+                        </select>
 
-                    <input type="submit" class="form-control btn btn-danger" value="Delete" style="max-width: 200px;">
-                </div>
+                        <input type="submit" class="form-control btn btn-danger" value="Delete"
+                               style="max-width: 200px;">
+                    </div>
 
-                <div class="form-text">
-                    "Deleting" a user just hides it from the user interface without deleting any inputs, your "pERsoNaL
-                    DaTa" belongs to ME now.<br>
-                    Re-adding a user with the same name will "restore" it. That doesn't mean you're allowed to remove everyone though.
-                </div>
-            </form>
+                    <div class="form-text">
+                        "Deleting" a user just hides it from the user interface without deleting any inputs, your
+                        "pERsoNaL
+                        DaTa" belongs to ME now.<br>
+                        Re-adding a user with the same name will "restore" it. That doesn't mean you're allowed to
+                        remove everyone though.
+                    </div>
+                </form>
+            </div>
         </div>
-    </div>
+    {% endif %}
 
 {% endblock body %}