ui enhancements

api/static/style.css

@@ -1,10 +1,8 @@
 #header {
     display: flex;
-    max-width: 600px;
 }
 
 #header>div {
-    flex: 1;
     padding: 10px;
     border: 2px solid grey;
 }
@@ -31,9 +29,23 @@
 }
 
 #points_summary_row {
-    border-top: 1px solid black;
+    border-top: 4px double black;
 }
 
 table {
     border-collapse: collapse;
 }
+
+.active_player_highlight {
+    background: grey;
+    color: white;
+}
+
+.player_name_highlight {
+    background: grey;
+    color: white;
+}
+
+.standings_round_final_row {
+    border-bottom: 1px solid black;
+}

api/templates/status.html

@@ -20,8 +20,10 @@
         {% if 'active_player' not in status %}
             <h1>Hra sa skončila.</h1>
         {% else %}
+            <div id="wrapper">
+                <div id="table">
                     <div id="header">
-                <div>
+                        <div {% if player == status['active_player'] %}class="active_player_highlight"{% endif %}>
                             <p id="active_player" >Na ťahu je: {{ players[status['active_player']] }}</p>
                         </div>
                     
@@ -56,10 +58,8 @@
                         </div>
                         
                     </div>
-
                     <hr>
-            <div id="wrapper">
-                <div id="table">
+
                     {% if action == 'guess' %}
                         <h1>Zadaj tip:</h1>
                         {% include "_guess_form.html" %}
@@ -155,7 +155,7 @@
                         {% if series %}
                             {% for round in series %}
                                 {% if round %}
-                                    <tr>
+                                    <tr {% if loop.index == 7 %}class="standings_round_final_row"{% endif %} >
                                         {% for player in round %}
                                             <td class="points">{{ player }}</td>
                                         {% endfor %}