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

Improved mobile layouts

Browse Source
This commit is contained in:
FractalParadigm 2025-03-10 12:39:39 -04:00
parent cbc2bef7f0
commit 2e7dd6bc0d
11 changed files with 237 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
admin/admin_nav.php
View File

@ -6,9 +6,20 @@
<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/admin.css" />
<link rel="stylesheet" href="/styles/admin_nav.css" />
<!-- <link rel="stylesheet" href="/styles/admin_nav.css" /> -->
<script src="/scripts/tools.js"></script>
<script>verifyPageInFrame()</script>
<script>
var head = document.getElementsByTagName('HEAD')[0];
var link = document.createElement('link');
link.rel = "stylesheet";
if (parent.window.screen.width >= 360 && window.screen.width <= 1024) {
link.href = "/styles/admin_nav_mobile.css";
} else {
link.href = "/styles/admin_nav.css";
}
head.appendChild(link);
</script>
<title>TROJAN'S GENERAL DATA SHIT</title>
</head>
@ -17,7 +28,7 @@
<h3>USER MANAGEMENT</h3>
<div class="navPanel" id="userManagementPanel">
<a href="user_management/user_form.php" target="dataFrame" class="navLink">CREATE USER</a>
<a href="user_management/create_safe_admin.php" target="dataFrame" class="navLink">CREATE PERMA-ADMIN</a>
<!-- <a href="user_management/create_safe_admin.php" target="dataFrame" class="navLink">CREATE PERMA-ADMIN</a> -->
</div>
<p>&nbsp;</p>
<h3>DATA MANAGEMENT</h3>
@ -29,7 +40,7 @@
<h3>!!!!! DANGER ZONE !!!!!</h3>
<div class="navPanel" id="dbManagementPanel">
<a href="db_management/conn_check.php" target="dataFrame" class="navLink">CHECK DB CONNECTION</a>
<a href="db_management/reinitialise.php" target="dataFrame" class="navLink">REINITIALISE DB</a>
<!-- <a href="db_management/reinitialise.php" target="dataFrame" class="navLink">REINITIALISE DB</a> -->
</div>
<p>&nbsp;</p>
</div>

8
admin/data_management/game_form.php
View File

@ -70,6 +70,12 @@ try { // Try opening the SQL database connection
<script src="/scripts/game_management.js"></script>
<script src="/scripts/tools.js"></script>
<script>verifyPageInFrame()</script>
<script>
if (parent.window.screen.width >= 360 && window.screen.width <= 1024) {
// If mobile, get the mobile version
window.location.replace("/admin/data_management/game_form_mobile.php");
}
</script>
<title>GAME ADDING FORM</title>
<script>
$( function() {
@ -97,7 +103,7 @@ try { // Try opening the SQL database connection
</script>
</head>
<body id="generalBody">
<body id="gameFormBody">
<div id="gameFormPanel">
<form id="userForm" action="add_game.php" method="POST" autocomplete="off">
<h2>ADD GAME RESULTS</h2>

168
admin/data_management/game_form_mobile.php Normal file
View File

@ -0,0 +1,168 @@
<?php
session_start();
include("../db_config.php"); // Include database stuff
try { // Try opening the SQL database connection
$conn = new PDO("mysql:host=$servername; dbname=$dbName", $dbUsername, $dbPassword);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Grab the list of users from the user list
// We will also grab all the people that have been registered/won before
$sqlGetUserData = $conn->prepare("SELECT username FROM " . $userTableName . "");
$sqlGetTourneyData = $conn->prepare("SELECT tournamentName,winner1,winner2,winner3,winner4 FROM " . $tournamentDataTableName . "");
// Execute SQL query
$sqlGetUserData->execute();
$sqlGetTourneyData->execute();
// Get results from the USERS table
$results = $sqlGetUserData->fetchAll(PDO::FETCH_ASSOC);
// Create new arrays to store values
$userList = array();
$tourneyList = array();
// Move results to their own array, easier to convert for Javascript
foreach ($results as $result) {
$userList[] = $result["username"];
}
// Get results from the TOURNEY table
$results = $sqlGetTourneyData->fetchAll(PDO::FETCH_ASSOC);
// Move results to their own array, easier to convert for Javascript
foreach ($results as $result) {
$userList[] = $result["winner1"];
$userList[] = $result["winner2"];
$userList[] = $result["winner3"];
$userList[] = $result["winner4"];
$tourneyList[] = $result["tournamentName"];
}
// Remove duplicate entries
$userList = array_unique($userList);
// Sort the array to alphabetical order
sort($userList);
} catch (PDOException $e) { // failed connection
echo "Connection failed: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html>
<head>
<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/admin.css" />
<link rel="stylesheet" href="/styles/admin_nav.css" />
<link rel="stylesheet" href="/styles/game_management.css" />
<link rel="stylesheet" href="/styles/mobile_forms.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script src="/scripts/game_management.js"></script>
<script src="/scripts/tools.js"></script>
<script>verifyPageInFrame()</script>
<script>
if (parent.window.screen.width > 1024) {
// If not mobile, get the desktop version
window.location.replace("/admin/data_management/game_form.php");
}
</script>
<title>GAME ADDING FORM</title>
<script>
$( function() {
var userList = <?php echo json_encode($userList); ?>;
$(".playerInput").autocomplete({
source: userList,
});
} );
$( function() {
var tournamentList = <?php echo json_encode($tourneyList); ?>;
$("#tourneyName").autocomplete({
source: tournamentList,
// Change the direction of the autoselector if it's gonna hit the bottom
position: {
collision: "flip"
},
// This only allows listed items to be chosen
change: function (event, ui) {
if(!ui.item) {
$("#tourneyName").val("");
}
}
});
} );
</script>
</head>
<body id="gameFormBody">
<div id="gameFormPanel">
<form id="userForm" action="add_game.php" method="POST" autocomplete="off">
<h2>ADD GAME RESULTS</h2>
<p>Add a recently-played game and save the results!</p>
<hr>
<p></p>
<div id="textInputArea">
<label for="gameName" class="newLine">Game name</label>
<input type="text" id="gameName" name="gameName" maxlength="100" tabindex="1" required>
<p></p>
<p class="newLine"></p>
<label for="gameName" class="newLine">Game date</label>
<input type="date" id="gameDate" name="gameDate" max="<?php echo date("Y-m-d"); ?>" tabindex="1" required>
<p></p>
<p class="newLine"></p>
</div>
<div class="optionsArea">
<label for="numPlayers">Players:</label>
<select id="numPlayers" name="numPlayers" tabindex="1" onchange="changePlayers()">
<option value="1">1v1</option>
<option value="2" selected="selected">2v2</option>
<option value="3">3v3</option>
<option value="4">4v4</option>
</select>
<label for="winners" class="showTeamSelector">Winning team:</label>
<select id="winners" name="winners" class="showTeamSelector" tabindex="1">
<option value="blue">Blue</option>
<option value="orange">Orange</option>
</select>
</div>
<p class="newLine"></p>
<div id="playerDataInputArea">
<table id="playerData">
</table>
<script>addPlayers();</script>
<p class="newLine"></p>
</div>
<p class="newLine"></p>
<div class="optionsArea">
<p class="newLine">If this game was part of a tournament, select it below</p>
<input type="text" name="tourneyName" id="tourneyName" maxlength="150" tabindex="4">
<p class="newLine">If you have uploaded a replay of this game to <a href="#" onclick="redirect('ballchasing', 'https://ballchasing.com')" class="plainLinkBlue">ballchasing.com</a>, enter the ID code below.</p>
<input type="text" name="ballchasingID" id="ballchasingID" maxlength="100" tabindex="4">
<p class="newLine"></p>
<p>If you have any notes about the game, leave them below</p>
<textarea name="notes" id="notes" tabindex="4"></textarea>
</div>
<p class="newLine"></p>
<div id="submitButtonDiv">
<p class="newLine"></p>
<input type="submit" value="Submit" id="submitButton" tabindex="4">
</div>
<p class="newLine"></p>
</form>
</div>
</body>
</html>

6
admin/data_management/tourney_form.php
View File

@ -68,11 +68,7 @@ try { // Try opening the SQL database connection
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script>
if (parent.window.screen.width >= 360 && window.screen.width <= 1024) {
//var head = document.getElementsByTagName('HEAD')[0];
//var link = document.createElement('link');
//link.rel = "stylesheet";
//link.href = "/styles/mobile_forms.css";
//head.appendChild(link);
// If mobile, get the mobile version
window.location.replace("/admin/data_management/tourney_form_mobile.php");
}
</script>

6
admin/data_management/tourney_form_mobile.php
View File

@ -67,6 +67,12 @@ try { // Try opening the SQL database connection
<script>verifyPageInFrame()</script>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script>
if (parent.window.screen.width > 1024) {
// If not mobile, get the desktop version
window.location.replace("/admin/data_management/tourney_form.php");
}
</script>
<title>TOURNAMENT ADDING FORM</title>
<script>
$( function() {

2
scripts/tools.js
View File

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

2
styles/admin_nav.css
View File

@ -1,6 +1,6 @@
#generalBody {
width: 800px;
margin: 0;
margin: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

22
styles/admin_nav_mobile.css Normal file
View File

@ -0,0 +1,22 @@
#generalBody {
width: 300px;
margin: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#informationContentPanel {
margin: auto;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 15px;
flex-grow: 1;
flex-shrink: 1;
}
#informationContentPanel h3,h4,h5 {
text-align: center;
}
#dbManagementPanel {
gap: 2%;
}

9
styles/game_management.css
View File

@ -1,14 +1,15 @@
#gameFormPanel {
width: 500px;
min-height: 1000px;
}
#gameFormPanel {
margin: auto;
text-align: center;
}
#gameFormBody {
width: 800px;
margin: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#textInputArea {
padding-left: 10px;
display: flex;

13
styles/mobile_forms.css
View File

@ -1,4 +1,3 @@
#tourneyFormPanel {
width: 300px;
margin: auto;
@ -11,4 +10,14 @@
#playerDataInputArea {
width: 98%;
}
}
#gameFormPanel {
width: 340px;
margin: auto;
}
#gameFormBody {
width: 340px;
margin: auto;
}

2
styles/tourney_management.css
View File

@ -7,7 +7,7 @@
#tourneyFormBody {
width: 800px;
margin: 0;
margin: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}