From 8f8a60a3b35020daedadfa041b01bda2fc163164 Mon Sep 17 00:00:00 2001 From: User Content Date: Sun, 22 Dec 2024 23:03:02 +0000 Subject: Introduce dark mode --- static/rater.css | 27 ++++++++++++++++++++++----- static/rater.js | 33 ++++++++++++++++++++++++++++++--- templates/index.html | 2 ++ 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 @@ + +
-- cgit v1.2.3