From: Art Cancro <ajc@citadel.org>
Date: Tue, 4 Jun 2024 03:12:36 +0000 (-0400)
Subject: Now there are labels at the top.  Ho-ho-ho.
X-Git-Url: https://code.citadel.org/?a=commitdiff_plain;p=citadel.git

Now there are labels at the top.  Ho-ho-ho.
---

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index c9f6f4d5f..06ef01033 100644
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -697,6 +697,29 @@ blockquote pre {
 	color: White;
 }
 
+.ctdl-calendar-container {			/* Flexbox container for calendars; child elements are headings and content */
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+	align-items: center;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.ctdl-calendar-toplabels {			/* days and numbers of the week, up top */
+	height: 5%;
+	width: 100%;
+}
+
+.ctdl-calendar-content {			/* days and numbers of the week, up top */
+	flex-grow: 0;
+	height: 95%;
+	width: 100%;
+}
+
 .ctdl-calendar-week {				/* Flexbox container for day, 3-day, 5-day, week view */
 	display: flex;
 	flex-direction: row;
@@ -714,10 +737,19 @@ blockquote pre {
 	border: 1px solid GhostWhite;
 }
 
+.ctdl-calendar-label {				/* Flexbox child for LABEL of one day of the week */
+	flex-grow: 0;				/* Keep all columns the same size */
+	width: 100%;				/* Fill the width of the main pane; don't compress them into narrow boxes */
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	font-weight: bold;
+}
+
 .ctdl-calendar-day {				/* Flexbox child for one day of the week */
 	flex-grow: 0;				/* Keep all columns the same size */
 	background-color: White;
-	border: 1px solid GhostWhite;
+	border: 1px solid SlateGrey;
 	height: 100%;				/* Occupy the entire height of the main pane */
 	width: 100%;				/* Fill the width of the main pane; don't compress them into narrow boxes */
 }
diff --git a/webcit-ng/static/js/view_calendar.js b/webcit-ng/static/js/view_calendar.js
index aa5d85187..76de28902 100644
--- a/webcit-ng/static/js/view_calendar.js
+++ b/webcit-ng/static/js/view_calendar.js
@@ -88,7 +88,9 @@ function update_calendar_display() {
 		let month = this_column_date.getMonth() + 1;
 		let day_of_month = this_column_date.getDate();
 		let weekday = this_column_date.toLocaleString("default", { weekday: "short" })
-		document.getElementById("ctdl-cal-day" + i).innerHTML = weekday + " " + year + "-" + month + "-" + day_of_month;
+		let monthname = this_column_date.toLocaleString("default", { month: "short" })
+		document.getElementById("ctdl-cal-label" + i).innerHTML = weekday + " " + year + "-" + monthname + "-" + day_of_month;
+		document.getElementById("ctdl-cal-day" + i).innerHTML = "This is the content for " + this_column_date;
 
 		// Get ready for the next column
 		this_column_date.setDate(this_column_date.getDate() + 1);
@@ -189,20 +191,35 @@ function view_render_calendar() {
 	`;
 	document.getElementById("ctdl-calendar-nav").style.display = "block";
 
-	// This will be the hours ruler on the left side of the screen.
-	let caldisplay = `
-		<div class="ctdl-calendar-week">
-		<div class="ctdl-calendar-ruler">
-	`;
+	let caldisplay = "";
+	caldisplay += `<div class="ctdl-calendar-container">`;		// top level container
+	caldisplay += `<div class="ctdl-calendar-toplabels">`;		// the row of labels above the calendar content
+
+	// This section renders the day labels at the top of the screen
+	caldisplay += `<div class="ctdl-calendar-week">`;		// container for ruler+days
+	caldisplay += `<div class="ctdl-calendar-ruler">`;		// the hours ruler on the left side of the screen
+	caldisplay += "</div>";						// closes ctdl-calendar-ruler
+	for (let i=0; i<days_being_displayed; ++i) {
+		caldisplay += `<div id="ctdl-cal-label` + i + `" class="ctdl-calendar-label">Hi!</div>`;
+	}
+	caldisplay += "</div>";						// closes ctdl-calendar-week
+
+	caldisplay += `</div>`;						// closes ctdl-calendar-toplabels
+	caldisplay += `<div class="ctdl-calendar-content">`;		// the actual boxes of content below the labels
+	caldisplay += `<div class="ctdl-calendar-week">`;		// container for ruler+days
+	caldisplay += `<div class="ctdl-calendar-ruler">`;		// the hours ruler on the left side of the screen
 	for (let i=0; i<24; ++i) {
 		caldisplay += i + "<br>";
 	};
-	caldisplay += `</div>`;
+	caldisplay += `</div>`;						// closes ctdl-calendar-ruler
 
+	// This section renders the day boxes.
 	for (let i=0; i<days_being_displayed; ++i) {
 		caldisplay += `<div id="ctdl-cal-day` + i + `" class="ctdl-calendar-day">Hi!</div>`;
 	}
-	caldisplay += "</div>";
+	caldisplay += "</div>";						// closes ctdl-calendar-week
+	caldisplay += "</div>";						// closes ctdl-calendar-content
+	caldisplay += "</div>";						// closes ctdl-calendar-container
 	document.getElementById("ctdl-main").innerHTML = caldisplay;
 
 	// Start on today.