Got all of the elements in the top banner bar to line up across the same horizontal...

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index f5ac02b6cef844485e8547907ef3b0d15dd60e8b..2aad6f5247a1e16cfb2929d344fe55d231b7015a 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -42,27 +42,72 @@
 
 .ctdl-main-grid-container > div {
        text-align: left;
-       padding: 0;
+}
+
+.ctdl-banner-buttons {                         /* Flexbox container for everything we stick into the banner */
+       display: flex;
+       flex-direction: row;
+       flex-wrap: nowrap;
+       justify-content: space-between;
+       align-items: center;
+       margin: 0;
+       width: 100%;
+       height: 100%;
+       overflow: hidden;
+}
+
+.ctdl-banner-left {                            /* Items which should be grouped to the LEFT side of the banner */
+       display: flex;
+       flex-direction: row;
+       flex-wrap: nowrap;
+       align-items: center;
+}
+
+.ctdl-banner-center {                          /* Items which should be grouped to the MIDDLE of the banner */
+       display: flex;
+       flex-direction: row;
+       flex-wrap: nowrap;
+       align-items: center;
+}
+
+.ctdl-banner-right {                           /* Items which should be grouped to the RIGHT side of the banner */
+       display: flex;
+       flex-direction: row;
+       flex-wrap: nowrap;
+       align-items: center;
 }
 
 .ctdl-banner-buttons li, .ctdl-banner-buttons li button {
        float: left;
        display: block;
-       padding: 8px;
        background-color: DarkSlateGrey;
        color: White;
        font-size: 1.25vw;
        border: none;
+       padding-left: 4px;
+       padding-right: 4px;
 }
 
 .ctdl-banner-buttons li button:hover {
        background-color: Black;
 }
 
-.ctdl-banner-buttons a {
+.ctdl-banner-buttons a {                       /* For example, the Login / Log Off button */
        color: White;
 }
 
+.ctdl-banner-buttons span {                    /* For example, the name of the logged in user */
+       color: White;
+}
+
+.ctdl-logo-img {
+       background-color: White;
+       border-radius: 5px;
+       padding-bottom: 3px;
+       padding-left: 3px;
+       padding-right: 3px;
+}
+
 html,body,h1,h2,h3,h4,h5 {
        font-family: sans-serif
 }
@@ -122,14 +167,6 @@ html,body,h1,h2,h3,h4,h5 {
        color: #FFFFFF;
 }
 
-.ctdl-logo-img {
-       background-color: White;
-       border-radius: 5px;
-       padding-bottom: 3px;
-       padding-left: 3px;
-       padding-right: 3px;
-}
-
 .ctdl-forum-reading-pane {
        background-color: DarkSlateGrey;        /* Background behind the message boxes */
 }

diff --git a/webcit-ng/static/index.html b/webcit-ng/static/index.html
index a320f4c22ca82f173b98299588eaced2f8f386c3..ce0d4a85535294cc8e823842a606c18ca457c3be 100644 (file)
--- a/webcit-ng/static/index.html
+++ b/webcit-ng/static/index.html
@@ -21,18 +21,28 @@
 
        <div class="ctdl-grid-banner-item" id="banner">
                <ul class="ctdl-banner-buttons">
-                       <!-- <li id="ctdl-sidebar-open" onClick="sidebar_open();"><i class="fa fa-bars"></i>Menu</li> -->
-                       <li id="ctdl-logo" onclick=window.open("https://www.citadel.org");>
-                               <img class="ctdl-logo-img" src="/ctdl/s/images/citadel-logo.gif" alt="CITADEL">
-                       </li>
-                       <li id="ctdl_banner_title">---</li>
-                       <li><button id="ctdl-newmsg-button" style="display:none" onClick="entmsg_dispatcher();">enter</button></li>
-                       <li><button id="ctdl-ungoto-button" style="display:none" onClick="gotonext(0);">ungoto</button></li>
-                       <li><button id="ctdl-skip-button" style="display:none" onClick="gotonext(1);">skip</button></li>
-                       <li><button id="ctdl-goto-button" style="display:none" onClick="gotonext(2);">goto</button></li>
-                       <li><button id="lilo">Login</button></li>
-                       <li><span id="current_user">Not logged in.</span></li>
-                       <li><span id="current_user_avatar"><i class="fa fa-user-circle fa-3x"></i></span></li>
+                       <div id="ctdl-banner-left" class="ctdl-banner-left">
+                               <!-- <li id="ctdl-sidebar-open" onClick="sidebar_open();"><i class="fa fa-bars"></i>Menu</li> -->
+                               <li id="ctdl-logo" onclick=window.open("https://www.citadel.org");>
+                                       <img class="ctdl-logo-img" src="/ctdl/s/images/citadel-logo.gif" alt="CITADEL">
+                               </li>
+                               <li><button id="ctdl_banner_title">---</button></li>
+                       </div>
+                       <div id="ctdl-banner-center" class="ctdl-banner-center">
+                               <li><button id="ctdl-newmsg-button" style="display:none" onClick="entmsg_dispatcher();">enter</button></li>
+                               <li><button id="ctdl-ungoto-button" style="display:none" onClick="gotonext(0);">ungoto</button></li>
+                               <li><button id="ctdl-skip-button" style="display:none" onClick="gotonext(1);">skip</button></li>
+                               <li><button id="ctdl-goto-button" style="display:none" onClick="gotonext(2);">goto</button></li>
+                       </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>
+                       </div>
                </ul>
        </div>
 

diff --git a/webcit-ng/static/js/main.js b/webcit-ng/static/js/main.js
index 0e1f43b971e79bedc0ce3898f70edddf0047a2b3..03735e816247e17b9ef2d9df427d99ef35a3ca8e 100644 (file)
--- a/webcit-ng/static/js/main.js
+++ b/webcit-ng/static/js/main.js
@@ -42,7 +42,7 @@ function update_banner() {
        if (current_room) {
                document.getElementById("ctdl_banner_title").innerHTML = current_room;
                if (is_room_aide) {
-                       document.getElementById("ctdl_banner_title").innerHTML += "<i class=\"fa fa-user-cog\"></i>";
+                       document.getElementById("ctdl_banner_title").innerHTML += "&nbsp;<i class=\"fa fa-user-cog\"></i>";
                }
                document.title = current_room;
        }