Slimmed down some of the border elements.

User interface is NOT healthy at any weight.

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index aa9ef894af6475bfee6b183db1696c7f653cc7a2..269924ce7545b30ee2a8538298618bcbf89866ea 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -21,7 +21,7 @@
        grid-template-areas:
                'ctdl-mg-banner ctdl-mg-banner'
                'ctdl-mg-menu ctdl-mg-main';
-       gap: 3px;
+       gap: 1px;
        background-color: DarkSlateGrey;        /* This is the color of the lines between the boxes, and also the boxes themselves if not overridden */
        padding: 0;                             /* This is the border around the edges of the screen */
        width: 100vw;
@@ -355,6 +355,19 @@ blockquote pre {
        width: 75%;
 }
 
+/* use this class for any small item that needs to be centered on the screen in the main div */
+.ctdl-middle {
+       display: flex;
+       flex-direction: column;
+       justify-content: center;
+       align-items: center;
+       text-align: center;
+       min-height: 100vh;
+       background-color: GhostWhite;
+       overflow: none;
+       border: none;
+}
+
 .ctdl-roomlist-top {
        background-color: GhostWhite;
        width: 100%;

diff --git a/webcit-ng/static/js/roomlist.js b/webcit-ng/static/js/roomlist.js
index 969d1d311a5f2b626c0047bfb999bd5a4d046698..cb290236186a373f06b4c7ea98e8fc7beb1c587e 100644 (file)
--- a/webcit-ng/static/js/roomlist.js
+++ b/webcit-ng/static/js/roomlist.js
@@ -7,7 +7,7 @@
 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
+       document.getElementById("ctdl-main").innerHTML = "<div class=\"ctdl-middle\"><img src=\"/ctdl/s/images/throbber.gif\" /></div>";        // show throbber while loading
        clear_sidebar_selection();
        document.getElementById("ctdl-sidebar-button-forums").classList.add("ctdl-sidebar-button-selected");
 

diff --git a/webcit-ng/static/js/views.js b/webcit-ng/static/js/views.js
index 5292050bc9205970e4d0eace5b516efaf988a973..72af39b64dea96af3ee4e2b0b3a34a1bebdbfc85 100644 (file)
--- a/webcit-ng/static/js/views.js
+++ b/webcit-ng/static/js/views.js
@@ -46,48 +46,48 @@ function render_room_view() {
                // The "contacts" module displays rooms with the VIEW_ADDRESSBOOK view as a contacts manager.
                case views.VIEW_ADDRESSBOOK:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>'" + current_room + "' is an address book but there is no renderer.</center>";
+                               "<div class=\"ctdl-middle\">'" + current_room + "' is an address book but there is no renderer.</div>";
                        break;
 
                case views.VIEW_CALENDAR:
                case views.VIEW_CALBRIEF:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>'" + current_room + "' is a calendar but there is no renderer.</center>";
+                               "<div class=\"ctdl-middle\">'" + current_room + "' is a calendar but there is no renderer.</div>";
                        break;
 
                case views.VIEW_TASKS:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>'" + current_room + "' is a task list but there is no renderer.</center>";
+                               "<div class=\"ctdl-middle\">'" + current_room + "' is a task list but there is no renderer.</div>";
                        break;
 
                case views.VIEW_NOTES:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>'" + current_room + "' is a notes list but there is no renderer.</center>";
+                               "<div class=\"ctdl-middle\">'" + current_room + "' is a notes list but there is no renderer.</div>";
                        break;
 
                case views.VIEW_WIKI:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>'" + current_room + "' is a wiki but there is no renderer.</center>";
+                               "<div class=\"ctdl-middle\">'" + current_room + "' is a wiki but there is no renderer.</div>";
                        break;
 
                case views.VIEW_JOURNAL:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>'" + current_room + "' is a journal but there is no renderer.</center>";
+                               "<div class=\"ctdl-middle\">'" + current_room + "' is a journal but there is no renderer.</div>";
                        break;
 
                case views.VIEW_BLOG:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>'" + current_room + "' is a blog but there is no renderer.</center>";
+                               "<div class=\"ctdl-middle\">'" + current_room + "' is a blog but there is no renderer.</div>";
                        break;
 
                case views.VIEW_QUEUE:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>We ought to be displaying the email queue here.</center>";
+                               "<div class=\"ctdl-middle\">We ought to be displaying the email queue here.</div>";
                        break;
 
                default:
                        document.getElementById("ctdl-main").innerHTML =
-                               "<center>The view for " + current_room + " is " + current_view + " but there is no renderer.</center>";
+                               "<div class=\"ctdl-middle\">The view for " + current_room + " is " + current_view + " but there is no renderer.</div>";
                        break;
        }