From 09f55e840275b4b2a86cc7c9d3928f660532faac Mon Sep 17 00:00:00 2001
From: Elijah Steres <elijahsteres@gmail.com>
Date: Fri, 1 Jan 2021 16:24:02 -0500
Subject: [PATCH] css updates and template fixes

---
 main_controller.py    |  8 +-------
 static/games_page.css | 27 ++++++++++++++++-----------
 templates/game.html   |  6 +++---
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/main_controller.py b/main_controller.py
index 6975daf..2191b75 100644
--- a/main_controller.py
+++ b/main_controller.py
@@ -127,13 +127,7 @@ def update_loop():
             data_to_send.append({
                 'timestamp' : timestamp,
                 'league' : game_states[timestamp]['leagueoruser'] if game_states[timestamp]['is_league'] else '',
-                'html' : template.render( 
-                    state=game_states[timestamp], 
-                    base_filled="/static/img/base_filled.png", 
-                    base_empty="/static/img/base_empty.png", 
-                    out_out="/static/img/out_out.png", 
-                    out_in="/static/img/out_in.png"
-                )
+                'html' : template.render(state=game_states[timestamp])
             })
 
         socketio.emit("states_update", data_to_send)
diff --git a/static/games_page.css b/static/games_page.css
index dbbaf2e..e12b372 100644
--- a/static/games_page.css
+++ b/static/games_page.css
@@ -33,11 +33,10 @@ div, button {
 .container {
     display: grid;
     grid-template-columns: repeat(3, minmax(500px, 1fr));
-    grid-template-rows: 330px;
     grid-gap: 50px 30px; /*space between rows, then columns*/
     align-items: center;
     justify-items: center;
-    grid-auto-rows: 300px;
+    grid-auto-rows: 335px;
     grid-auto-flow: row;
 }
 
@@ -172,8 +171,8 @@ h2 {
     grid-template-columns: 60% 40%;
     grid-template-areas:
       "teams info" "players info" "update update";
-    grid-template-rows: 100px;
-    grid-row-gap: 14px;
+    grid-template-rows: 90px;
+    grid-row-gap: 8px;
     grid-column-gap: 10px;
     flex: 1;
 }
@@ -193,6 +192,7 @@ h2 {
 
 .team_name {
     overflow: hidden;
+    white-space: nowrap;
 }
 
 .info {
@@ -265,30 +265,35 @@ h2 {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    align-items: center;
-    height: 100%;
-    padding-right: 50px;
+    align-items: start;
+    height: max-content;
 }
 
 .player {
     display: flex;
-    justify-content: space-between;
+    align-items: end;
     width: 100%;
-    max-width: 250px;
+    flex-direction: column;
 }
 
 .player_name {
     overflow: hidden;
-    margin-left: 15px;
+    text-align: start;
+    white-space: nowrap;
+    width: 95%;
 }
 
 .update {
     grid-area: update;
     margin-right: 10px;
     margin-top: 10px;
+    min-height: 50px;
 }
 
-
+.player_type {
+    width: 100%;
+    text-align: start;
+}
 
 .update_emoji, .update_text {
     display: inline
diff --git a/templates/game.html b/templates/game.html
index 17e0176..cc52467 100644
--- a/templates/game.html
+++ b/templates/game.html
@@ -1,8 +1,8 @@
 {% macro base(number) -%}
-{% if state.bases[number] %}{{base_filled}}{% else %}{{base_empty}}{% endif %}
+{% if state.bases[number] %}/static/img/base_filled.png{% else %}/static/img/base_empty.png{% endif %}
 {%- endmacro %}
 {% macro out(number) -%}
-{% if number <= state.outs %}{{out_out}}{% else %}{{out_in}}{% endif %}
+{% if number <= state.outs %}/static/img/out_out.png{% else %}/static/img/out_in.png{% endif %}
 {%- endmacro %}
 
 <div class="header">
@@ -52,6 +52,6 @@
     </div>
 </div>
 <div class="footer">
-    <div class="batting">{% if state.display_top_of_inning == true %}{{ state.away_name }}{% else %}{{ state.home_name }}{% endif %}</div>
+    <div class="batting">{% if state.display_top_of_inning == true %}{{ state.away_name }}{% else %}{{ state.home_name }}{% endif %} batting.</div>
     <div class="leagueoruser">{{ state.leagueoruser }}</div>
 </div>
\ No newline at end of file