Skip to content

Commit

Permalink
WebHost: Refactor tracker.py and tweak some layouts of tracker page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThePhar
ThePhar committed Nov 8, 2023
1 parent ced35c5 commit 195e0e0
Show file tree
Hide file tree
Showing 22 changed files with 2,839 additions and 2,127 deletions.
6 changes: 4 additions & 2 deletions WebHostLib/customserver.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,10 @@
class CustomClientMessageProcessor(ClientMessageProcessor):
ctx: WebHostContext

def _cmd_video(self, platform, user):
"""Set a link for your name in the WebHostLib tracker pointing to a video stream"""
def _cmd_video(self, platform: str, user: str):
"""Set a link for your name in the WebHostLib tracker pointing to a video stream.
Currently, only YouTube and Twitch platforms are supported.
"""
if platform.lower().startswith("t"): # twitch
self.ctx.video[self.client.team, self.client.slot] = "Twitch", user
self.ctx.save()
Expand Down
19 changes: 13 additions & 6 deletions WebHostLib/static/assets/trackerCommon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,20 @@ const adjustTableHeight = () => {
return;
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)`;
for (let i = 0; i < tableWrappers.length; i++) {
// Ensure we are starting from maximum size prior to calculation.
tableWrappers[i].style.height = null;
tableWrappers[i].style.maxHeight = null;

// Set as a reasonable height, but still allows the user to resize element if they desire.
const currentHeight = tableWrappers[i].offsetHeight;
const maxHeight = (window.innerHeight - upperDistance) / Math.min(tableWrappers.length, 4);
if (currentHeight > maxHeight) {
tableWrappers[i].style.height = `calc(${maxHeight}px - 1rem)`;
}

tableWrappers[i].style.maxHeight = `${currentHeight}px`;
}
};

Expand Down
141 changes: 76 additions & 65 deletions WebHostLib/static/styles/tracker.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,149 +7,160 @@
width: calc(100% - 1rem);
}

#tracker-wrapper a{
#tracker-wrapper a {
color: #234ae4;
text-decoration: none;
cursor: pointer;
}

.table-wrapper{
overflow-y: auto;
overflow-x: auto;
margin-bottom: 1rem;
}

#tracker-header-bar{
#tracker-header-bar {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: center;
line-height: 20px;
gap: 0.5rem;
margin-bottom: 1rem;
}

#tracker-header-bar .info{
#tracker-header-bar .info {
color: #ffffff;
padding: 2px;
flex-grow: 1;
align-self: center;
text-align: justify;
}

#tracker-navigation {
display: flex;
flex-wrap: wrap;
margin: 0 0.5rem 0.5rem 0.5rem;
user-select: none;
height: 2rem;
}

.tracker-navigation-bar {
display: flex;
background-color: #b0a77d;
border-radius: 4px;
}

.tracker-navigation-button {
display: flex;
justify-content: center;
align-items: center;
margin: 4px;
padding-left: 12px;
padding-right: 12px;
border-radius: 4px;
text-align: center;
font-size: 14px;
color: black !important;
font-weight: lighter;
}

.tracker-navigation-button:hover {
background-color: #e2eabb !important;
}

.tracker-navigation-button.selected {
background-color: rgb(220, 226, 189);
}

.table-wrapper {
overflow-y: auto;
overflow-x: auto;
margin-bottom: 1rem;
resize: vertical;
}

#search{
#search {
border: 1px solid #000000;
border-radius: 3px;
padding: 3px;
width: 200px;
margin-bottom: 0.5rem;
margin-right: 1rem;
}

#multi-stream-link{
margin-right: 1rem;
}

div.dataTables_wrapper.no-footer .dataTables_scrollBody{
div.dataTables_wrapper.no-footer .dataTables_scrollBody {
border: none;
}

table.dataTable{
table.dataTable {
color: #000000;
}

table.dataTable thead{
table.dataTable thead {
font-family: LexendDeca-Regular, sans-serif;
}

table.dataTable tbody, table.dataTable tfoot{
table.dataTable tbody, table.dataTable tfoot {
background-color: #dce2bd;
font-family: LexendDeca-Light, sans-serif;
}

table.dataTable tbody tr:hover, table.dataTable tfoot tr:hover{
table.dataTable tbody tr:hover, table.dataTable tfoot tr:hover {
background-color: #e2eabb;
}

table.dataTable tbody td, table.dataTable tfoot td{
table.dataTable tbody td, table.dataTable tfoot td {
padding: 4px 6px;
}

table.dataTable, table.dataTable.no-footer{
table.dataTable, table.dataTable.no-footer {
border-left: 1px solid #bba967;
width: calc(100% - 2px) !important;
font-size: 1rem;
}

table.dataTable thead th{
table.dataTable thead th {
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
top: 0;
}

table.dataTable thead th.upper-row{
table.dataTable thead th.upper-row {
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 36px;
top: 0;
}

table.dataTable thead th.lower-row{
table.dataTable thead th.lower-row {
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 22px;
top: 46px;
}

table.dataTable tbody td, table.dataTable tfoot td{
table.dataTable tbody td, table.dataTable tfoot td {
border: 1px solid #bba967;
}

table.dataTable tfoot td{
table.dataTable tfoot td {
font-weight: bold;
}

div.dataTables_scrollBody{
div.dataTables_scrollBody {
background-color: inherit !important;
}

table.dataTable .center-column{
table.dataTable .center-column {
text-align: center;
}

img.alttp-sprite {
img.icon-sprite {
height: auto;
max-height: 32px;
min-height: 14px;
}

.item-acquired{
.item-acquired {
background-color: #d3c97d;
}

#tracker-navigation {
display: inline-flex;
background-color: #b0a77d;
margin: 0.5rem;
border-radius: 4px;
}

.tracker-navigation-button {
display: block;
margin: 4px;
padding-left: 12px;
padding-right: 12px;
border-radius: 4px;
text-align: center;
font-size: 14px;
color: #000;
font-weight: lighter;
}

.tracker-navigation-button:hover {
background-color: #e2eabb !important;
}

.tracker-navigation-button.selected {
background-color: rgb(220, 226, 189);
}

@media all and (max-width: 1700px) {
table.dataTable thead th.upper-row{
position: -webkit-sticky;
Expand All @@ -159,19 +170,19 @@ img.alttp-sprite {
top: 0;
}

table.dataTable thead th.lower-row{
table.dataTable thead th.lower-row {
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 20px;
top: 37px;
}

table.dataTable, table.dataTable.no-footer{
table.dataTable, table.dataTable.no-footer {
font-size: 0.8rem;
}

img.alttp-sprite {
img.icon-sprite {
height: auto;
max-height: 24px;
min-height: 10px;
Expand All @@ -187,19 +198,19 @@ img.alttp-sprite {
top: 0;
}

table.dataTable thead th.lower-row{
table.dataTable thead th.lower-row {
position: -webkit-sticky;
position: sticky;
background-color: #b0a77d;
height: 19px;
top: 32px;
}

table.dataTable, table.dataTable.no-footer{
table.dataTable, table.dataTable.no-footer {
font-size: 0.6rem;
}

img.alttp-sprite {
img.icon-sprite {
height: auto;
max-height: 20px;
min-height: 10px;
Expand Down
Loading

0 comments on commit 195e0e0

Please sign in to comment.