From 432627182c17d98da8a72b30d143c452db9c94e8 Mon Sep 17 00:00:00 2001
From: BobChao87 <bobchao87@gmail.com>
Date: Fri, 26 Nov 2021 01:18:48 -0800
Subject: [PATCH] Range size now no longer depends on compile order

Calendar ranges will match day headers in terms of color info

Related to Issue #38
---
 components/calendar/view/Row.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/components/calendar/view/Row.vue b/components/calendar/view/Row.vue
index a8515071..668e5a94 100644
--- a/components/calendar/view/Row.vue
+++ b/components/calendar/view/Row.vue
@@ -14,7 +14,14 @@
       </i18n>
     </ElementTableCell>
     <ElementTableCell class="range">
-      <ElementRange class="range-bar" :min="0" :max="24" :start="start" :end="end" />
+      <ElementRange
+        class="range-bar"
+        :class="rangeColor"
+        :min="0"
+        :max="24"
+        :start="start"
+        :end="end"
+      />
     </ElementTableCell>
     <ElementTableCell class="name">
       <ElementLink :to="`/marathon/${marathon.id}`">
@@ -66,6 +73,14 @@ export default Vue.extend({
       }
       return durationText;
     },
+    rangeColor(): { 'is-primary': boolean, 'is-info': boolean } {
+      const now = Date.now();
+      const isNow = this.marathonStart.getTime() <= now && now <= this.marathonEnd.getTime();
+      return {
+        'is-primary': isNow,
+        'is-info': !isNow,
+      };
+    },
     todayStart(): Date {
       return new Date(this.datetime);
     },
@@ -92,7 +107,8 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .range-bar {
-  width: 100px;
+  max-width: 100px;
+  min-width: 50px;
 }
 </style>