Introduce dark mode

3 files changed, 54 insertions, 8 deletions

diff --git a/static/rater.css b/static/rater.css
index b73f4a0..6f441a8 100644
--- a/static/rater.css
+++ b/static/rater.css
@@ -1,5 +1,16 @@
 body {
   font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:200; font-stretch:normal;
+  background-color: Canvas;
+  color: CanvasText;
+  color-scheme: light dark;
+}
+
+body.dark-mode {
+  color-scheme: dark;
+}
+
+body.light-mode {
+  color-scheme: light;
 }
 
 .username-wrapper {
@@ -49,12 +60,13 @@ button {
 
 .event-list-item {
   vertical-align: top;
-  background-color: #f6f6f6;
+  background-color: Field;
   margin-bottom: 0.5em;
   border: 1px solid silver;
   border-radius: 10px;
   padding: 0 0.5em 0.5em 0.5em;
   box-sizing: border-box;
+  color: FieldText;
 }
 
 .event-list-item[event_state='gone'] {
@@ -100,7 +112,8 @@ body.four-column .event-list-item {
   width: 15em;
   margin: 1em 1em 0 0;
   padding: 0.2em;
-  background-color: #f0f0f0;
+  background-color: Field;
+  color: GrayText;
   border-radius: 10px;
   vertical-align:top;
   font-size: smaller;
@@ -112,17 +125,19 @@ body.four-column .event-list-item {
   font-weight: bold;
 }
 
+.event-mail,
 .event-duration,
 .event-speaker-count,
 .event-subtitle {
   font-size: smaller;
 }
 
+.event-mail,
 .event-speaker-count,
 .event-duration {
   display: inline;
   font-weight: bold;
-  background-color: cyan;
+  background-color: Highlight;
   border-radius: 2px;
   margin: 0.2em;
   padding: 0.2em;
@@ -140,7 +155,7 @@ body.four-column .event-list-item {
 .event-rating-comment {
   min-height: 3em;
   margin-top: 0.1em;
-  background-color: white;
+  background-color: Field;
 }
 
 #Filter, #Username {
@@ -187,7 +202,7 @@ body.four-column .event-list-item {
 .event-description.full,
 .event-abstract.full {
   cursor: zoom-out;
-  background: white;
+  background-color: color-mix(in srgb, Field, black 5%);
   overflow: visible;
   height: auto !important;
   white-space: initial;
@@ -199,6 +214,8 @@ body.show-ratings .ratings-button,
 body.two-column .two-columns,
 body.three-column .three-columns,
 body.four-column .four-columns,
+body.light-mode .light-mode-button,
+body.dark-mode .dark-mode-button,
 .event-list-item.editing .edit-button,
 .event-list-item[event_state='accepted'] .accept-button,
 .event-list-item[event_state='rejected'] .reject-button,
diff --git a/static/rater.js b/static/rater.js
index ec1bcfe..495775f 100644
--- a/static/rater.js
+++ b/static/rater.js
@@ -97,6 +97,14 @@ function fourcol() {
   document.body.classList.remove('three-column');
   document.body.classList.toggle('four-column');
 }
+function darkmode() {
+  document.body.classList.remove('light-mode');
+  document.body.classList.toggle('dark-mode');
+}
+function lightmode() {
+  document.body.classList.remove('dark-mode');
+  document.body.classList.toggle('light-mode');
+}
 
 function invert_sort() {
     var evl = document.getElementById('event-list');
@@ -283,16 +291,35 @@ function do_take(eid) {
 }
 
 function update_status() {
-    var accepted_count = document.querySelectorAll('.event-list-item[event_state=accepted]').length;
-    var rejected_count = document.querySelectorAll('.event-list-item[event_state=rejected]').length;
+    var accepted_count = document.querySelectorAll('.event-list-item[event_state=accepted]').length + document.querySelectorAll('.event-list-item[event_state=accepting]').length;
+    var rejected_count = document.querySelectorAll('.event-list-item[event_state=rejected]').length + document.querySelectorAll('.event-list-item[event_state=rejecting]').length;
     var taken_count = document.querySelectorAll('.event-list-item .event-coordinator').length;
     var total_count = document.getElementsByClassName('event-list-item').length;
     var total_voted_count = document.querySelectorAll('.event-rating:first-child').length;
+    var total_minute_count = 0;
+    document.querySelectorAll('.event-list-item[event_state=accepted]').forEach(function(ev) {
+      var event_duration = Number(ev.getAttribute('event_duration') || 0);
+      if (event_duration == 40) {
+          total_minute_count += 45;
+      } else {
+          total_minute_count += event_duration;
+      }
+    });
+    document.querySelectorAll('.event-list-item[event_state=accepting]').forEach(function(ev) {
+      var event_duration = Number(ev.getAttribute('event_duration') || 0);
+      if (event_duration == 40) {
+          total_minute_count += 45;
+      } else {
+          total_minute_count += event_duration;
+      }
+    });
+
     var username = document.getElementById('Username').value;
     var own_voted_count = 0;
     if (username)
         own_voted_count = document.querySelectorAll('.event-rating[submitter="'+username+'"]').length;
-    document.getElementById('status').innerHTML = total_count + ' events. ' + accepted_count + ' accepted. ' + rejected_count + ' rejected. ' + (total_count - own_voted_count) + ' todo. ' + (total_count - total_voted_count) + ' unvoted. ' + (total_count - taken_count) + ' untaken.';
+    document.getElementById('status').innerHTML = total_count + ' events. ' + accepted_count + ' accepted (' + Math.floor(total_minute_count / 60) + ':' + ('0'+(total_minute_count % 60)).slice(-2) + 'h). ' + rejected_count + ' rejected. ' + (total_count - own_voted_count) + ' todo. ' + (total_count - total_voted_count) + ' unvoted. ' + (total_count - taken_count) + ' untaken.';
+
 
     /* Do the math */
     document.querySelectorAll('.event-list-item').forEach(function(ev) {
diff --git a/templates/index.html b/templates/index.html
index 1d42018..e4b3529 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -20,6 +20,8 @@
 <button class="main-button two-columns" onclick="twocol()" title="Display events in two columns">2col</button>
 <button class="main-button three-columns" onclick="threecol()" title="Display events in three columns">3col</button>
 <button class="main-button four-columns" onclick="fourcol()" title="Display events in four columns">4col</button>
+<button class="main-button dark-mode-button" onclick="darkmode()" title="Force dark mode">🌙</button>
+<button class="main-button light-mode-button" onclick="lightmode()" title="Force light mode">☀️</button>
 </div>
 <div style="float: right; margin: 0">
 <button class="main-button" onclick="sort_by(random_sort)" title="Sort events randomly">rand</button>