From f484ed027461cf130908c8b4bd67a9d7b5820a1d Mon Sep 17 00:00:00 2001 From: Chris Wilson Date: Thu, 23 Jul 2020 03:21:26 -0400 Subject: [PATCH] Overhaul of styles for DataTables, re-add Cookie Notice --- WebHostLib/static/layout.css | 2 +- WebHostLib/static/layout.js | 20 +++ WebHostLib/static/tablepage.css | 27 +++ WebHostLib/static/tracker.css | 51 +++--- WebHostLib/static/tracker.js | 42 +++++ WebHostLib/static/uploads.css | 8 - WebHostLib/static/uploads.js | 2 +- WebHostLib/templates/layout.html | 1 + WebHostLib/templates/tablepage.html | 13 +- WebHostLib/templates/tracker.html | 264 ++++++++++++---------------- WebHostLib/templates/uploads.html | 2 +- 11 files changed, 244 insertions(+), 188 deletions(-) create mode 100644 WebHostLib/static/layout.js create mode 100644 WebHostLib/static/tablepage.css create mode 100644 WebHostLib/static/tracker.js diff --git a/WebHostLib/static/layout.css b/WebHostLib/static/layout.css index dea8423b..3a6222e4 100644 --- a/WebHostLib/static/layout.css +++ b/WebHostLib/static/layout.css @@ -26,7 +26,7 @@ button:hover, input[type=submit]:hover{ /** Content styles */ .main-content{ - max-width: 800px; + max-width: 1000px; border-radius: 8px; background-color: #bbb288; padding: 0.5em 1.5rem 1.5rem;= diff --git a/WebHostLib/static/layout.js b/WebHostLib/static/layout.js new file mode 100644 index 00000000..fedf419d --- /dev/null +++ b/WebHostLib/static/layout.js @@ -0,0 +1,20 @@ +window.addEventListener('load', () => { + const cookieNoticeShown = localStorage.getItem('cookieNotice'); + if (cookieNoticeShown) { return; } + + const cookieNotice = document.createElement('div'); + cookieNotice.innerText = "This website uses cookies to store information about the games you play."; + cookieNotice.style.position = "fixed"; + cookieNotice.style.bottom = "0"; + cookieNotice.style.left = "0"; + cookieNotice.style.width = "100%"; + cookieNotice.style.lineHeight = "40px"; + cookieNotice.style.backgroundColor = "#c7cda5"; + cookieNotice.style.textAlign = "center"; + cookieNotice.style.cursor = "pointer"; + document.body.appendChild(cookieNotice); + cookieNotice.addEventListener('click', () => { + localStorage.setItem('cookieNotice', "1"); + document.body.removeChild(cookieNotice); + }); +}); diff --git a/WebHostLib/static/tablepage.css b/WebHostLib/static/tablepage.css new file mode 100644 index 00000000..da04ca67 --- /dev/null +++ b/WebHostLib/static/tablepage.css @@ -0,0 +1,27 @@ +table.dataTable{ + width: 100% !important; +} + +table.dataTable, table.dataTable.no-footer{ + border: none; + font-size: 1rem; + text-align: left; +} + +.dataTables_wrapper .dataTables_filter{ + float: none; + text-align: left; +} + +table.dataTable thead{ + background-color: #b0a77d; +} + +table.dataTable thead tr th{ + border: none; + padding: 5px; +} + +table.dataTable tbody tr{ + background-color: inherit; +} diff --git a/WebHostLib/static/tracker.css b/WebHostLib/static/tracker.css index 40eac3c7..9ebb80c2 100644 --- a/WebHostLib/static/tracker.css +++ b/WebHostLib/static/tracker.css @@ -1,35 +1,46 @@ -table.dataTable.table-sm > thead > tr > th :not(.sorting_disabled) { - padding: 1px; +#tracker-wrapper{ + display: flex; + flex-direction: column; } -.dataTable > thead > tr > th[class*="sort"]:before, -.dataTable > thead > tr > th[class*="sort"]:after { - content: "" !important; +.table-wrapper{ + max-height: 400px; + overflow-y: auto; + overflow-x: auto; + width: 100%; } -.dataTable > thead > tr > th :not(.sorting_disabled) { - padding-right: 0 !important; +div.dataTables_wrapper.no-footer .dataTables_scrollBody{ + border: none; } -th { - padding: 1px !important; +table.dataTable{ + margin-top: 0.5rem; + margin-bottom: 2rem; } -table { - width: 100% !important; +div.dataTables_scrollBody{ + background-color: inherit !important; +} + +table.dataTable .center-column{ + text-align: center; } img.alttp-sprite { - height: 32px; - min-width: 32px; - object-fit: contain; + height: auto; + max-height: 32px; + min-height: 14px; } -/* this is specific to the tracker right now */ -@media all and (max-width: 1700px) { +@media all and (max-width: 1600px) { img.alttp-sprite { - height: 16px; - min-width: 16px; - object-fit: contain; + height: auto; + max-height: 16px; + min-height: 10px; } -} \ No newline at end of file +} + +.item-acquired{ + background-color: green; +} diff --git a/WebHostLib/static/tracker.js b/WebHostLib/static/tracker.js new file mode 100644 index 00000000..8cf5ae5f --- /dev/null +++ b/WebHostLib/static/tracker.js @@ -0,0 +1,42 @@ +let tables = null; + +window.onload = () => { + tables = $(".table").DataTable({ + paging: false, + info: false, + scrollCollapse: true, + + // DO NOT use the scrollX or scrollY options. They cause DataTables to split the thead from + // the tbody and render two separate tables. + }); + + const update = () => { + const target = $("
"); + target.load("/tracker/{{ room.tracker }}", function (response, status) { + if (status === "success") { + target.find(".table").each(function (i, new_table) { + const new_trs = $(new_table).find("tbody>tr"); + const old_table = tables.eq(i); + const topscroll = $(old_table.settings()[0].nScrollBody).scrollTop(); + const leftscroll = $(old_table.settings()[0].nScrollBody).scrollLeft(); + old_table.clear(); + old_table.rows.add(new_trs).draw(); + $(old_table.settings()[0].nScrollBody).scrollTop(topscroll); + $(old_table.settings()[0].nScrollBody).scrollLeft(leftscroll); + }); + } else { + console.log("Failed to connect to Server, in order to update Table Data."); + console.log(response); + } + }) + } + + setInterval(update, 30000); + + $(".dataTables_scrollBody").scrollsync({ + y_sync: true, + x_sync: true + }); + + window.onresize = () => tables.draw(); +} diff --git a/WebHostLib/static/uploads.css b/WebHostLib/static/uploads.css index 315a91ae..47f8baf2 100644 --- a/WebHostLib/static/uploads.css +++ b/WebHostLib/static/uploads.css @@ -14,11 +14,3 @@ #upload-form{ display: none; } - -#room-list{ - font-size: 1rem; -} - -#room-list ul{ - vertical-align: top; -} diff --git a/WebHostLib/static/uploads.js b/WebHostLib/static/uploads.js index 61058117..81f6efc9 100644 --- a/WebHostLib/static/uploads.js +++ b/WebHostLib/static/uploads.js @@ -7,7 +7,7 @@ window.onload = () => { document.getElementById('upload-form').submit(); }); - $(".table").DataTable({ + $("#uploads-table").DataTable({ "paging": false, "ordering": true, "order": [[ 3, "desc" ]], diff --git a/WebHostLib/templates/layout.html b/WebHostLib/templates/layout.html index a5d0b633..38bb7b35 100644 --- a/WebHostLib/templates/layout.html +++ b/WebHostLib/templates/layout.html @@ -3,6 +3,7 @@ + {% block head %} Berserker's Multiworld {% endblock %} diff --git a/WebHostLib/templates/tablepage.html b/WebHostLib/templates/tablepage.html index 3d3b55db..12dd4ddf 100644 --- a/WebHostLib/templates/tablepage.html +++ b/WebHostLib/templates/tablepage.html @@ -1,6 +1,11 @@ {% extends "layout.html" %} {% block head %} - - - -{% endblock %} \ No newline at end of file + + + +{% endblock %} diff --git a/WebHostLib/templates/tracker.html b/WebHostLib/templates/tracker.html index 22c1b175..4d841166 100644 --- a/WebHostLib/templates/tracker.html +++ b/WebHostLib/templates/tracker.html @@ -3,172 +3,130 @@ {{ super() }} Multiworld Tracker for Room {{ room.id }} - + + {% endblock %} {% block body %} - -
+
{% for team, players in inventory.items() %} - - - - - - {% for name in tracking_names %} - {% if name in icons %} - - {% else %} - - {% endif %} - {% endfor %} - - - - {% for player, items in players.items() %} +
+
#Name - {{ name|e }} - {{ name|e }}
+ - - {% if (team, loop.index) in video %} - - {% else %} - - {% endif %} - {% for id in tracking_ids %} - {% if items[id] %} - + + + {% for name in tracking_names %} + {% if name in icons %} + {% else %} - + {% endif %} {% endfor %} - {% endfor %} - -
{{ loop.index }} - - {{ player_names[(team, loop.index)] }} - ▶️{{ player_names[(team, loop.index)] }} - {% if id in multi_items %}{{ items[id] }}{% else %}✔️{% endif %}#Name + {{ name|e }} + {{ name|e }}
+ + + {% for player, items in players.items() %} + + {{ loop.index }} + {% if (team, loop.index) in video %} + + + {{ player_names[(team, loop.index)] }} + ▶️ + {% 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 %} +
+
#Name - {{ area }}{{ area }}Last
Activity
Checks - Small KeyBig 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 %}
+ + + + + {% 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 %} - {% 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
{{ activity_timers[(team, player)] | render_timedelta }}None
+ + +
{% endfor %} {% endblock %} diff --git a/WebHostLib/templates/uploads.html b/WebHostLib/templates/uploads.html index f97c0a14..397dec16 100644 --- a/WebHostLib/templates/uploads.html +++ b/WebHostLib/templates/uploads.html @@ -22,7 +22,7 @@ {% if rooms %}

Your Rooms:

- +
Seed