Merge pull request #96 from esSteres/master

Make css and html templates better
This commit is contained in:
Sakimori 2021-01-01 16:26:45 -05:00 committed by GitHub
commit 14bb2f7ea6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 21 deletions

View File

@ -127,13 +127,7 @@ def update_loop():
data_to_send.append({ data_to_send.append({
'timestamp' : timestamp, 'timestamp' : timestamp,
'league' : game_states[timestamp]['leagueoruser'] if game_states[timestamp]['is_league'] else '', 'league' : game_states[timestamp]['leagueoruser'] if game_states[timestamp]['is_league'] else '',
'html' : template.render( 'html' : template.render(state=game_states[timestamp])
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"
)
}) })
socketio.emit("states_update", data_to_send) socketio.emit("states_update", data_to_send)

View File

@ -33,11 +33,10 @@ div, button {
.container { .container {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(500px, 1fr)); grid-template-columns: repeat(3, minmax(500px, 1fr));
grid-template-rows: 330px;
grid-gap: 50px 30px; /*space between rows, then columns*/ grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center; align-items: center;
justify-items: center; justify-items: center;
grid-auto-rows: 300px; grid-auto-rows: 335px;
grid-auto-flow: row; grid-auto-flow: row;
} }
@ -172,8 +171,8 @@ h2 {
grid-template-columns: 60% 40%; grid-template-columns: 60% 40%;
grid-template-areas: grid-template-areas:
"teams info" "players info" "update update"; "teams info" "players info" "update update";
grid-template-rows: 100px; grid-template-rows: 90px;
grid-row-gap: 14px; grid-row-gap: 8px;
grid-column-gap: 10px; grid-column-gap: 10px;
flex: 1; flex: 1;
} }
@ -193,6 +192,7 @@ h2 {
.team_name { .team_name {
overflow: hidden; overflow: hidden;
white-space: nowrap;
} }
.info { .info {
@ -265,30 +265,35 @@ h2 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: start;
height: 100%; height: max-content;
padding-right: 50px;
} }
.player { .player {
display: flex; display: flex;
justify-content: space-between; align-items: end;
width: 100%; width: 100%;
max-width: 250px; flex-direction: column;
} }
.player_name { .player_name {
overflow: hidden; overflow: hidden;
margin-left: 15px; text-align: start;
white-space: nowrap;
width: 95%;
} }
.update { .update {
grid-area: update; grid-area: update;
margin-right: 10px; margin-right: 10px;
margin-top: 10px; margin-top: 10px;
min-height: 50px;
} }
.player_type {
width: 100%;
text-align: start;
}
.update_emoji, .update_text { .update_emoji, .update_text {
display: inline display: inline

View File

@ -1,8 +1,8 @@
{% macro base(number) -%} {% 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 %} {%- endmacro %}
{% macro out(number) -%} {% 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 %} {%- endmacro %}
<div class="header"> <div class="header">
@ -52,6 +52,6 @@
</div> </div>
</div> </div>
<div class="footer"> <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 class="leagueoruser">{{ state.leagueoruser }}</div>
</div> </div>