From df5c0a1b05f581539652fd521e590e9c2f56e2c5 Mon Sep 17 00:00:00 2001
From: BobChao87 <bobchao87@gmail.com>
Date: Tue, 23 Nov 2021 21:55:39 -0800
Subject: [PATCH] Range understands colors

Limits the max size of the range on calendars
Starts code to support the page on smaller screens

Related to Issue #38
---
 assets/table/_variables.scss      |  2 +-
 components/calendar/view/Row.vue  |  8 +++++++-
 components/calendar/view/View.vue |  4 +++-
 components/element/Range.vue      | 21 ++++++++++++++++-----
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/assets/table/_variables.scss b/assets/table/_variables.scss
index 0d433205..acc2fa47 100644
--- a/assets/table/_variables.scss
+++ b/assets/table/_variables.scss
@@ -1,7 +1,7 @@
 @use '~bulmaswatch/solar/variables' as solar;
 @use '~bulma/sass/utilities/functions' as bulma;
 
-// Colors are designed to take advantage of playing of the background. Theme neutral
+// Colors are designed to take advantage of playing off the background. Theme neutral
 $neutral-color: rgba(255, 255, 255, 0.1) !default;
 $light-color: rgba(255, 255, 255, 0.05) !default;
 $dark-color: rgba(0, 0, 0, 0.1) !default;
diff --git a/components/calendar/view/Row.vue b/components/calendar/view/Row.vue
index bb32e328..58d29aae 100644
--- a/components/calendar/view/Row.vue
+++ b/components/calendar/view/Row.vue
@@ -1,7 +1,7 @@
 <template>
   <ElementTableRow>
     <ElementTableCell class="duration">
-      <ElementRange class="is-primary" :min="0" :max="24" :start="start" :end="end" />
+      <ElementRange class="duration-range" :min="0" :max="24" :start="start" :end="end" />
     </ElementTableCell>
     <ElementTableCell class="name">
       <ElementLink :to="`/marathon/${marathon.id}`">
@@ -61,3 +61,9 @@ export default Vue.extend({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.duration-range {
+  width: 100px;
+}
+</style>
diff --git a/components/calendar/view/View.vue b/components/calendar/view/View.vue
index 3b4a1801..e097d3b2 100644
--- a/components/calendar/view/View.vue
+++ b/components/calendar/view/View.vue
@@ -138,7 +138,9 @@ export default Vue.extend({
 @use '~assets/table';
 
 .marathon-calendar-table {
-  @include table.shrink(3);
+  @include table.shrink(3, (
+    500px '.links' 2,
+  ));
 
   > .day,
   > .day-range {
diff --git a/components/element/Range.vue b/components/element/Range.vue
index 84e3087d..6078bbe5 100644
--- a/components/element/Range.vue
+++ b/components/element/Range.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="element-range" :style="rangeCutoffs">
+  <div class="element-range" :style="rangeCutoffs" :aria-valuemin="min" :aria-valuemax="max" :aria-valuetext="`${start} - ${end}`">
     <div class="selected-range" />
   </div>
 </template>
@@ -56,17 +56,28 @@ export default Vue.extend({
   width: 100%;
   background-color: bulma.$grey-lightest;
 
-  .selected-range {
+  > .selected-range {
     position: absolute;
     border: none;
-    border-radius: bulma.$radius-rounded;
+    border-radius: solar.$radius;
     display: block;
     height: 100%;
-    overflow: hidden;
     left: var(--start-range);
     right: var(--end-range);
-    // TODO Make with the colors
     background-color: solar.$primary;
   }
+
+  $colors:
+    'primary' solar.$primary,
+    'info' solar.$info,
+    'success' solar.$green,
+    'warning' solar.$warning,
+    'danger' solar.$red;
+
+  @each $name, $color in $colors {
+    &.is-#{$name} > .selected-range {
+      background-color: $color;
+    }
+  }
 }
 </style>