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 7c49ed90da7b7ea82976d349222f9abbaa4fbf0b..c231a933300b0fde59e6a2800f48d1686b2ebd32 100644 (file)
--- 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 150caae267534e9d5f5a5656d143422ee755b5e9..f540cbb1d66bb3eecba0a72afb5b081ffe62de37 100644 (file)
--- 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>";
        }
 }