monorail
/
Archipelago
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Overhaul of styles for DataTables, re-add Cookie Notice

This commit is contained in:
Chris Wilson 2020-07-23 03:21:26 -04:00
parent da38029ee7
commit f484ed0274
11 changed files with 244 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
WebHostLib/static/layout.css
View File

@ -26,7 +26,7 @@ button:hover, input[type=submit]:hover{
/** Content styles */ /** Content styles */
.main-content{ .main-content{
max-width: 800px; max-width: 1000px;
border-radius: 8px; border-radius: 8px;
background-color: #bbb288; background-color: #bbb288;
padding: 0.5em 1.5rem 1.5rem;= padding: 0.5em 1.5rem 1.5rem;=

20
WebHostLib/static/layout.js Normal file
View File

@ -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);
});
});

27
WebHostLib/static/tablepage.css Normal file
View File

@ -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;
}

51
WebHostLib/static/tracker.css
View File

@ -1,35 +1,46 @@
table.dataTable.table-sm > thead > tr > th :not(.sorting_disabled) { #tracker-wrapper{
padding: 1px; display: flex;
flex-direction: column;
} }
.dataTable > thead > tr > th[class*="sort"]:before, .table-wrapper{
.dataTable > thead > tr > th[class*="sort"]:after { max-height: 400px;
content: "" !important; overflow-y: auto;
overflow-x: auto;
width: 100%;
} }
.dataTable > thead > tr > th :not(.sorting_disabled) { div.dataTables_wrapper.no-footer .dataTables_scrollBody{
padding-right: 0 !important; border: none;
} }
th { table.dataTable{
padding: 1px !important; margin-top: 0.5rem;
margin-bottom: 2rem;
} }
table { div.dataTables_scrollBody{
width: 100% !important; background-color: inherit !important;
}
table.dataTable .center-column{
text-align: center;
} }
img.alttp-sprite { img.alttp-sprite {
height: 32px; height: auto;
min-width: 32px; max-height: 32px;
object-fit: contain; min-height: 14px;
} }
/* this is specific to the tracker right now */ @media all and (max-width: 1600px) {
@media all and (max-width: 1700px) {
img.alttp-sprite { img.alttp-sprite {
height: 16px; height: auto;
min-width: 16px; max-height: 16px;
object-fit: contain; min-height: 10px;
} }
} }
.item-acquired{
background-color: green;
}

42
WebHostLib/static/tracker.js Normal file
View File

@ -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 = $("<div></div>");
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();
}

8
WebHostLib/static/uploads.css
View File

@ -14,11 +14,3 @@
#upload-form{ #upload-form{
display: none; display: none;
} }
#room-list{
font-size: 1rem;
}
#room-list ul{
vertical-align: top;
}

2
WebHostLib/static/uploads.js
View File

@ -7,7 +7,7 @@ window.onload = () => {
document.getElementById('upload-form').submit(); document.getElementById('upload-form').submit();
}); });
$(".table").DataTable({ $("#uploads-table").DataTable({
"paging": false, "paging": false,
"ordering": true, "ordering": true,
"order": [[ 3, "desc" ]], "order": [[ 3, "desc" ]],

1
WebHostLib/templates/layout.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("layout.css") }}" /> <link rel="stylesheet" type="text/css" href="{{ static_autoversion("layout.css") }}" />
<script type="application/ecmascript" src="{{ static_autoversion("layout.js") }}"></script>
{% block head %} {% block head %}
<title>Berserker's Multiworld</title> <title>Berserker's Multiworld</title>
{% endblock %} {% endblock %}

13
WebHostLib/templates/tablepage.html
View File

@ -1,6 +1,11 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block head %} {% block head %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.21/datatables.min.css"/> <link rel="stylesheet"
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.21/datatables.min.js"></script> type="text/css"
<script src="{{ static_autoversion("jquery.scrollsync.js") }}"></script> href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.21/sc-2.0.2/sp-1.1.1/datatables.min.css"
{% endblock %} />
<script type="text/javascript"
src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.21/sc-2.0.2/sp-1.1.1/datatables.min.js"
></script>
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("tablepage.css") }}" />
{% endblock %}

264
WebHostLib/templates/tracker.html
View File

@ -3,172 +3,130 @@
{{ super() }} {{ super() }}
<title>Multiworld Tracker for Room {{ room.id }}</title> <title>Multiworld Tracker for Room {{ room.id }}</title>
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("tracker.css") }}"/> <link rel="stylesheet" type="text/css" href="{{ static_autoversion("tracker.css") }}"/>
<script> <script type="application/ecmascript" src="{{ static_autoversion("jquery.scrollsync.js") }}"></script>
window.onload = () => { <script type="application/ecmascript" src="{{ static_autoversion("tracker.js") }}"></script>
let tables = $(".table").DataTable({
"paging": false,
"ordering": true,
"info": false,
"dom": "t",
"scrollY": "39vh",
"scrollCollapse": true,
});
$('#searchbox').keyup(function () {
tables.search($(this).val()).draw();
});
function update() {
var target = $("<div></div>");
target.load("/tracker/{{ room.tracker }}", function (response, status) {
if (status === "success") {
target.find(".table").each(function (i, new_table) {
var new_trs = $(new_table).find("tbody>tr");
var old_table = tables.eq(i);
var topscroll = $(old_table.settings()[0].nScrollBody).scrollTop();
var 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).resize(function () {
tables.draw();
});
setTimeout(
tables.draw, {# this fixes the top header misalignment, for some reason #}
500
);
}
</script>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<input id="searchbox" class="form-control" type="text" placeholder="Search" /> <div id="tracker-wrapper">
<div>
{% for team, players in inventory.items() %} {% for team, players in inventory.items() %}
<table class="table table-striped table-bordered table-hover table-sm"> <div class="table-wrapper">
<thead class="thead-dark"> <table class="table unique-item-table">
<tr> <thead>
<th>#</th>
<th>Name</th>
{% for name in tracking_names %}
{% if name in icons %}
<th style="text-align: center">
<img class="alttp-sprite" src="{{ icons[name] }}" alt="{{ name|e }}">
</th>
{% else %}
<th>{{ name|e }}</th>
{% endif %}
{% endfor %}
</tr>
</thead>
<tbody>
{% for player, items in players.items() %}
<tr> <tr>
<td class="table-info">{{ loop.index }}</td> <th>#</th>
{% if (team, loop.index) in video %} <th>Name</th>
<td class="table-info"> {% for name in tracking_names %}
<a target="_blank" href="https://www.twitch.tv/{{ video[(team, loop.index)][1] }}"> {% if name in icons %}
{{ player_names[(team, loop.index)] }} <th class="center-column">
▶️</a></td> <img class="alttp-sprite" src="{{ icons[name] }}" alt="{{ name|e }}">
{% else %} </th>
<td class="table-info">{{ player_names[(team, loop.index)] }}</td>
{% endif %}
{% for id in tracking_ids %}
{% if items[id] %}
<td style="text-align: center" class="table-success">
{% if id in multi_items %}{{ items[id] }}{% else %}✔️{% endif %}</td>
{% else %} {% else %}
<td></td> <th class="center-column">{{ name|e }}</th>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</tr> </tr>
{% endfor %} </thead>
</tbody> <tbody>
</table> {% for player, items in players.items() %}
<tr>
<td>{{ loop.index }}</td>
{% if (team, loop.index) in video %}
<td>
<a target="_blank" href="https://www.twitch.tv/{{ video[(team, loop.index)][1] }}">
{{ player_names[(team, loop.index)] }}
▶️</a></td>
{% else %}
<td>{{ player_names[(team, loop.index)] }}</td>
{% endif %}
{% for id in tracking_ids %}
{% if items[id] %}
<td class="center-column item-acquired">
{% if id in multi_items %}{{ items[id] }}{% else %}✔️{% endif %}</td>
{% else %}
<td></td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endfor %} {% endfor %}
{% for team, players in checks_done.items() %} {% for team, players in checks_done.items() %}
<table class="table table-striped table-bordered table-hover table-sm"> <div class="table-wrapper">
<thead class="thead-dark"> <table class="table non-unique-item-table">
<tr> <thead>
<th rowspan="2">#</th> <tr>
<th rowspan="2">Name</th> <th rowspan="2">#</th>
{% for area in ordered_areas %} <th rowspan="2">Name</th>
{% set colspan = 1 %} {% for area in ordered_areas %}
{% if area in key_locations %} {% set colspan = 1 %}
{% set colspan = colspan + 1 %} {% if area in key_locations %}
{% endif %} {% set colspan = colspan + 1 %}
{% if area in big_key_locations %} {% endif %}
{% set colspan = colspan + 1 %} {% if area in big_key_locations %}
{% endif %} {% set colspan = colspan + 1 %}
{% if area in icons %} {% endif %}
<th colspan="{{ colspan }}" style="text-align: center"> {% if area in icons %}
<img class="alttp-sprite" src="{{ icons[area] }}" alt="{{ area }}"></th> <th colspan="{{ colspan }}" class="center-column">
{% else %} <img class="alttp-sprite" src="{{ icons[area] }}" alt="{{ area }}"></th>
<th colspan="{{ colspan }}">{{ area }}</th> {% else %}
{% endif %} <th colspan="{{ colspan }}" class="center-column">{{ area }}</th>
{% endfor %} {% endif %}
<th rowspan="2">Last<br>Activity</th> {% endfor %}
</tr> <th rowspan="2">Last<br>Activity</th>
<tr> </tr>
{% for area in ordered_areas %} <tr>
<th style="text-align: center"><img class="alttp-sprite" src="{{ icons["Chest"] }}" alt="Checks"> {% for area in ordered_areas %}
</th> <th class="center-column">
{% if area in key_locations %} <img class="alttp-sprite" src="{{ icons["Chest"] }}" alt="Checks">
<th style="text-align: center"><img class="alttp-sprite" </th>
src="{{ icons["Small Key"] }}" alt="Small Key"></th> {% if area in key_locations %}
{% endif %} <th class="center-column">
{% if area in big_key_locations %} <img class="alttp-sprite" src="{{ icons["Small Key"] }}" alt="Small Key">
<th style="text-align: center"><img class="alttp-sprite" </th>
src="{{ icons["Big Key"] }}" alt="Big Key"></th> {% endif %}
{% endif %} {% if area in big_key_locations %}
{% endfor %} <th class="center-column">
</tr> <img class="alttp-sprite" src="{{ icons["Big Key"] }}" alt="Big Key">
</thead> </th>
<tbody> {% endif %}
{% for player, checks in players.items() %} {% endfor %}
<tr> </tr>
<td class="table-info">{{ loop.index }}</td> </thead>
<td class="table-info">{{ player_names[(team, loop.index)]|e }}</td> <tbody>
{% for area in ordered_areas %} {% for player, checks in players.items() %}
{% set checks_done = checks[area] %} <tr>
{% set checks_total = checks_in_area[area] %} <td>{{ loop.index }}</td>
{% if checks_done == checks_total %} <td>{{ player_names[(team, loop.index)]|e }}</td>
<td style="text-align: center" class="table-success"> {% for area in ordered_areas %}
{{ checks_done }}/{{ checks_total }}</td> {% set checks_done = checks[area] %}
{% else %} {% set checks_total = checks_in_area[area] %}
<td style="text-align: center">{{ checks_done }}/{{ checks_total }}</td> {% if checks_done == checks_total %}
{% endif %} <td class="item-acquired center-column">
{% if area in key_locations %} {{ checks_done }}/{{ checks_total }}</td>
<td>{{ inventory[team][player][small_key_ids[area]] }}</td> {% else %}
{% endif %} <td class="center-column">{{ checks_done }}/{{ checks_total }}</td>
{% if area in big_key_locations %} {% endif %}
<td>{% if inventory[team][player][big_key_ids[area]] %}✔️{% endif %}</td> {% if area in key_locations %}
{% endif %} <td class="center-column">{{ inventory[team][player][small_key_ids[area]] }}</td>
{% endif %}
{% if area in big_key_locations %}
<td class="center-column">{% if inventory[team][player][big_key_ids[area]] %}✔️{% endif %}</td>
{% endif %}
{% endfor %}
{% if activity_timers[(team, player)] %}
<td>{{ activity_timers[(team, player)] | render_timedelta }}</td>
{% else %}
<td>None</td>
{% endif %}
</tr>
{% endfor %} {% endfor %}
{% if activity_timers[(team, player)] %} </tbody>
<td class="table-info">{{ activity_timers[(team, player)] | render_timedelta }}</td> </table>
{% else %} </div>
<td class="table-warning">None</td>{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %} {% endfor %}
</div> </div>
{% endblock %} {% endblock %}

2
WebHostLib/templates/uploads.html
View File

@ -22,7 +22,7 @@
{% if rooms %} {% if rooms %}
<p>Your Rooms:</p> <p>Your Rooms:</p>
<table class="table table-striped table-bordered table-hover table-sm"> <table id="uploads-table" class="table">
<thead> <thead>
<tr> <tr>
<th>Seed</th> <th>Seed</th>