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

@@ -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;

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>

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 {

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>