summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
authorUser Content <content@content.events.ccc.de>2024-12-22 23:03:02 +0000
committerUser Content <content@content.events.ccc.de>2024-12-22 23:03:02 +0000
commit8f8a60a3b35020daedadfa041b01bda2fc163164 (patch)
tree67be10057c9e8ddb7e8a0257edf79b9a7c110f8e /static
parentdf142fc3849671f8af421ff96a8a17e664c12318 (diff)
Introduce dark mode
Diffstat (limited to 'static')
-rw-r--r--static/rater.css27
-rw-r--r--static/rater.js33
2 files changed, 52 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 @@
1body { 1body {
2 font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:200; font-stretch:normal; 2 font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:200; font-stretch:normal;
3 background-color: Canvas;
4 color: CanvasText;
5 color-scheme: light dark;
6}
7
8body.dark-mode {
9 color-scheme: dark;
10}
11
12body.light-mode {
13 color-scheme: light;
3} 14}
4 15
5.username-wrapper { 16.username-wrapper {
@@ -49,12 +60,13 @@ button {
49 60
50.event-list-item { 61.event-list-item {
51 vertical-align: top; 62 vertical-align: top;
52 background-color: #f6f6f6; 63 background-color: Field;
53 margin-bottom: 0.5em; 64 margin-bottom: 0.5em;
54 border: 1px solid silver; 65 border: 1px solid silver;
55 border-radius: 10px; 66 border-radius: 10px;
56 padding: 0 0.5em 0.5em 0.5em; 67 padding: 0 0.5em 0.5em 0.5em;
57 box-sizing: border-box; 68 box-sizing: border-box;
69 color: FieldText;
58} 70}
59 71
60.event-list-item[event_state='gone'] { 72.event-list-item[event_state='gone'] {
@@ -100,7 +112,8 @@ body.four-column .event-list-item {
100 width: 15em; 112 width: 15em;
101 margin: 1em 1em 0 0; 113 margin: 1em 1em 0 0;
102 padding: 0.2em; 114 padding: 0.2em;
103 background-color: #f0f0f0; 115 background-color: Field;
116 color: GrayText;
104 border-radius: 10px; 117 border-radius: 10px;
105 vertical-align:top; 118 vertical-align:top;
106 font-size: smaller; 119 font-size: smaller;
@@ -112,17 +125,19 @@ body.four-column .event-list-item {
112 font-weight: bold; 125 font-weight: bold;
113} 126}
114 127
128.event-mail,
115.event-duration, 129.event-duration,
116.event-speaker-count, 130.event-speaker-count,
117.event-subtitle { 131.event-subtitle {
118 font-size: smaller; 132 font-size: smaller;
119} 133}
120 134
135.event-mail,
121.event-speaker-count, 136.event-speaker-count,
122.event-duration { 137.event-duration {
123 display: inline; 138 display: inline;
124 font-weight: bold; 139 font-weight: bold;
125 background-color: cyan; 140 background-color: Highlight;
126 border-radius: 2px; 141 border-radius: 2px;
127 margin: 0.2em; 142 margin: 0.2em;
128 padding: 0.2em; 143 padding: 0.2em;
@@ -140,7 +155,7 @@ body.four-column .event-list-item {
140.event-rating-comment { 155.event-rating-comment {
141 min-height: 3em; 156 min-height: 3em;
142 margin-top: 0.1em; 157 margin-top: 0.1em;
143 background-color: white; 158 background-color: Field;
144} 159}
145 160
146#Filter, #Username { 161#Filter, #Username {
@@ -187,7 +202,7 @@ body.four-column .event-list-item {
187.event-description.full, 202.event-description.full,
188.event-abstract.full { 203.event-abstract.full {
189 cursor: zoom-out; 204 cursor: zoom-out;
190 background: white; 205 background-color: color-mix(in srgb, Field, black 5%);
191 overflow: visible; 206 overflow: visible;
192 height: auto !important; 207 height: auto !important;
193 white-space: initial; 208 white-space: initial;
@@ -199,6 +214,8 @@ body.show-ratings .ratings-button,
199body.two-column .two-columns, 214body.two-column .two-columns,
200body.three-column .three-columns, 215body.three-column .three-columns,
201body.four-column .four-columns, 216body.four-column .four-columns,
217body.light-mode .light-mode-button,
218body.dark-mode .dark-mode-button,
202.event-list-item.editing .edit-button, 219.event-list-item.editing .edit-button,
203.event-list-item[event_state='accepted'] .accept-button, 220.event-list-item[event_state='accepted'] .accept-button,
204.event-list-item[event_state='rejected'] .reject-button, 221.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() {
97 document.body.classList.remove('three-column'); 97 document.body.classList.remove('three-column');
98 document.body.classList.toggle('four-column'); 98 document.body.classList.toggle('four-column');
99} 99}
100function darkmode() {
101 document.body.classList.remove('light-mode');
102 document.body.classList.toggle('dark-mode');
103}
104function lightmode() {
105 document.body.classList.remove('dark-mode');
106 document.body.classList.toggle('light-mode');
107}
100 108
101function invert_sort() { 109function invert_sort() {
102 var evl = document.getElementById('event-list'); 110 var evl = document.getElementById('event-list');
@@ -283,16 +291,35 @@ function do_take(eid) {
283} 291}
284 292
285function update_status() { 293function update_status() {
286 var accepted_count = document.querySelectorAll('.event-list-item[event_state=accepted]').length; 294 var accepted_count = document.querySelectorAll('.event-list-item[event_state=accepted]').length + document.querySelectorAll('.event-list-item[event_state=accepting]').length;
287 var rejected_count = document.querySelectorAll('.event-list-item[event_state=rejected]').length; 295 var rejected_count = document.querySelectorAll('.event-list-item[event_state=rejected]').length + document.querySelectorAll('.event-list-item[event_state=rejecting]').length;
288 var taken_count = document.querySelectorAll('.event-list-item .event-coordinator').length; 296 var taken_count = document.querySelectorAll('.event-list-item .event-coordinator').length;
289 var total_count = document.getElementsByClassName('event-list-item').length; 297 var total_count = document.getElementsByClassName('event-list-item').length;
290 var total_voted_count = document.querySelectorAll('.event-rating:first-child').length; 298 var total_voted_count = document.querySelectorAll('.event-rating:first-child').length;
299 var total_minute_count = 0;
300 document.querySelectorAll('.event-list-item[event_state=accepted]').forEach(function(ev) {
301 var event_duration = Number(ev.getAttribute('event_duration') || 0);
302 if (event_duration == 40) {
303 total_minute_count += 45;
304 } else {
305 total_minute_count += event_duration;
306 }
307 });
308 document.querySelectorAll('.event-list-item[event_state=accepting]').forEach(function(ev) {
309 var event_duration = Number(ev.getAttribute('event_duration') || 0);
310 if (event_duration == 40) {
311 total_minute_count += 45;
312 } else {
313 total_minute_count += event_duration;
314 }
315 });
316
291 var username = document.getElementById('Username').value; 317 var username = document.getElementById('Username').value;
292 var own_voted_count = 0; 318 var own_voted_count = 0;
293 if (username) 319 if (username)
294 own_voted_count = document.querySelectorAll('.event-rating[submitter="'+username+'"]').length; 320 own_voted_count = document.querySelectorAll('.event-rating[submitter="'+username+'"]').length;
295 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.'; 321 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.';
322
296 323
297 /* Do the math */ 324 /* Do the math */
298 document.querySelectorAll('.event-list-item').forEach(function(ev) { 325 document.querySelectorAll('.event-list-item').forEach(function(ev) {