From: Art Cancro <ajc@citadel.org>
Date: Mon, 27 Mar 2023 21:57:35 +0000 (-0400)
Subject: Slimmed down some of the border elements.
X-Git-Tag: v976~68
X-Git-Url: https://code.citadel.org/?a=commitdiff_plain;h=7a567c8718e5f57462e53eb28f909c2c2abd9999;p=citadel.git

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 aa9ef894a..269924ce7 100644
--- 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 969d1d311..cb2902361 100644
--- 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 5292050bc..72af39b64 100644
--- 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;
 	}