From e384c9ed6d2b0f2c7677b9349d4705855b501f5d Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Sat, 25 Jul 2020 22:07:35 -0400 Subject: [PATCH] Tables now automatically resize themselves to fit page height --- WebHostLib/static/tracker.css | 5 +- WebHostLib/static/tracker.js | 21 ++- WebHostLib/templates/tracker.html | 244 +++++++++++++++--------------- 3 files changed, 145 insertions(+), 125 deletions(-) diff --git a/WebHostLib/static/tracker.css b/WebHostLib/static/tracker.css index 3ea8ae02..a8f9c03f 100644 --- a/WebHostLib/static/tracker.css +++ b/WebHostLib/static/tracker.css @@ -1,4 +1,4 @@ -#tracker-wrapper{ +#tracker-wrapper { display: flex; flex-direction: column; justify-content: space-between; @@ -8,8 +8,7 @@ .table-wrapper{ overflow-y: auto; overflow-x: auto; - margin-bottom: 2rem; - max-height: 425px; + margin-bottom: 1rem; } #tracker-header-bar{ diff --git a/WebHostLib/static/tracker.js b/WebHostLib/static/tracker.js index 8720aaf1..b2cc22e8 100644 --- a/WebHostLib/static/tracker.js +++ b/WebHostLib/static/tracker.js @@ -1,3 +1,17 @@ +const adjustTableHeight = () => { + const tablesContainer = document.getElementById('tables-container'); + const upperDistance = tablesContainer.getBoundingClientRect().top; + + const containerHeight = window.innerHeight - upperDistance; + tablesContainer.style.maxHeight = `calc(${containerHeight}px - 1rem)`; + + const tableWrappers = document.getElementsByClassName('table-wrapper'); + for(let i=0; i < tableWrappers.length; i++){ + const maxHeight = (window.innerHeight - upperDistance) / 2; + tableWrappers[i].style.maxHeight = `calc(${maxHeight}px - 1rem)`; + } +}; + window.addEventListener('load', () => { const tables = $(".table").DataTable({ paging: false, @@ -38,10 +52,15 @@ window.addEventListener('load', () => { setInterval(update, 30000); - window.addEventListener('resize', () => tables.draw()); + window.addEventListener('resize', () => { + adjustTableHeight(); + tables.draw() + }); $(".table-wrapper").scrollsync({ y_sync: true, x_sync: true }); + + adjustTableHeight(); }); diff --git a/WebHostLib/templates/tracker.html b/WebHostLib/templates/tracker.html index aa8f8fda..890c8528 100644 --- a/WebHostLib/templates/tracker.html +++ b/WebHostLib/templates/tracker.html @@ -16,131 +16,133 @@ {%- endfor -%}">Multistream {%- endif -%} - {% for team, players in inventory.items() %} -
- - - - - - {%- for name in tracking_names -%} - {%- if name in icons -%} - - {%- else -%} - - {%- endif -%} - {%- endfor -%} - - - - {%- for player, items in players.items() -%} - - - {%- if (team, loop.index) in video -%} - {%- if video[(team, loop.index)][0] == "Twitch" -%} - - {%- elif video[(team, loop.index)][0] == "Youtube" -%} - - {%- endif -%} - {%- else -%} - - {%- endif -%} - {%- for id in tracking_ids -%} - {%- if items[id] -%} - - {%- else -%} - - {%- endif -%} - {% endfor %} - - {%- endfor -%} - -
#Name - {{ name|e }} - {{ name|e }}
{{ loop.index }} - - {{ player_names[(team, loop.index)] }} - ▶️ - - {{ player_names[(team, loop.index)] }} - ▶️{{ player_names[(team, loop.index)] }} - {% if id in multi_items %}{{ items[id] }}{% else %}✔️{% endif %}
-
- {% endfor %} - - {% for team, players in checks_done.items() %} -
- - +
+ {% for team, players in inventory.items() %} +
+
+ - - - {% for area in ordered_areas %} - {% set colspan = 1 %} - {% if area in key_locations %} - {% set colspan = colspan + 1 %} - {% endif %} - {% if area in big_key_locations %} - {% set colspan = colspan + 1 %} - {% endif %} - {% if area in icons %} - - {%- else -%} - - {%- endif -%} - {%- endfor -%} - - - - {% for area in ordered_areas %} - - {% if area in key_locations %} - - {% endif %} - {% if area in big_key_locations %} - - {%- endif -%} - {%- endfor -%} - - - - {%- for player, checks in players.items() -%} - - - - {%- for area in ordered_areas -%} - {%- set checks_done = checks[area] -%} - {%- set checks_total = checks_in_area[area] -%} - {%- if checks_done == checks_total -%} - + + + {%- for name in tracking_names -%} + {%- if name in icons -%} + {%- else -%} - - {%- endif -%} - {%- if area in key_locations -%} - - {%- endif -%} - {%- if area in big_key_locations -%} - + {%- endif -%} {%- endfor -%} - {%- if activity_timers[(team, player)] -%} - - {%- else -%} - - {%- endif -%} - {%- endfor -%} - -
#Name - {{ area }}{{ area }}Last
Activity
- Checks - - Small Key - - Big Key -
{{ loop.index }}{{ player_names[(team, loop.index)]|e }} - {{ checks_done }}/{{ checks_total }}#Name + {{ name|e }} + {{ checks_done }}/{{ checks_total }}{{ inventory[team][player][small_key_ids[area]] }}{% if inventory[team][player][big_key_ids[area]] %}✔️{% endif %}{{ name|e }}{{ activity_timers[(team, player)] | render_timedelta }}None
-
- {% endfor %} + + + {%- for player, items in players.items() -%} + + {{ loop.index }} + {%- if (team, loop.index) in video -%} + {%- if video[(team, loop.index)][0] == "Twitch" -%} + + + {{ player_names[(team, loop.index)] }} + ▶️ + {%- elif video[(team, loop.index)][0] == "Youtube" -%} + + + {{ player_names[(team, loop.index)] }} + ▶️ + {%- endif -%} + {%- else -%} + {{ player_names[(team, loop.index)] }} + {%- endif -%} + {%- for id in tracking_ids -%} + {%- if items[id] -%} + + {% if id in multi_items %}{{ items[id] }}{% else %}✔️{% endif %} + {%- else -%} + + {%- endif -%} + {% endfor %} + + {%- endfor -%} + + + + {% endfor %} + + {% for team, players in checks_done.items() %} +
+ + + + + + {% for area in ordered_areas %} + {% set colspan = 1 %} + {% if area in key_locations %} + {% set colspan = colspan + 1 %} + {% endif %} + {% if area in big_key_locations %} + {% set colspan = colspan + 1 %} + {% endif %} + {% if area in icons %} + + {%- else -%} + + {%- endif -%} + {%- endfor -%} + + + + {% for area in ordered_areas %} + + {% if area in key_locations %} + + {% endif %} + {% if area in big_key_locations %} + + {%- endif -%} + {%- endfor -%} + + + + {%- for player, checks in players.items() -%} + + + + {%- for area in ordered_areas -%} + {%- set checks_done = checks[area] -%} + {%- set checks_total = checks_in_area[area] -%} + {%- if checks_done == checks_total -%} + + {%- else -%} + + {%- endif -%} + {%- if area in key_locations -%} + + {%- endif -%} + {%- if area in big_key_locations -%} + + {%- endif -%} + {%- endfor -%} + {%- if activity_timers[(team, player)] -%} + + {%- else -%} + + {%- endif -%} + + {%- endfor -%} + +
#Name + {{ area }}{{ area }}Last
Activity
+ Checks + + Small Key + + Big Key +
{{ loop.index }}{{ player_names[(team, loop.index)]|e }} + {{ checks_done }}/{{ checks_total }}{{ checks_done }}/{{ checks_total }}{{ inventory[team][player][small_key_ids[area]] }}{% if inventory[team][player][big_key_ids[area]] %}✔️{% endif %}{{ activity_timers[(team, player)] | render_timedelta }}None
+
+ {% endfor %} + {% endblock %}