Fixed mobile scaling issues

This commit is contained in:
Thomas G 2022-06-19 21:08:50 +10:00
parent 2e424293c1
commit 21b753cc4e
11 changed files with 144 additions and 65 deletions

View File

@ -8,6 +8,7 @@
<meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/MORBLOXlogo.png" property="og:image"/>
<meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="MORBLOX.png"/>
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
@ -20,12 +21,12 @@
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
<a class="navbarbutton" href="catalog.html">Catalog</a>
<a class="navbarbutton" href="build.html">Build</a>
<a class="navbarbutton" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

View File

@ -8,6 +8,7 @@
<meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/MORBLOXlogo.png" property="og:image"/>
<meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="MORBLOX.png"/>
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
@ -20,12 +21,12 @@
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
<a class="navbarbutton" href="catalog.html">Catalog</a>
<a class="navbarbutton" href="build.html">Build</a>
<a class="navbarbutton" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

View File

@ -10,6 +10,7 @@
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="MORBLOX.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
@ -21,12 +22,12 @@
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
<a class="navbarbutton" href="catalog.html">Catalog</a>
<a class="navbarbutton" href="build.html">Build</a>
<a class="navbarbutton" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

View File

@ -11,6 +11,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="MORBLOX.png"/>
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
@ -20,12 +21,12 @@
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
<a class="navbarbutton" href="catalog.html">Catalog</a>
<a class="navbarbutton" href="build.html">Build</a>
<a class="navbarbutton" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

View File

@ -1,8 +1,10 @@
#alert {
height: fit-content;
margin: 0px;
padding-top: 1px;
padding-bottom: 1px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
padding-left: 5px;
width: 100%;
text-align: center;
background: linear-gradient(#f07575 10%, #e13b3b 49%, #d22 50%, #de2323 100%);
@ -10,6 +12,7 @@
.navbar {
height: 40px;
margin: 0px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
@ -28,9 +31,9 @@
.navbarlogincontainer {
position: relative;
padding-right: 10px;
margin-right: 0px;
margin-right: 3%;
margin-left: auto;
float: right;
float: inline-end;
top: 11px;
}
.navbarbutton {
@ -48,10 +51,11 @@
height: 25px;
margin: 0px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
display: inline-table;
padding-top: 3px;
vertical-align: middle;
padding-bottom: 3px;
width: 100%;
line-height: normal;
color: rgb(255, 255, 255);
@ -77,11 +81,11 @@ body {
}
.content {
color: black;
min-height: 300px;
max-width: 1000px;
margin: auto;
padding-left: 5px;
padding-right: 5px;
margin-left: 1px;
margin-right: 0px;
margin-top: 0px;
background-color: white;
padding-bottom: 5px;
padding-top: 5px;
@ -91,8 +95,14 @@ body {
}
footer {
text-align: center;
max-width: 1000px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
background-color: rgb(179, 179, 179);
min-height: 400px;
min-height: fit-content;
margin: auto;
}
p,h1 {
margin: 0px;

70
main.js
View File

@ -1,6 +1,12 @@
window.addEventListener('resize', function() {
var logo_full = document.getElementById("logo_full")
var logo_small = document.getElementById("logo_small")
var smallbtn = document.getElementById("smallbtn1")
var smallbtn0 = document.getElementById("smallbtn0")
var smallbtn2 = document.getElementById("smallbtn2")
var smallbtn3 = document.getElementById("smallbtn3")
var smallbtn1 = document.getElementById("smallbtn4")
var smallbtn5 = document.getElementById("smallbtn5")
var viewport_width = window.innerWidth;
if (viewport_width < 900) {
logo_full.className = "invisible";
@ -9,30 +15,82 @@ window.addEventListener('resize', function() {
logo_small.className = "invisible";
logo_full.className = "";
}
if (viewport_width < 600) {
smallbtn.className = "invisible";
smallbtn2.className = "invisible";
smallbtn3.className = "invisible";
} else {
smallbtn.className = "navbarbutton";
smallbtn2.className = "navbarbutton";
smallbtn3.className = "navbarbutton";
}
if (viewport_width < 425) {
smallbtn0.className = "invisible";
smallbtn1.className = "invisible";
} else {
smallbtn0.className = "navbarbutton";
smallbtn1.className = "navbarbutton";
}
if (viewport_width < 280) {
smallbtn5.className = "invisible";
} else {
smallbtn5.className = "navbarbutton";
}
});
window.onload = function() {
var logo_full = document.getElementById("logo_full")
var logo_small = document.getElementById("logo_small")
var smallbtn = document.getElementById("smallbtn1")
var smallbtn0 = document.getElementById("smallbtn0")
var smallbtn2 = document.getElementById("smallbtn2")
var smallbtn3 = document.getElementById("smallbtn3")
var smallbtn1 = document.getElementById("smallbtn4")
var smallbtn5 = document.getElementById("smallbtn5")
var viewport_width = window.innerWidth;
if (viewport_width < 900) {
logo_full.className = "invisible";
logo_small.className = "";
} else {
logo_small.className = "invisible";
logo_full.className = "";
}
if (viewport_width < 600) {
smallbtn.className = "invisible";
smallbtn2.className = "invisible";
smallbtn3.className = "invisible";
} else {
smallbtn.className = "navbarbutton";
smallbtn2.className = "navbarbutton";
smallbtn3.className = "navbarbutton";
}
if (viewport_width < 425) {
smallbtn0.className = "invisible";
smallbtn1.className = "invisible";
} else {
smallbtn0.className = "navbarbutton";
smallbtn1.className = "navbarbutton";
}
if (viewport_width < 280) {
smallbtn5.className = "invisible";
} else {
smallbtn5.className = "navbarbutton";
}
var alert = document.getElementById("alert")
var alerttext = document.getElementById("alerttext")
var morblox = document.getElementById("morblox")
if (window.location.hostname == "") {
alerttext.innerHTML = "You are using this locally.";
alert.className = "";
morblox.className = "";
} else if (window.location.hostname == "thomasluigi07.github.io") {
alerttext.innerHTML = "You are using this on the github pages site.";
alert.className = "";
morblox.className = "";
} else if (window.location.hostname == "MORBLOX.com") {
alerttext.innerHTML = "You are using MORBLOX.com";
alert.className = "";
morblox.className = "";
} else if (window.location.hostname == "morblox.us") {
alerttext.innerHTML = "You are using morblox.us";
alert.className = "";
morblox.className = "invisible";
} else {
alerttext.innerHTML = `You are using an unknown site (${window.location.hostname})`;
alert.className = "";
morblox.className = "";
}
};

View File

@ -8,6 +8,7 @@
<meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/MORBLOXlogo.png" property="og:image"/>
<meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="MORBLOX.png"/>
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
@ -20,12 +21,12 @@
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
<a class="navbarbutton" href="catalog.html">Catalog</a>
<a class="navbarbutton" href="build.html">Build</a>
<a class="navbarbutton" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

View File

@ -7,6 +7,7 @@
<meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/" property="og:url"/>
<meta content="https://thomasluigi07.github.io/MORBLOX-WEBSITE/MORBLOXlogo.png" property="og:image"/>
<meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="MORBLOX.png"/>
@ -20,12 +21,12 @@
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
<a class="navbarbutton" href="catalog.html">Catalog</a>
<a class="navbarbutton" href="build.html">Build</a>
<a class="navbarbutton" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

View File

@ -0,0 +1,3 @@
User-agent: *
Allow: /
Disallow: /nimda/

View File

@ -9,6 +9,7 @@
<meta content="#4b4b4b" data-react-helmet="true" name="theme-color"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="MORBLOX.png"/>
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
@ -20,12 +21,12 @@
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
<a class="navbarbutton" href="catalog.html">Catalog</a>
<a class="navbarbutton" href="build.html">Build</a>
<a class="navbarbutton" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>

View File

@ -11,6 +11,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="MORBLOX.png"/>
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
@ -20,12 +21,12 @@
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" class="invisible" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="45" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
<a class="navbarbutton" href="catalog.html">Catalog</a>
<a class="navbarbutton" href="build.html">Build</a>
<a class="navbarbutton" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" href="forum.html">Forum</a>
<a class="navbarbutton" id="smallbtn5" href="home.html">Home</a>
<a class="navbarbutton" id="smallbtn4" href="games.html">Games</a>
<a class="navbarbutton" id="smallbtn0" href="catalog.html">Catalog</a>
<a class="navbarbutton" id="smallbtn1" href="build.html">Build</a>
<a class="navbarbutton" id="smallbtn2" href="upgrade.html">Upgrade</a>
<a class="navbarbutton" id="smallbtn3" href="forum.html">Forum</a>
</div>
<div class="navbarlogincontainer">
<p><a href="signup.html">Sign Up</a> or <a href="login.html">Log In</a>