Tightened up the padding around the room list and rendered it with the flexbox model...

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 6f01f71019a7ff5a1ecf845ae7b6a562f0c74953..59ddb7a689bcfcf693699fd70f53aab0ff758ac0 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -97,18 +97,25 @@ html,body,h1,h2,h3,h4,h5 {
        padding: 10px;
 }
 
-.ctdl-sidebar-class button {
+.ctdl-sidebar-button {
        width: 100%;
        padding: 10px;
        text-align: left;
        border-color: GhostWhite;
-       background-color: GhostWhite;
+       background-color: Gainsboro;
        color: #000000;
        font-size: 1vw;
 }
 
-.ctdl-sidebar-class button:hover {
-       background-color: White;
+.ctdl-sidebar-button:hover {
+       background-color: Blue;
+       color: White;
+}
+
+.ctdl-sidebar-button-selected {
+       font-weight: bold;
+       color: White;
+       background-color: SlateGrey;
 }
 
 .ctdl-grid-banner-item button {
@@ -295,12 +302,12 @@ blockquote pre {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
-       align-items: stretch;
+       align-items: center;
        overflow: hidden;
        border-radius: 10px;
        border-style: outset;
        background-color: White;
-       padding: 0.5vw;
+       padding: 0.3vw;
        margin-top: 0;
        margin-bottom: 0.25vw;
        margin-left: 1vw;
@@ -310,23 +317,23 @@ blockquote pre {
 .ctdl-roomlist-roomicon {
        overflow: hidden;
        font-size: large;
-       margin-left: 1vw;
-       margin-right: 1vw;
-       padding-left: 0.75vw;
-       padding-right: 1.75vw;
-       padding-top: 0.75vw;
-       padding-bottom: 0.75vw;
+       margin-right: auto;
 }
 
 .ctdl-roomlist-roomname {
        font-size: large;
+       margin-right: auto;
+       padding-left: 1vw;
+       padding-right: 1vw;
 }
 
 .ctdl-roomlist-roomname-hasnewmsgs {
        font-weight: bold;
+       margin-right: auto;
 }
 
 .ctdl-roomlist-mtime {
+       margin-left: auto;
 }
 
 .ctdl-mailbox-grid-container {

diff --git a/webcit-ng/static/index.html b/webcit-ng/static/index.html
index 2a11550c655102d802db3eb632f832b54c8dc72a..66ad74455b48b5711810475f223b478072fdbd9a 100644 (file)
--- a/webcit-ng/static/index.html
+++ b/webcit-ng/static/index.html
@@ -42,20 +42,15 @@
        </div>
 
        <div class="ctdl-grid-sidebar-item" id="sidebar">
-               <ul id="ctdl-sidebar" class="ctdl-sidebar-class">
-                       <!-- <li><a href="#"><i class="fa fa-envelope" onClick="gotoroom('_MAIL_');"></i></a> -->
-                       <!-- <li><a href="#"><i class="fa fa-user" onClick="user_profile(current_user);"></i></a> -->
-                       <!-- <li><a href="#"<i class="fa fa-cog"></i></a> -->
-                       <!-- <li><hr> -->
-                       <!-- <li><button onClick="sidebar_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</button> -->
-                       <li><button id="ctdl-sidebar-button-mail" onClick="gotoroom('_MAIL_');"><i class="fa fa-envelope fa-fw"></i>  Mail</button>
+               <ul id="ctdl-sidebar">
+                       <li><button class="ctdl-sidebar-button" id="ctdl-sidebar-button-mail" onClick="gotoroom('_MAIL_');"><i class="fa fa-envelope fa-fw"></i>  Mail</button>
                        <li id="ctdl_mail_folder_list" style="display:none"></li>
-                       <li><button id="ctdl-sidebar-button-forums" onClick="render_room_list();"><i class="fas fa-comments fa-fw"></i>  Forums</button>
-                       <li><button id="ctdl-sidebar-button-calendar"> <i class="fa fa-calendar-alt fa-fw"></i>  Calendar</button>
-                       <li><button id="ctdl-sidebar-button-contacts"><i class="fa fa-address-book fa-fw"></i>  Contacts</button>
-                       <li><button id="ctdl-sidebar-button-blogs"><i class="fa fa-blog fa-fw"></i>  Blogs</button>
-                       <li><button id="ctdl-sidebar-button-wikis"><i class="fa fa-book fa-fw"></i>  Wikis</button>
-                       <li><button id="ctdl-sidebar-button-settings"><i class="fa fa-cog fa-fw"></i>  Settings</button>
+                       <li><button class="ctdl-sidebar-button" id="ctdl-sidebar-button-forums" onClick="render_room_list();"><i class="fas fa-comments fa-fw"></i>  Forums</button>
+                       <li><button class="ctdl-sidebar-button" id="ctdl-sidebar-button-calendar"><i class="fa fa-calendar-alt fa-fw"></i>  Calendar</button>
+                       <li><button class="ctdl-sidebar-button" id="ctdl-sidebar-button-contacts"><i class="fa fa-address-book fa-fw"></i>  Contacts</button>
+                       <li><button class="ctdl-sidebar-button" id="ctdl-sidebar-button-blogs"><i class="fa fa-blog fa-fw"></i>  Blogs</button>
+                       <li><button class="ctdl-sidebar-button" id="ctdl-sidebar-button-wikis"><i class="fa fa-book fa-fw"></i>  Wikis</button>
+                       <li><button class="ctdl-sidebar-button" id="ctdl-sidebar-button-settings"><i class="fa fa-cog fa-fw"></i>  Settings</button>
                </ul>
        </div>
 

diff --git a/webcit-ng/static/js/roomlist.js b/webcit-ng/static/js/roomlist.js
index 18a84f44a6d792a68ada937566f8e349eb0d8a49..969d1d311a5f2b626c0047bfb999bd5a4d046698 100644 (file)
--- a/webcit-ng/static/js/roomlist.js
+++ b/webcit-ng/static/js/roomlist.js
@@ -8,6 +8,8 @@ function render_room_list() {
 
        document.getElementById("ctdl-newmsg-button").style.display = "none";           // There is no "enter" button on this screen
        document.getElementById("ctdl-main").innerHTML = "<img src=\"/ctdl/s/images/throbber.gif\" />"; // show throbber while loading
+       clear_sidebar_selection();
+       document.getElementById("ctdl-sidebar-button-forums").classList.add("ctdl-sidebar-button-selected");
 
        fetch_room_list = async() => {
                floor_response = await fetch("/ctdl/f/");

diff --git a/webcit-ng/static/js/views.js b/webcit-ng/static/js/views.js
index 605b7317e68e7df6b51c87712e5e107cd838f5a4..0466f8ae1bfe96d47708ea058daaa76143c3e254 100644 (file)
--- a/webcit-ng/static/js/views.js
+++ b/webcit-ng/static/js/views.js
@@ -4,32 +4,37 @@
 // disclosure are subject to the GNU General Public License v3.
 
 
-// This function is the dispatcher that determines the correct view for a room,
-// and calls the correct renderer.  Greater/Less than bounds are accepted.
-function render_room_view(gt_msg, lt_msg) {
 
-       document.getElementById("ctdl-newmsg-button").style.display = "none";           // the view renderer will set this
-
-       // Clear the highlighting out of all the sidebar buttons
+// Clear the sidebar buttons of any style indicating that one is selected
+function clear_sidebar_selection() {
        var items = document.getElementById("ctdl-sidebar").getElementsByTagName("*");
        for (var i = items.length; i--;) {
                if (items[i].id.includes("ctdl-sidebar-button-")) {
-                       items[i].classList.remove("w3-blue");
+                       items[i].classList.remove("ctdl-sidebar-button-selected");
                }
        }
+}
+
+
+// This function is the dispatcher that determines the correct view for a room,
+// and calls the correct renderer.  Greater/Less than bounds are accepted.
+function render_room_view(gt_msg, lt_msg) {
+
+       document.getElementById("ctdl-newmsg-button").style.display = "none";           // the view renderer will set this
+       clear_sidebar_selection();
 
        switch(current_view) {
 
                // The "forum" module displays rooms with the "VIEW_BBS" view as classic style web forums.
                case views.VIEW_BBS:
-                       document.getElementById("ctdl-sidebar-button-forums").classList.add("w3-blue");
+                       document.getElementById("ctdl-sidebar-button-forums").classList.add("ctdl-sidebar-button-selected");
                        document.getElementById("ctdl-main").innerHTML = "<div id=\"ctdl-mrp\" class=\"ctdl-forum-reading-pane\"></div>";
                        forum_readmessages("ctdl-mrp", gt_msg, lt_msg);
                        break;
 
                // The "mail" module displays rooms with the VIEW_MAILBOX view as a webmail program.
                case views.VIEW_MAILBOX:
-                       document.getElementById("ctdl-sidebar-button-mail").classList.add("w3-blue");
+                       document.getElementById("ctdl-sidebar-button-mail").classList.add("ctdl-sidebar-button-selected");
                        document.getElementById("ctdl-main").innerHTML = "";
                        mail_display();
                        break;