From 32e59fc6da61b0b3cf4cc0ccf90682170e14660c Mon Sep 17 00:00:00 2001 From: Art Cancro Date: Thu, 22 Sep 2022 18:06:59 -0400 Subject: [PATCH] Tightened up the padding around the room list and rendered it with the flexbox model. Cleaned up the styles used in hover and selection on the sidebar. --- webcit-ng/static/css/webcit.css | 31 +++++++++++++++++++------------ webcit-ng/static/index.html | 21 ++++++++------------- webcit-ng/static/js/roomlist.js | 2 ++ webcit-ng/static/js/views.js | 23 ++++++++++++++--------- 4 files changed, 43 insertions(+), 34 deletions(-) diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css index 6f01f7101..59ddb7a68 100644 --- 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 2a11550c6..66ad74455 100644 --- a/webcit-ng/static/index.html +++ b/webcit-ng/static/index.html @@ -42,20 +42,15 @@ diff --git a/webcit-ng/static/js/roomlist.js b/webcit-ng/static/js/roomlist.js index 18a84f44a..969d1d311 100644 --- 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 = ""; // 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 605b7317e..0466f8ae1 100644 --- 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 = "
"; 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; -- 2.39.2