Merge pull request #96 from esSteres/master
Make css and html templates better
This commit is contained in:
commit
14bb2f7ea6
|
@ -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)
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue
Block a user