Got the mailbox view (mailbox pane + reading pane) working correctly. It's a CSS...

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 9f8ec68eef4afe9184420ef63b4ab26c71a8a2a2..dd4ef2b8e5b71dea65968ae3728dbecc9576eee2 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -42,7 +42,7 @@
 
 .ctdl-main-grid-container > div {
        text-align: left;
-       padding: 10px 0;
+       padding: 0;
 }
 
 .ctdl-banner-buttons li {              /* Buttons that appear in the top banner are list items that reference this class */
@@ -115,7 +115,7 @@ html,body,h1,h2,h3,h4,h5 {
        color: #FFFFFF;
 }
 
-.ctdl-msg-reading-pane {
+.ctdl-forum-reading-pane {
        background-color: #456789;
 }
 
@@ -313,21 +313,33 @@ blockquote pre {
 .ctdl-roomlist-mtime {
 }
 
+.ctdl-mailbox-grid-container {
+       display: grid;
+       position: relative;
+       overflow: hidden;
+       width: 100%;
+       height: 100%;
+}
+
+.ctdl-mailbox-pane {           /* list of messages when in mailbox view */
+       height: 20vw;
+       overflow-x: hidden;
+       overflow-y: scroll;
+       background-color: #DDDDDD;
+}
+
 .ctdl-mailbox-heading {
        position: sticky;
        top: 0;
        z-index: 6;
 }
 
-.ctdl-mailbox-pane {           /* list of messages when in mailbox view */
-       width: 100%;
-       height: 20em;
+.ctdl-mailbox-reading-pane {           /* message reading pane when in mailbox view */
+       height: 80vw;
        overflow-x: hidden;
        overflow-y: scroll;
-}
-
-.ctdl-reading-pane {           /* message reading/composing pane when in mailbox view */
-       overflow: auto;
+       background-color: GhostWhite;
+       padding: 5px;
 }
 
 .ctdl-compose-mail {           /* mail composition window */
@@ -337,3 +349,20 @@ blockquote pre {
        border: 5px solid red;
        background-color: yellow;
 }
+
+.ctdl-login-screen-grid-container {
+       display: grid;
+       grid-template-columns: auto auto;
+}
+
+.ctdl-login-screen-grid-item {
+       padding: 20px;
+       font-size: 1.25em;
+       vertical-align: middle;
+}
+
+.ctdl-login-screen-grid-item input {
+       height: 100%;
+       border: none;
+       font-size: 1.25em;
+}

diff --git a/webcit-ng/static/js/login.js b/webcit-ng/static/js/login.js
index 48950202206508d224daa286b2122a3c23c50a99..7c555e99cfd8f34ada6c60f6297714e9cbf8e762 100644 (file)
--- a/webcit-ng/static/js/login.js
+++ b/webcit-ng/static/js/login.js
@@ -15,19 +15,21 @@ function display_login_screen(any_message) {
                                <span>${any_message}</span>
                </div>
 
-               <div class="ctdl-modal-main">
-                       <label><b>${_("User name:")}</b></label>
-                       <input type="text" id="username" required>
-                       <br>
-                       <label><b>${_("Password:")}</b></label>
-                       <input type="password" id="password" required>
-                       <br>
-                       <input type="checkbox" checked="checked"> Remember me
-               </div>
-
-               <div class="ctdl-modal-footer">
-                       <button onClick="javascript:login_button()">${_("Log in")}</button>
-                       <button type="button">Cancel</button>
+               <div class="ctdl-login-screen-grid-container">
+                       <div class="ctdl-login-screen-grid-item"><label><b>${_("User name:")}</b></label></div>
+                       <div class="ctdl-login-screen-grid-item"><input type="text" id="username" required></div>
+                       <div class="ctdl-login-screen-grid-item"><label><b>${_("Password:")}</b></label></div>
+                       <div class="ctdl-login-screen-grid-item"><input type="password" id="password" required></div>
+                       <div class="ctdl-login-screen-grid-item"></div>
+                       <div class="ctdl-login-screen-grid-item">
+                               <input type="checkbox" checked="checked">
+                               Remember me
+                       </div>
+                       <div class="ctdl-login-screen-grid-item"></div>
+                       <div class="ctdl-login-screen-grid-item">
+                               <button onClick="javascript:login_button()">${_("Log in")}</button>
+                               <button type="button">Cancel</button>
+                       </div>
                </div>
        `;
 

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index d81ce70e8870f808b79ec0d90e0cefc52a116817..96ac04cb11023803f3ec7cd32a75e1c7b781a74e 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -100,7 +100,7 @@ function select_message(msgnum) {
        // display the message if it isn't already displayed
        if (selected_message != msgnum) {
                selected_message = msgnum;
-               mail_display_message(msgnum, document.getElementById("ctdl-reading-pane"));
+               mail_display_message(msgnum, document.getElementById("ctdl-mailbox-reading-pane"));
        }
 }
 
@@ -130,8 +130,10 @@ function mail_display() {
        document.getElementById("ctdl-newmsg-button").style.display = "block";
 
        document.getElementById("ctdl-main").innerHTML
-               = "<div id=\"ctdl-mailbox-pane\" class=\"ctdl-mailbox-pane\"></div>"
-               + "<div id=\"ctdl-reading-pane\" class=\"ctdl-reading-pane\"></div>"
+               = "<div id=\"ctdl-mailbox-grid-container\" class=\"ctdl-mailbox-grid-container\">"
+               + "<div id=\"ctdl-mailbox-pane\" class=\"ctdl-mailbox-pane\">Loading...</div>"
+               + "<div id=\"ctdl-mailbox-reading-pane\" class=\"ctdl-mailbox-reading-pane\">Lorem ipsum etc. etc.</div>"
+               + "</div>"
        ;
 
        render_mailbox_display();

diff --git a/webcit-ng/static/js/views.js b/webcit-ng/static/js/views.js
index d9c51a6364f4c99e33b814340ab00436598775fa..605b7317e68e7df6b51c87712e5e107cd838f5a4 100644 (file)
--- a/webcit-ng/static/js/views.js
+++ b/webcit-ng/static/js/views.js
@@ -23,7 +23,7 @@ function render_room_view(gt_msg, lt_msg) {
                // 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-main").innerHTML = "<div id=\"ctdl-mrp\" class=\"ctdl-msg-reading-pane\"></div>";
+                       document.getElementById("ctdl-main").innerHTML = "<div id=\"ctdl-mrp\" class=\"ctdl-forum-reading-pane\"></div>";
                        forum_readmessages("ctdl-mrp", gt_msg, lt_msg);
                        break;