Moved header and nav to their own files - easier to edit!

This commit is contained in:
FractalParadigm 2025-03-15 12:11:45 -04:00
parent 15c3475a4f
commit 4a880b93dd
9 changed files with 91 additions and 186 deletions

View File

@ -23,22 +23,8 @@ session_start();
<body id="body">
<script>getURL();</script>
<div id="contentFrame">
<img src="/assets/rl_logo_background.svg" alt="Rocket League logo for background" class="backgroundImage">
<div class="header">
<div id="headerLeft">
<img src="/assets/trojan_image_1.png" alt="Trojan Destiny logo" id="headerImage">
</div>
<div id="headerCentre">
<h1 id="headerText"><a href="/" class="plainLinkBlue">TrojanDestinyRL</a></h1>
<div id="youtubeImage" onclick="redirect('mainpage', 'https://www.youtube.com/@TrojanDestinyRL')"><img src="/assets/youtube.svg" alt="youtube logo"></div>
<div id="twitchImage" onclick="redirect('mainpage', 'https://www.twitch.tv/trojandestinyrl')"><img src="/assets/twitch.svg" alt="twitch logo"></div>
<div id="discordImage" onclick="redirect('mainpage', 'https://discord.gg/bzU5fVxCZJ')"><img src="/assets/discord.svg" alt="discord logo"></div>
</div>
<div id="headerRight">
<img src="/assets/trojan_image_2.png" alt="Trojan Destiny logo" id="headerImage">
</div>
</div>
<p></p>
<img src="/assets/rl_logo_background.svg" alt="Rocket League logo for background" class="backgroundImage">
<?php include_once('../display/header.html'); ?>
<h2 id="adminHeader">ADMIN PANEL</h2>
<?php
@ -97,21 +83,7 @@ session_start();
?>
<div class="subNav">
<?php
if (isset($_SESSION["privileges"]) && $_SESSION["privileges"] == 1) {
echo "<a href=\"./\" class=\"subNavLink\" id=\"adminHomeButton\">ADMIN PANEL</a>";
}
?>
<a href="../" class="subNavLink" id="mainHomeButton">HOME</a>
<p class="newLine"></p>
<?php
if (isset($_SESSION["userID"])){
echo "<a href=\"/user/" . $_SESSION["username"] . " \" class=\"subNavLink\">ACCOUNT</a>";
echo "<a href=\"../user/logout.php?redirect=admin\" class=\"subNavLink\" id=\"loginButton\">LOGOUT</a>";
}
?>
</div>
<?php include_once('../display/subnav.php'); ?>
</div>
</body>
</html>

17
display/header.html Normal file
View File

@ -0,0 +1,17 @@
<div class="header">
<div id="headerLeft">
<img src="/assets/trojan_image_1.png" alt="Trojan Destiny logo" id="headerImage">
</div>
<div id="headerCentre">
<h1 id="headerText"><a href="/" class="plainLinkBlue">TrojanDestinyRL</a></h1>
<div id="youtubeImage" onclick="redirect('mainpage', 'https://www.youtube.com/@TrojanDestinyRL')"><img
src="/assets/youtube.svg" alt="youtube logo"></div>
<div id="twitchImage" onclick="redirect('mainpage', 'https://www.twitch.tv/trojandestinyrl')"><img
src="/assets/twitch.svg" alt="twitch logo"></div>
<div id="discordImage" onclick="redirect('mainpage', 'https://discord.gg/bzU5fVxCZJ')"><img
src="/assets/discord.svg" alt="discord logo"></div>
</div>
<div id="headerRight">
<img src="/assets/trojan_image_2.png" alt="Trojan Destiny logo" id="headerImage">
</div>
</div>

20
display/subnav.php Normal file
View File

@ -0,0 +1,20 @@
<div class="subNav">
<?php
// Is the user is logged in we'll show them a navigation bar with some fancier options
if (isset($_SESSION["userID"])) {
echo "<a href=\"/user/" . $_SESSION["username"] . " \" class=\"subNavLink\">ACCOUNT</a>";
echo "<a href=\"/ \" class=\"subNavLink\">HOME</a>";
echo "<a href=\"/user/logout.php \" class=\"subNavLink\">LOGOUT</a>";
echo "<a href=\"/admin/data_management/game_form.php \" target=\"dataFrame\" class=\"subNavLink disabled\">ADD GAME DETAILS</a>";
// Anything we need to show to logged in admins will be below
if (isset($_SESSION["privileges"]) && $_SESSION["privileges"] == 1) {
echo "<a href=\"/admin/data_management/tourney_form.php \" target=\"dataFrame\" class=\"subNavLink\">ADD A TOURNEY</a>";
echo "<a href=\"/admin \" class=\"subNavLink\">ADMIN PANEL</a>";
}
} else {
echo "<a href=\"/user/login_page.php \" target=\"dataFrame\" class=\"subNavLink\">SIGN IN</a>";
echo "<a href=\"/user/create_account.php \" target=\"dataFrame\" class=\"subNavLink\">CREATE AN ACCOUNT</a>";
echo "<a href=\"/ \" class=\"subNavLink\">HOME</a>";
}
?>
</div>

View File

@ -20,47 +20,14 @@ session_start();
<body id="body">
<div id="contentFrame">
<img src="/assets/rl_logo_background.svg" alt="Rocket League logo for background" class="backgroundImage">
<div class="header">
<div id="headerLeft">
<img src="/assets/trojan_image_1.png" alt="Trojan Destiny logo" id="headerImage">
</div>
<div id="headerCentre">
<h1 id="headerText"><a href="/" class="plainLinkBlue">TrojanDestinyRL</a></h1>
<div id="youtubeImage" onclick="redirect('mainpage', 'https://www.youtube.com/@TrojanDestinyRL')"><img src="/assets/youtube.svg" alt="youtube logo"></div>
<div id="twitchImage" onclick="redirect('mainpage', 'https://www.twitch.tv/trojandestinyrl')"><img src="/assets/twitch.svg" alt="twitch logo"></div>
<div id="discordImage" onclick="redirect('mainpage', 'https://discord.gg/bzU5fVxCZJ')"><img src="/assets/discord.svg" alt="discord logo"></div>
</div>
<div id="headerRight">
<img src="/assets/trojan_image_2.png" alt="Trojan Destiny logo" id="headerImage">
</div>
</div>
<p></p>
<img src="/assets/rl_logo_background.svg" alt="Rocket League logo for background" class="backgroundImage">
<?php include_once('./display/header.html'); ?>
<h1>Trojan's Trophy Room</h1>
<h4 style="font-size:150%;margin:auto;"><a href="/giveaway" id="giveawayLink">Giveaway Disclaimer</a></h4>
<iframe src="/display/general_results.php" name="dataFrame" class="dataFrame" id="dataFrame" onload="resizeIframe(this);"></iframe>
<p class="newLine"></p>
<p class="newLine"></p>
<div class="subNav">
<?php
// Is the user is logged in we'll show them a navigation bar with some fancier options
if (isset($_SESSION["userID"])){
echo "<a href=\"/user/" . $_SESSION["username"] . " \" class=\"subNavLink\">ACCOUNT</a>";
echo "<a href=\"/ \" class=\"subNavLink\">HOME</a>";
echo "<a href=\"/user/logout.php \" class=\"subNavLink\">LOGOUT</a>";
echo "<a href=\"/admin/data_management/game_form.php \" target=\"dataFrame\" class=\"subNavLink disabled\">ADD GAME DETAILS</a>";
// Anything we need to show to logged in admins will be below
if (isset($_SESSION["privileges"]) && $_SESSION["privileges"] == 1){
echo "<a href=\"/admin/data_management/tourney_form.php \" target=\"dataFrame\" class=\"subNavLink\">ADD A TOURNEY</a>";
echo "<a href=\"/admin \" class=\"subNavLink\">ADMIN PANEL</a>";
}
} else {
echo "<a href=\"/user/login_page.php \" target=\"dataFrame\" class=\"subNavLink\">SIGN IN</a>";
echo "<a href=\"/user/create_account.php \" target=\"dataFrame\" class=\"subNavLink\">CREATE AN ACCOUNT</a>";
echo "<a href=\"/ \" class=\"subNavLink\">HOME</a>";
}
?>
</div>
<?php include_once('./display/subnav.php'); ?>
</div>
</body>
</html>

View File

@ -8,6 +8,7 @@
justify-content: center;
margin: auto;
font-size: 1.5em;
margin-bottom: 2%;
}
#headerLeft {

View File

@ -4,6 +4,9 @@
/* Import Header */
@import url('/styles/header.css');
/* Sub-Nav */
@import url('/styles/subnav.css');
/* Line break for flex layout */
.newLine {
width: 100%;
@ -157,53 +160,6 @@ For upper/primary controls
}
/*
SUB-NAVIGATION
For all the things at the bottom of the page; log in/out, 'my account', etc.
*/
.subNav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 2%;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
font-size: small;
}
.subNavLink {
border: 1px solid rgb(0, 0, 255);
border-radius: 3px;
box-shadow: 0px 2px 4px;
text-decoration: none;
color: black;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
align-content: center;
width: 80px;
height: 45px;
}
.subNav a {
box-shadow: 0px 2px 4px;
}
.subNav a:hover {
color: black;
background-color: rgba(255, 165, 0, .6);
}
.subNav a:active {
box-shadow: 0px 0px 2px;
transform: translateY(2px);
}
.submitButton input[type="submit"] {
margin: auto;

39
styles/subnav.css Normal file
View File

@ -0,0 +1,39 @@
.subNav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 2%;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
font-size: small;
margin-top: 3%;
}
.subNavLink {
border: 1px solid rgb(0, 0, 255);
border-radius: 3px;
box-shadow: 0px 2px 4px;
text-decoration: none;
color: black;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
align-content: center;
width: 80px;
height: 45px;
}
.subNav a {
box-shadow: 0px 2px 4px;
}
.subNav a:hover {
color: black;
background-color: rgba(255, 165, 0, .6);
}
.subNav a:active {
box-shadow: 0px 0px 2px;
transform: translateY(2px);
}

View File

@ -127,33 +127,7 @@ if (isset($tourneyResults)) {
</div>
</div>
<p class="newLine"></p>
<div class="subNav">
<?php
if (isset($_SESSION["privileges"]) && $_SESSION["privileges"] == 1) {
echo "<a href=\"/admin/\" class=\"subNavLink\" id=\"adminHomeButton\">ADMIN PANEL</a>";
}
?>
<a href="../" class="subNavLink" id="mainHomeButton">HOME</a>
<?php
// If we're showing someone other than who's logged in, offer a link to their own page
if (isset($_SESSION["userID"])){
echo "<a href=\"/user/" . $_SESSION["username"] . " \" class=\"subNavLink\">MY ACCOUNT</a>";
}
?>
<p class="newLine"></p>
<?php
// If someone is logged in, give them the opportunity to log out
if (isset($_SESSION["userID"])){
echo "<a href=\"../user/logout.php?redirect=\" class=\"subNavLink\" id=\"loginButton\">LOGOUT</a>";
} else {
echo "<a href=\"/user/login_page.php \" target=\"dataFrame\" class=\"subNavLink\">SIGN IN</a>";
echo "<a href=\"/create_account.php \" target=\"dataFrame\" class=\"subNavLink\">CREATE AN ACCOUNT</a>";
echo "<a href=\"/ \" class=\"subNavLink\">HOME</a>";
}
?>
</div>
<?php include_once('../display/subnav.php'); ?>
</div>
</body>

View File

@ -54,22 +54,8 @@ try { // Try opening the SQL database connection
<body id="body">
<script>getURL();</script>
<div id="contentFrame">
<img src="/assets/rl_logo_background.svg" alt="Rocket League logo for background" class="backgroundImage">
<div class="header">
<div id="headerLeft">
<img src="/assets/trojan_image_1.png" alt="Trojan Destiny logo" id="headerImage">
</div>
<div id="headerCentre">
<h1 id="headerText"><a href="/" class="plainLinkBlue">TrojanDestinyRL</a></h1>
<div id="youtubeImage" onclick="redirect('this', 'https://www.youtube.com/@TrojanDestinyRL')"><img src="/assets/youtube.svg" alt="youtube logo"></div>
<div id="twitchImage" onclick="redirect('this', 'https://www.twitch.tv/trojandestinyrl')"><img src="/assets/twitch.svg" alt="twitch logo"></div>
<div id="discordImage" onclick="redirect('this', 'https://discord.gg/bzU5fVxCZJ')"><img src="/assets/discord.svg" alt="discord logo"></div>
</div>
<div id="headerRight">
<img src="/assets/trojan_image_2.png" alt="Trojan Destiny logo" id="headerImage">
</div>
</div>
<p></p>
<img src="/assets/rl_logo_background.svg" alt="Rocket League logo for background" class="backgroundImage">
<?php include_once('../display/header.html'); ?>
<?php
if ($userExists) {
echo ("<iframe src=\"/user/account.php?username=" . $_GET["username"] . "\" name=\"dataFrame\" class=\"dataFrame\" id=\"dataFrame\" onload=\"resizeIframe(this);\"></iframe>");
@ -82,34 +68,7 @@ try { // Try opening the SQL database connection
echo "</div>";
}
?>
<div class="subNav">
<?php
if (isset($_SESSION["privileges"]) && $_SESSION["privileges"] == 1) {
echo "<a href=\"/admin/\" class=\"subNavLink\" id=\"adminHomeButton\">ADMIN PANEL</a>";
}
?>
<a href="../" class="subNavLink" id="mainHomeButton">HOME</a>
<?php
// If we're showing someone other than who's logged in, offer a link to their own page
if (isset($_SESSION["userID"]) && $_SESSION["username"] != $_GET["username"]){
echo "<a href=\"/user/" . $_SESSION["username"] . " \" class=\"subNavLink\">MY ACCOUNT</a>";
}
?>
<p class="newLine"></p>
<?php
// If someone is logged in, give them the opportunity to log out
if (isset($_SESSION["userID"])){
echo "<a href=\"../user/logout.php?redirect=\" class=\"subNavLink\" id=\"loginButton\">LOGOUT</a>";
} else {
echo "<a href=\"/user/login_page.php \" target=\"dataFrame\" class=\"subNavLink\">SIGN IN</a>";
echo "<a href=\"/create_account.php \" target=\"dataFrame\" class=\"subNavLink\">CREATE AN ACCOUNT</a>";
echo "<a href=\"/ \" class=\"subNavLink\">HOME</a>";
}
?>
</div>
<?php include_once('../display/subnav.php'); ?>
</div>
</body>
</html>