Make season page cards more compact

formula10.py

@@ -14,14 +14,11 @@ db.init_app(app)
 
 
 # TODO
-# - Sortable list to enter full race results (need 7 positions to calculate points),
+# - Sortable list to enter full race results (need 7 positions to calculate points) => remove from race page
-#   don't enter race result on guess page
 # - Move guessed place to leftmost column and display actual finishing position of driver instead
 # - Choose "place to guess" late before the race?
 # - Already show coming race in table, to give better feedback once a user has locked in a guess
-# - Set fixed sizes for left- and rightmost column in races table
+# - Fix the weird sizing everywhere when selecting only a single user, center the season card...
-# - Fix the weird sizing everywhere when selecting only a single user...
-# - Replace ALL absolute pixel values inside the templates
 
 
 @app.route("/")

templates/race.jinja

@@ -24,9 +24,9 @@
     <table class="table table-bordered table-sm table-responsive">
         <thead>
         <tr>
-            <th scope="col" rowspan="2" class="text-center">Race</th>
+            <th scope="col" rowspan="2" class="text-center" style="width: 200px;">Race</th>
             <th scope="col" colspan="{{ chosenusers | length }}" class="text-center">Call</th>
-            <th scope="col" rowspan="2" class="text-center">Result</th>
+            <th scope="col" rowspan="2" class="text-center" style="width: 200px;">Result</th>
         </tr>
         </thead>
 

templates/season.jinja

@@ -21,7 +21,6 @@
 
 {% block body %}
 
-    <h4 class="heading-text text-danger text-center">All fields (of a single user, excluding podiums) must be set or your inputs won't be saved!</h4>
 
     <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));">
         {% for user in chosenusers %}
@@ -44,33 +43,25 @@
                                                           "p2select", "P2 Constructor:") }}
                         </div>
 
-                        {# Most Overtakes #}
+                        {# Most Overtakes + DNFs #}
-                        <div class="mt-2">
+                        <div class="input-group mt-2">
                             {{ driver_select_with_preselect(currentselection.get(user.name).most_overtakes.abbr if user.name in currentselection else "",
                                                             "overtakeselect", "Most Overtakes:") }}
-                        </div>
-
-                        {# Most DNFs #}
-                        <div class="mt-2">
                             {{ driver_select_with_preselect(currentselection.get(user.name).most_dnfs.abbr if user.name in currentselection else "",
                                                             "dnfselect", "Most DNFs:") }}
                         </div>
 
-                        {# Most Gained #}
+                        {# Most Gained + Lost #}
-                        <div class="mt-2">
+                        <div class="input-group mt-2">
                             {{ driver_select_with_preselect(currentselection.get(user.name).most_gained.abbr if user.name in currentselection else "",
-                                                            "gainedselect", "Most Championship Positions gained:") }}
+                                                            "gainedselect", "Most WDC Places gained:") }}
-                        </div>
-
-                        {# Most Lost #}
-                        <div class="mt-2">
                             {{ driver_select_with_preselect(currentselection.get(user.name).most_lost.abbr if user.name in currentselection else "",
-                                                            "lostselect", "Most Championship Positions lost:") }}
+                                                            "lostselect", "Most WDC Places lost:") }}
                         </div>
 
                         {# Team-internal Winners #}
                         <h6 class="card-subtitle mt-2">Team-Internal Winners:</h6>
-                        <div class="grid mt-2" style="width: 450px; row-gap: 5px;">
+                        <div class="grid mt-2" style="width: 450px; row-gap: 0;">
                             {% for team in teams %}
                                 {% set driver_a_name = driverpairs.get(team.name)[0].name %}
                                 {% set driver_b_name = driverpairs.get(team.name)[1].name %}
@@ -103,7 +94,7 @@
 
                         {# Drivers with Podiums #}
                         <h6 class="card-subtitle mt-2">Drivers with Podium(s):</h6>
-                        <div class="grid mt-2" style="width: 450px; row-gap: 5px;">
+                        <div class="grid mt-2" style="width: 450px; row-gap: 0;">
                             {% for team in teams %}
                                 {% set driver_a_name = driverpairs.get(team.name)[0].name %}
                                 {% set driver_b_name = driverpairs.get(team.name)[1].name %}