Header render Fixes (#1962)

* Switch header buttons to use HTML button element for better UX * Adjust styling to restoring honoring header button text color * Improve header button layout on <768px display
BioKIC · Dec 12, 2024 · 06dd159 · 06dd159
1 parent 6d09b1d
commit 06dd159
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/config/symbbase.php b/config/symbbase.php
@@ -2,7 +2,7 @@
 header('X-Frame-Options: DENY');
 header('Cache-control: private'); // IE 6 FIX
 date_default_timezone_set('America/Phoenix');
-$CODE_VERSION = '3.1.5';
+$CODE_VERSION = '3.1.5.1';
 
 set_include_path(get_include_path() . PATH_SEPARATOR . $SERVER_ROOT . PATH_SEPARATOR . $SERVER_ROOT.'/config/' . PATH_SEPARATOR . $SERVER_ROOT.'/classes/');
 

diff --git a/css/symbiota/header.css b/css/symbiota/header.css
@@ -30,16 +30,22 @@ header {
   margin-right: 0.4rem;
 }
 
-#login {
-  float: right;
+
+nav.top-login > span > form{
+  display: inline;
   margin: 0;
   padding: 0;
+
 }
 
-#contactUs {
+#profile, #contactUs{
   float: left;
 }
 
+#login, #logout {
+  float: right;
+}
+
 .top-brand {
   /* align a and brand-name */
   clear: both;

diff --git a/css/symbiota/main.css b/css/symbiota/main.css
@@ -442,6 +442,7 @@ button.inverse-color {
 
 .button-secondary {
   background-color: var(--bright-color);
+  color: var(--darkest-color);
 }
 
 .button-secondary > a {

diff --git a/includes/header_template.php b/includes/header_template.php
@@ -16,24 +16,26 @@
 					<div class="welcome-text bottom-breathing-room-rel">
 						<?= $LANG['H_WELCOME'] . ' ' . $USER_DISPLAY_NAME ?>!
 					</div>
-					<span style="white-space: nowrap;" class="button button-tertiary bottom-breathing-room-rel">
-						<a href="<?= $CLIENT_ROOT ?>/profile/viewprofile.php"><?= $LANG['H_MY_PROFILE'] ?></a>
+					<span id="profile">
+						<form name="profileForm" method="post" action="<?= $CLIENT_ROOT . '/profile/viewprofile.php' ?>">
+							<button class="button button-tertiary bottom-breathing-room-rel left-breathing-room-rel" name="profileButton" type="submit"><?= $LANG['H_MY_PROFILE'] ?></button>
+						</form>
 					</span>
-					<span style="white-space: nowrap;" class="button button-secondary bottom-breathing-room-rel">
-						<a href="<?= $CLIENT_ROOT ?>/profile/index.php?submit=logout"><?= $LANG['H_LOGOUT'] ?></a>
+					<span id="logout">
+						<form name="logoutForm" method="post" action="<?= $CLIENT_ROOT ?>/profile/index.php?submit=logout">
+							<button class="button button-secondary bottom-breathing-room-rel left-breathing-room-rel" name="logoutButton" type="submit"><?= $LANG['H_LOGOUT'] ?></button>
+						</form>
 					</span>
 					<?php
 				} else {
 					?>
-					<span class="button button-tertiary" id="contactUs">
-						<a onclick="window.location.href='#'">
-							<?= $LANG['H_CONTACT_US'] ?>
-						</a>
+					<span id="contactUs">
+						<button class="button button-tertiary bottom-breathing-room-rel left-breathing-room-rel" onclick="window.location.href='#'"><?= $LANG['H_CONTACT_US'] ?></button>
 					</span>
 					<span id="login">
 						<form name="loginForm" method="post" action="<?= $CLIENT_ROOT . "/profile/index.php" ?>">
 							<input name="refurl" type="hidden" value="<?= htmlspecialchars($_SERVER['SCRIPT_NAME'], ENT_COMPAT | ENT_HTML401 | ENT_SUBSTITUTE) . "?" . htmlspecialchars($_SERVER['QUERY_STRING'], ENT_QUOTES) ?>">
-							<button class="button button-secondary" name="loginButton" type="submit"><?= $LANG['H_LOGIN'] ?></button>
+							<button class="button button-secondary bottom-breathing-room-rel left-breathing-room-rel" name="loginButton" type="submit"><?= $LANG['H_LOGIN'] ?></button>
 						</form>
 					</span>
 					<?php