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

Created mobile layouts for main page, login, and account creation

Browse Source
This commit is contained in:
FractalParadigm 2025-03-09 22:27:06 -04:00
parent 7c4eb02f25
commit daa03d64d3
12 changed files with 224 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
create_account.php
View File

@ -48,7 +48,7 @@ try { // Try opening the SQL database connection
<script>var userList = <?php echo json_encode($userList); ?>; // Convert array from PHP to JS</script> <script>var userList = <?php echo json_encode($userList); ?>; // Convert array from PHP to JS</script>
</head> </head>
<body id="generalBody"> <body id="createAccountBody">
<div id="createAccountPanel"> <div id="createAccountPanel">
<h2>Create An Account!</h2> <h2>Create An Account!</h2>
<p>Get started on your trophy-winning journey with your very own TrojanDestinyRL account!</p> <p>Get started on your trophy-winning journey with your very own TrojanDestinyRL account!</p>

44
display/division_results.php
View File

@ -93,29 +93,33 @@ try { // Try opening the SQL database connection
<title>GENERAL DATA</title> <title>GENERAL DATA</title>
</head> </head>
<body id="divisionResultsFrame"> <?php
<div class="divisionResultsTable"> // This latch variable will trigger if we have any data to display
<?php // If we have nothing to display, we'll tell them that
// This latch variable will trigger if we have any data to display $contentLatch = 0;
// If we have nothing to display, we'll tell them that for ($i = 0; $i < 10; $i++) {
$contentLatch = 0; // Check if we have any data
for ($i = 0; $i < 10; $i++) { if (isset($names[$i])) {
// Check if we have any data $name = $names[$i];
if (isset($names[$i])) { $numWins = $wins[$i];
$name = $names[$i]; echo "<body id=\"divisionResultsFrame\">";
$numWins = $wins[$i]; echo "<div class=\"divisionResultsTable\">";
echo "<p class=\"divisionResultsTableLeft\"><a href=\"/user/" . $name . "\" onclick=\"redirect('this', '/user/" . $name . "')\" class=\"plainLinkBlack\">$name</a></p>"; echo "<p class=\"divisionResultsTableLeft\"><a href=\"/user/" . $name . "\" onclick=\"redirect('this', '/user/" . $name . "')\" class=\"plainLinkBlack\">$name</a></p>";
echo "<p class=\"divisionResultsTableRight\">$numWins</p>"; echo "<p class=\"divisionResultsTableRight\">$numWins</p>";
$contentLatch = 1; echo "</div>";
} echo "</html>";
} $contentLatch = 1;
if ($contentLatch == 0) {
echo "<p class=\"noContent\">Nothing yet! Check back later!</p>";
} }
}
if ($contentLatch == 0) {
echo "<body id=\"divisionResultsFrame\" style=\"margin:auto;\">";
echo "<div class=\"divisionResultsTable\">";
echo "<p class=\"noContent\">Nothing yet! Check back later!</p>";
echo "</div>";
echo "</html>";
}
?> ?>
</div>
</body>
</html> </html>

4
display/general_results.php
View File

@ -194,7 +194,7 @@ session_start();
<label for="mainButton" id="mainButton">Main</label> <label for="mainButton" id="mainButton">Main</label>
</div> </div>
<div class="dateSelector"> <div class="dateSelector">
<select size="1" name="month" id="month" onchange="refreshDisplay()"> <select size="1" name="month" id="month" onchange="refreshDisplay();">
<option value="all">All</option> <!-- all option --> <option value="all">All</option> <!-- all option -->
<?php <?php
// Automatically write the months using a script // Automatically write the months using a script
@ -210,7 +210,7 @@ session_start();
} }
?> ?>
</select> </select>
<select size="1" name="year" id="year" onchange="refreshDisplay()"> <select size="1" name="year" id="year" onchange="refreshDisplay();">
<option value="all">All</option> <!-- all option --> <option value="all">All</option> <!-- all option -->
<?php <?php
// This uses the years we grabbed earlier and ensures we're only showing // This uses the years we grabbed earlier and ensures we're only showing

5
scripts/results.js
View File

@ -43,7 +43,9 @@ function refreshDisplay() {
html += "<hr class=\"tableLineLightCentre\">"; html += "<hr class=\"tableLineLightCentre\">";
html += "<iframe src=\"/display/division_results.php?division=" + currentDivision + "&month=" + document.getElementById("month").value + "&year=" + document.getElementById("year").value + "\" name=\"divisionFrame\" class=\"divisionFrame\" id=\"divisionFrame\" onload=\"resizeIframe(this);\"></iframe>";
html += "<iframe src=\"/display/division_results.php?division=" + currentDivision + "&month=" + document.getElementById("month").value + "&year=" + document.getElementById("year").value + "\" name=\"divisionFrame\" class=\"divisionFrame\" id=\"divisionFrame\" onload=\"resizeIframe(this);var obj=parent.document.getElementById('dataFrame');resizeIframe(obj);\"></iframe>";
html += "</div>"; html += "</div>";
// TODO; // TODO;
@ -52,4 +54,5 @@ function refreshDisplay() {
document.getElementById("divisionDisplay").innerHTML = html; document.getElementById("divisionDisplay").innerHTML = html;
} }

3
scripts/tools.js
View File

@ -1,6 +1,7 @@
function resizeIframe(obj) { function resizeIframe(obj) {
console.log(obj);
obj.style.height = "200px"; obj.style.height = "200px";
obj.style.width = "100px"; obj.style.width = "500px";
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px'; obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
obj.style.width = obj.contentWindow.document.documentElement.scrollWidth + 'px'; obj.style.width = obj.contentWindow.document.documentElement.scrollWidth + 'px';
} }

9
styles/admin_nav.css
View File

@ -2,7 +2,6 @@
width: 800px; width: 800px;
margin: 0; margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} }
#informationContentPanel { #informationContentPanel {
@ -21,3 +20,11 @@
#dbManagementPanel { #dbManagementPanel {
gap: 2%; gap: 2%;
} }
@media only screen and (max-width: 480px) {
#generalBody {
width: 300px;
}
}

41
styles/data_display.css
View File

@ -114,7 +114,8 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
width:100%; width: 100%;
margin-top: 4%;
} }
.dateSelector select { .dateSelector select {
@ -154,7 +155,6 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
width: 300px;
} }
.lineImage { .lineImage {
@ -176,3 +176,40 @@
font-style: italic; font-style: italic;
color: rgba(0, 0, 0, .35); color: rgba(0, 0, 0, .35);
} }
@media only screen and (max-width: 480px) {
#resultsDisplayBody {
flex-direction: column;
width: 330px;
align-items: center;
margin: auto;
}
#generalResultsDisplayPanel {
order: 2;
width: 92%;
margin-right: 0;
padding-left: 2%;
padding-right: 2%;
margin-top: 5%;
}
#divisionDisplayPanel {
order: 1;
width: 94%;
margin-left: 0;
padding-left: 1%;
padding-right: 1%;
}
.divisionPanel img {
width: 25%;
}
}

10
styles/db_management.css
View File

@ -50,3 +50,13 @@
.subNavLink a { .subNavLink a {
margin: 10px !important; margin: 10px !important;
} }
@media only screen and (max-width: 480px) {
.sqlOutput {
width: 275px;
border: none;
}
}

36
styles/header.css
View File

@ -134,3 +134,39 @@
scale: 1.05; scale: 1.05;
} }
/* MOBILE */
@media only screen and (max-width: 480px) {
#headerLeft {
display:none;
}
#headerRight {
display:none;
}
#headerCentre {
width:100%;
}
.header {
font-size: 100%;
}
#discordImage {
height: 40px;
margin-top: 10px;
}
#twitchImage {
height: 40px;
margin-top: 10px;
}
#youtubeImage {
height: 40px;
margin-top: 10px;
}
}

5
styles/login.css
View File

@ -1,6 +1,6 @@
#loginBody { #loginBody {
width: 275px; width: 275px;
margin: 0; margin: auto;
overflow: hidden; overflow: hidden;
} }
@ -20,7 +20,6 @@
padding: 10%; padding: 10%;
padding-top: 8%; padding-top: 8%;
padding-bottom: 12%; padding-bottom: 12%;
width:100%;
} }
#inputArea { #inputArea {
@ -86,7 +85,7 @@
#submitButton { #submitButton {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin:auto; margin: auto;
align-items: center; align-items: center;
} }

60
styles/primary.css
View File

@ -235,3 +235,63 @@ TEMPORARY
color:orange; color:orange;
-webkit-text-stroke: 1px black; -webkit-text-stroke: 1px black;
} }
/* MOBILE */
@media only screen and (max-width: 480px) {
html,body {
overflow-x: hidden;
}
#body {
width: 370px;
margin: auto;
}
#contentFrame {
display: flex;
flex-direction: column;
margin: auto;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, .2);
width: 98%;
max-width: 370px;
min-height: 0px;
padding-top: 20px;
padding-left: 0;
padding-right: 0;
padding-bottom: 40px;
box-shadow: 0px 0px 2px;
}
#contentFrame h1,
h2,
h3,
h4 {
text-align: center;
}
.subNavLink {
margin-top: 4%;
padding: 8px;
padding-left: 20px;
padding-right: 20px;
}
.backgroundImage {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 15%;
text-align: center;
z-index: -1;
opacity: 0.05;
max-width: 96%;
}
}

36
styles/user_management.css
View File

@ -5,11 +5,9 @@
#userFormPanel { #userFormPanel {
margin: auto; margin: auto;
text-align: center; text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} }
#createAccountPanel {
width: 375px;
}
#createAccountPanel { #createAccountPanel {
margin: auto; margin: auto;
@ -307,3 +305,35 @@
#passwordChangeBody { #passwordChangeBody {
display: flex; display: flex;
} }
#createAccountBody {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 350px;
margin: auto;
}
@media only screen and (max-width: 480px) {
#createAccountPanel {
width: 275px;
}
#createAccountBody {
width: 275px;
}
#userForm input[type="password"] {
margin: 2% 2%;
width: 170px;
}
#userForm input[type="text"] {
margin: 2% 2%;
width: 170px;
}
#displayPassword {
padding: 0 0 0 5px;
}
}