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

Changed min/max sizes for mobile layout

Browse Source 
Automatically refreshes the iFrame when the screen is rotated - this forces the layout to refresh to the correct one
This commit is contained in:
FractalParadigm 2025-03-10 08:36:28 -04:00
parent b700c3eac5
commit df051508e2
8 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
admin/index.php
View File

@ -11,6 +11,12 @@ session_start();
<link rel="stylesheet" href="/styles/primary.css" />
<link rel="stylesheet" href="/styles/admin.css" />
<script src="/scripts/tools.js"></script>
<script>
// When the device is rotated, automatically refresh the frame
screen.orientation.addEventListener("change", (event) => {
document.getElementById("dataFrame").contentWindow.location.reload();
});
</script>
<title>ADMIN PANEL - Trojan's Trophy Room</title>
</head>

6
index.php
View File

@ -10,6 +10,12 @@ session_start();
<link rel="stylesheet" href="/styles/primary.css" />
<script src="/scripts/tools.js"></script>
<title>Trojan's Trophy Room</title>
<script>
// When the device is rotated, automatically refresh the frame
screen.orientation.addEventListener("change", (event) => {
document.getElementById("dataFrame").contentWindow.location.reload();
});
</script>
</head>
<body id="body">

2
styles/admin_nav.css
View File

@ -22,7 +22,7 @@
}
@media only screen and (max-width: 480px) {
@media only screen and (min-width: 360px) and (max-width: 1024px) {
#generalBody {
width: 300px;
}

2
styles/db_management.css
View File

@ -52,7 +52,7 @@
}
@media only screen and (max-width: 480px) {
@media only screen and (min-width: 360px) and (max-width: 1024px) {
.sqlOutput {
width: 275px;

2
styles/header.css
View File

@ -137,7 +137,7 @@
/* MOBILE */
@media only screen and (max-width: 480px) {
@media only screen and (min-width: 360px) and (max-width: 1024px) {
#headerLeft {
display:none;

6
styles/primary.css
View File

@ -241,12 +241,12 @@ TEMPORARY
/* MOBILE */
@media only screen and (max-width: 480px) {
@media only screen and (min-width: 360px) and (max-width: 1024px) {
html,body {
overflow-x: hidden;
}
#body {
width: 370px;
width: 360px;
margin: auto;
}
@ -258,7 +258,7 @@ TEMPORARY
border-radius: 8px;
background-color: rgba(255, 255, 255, .2);
width: 98%;
max-width: 370px;
max-width: 360px;
min-height: 0px;
padding-top: 20px;
padding-left: 0;

2
styles/user_management.css
View File

@ -313,7 +313,7 @@
}
@media only screen and (max-width: 480px) {
@media only screen and (min-width: 360px) and (max-width: 1024px) {
#createAccountPanel {
width: 275px;

6
user/user.php
View File

@ -43,6 +43,12 @@ try { // Try opening the SQL database connection
<link rel="stylesheet" href="/styles/primary.css" />
<link rel="stylesheet" href="/styles/user_management.css" />
<script src="/scripts/tools.js"></script>
<script>
// When the device is rotated, automatically refresh the frame
screen.orientation.addEventListener("change", (event) => {
document.getElementById("dataFrame").contentWindow.location.reload();
});
</script>
<title>My Account - Trojan's Trophy Room</title>
</head>