Taylor/trojans-trophy-room
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial workings of main page tournament display

Browse Source
This commit is contained in:
FractalParadigm 2025-03-13 19:00:11 -04:00
parent a590af9e3a
commit 63223d7fb6
3 changed files with 168 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
display/general_results.php
View File

@ -9,7 +9,6 @@ session_start();
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/styles/primary.css" />
<link rel="stylesheet" href="/styles/data.css" />
<link rel="stylesheet" href="/styles/data_display.css" />
<script src="/scripts/tools.js"></script>
<script src="/scripts/results.js"></script>
@ -116,10 +115,11 @@ session_start();
?>
<body id="resultsDisplayBody">
<div id="generalResultsDisplayPanel">
<div id="generalResultsDisplayPanel" style="display:block;">
<h2>General Information</h2>
<hr class="tableLine">
<p>&nbsp;</p>
<div id="infoNav"><p class="infoLink" onclick="toggleInformationDisplay();resizeIframe(parent.document.getElementById('dataFrame'));">Recent Tourney Results</p></div>
<p class="newLine">&nbsp;</p>
<hr class="tableLine newLine">
<div id="generalResultsTable">
<p class="generalResultsTableLeft">Number of registered users:</p>
<p class="generalResultsTableRight textBold"><?php echo $numUsers; ?></p>
@ -183,6 +183,30 @@ session_start();
<p>&nbsp;</p>
</div>
<div id="tourneyResultsDisplayPanel" style="display:none;">
<h2>Recent Tourney Results</h2>
<div id="infoNav"><p class="infoLink" onclick="toggleInformationDisplay();resizeIframe(parent.document.getElementById('dataFrame'));">General Information</p></div>
<p class="newLine"></p>
<div class="resultsNavPanelAllButton">
<input type="radio" id="allButton" name="resultsDivision" value="all" onclick="" checked="checked">
<label for="allButton" id="allButton">All</label>
</div>
<p class="newLine"></p>
<div class="resultsNavPanel">
<input type="radio" id="openButton" name="resultsDivision" value="open" onclick="">
<label for="openButton" id="openButton">Open</label>
<input type="radio" id="intermediateButton" name="resultsDivision" value="intermediate" onclick="">
<label for="intermediateButton" id="intermediateButton">Intermediate</label>
<input type="radio" id="mainButton" name="resultsDivision" value="main" onclick="">
<label for="mainButton" id="mainButton">Main</label>
</div>
<hr class="tableLine newLine">
<p> </p>
<div id="divisionDisplay">
</div>
</div>
<div id="divisionDisplayPanel">
<h2>Per-Division Results</h2>
<div class="divisionNavPanel">

14
scripts/results.js
View File

@ -55,4 +55,18 @@ function refreshDisplay() {
document.getElementById("divisionDisplay").innerHTML = html;
}
function toggleInformationDisplay() {
console.log("echo");
var infoDiv = document.getElementById("generalResultsDisplayPanel");
var tourneyDiv = document.getElementById("tourneyResultsDisplayPanel");
if (infoDiv.style.display == "block") {
infoDiv.style.display = "none";
tourneyDiv.style.display = "block";
} else if (infoDiv.style.display == "none") {
infoDiv.style.display = "block";
tourneyDiv.style.display = "none";
}
}

126
styles/data_display.css
View File

@ -28,6 +28,7 @@
flex-direction: row;
overflow: hidden;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
justify-content: center;
}
#resultsDisplayBody h2 {
@ -43,6 +44,15 @@
margin-right: 1%;
}
#tourneyResultsDisplayPanel {
width: 40%;
border: 1px solid black;
border-radius: 6px;
padding-left: 5%;
padding-right: 5%;
margin-right: 1%;
}
#generalResultsTable {
margin: auto;
}
@ -109,6 +119,96 @@
background-color: rgba(255, 165, 0, .6);
}
.resultsNavPanel {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
font-size: 0.8em;
}
.resultsNavPanel label, .resultsNavPanel input {
text-align: center;
align-items: center;
justify-content: center;
display: flex;
width: 100px;
height: 35px;
padding: 0;
cursor: pointer;
box-shadow: 0px 1px 3px;
}
.resultsNavPanel label {
border: 1px solid black;
border-radius: 3px;
z-index: 90;
margin: 1%;
}
.resultsNavPanel input[type="radio"] {
display: none;
}
.resultsNavPanel input[type="radio"]:checked + label {
background-color: rgba(0, 40, 255, .75);
box-shadow: 0 0 2px;
color: rgb(255, 255, 255);
font-weight: bold;
}
.resultsNavPanel label:hover {
background-color: rgba(255, 165, 0, .6);
}
.resultsNavPanelAllButton {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.resultsNavPanelAllButton label, .resultsNavPanelAllButton input {
text-align: center;
align-items: center;
justify-content: center;
display: flex;
width: 120px;
height: 40px;
padding: 0;
cursor: pointer;
box-shadow: 0px 1px 3px;
}
.resultsNavPanelAllButton label {
border: 1px solid black;
border-radius: 3px;
z-index: 90;
margin: 1%;
}
.resultsNavPanelAllButton input[type="radio"] {
display: none;
}
.resultsNavPanelAllButton input[type="radio"]:checked + label {
background-color: rgba(0, 40, 255, .75);
box-shadow: 0 0 2px;
color: rgb(255, 255, 255);
font-weight: bold;
}
.resultsNavPanelAllButton label:hover {
background-color: rgba(255, 165, 0, .6);
}
.resultsNavPanelAllButton {
text-align: center;
}
.dateSelector {
display: flex;
flex-direction: row;
@ -176,6 +276,32 @@
color: rgba(0, 0, 0, .35);
}
.infoLink {
text-decoration: none;
color: black;
border: 1px solid blue;
border-radius: 3px;
padding: 5px 10px;
text-align: center;
box-shadow: 0px 2px 4px;
}
#infoNav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.infoLink:hover {
color: black;
background-color: rgba(255, 165, 0, .6);
}
.infoLink:active {
box-shadow: 0px 0px 2px;
transform: translateY(2px);
}
@media only screen and (max-width: 480px) {