From 4c26b5227bdfd5c6cb1b3d01fd37987c1241e389 Mon Sep 17 00:00:00 2001
From: Art Cancro <ajc@citadel.org>
Date: Wed, 7 Sep 2022 17:31:55 -0400
Subject: [PATCH] Got the mailbox view (mailbox pane + reading pane) working
 correctly.  It's a CSS Grid view, so we should be able to offer a
 side-by-side view later just by amending the styles.

---
 webcit-ng/static/css/webcit.css  | 47 ++++++++++++++++++++++++++------
 webcit-ng/static/js/login.js     | 28 ++++++++++---------
 webcit-ng/static/js/view_mail.js |  8 ++++--
 webcit-ng/static/js/views.js     |  2 +-
 4 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 9f8ec68ee..dd4ef2b8e 100644
--- 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 489502022..7c555e99c 100644
--- 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 d81ce70e8..96ac04cb1 100644
--- 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 d9c51a636..605b7317e 100644
--- 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;
 
-- 
2.39.2