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>
</head>
<body id="generalBody">
<body id="createAccountBody">
<div id="createAccountPanel">
<h2>Create An Account!</h2>
<p>Get started on your trophy-winning journey with your very own TrojanDestinyRL account!</p>

48
display/division_results.php
View File

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

4
display/general_results.php
View File

@ -194,7 +194,7 @@ session_start();
<label for="mainButton" id="mainButton">Main</label>
</div>
<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 -->
<?php
// Automatically write the months using a script
@ -210,7 +210,7 @@ session_start();
}
?>
</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 -->
<?php
// This uses the years we grabbed earlier and ensures we're only showing

5
scripts/results.js
View File

@ -42,8 +42,10 @@ function refreshDisplay() {
html += "<p>Top 10 Winners</p>"
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>";
// TODO;
@ -52,4 +54,5 @@ function refreshDisplay() {
document.getElementById("divisionDisplay").innerHTML = html;
}

3
scripts/tools.js
View File

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

9
styles/admin_nav.css
View File

@ -2,7 +2,6 @@
width: 800px;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#informationContentPanel {
@ -20,4 +19,12 @@
#dbManagementPanel {
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;
flex-direction: row;
justify-content: center;
width:100%;
width: 100%;
margin-top: 4%;
}
.dateSelector select {
@ -154,7 +155,6 @@
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 300px;
}
.lineImage {
@ -175,4 +175,41 @@
text-align: center;
font-style: italic;
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

@ -49,4 +49,14 @@
.subNavLink a {
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;
}
/* 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 {
width: 275px;
margin: 0;
margin: auto;
overflow: hidden;
}
@ -20,7 +20,6 @@
padding: 10%;
padding-top: 8%;
padding-bottom: 12%;
width:100%;
}
#inputArea {
@ -86,7 +85,7 @@
#submitButton {
display: flex;
justify-content: center;
margin:auto;
margin: auto;
align-items: center;
}

60
styles/primary.css
View File

@ -234,4 +234,64 @@ TEMPORARY
#giveawayLink:hover {
color:orange;
-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%;
}
}

38
styles/user_management.css
View File

@ -5,11 +5,9 @@
#userFormPanel {
margin: auto;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#createAccountPanel {
width: 375px;
}
#createAccountPanel {
margin: auto;
@ -306,4 +304,36 @@
#passwordChangeBody {
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;
}
}