diff --git a/static/css/cmatch.css b/static/css/cmatch.css index b3b2a5e..84e2c79 100644 --- a/static/css/cmatch.css +++ b/static/css/cmatch.css @@ -95,6 +95,22 @@ background-repeat: no-repeat; } +.match_duration_mins { + white-space: pre; + text-align: right; + padding-left: 1em; +} +.match_duration_mins span::after { + content: ''; + display: inline-block; + width: 1em; + height: 1em; +} +.match_duration_mins span.match_duration_mins_display_active::after { + content: "min"; /* Unicode value for a heart */ + /* font-size: 2rem; set font size */ +} + .match_no_umpire { font-style: italic; } diff --git a/static/js/cmatch.js b/static/js/cmatch.js index c571276..211318f 100644 --- a/static/js/cmatch.js +++ b/static/js/cmatch.js @@ -128,6 +128,17 @@ function render_match_row(tr, match, court, style) { 'data-match_id': match._id, }, calc_score_str(match)); } + if (style === 'default' || style === 'plain') { + const duration_mins = match.duration_ms ? Math.floor(match.duration_ms / 60000) : 0; + const duration_td = uiu.el(tr, 'td', 'match_duration_mins'); + uiu.el(duration_td, 'span', { + 'class': ( + 'match_duration_mins_display' + + (duration_mins ? ' match_duration_mins_display_active' : '') + ), + 'data-match_id': match._id, + }, duration_mins || ''); + } if (style === 'default' || style === 'plain') { const shuttle_td = uiu.el(tr, 'td', 'match_shuttle_count'); uiu.el(shuttle_td, 'span', {