DWO-509 Make WMS time selector floating for map views

src/App.vue

@@ -119,4 +119,17 @@ html, body {
   outline-offset: -1px;
 }
 
+/* Hacky way to get the Mapbox logo and attribution control to not be hidden behind the floating
+   date/time slider for the Data View and Spatial Display. */
+.mapboxgl-ctrl-logo {
+  position: relative;
+  left: 8px;
+  bottom: 70px;
+}
+
+.mapboxgl-ctrl-attrib {
+  position: relative;
+  bottom: 70px;
+  right: 15px;
+}
 </style>

src/components/DateTimeSlider.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>
+  <div
+    class="time-slider-container"
+    :class="[themeClass, floatingClass]"
+  >
     <v-slider v-model="index" :max="max" step="1" tick-size="6" tabindex="0" @input="onInput" hide-details
       height="0">
     </v-slider>
@@ -47,12 +50,13 @@
   @Prop({ default: () => { return [new Date(1970)] } }) private dates!: Date[]
   @Prop({ default: false, type: Boolean }) private loading!: boolean
   @Prop({ default: false, type: Boolean }) private now!: boolean
+  @Prop({ default: false, type: Boolean }) private floating!: boolean
 
   index: number = 0
   currentDate!: Date
   useNow: boolean = true
   isPlaying: boolean = false
   intervalTimer: any = 0
   hideLabel = true
 
   mounted (): void {
@@ -77,6 +81,14 @@
     return this.isPlaying ? 'orange' : ''
   }
 
+  get themeClass (): string {
+    return this.$vuetify.theme.dark ? 'dark' : 'light'
+  }
+
+  get floatingClass (): string {
+    return this.floating ? 'floating' : 'non-floating'
+  }
+
   togglePlay (): void {
     if (this.isPlaying) {
       this.isPlaying = false
@@ -183,8 +195,22 @@
 }
 </script>
 <style scoped>
-.time-slider-container {
-  height: 104px;
-  z-index: 100;
+.time-slider-container.non-floating {
+  height: 48px;
+}
+
+.time-slider-container.floating {
+  height: 63px;
+  background-clip: content-box;
+  padding: 0 15px 15px;
+  filter: drop-shadow(3px 3px 3px #888);
+}
+
+.time-slider-container.dark {
+  background-color: black;
+}
+
+.time-slider-container.light {
+  background-color: white;
 }
 </style>

src/views/DataView.vue

@@ -41,7 +41,7 @@
     </portal>
     <div class="grid-root" :class="layoutClass">
       <div class="grid-map" v-show="showMap">
-        <div class="map-container" style="height: calc(100% - 48px); position: relative;">
+        <div class="map-container">
           <MapComponent>
             <MapboxLayer v-if="showLayer" :layer="layerOptions"></MapboxLayer>
             <v-mapbox-layer v-if="showLocationsLayer" :options="locationsLayer" clickable @click="onLocationClick"></v-mapbox-layer>
@@ -61,9 +61,15 @@
             <LocationsLayerControl v-model="showLocationsLayer"/>
           </v-chip-group>
         </div>
-        <DateTimeSlider class="date-time-slider" v-model="currentTime" :dates="times" @update:now="setCurrentTime"
-          @input="debouncedSetLayerOptions" @timeupdate="updateTime">
-        </DateTimeSlider>
+        <DateTimeSlider
+          class="date-time-slider"
+          v-model="currentTime"
+          :dates="times"
+          @update:now="setCurrentTime"
+          @input="debouncedSetLayerOptions"
+          @timeupdate="updateTime"
+          floating
+        />
       </div>
       <div class="grid-charts" ref="grid-charts" v-if="hasSelectedLocation && !$vuetify.breakpoint.mobile">
         <v-toolbar class="toolbar-charts" dense flat>
@@ -543,6 +549,7 @@ export default class DataView extends Mixins(WMSMixin, TimeSeriesMixin, PiReques
   }
 
   .grid-map {
+    position: relative;
     display: flex;
     flex-basis: 400px;
     flex: 1 1 auto;
@@ -643,26 +650,28 @@ export default class DataView extends Mixins(WMSMixin, TimeSeriesMixin, PiReques
   }
 
   .map-container {
-    display: flex;
-    flex: 1 1;
+    width: 100%;
     height: 100%;
   }
 
-  .datetime-control-container {
-    flex-grow: 0;
-    z-index: 1000;
+  .date-time-slider {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    z-index: 100;
   }
 
-.v-list-item--dense, .v-list--dense .v-list-item {
-  min-height: 28px !important;
-}
+  .v-list-item--dense, .v-list--dense .v-list-item {
+    min-height: 28px !important;
+  }
 
-.v-treeview--dense .v-treeview-node__root {
-  min-height: 28px !important;
-}
+  .v-treeview--dense .v-treeview-node__root {
+    min-height: 28px !important;
+  }
 
-.v-treeview-node__level {
-  width: 12px !important;
-}
+  .v-treeview-node__level {
+    width: 12px !important;
+  }
 
 </style>

src/views/SpatialDisplay.vue

@@ -26,17 +26,23 @@
         :open.sync="open"
       />
     </portal>
-    <div style="height: calc(100% - 48px); position: relative">
+    <div class="map-container">
       <MapComponent>
         <MapboxLayer :layer="layerOptions" />
       </MapComponent>
       <div class="colourbar">
         <ColourBar v-model="legend" v-if="legend.length > 0"/>
       </div>
     </div>
-    <DateTimeSlider class="date-time-slider" v-model="currentTime" :dates="times" @update:now="setCurrentTime"
-      @input="debouncedSetLayerOptions" @timeupdate="updateTime">
-    </DateTimeSlider>
+    <DateTimeSlider
+      class="date-time-slider"
+      v-model="currentTime"
+      :dates="times"
+      @update:now="setCurrentTime"
+      @input="debouncedSetLayerOptions"
+      @timeupdate="updateTime"
+      floating
+    />
   </div>
 </template>
 
@@ -220,6 +226,19 @@ export default class SpatialDisplay extends Mixins(WMSMixin) {
     width: 500px;
     height: 100px;
     position: absolute;
-    bottom: 10px;
+    bottom: 85px;
+  }
+
+  .map-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .date-time-slider {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    z-index: 100;
   }
 </style>