Applied style changes to the mailbox pane that are both semantically correct and...

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 5796c69ace93958893df5d188a4c5b85a4ddd614..0e734074b1fca76a17977fa1561c7570a949297f 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -321,8 +321,8 @@ blockquote pre {
        height: 100%;
 }
 
-.ctdl-mailbox-pane {           /* list of messages when in mailbox view */
-       height: 20vw;
+.ctdl-mailbox-pane {                                   /* list of messages when in mailbox view */
+       height: 15vw;
        overflow-x: hidden;
        overflow-y: scroll;
        background-color: #DDDDDD;
@@ -334,28 +334,44 @@ blockquote pre {
        border-collapse: collapse;
 }
 
-.ctdl-mailbox-table tr {
-       border-top: 1px solid red;
-       border-bottom: 1px solid red;
+.ctdl-mailbox-table td {
+       padding-top: 5px;
+       padding-bottom: 5px;
 }
 
-.ctdl-mailbox-heading {
+.ctdl-mailbox-table tr:nth-child(even) {               /* this gives us the alternating-bar effect */
+       background-color: Gainsboro;
+}
+
+.ctdl-mailbox-table tr:hover {
+       background-color: Blue;
+       color: White;
+}
+
+.ctdl-mailbox-table th {
        position: sticky;
        top: 0;
        z-index: 6;
-       background-color: #CCCCCC;
+       background-color: SlateGrey;
+       color: White;
+       padding-top: 5px;
+       padding-bottom: 5px;
 }
 
+.ctdl-mailbox-table th:hover {                         /* Suppress highlighting the header bar */
+       background-color: SlateGrey;
+       color: White;
+}
 
-.ctdl-mailbox-reading-pane {           /* message reading pane when in mailbox view */
+.ctdl-mailbox-reading-pane {                           /* message reading pane when in mailbox view */
        height: 80vw;
        overflow-x: hidden;
-       overflow-y: scroll;
+       overflow-y: auto;
        background-color: GhostWhite;
        padding: 5px;
 }
 
-.ctdl-compose-mail {           /* mail composition window */
+.ctdl-compose-mail {                                   /* mail composition window */
        width: 100%;
        height: 100%;
        overflow: auto;

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index c977edb42f7e437f6256d562782adb368a24fe24..e27ef681035d0460cb60187fdbde518616403f87 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -183,8 +183,7 @@ function render_mailbox_display() {
                msgs = await(response.json());
                if (response.ok) {
 
-                       box =   "<table class=\"ctdl-mailbox-table\" width=100%>"
-                               + "<tr class=\"ctdl-mailbox-heading\">"
+                       box =   "<table class=\"ctdl-mailbox-table\" width=100%><tr>"
                                + "<th>" + _("Subject") + "</th>"
                                + "<th>" + _("Sender") + "</th>"
                                + "<th>" + _("Date") + "</th>"