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

Fix thead not sticking properly in chromium-based browsers, restore scroll-sync

This commit is contained in:
Chris Wilson 2020-07-25 17:24:23 -04:00
parent 5cd5223ae0
commit 1d22c7fb97
4 changed files with 69 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
WebHostLib/static/tablepage.css
View File

@ -14,6 +14,10 @@ table.dataTable, table.dataTable.no-footer{
text-align: left;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{
background-image: none;
}
table.dataTable thead{
background-color: #b0a77d;
}
@ -26,3 +30,7 @@ table.dataTable thead tr th{
table.dataTable tbody tr{
background-color: inherit;
}
table.dataTable tbody tr:hover{
background-color: #e2eabb;
}

64
WebHostLib/static/tracker.css
View File

@ -12,21 +12,23 @@
max-height: 425px;
}
#tracker-header-bar{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#search{
width: 200px;
height: 20px;
margin-bottom: 0.5rem;
}
.table-wrapper table tbody tr:hover{
background-color: #e2eabb;
}
div.dataTables_wrapper.no-footer .dataTables_scrollBody{
border: none;
}
table.dataTable tbody th, table.dataTable tbody td{
table.dataTable tbody td{
padding: 4px 6px;
}
@ -36,13 +38,27 @@ table.dataTable, table.dataTable.no-footer{
font-size: 1rem;
}
table.dataTable thead{
table.dataTable thead th{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
top: 0;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{
background-image: none;
table.dataTable thead th.upper-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 36px;
top: 0;
}
table.dataTable thead th.lower-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 22px;
top: 46px;
}
table.dataTable tbody td{
@ -68,6 +84,22 @@ img.alttp-sprite {
}
@media all and (max-width: 1700px) {
table.dataTable thead th.upper-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 27px;
top: 0;
}
table.dataTable thead th.lower-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 20px;
top: 37px;
}
table.dataTable, table.dataTable.no-footer{
font-size: 0.8rem;
}
@ -80,6 +112,22 @@ img.alttp-sprite {
}
@media all and (max-width: 1400px) {
table.dataTable thead th.upper-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 22px;
top: 0;
}
table.dataTable thead th.lower-row{
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 19px;
top: 32px;
}
table.dataTable, table.dataTable.no-footer{
font-size: 0.6rem;
}

2
WebHostLib/static/tracker.js
View File

@ -40,7 +40,7 @@ window.addEventListener('load', () => {
window.addEventListener('resize', () => tables.draw());
$(".dataTables_scrollBody").scrollsync({
$(".table-wrapper").scrollsync({
y_sync: true,
x_sync: true
});

8
WebHostLib/templates/tracker.html
View File

@ -86,7 +86,7 @@
{% set colspan = colspan + 1 %}
{% endif %}
{% if area in icons %}
<th colspan="{{ colspan }}" class="center-column">
<th colspan="{{ colspan }}" class="center-column upper-row">
<img class="alttp-sprite" src="{{ icons[area] }}" alt="{{ area }}"></th>
{% else %}
<th colspan="{{ colspan }}" class="center-column">{{ area }}</th>
@ -96,16 +96,16 @@
</tr>
<tr>
{% for area in ordered_areas %}
<th class="center-column">
<th class="center-column lower-row">
<img class="alttp-sprite" src="{{ icons["Chest"] }}" alt="Checks">
</th>
{% if area in key_locations %}
<th class="center-column">
<th class="center-column lower-row">
<img class="alttp-sprite" src="{{ icons["Small Key"] }}" alt="Small Key">
</th>
{% endif %}
{% if area in big_key_locations %}
<th class="center-column">
<th class="center-column lower-row">
<img class="alttp-sprite" src="{{ icons["Big Key"] }}" alt="Big Key">
</th>
{% endif %}