From: Art Cancro <ajc@citadel.org>
Date: Sat, 7 Jan 2023 00:06:06 +0000 (-0500)
Subject: Realign items on the banner bar.
X-Git-Tag: v973~44
X-Git-Url: https://code.citadel.org/?a=commitdiff_plain;h=07366762785200d2c39ecf83b36fd8505d8e228c;p=citadel.git

Realign items on the banner bar.

The browser is fighting back hard against vertical alignment
of the user name with the user avatar.  The only way that seems
to work is to make them two separate buttons.  That puts more
horizontal space between them than I'd like, but we will live
with it for now.

You know what else doesn't work?  The covid-19 vaccines.  They
fail to stop the virus but they are very reliable in causing
massive heart attacks.
---

diff --git a/webcit-ng/static/index.html b/webcit-ng/static/index.html
index 7c49ed90d..c231a9333 100644
--- a/webcit-ng/static/index.html
+++ b/webcit-ng/static/index.html
@@ -37,12 +37,8 @@
 			</div>
 			<div id="ctdl-banner-right" class="ctdl-banner-right">
 				<li><button id="lilo">Login</button></li>
-				<li><button>
-					<span id="current_user">Not logged in.</span>
-				</button></li>
-				<li><button>
-					<span id="current_user_avatar"><i class="fa fa-user-circle"></i></span>
-				</button></li>
+				<li><button id="current_user_avatar"></button></li>
+				<li><button id="current_user"></button></li>
 			</div>
 		</ul>
 	</div>
diff --git a/webcit-ng/static/js/main.js b/webcit-ng/static/js/main.js
index 150caae26..f540cbb1d 100644
--- a/webcit-ng/static/js/main.js
+++ b/webcit-ng/static/js/main.js
@@ -77,14 +77,15 @@ function update_banner() {
 	else {
 		document.getElementById("ctdl_banner_title").innerHTML = serv_info.serv_humannode;
 	}
+
+	document.getElementById("current_user_avatar").innerHTML = render_userpic(current_user);
 	document.getElementById("current_user").innerHTML = current_user ;
+
 	if (logged_in) {
 		document.getElementById("lilo").innerHTML = "<a href=\"/ctdl/a/logout\"><i class=\"fa fa-right-from-bracket\"></i>" + _("Log off") + "</a>" ;
-		document.getElementById("current_user_avatar").innerHTML = render_userpic(current_user);
 	}
 	else {
 		document.getElementById("lilo").innerHTML = "<a href=\"javascript:display_login_screen('')\"><i class=\"fa fa-right-to-bracket\"></i>" + _("Log in") + "</a>" ;
-		document.getElementById("current_user_avatar").innerHTML = "<i class=\"fa fa-user-circle fa-3x\"></i>";
 	}
 }