Make wis2box-ui mobile-friendlier (#64)

* Move common helper functions to their own file

* Update header spacing (for mobile)

* Update WisStation.vue

* Cleanup StationHistory.vue performance

* Fix app spacing on mobile

* Fix Station list spacing on mobile

* Fix dataset view for mobile

* Various small fixes

- Fix station reloading timeout
- Small spacing adjustments
- Ensure StationInfo and StationHistory are cleared when selecting a new station

* Fix dialog plotter view for mobile

* Publish test image to GHCR

Revert "Publish test image to GHCR"

This reverts commit d671833.

* Show station map on mobile above station list

* Update ghcr.yml

Revert "Update ghcr.yml"

This reverts commit cb0a1f2.

* Remove publication of image to test tag

* Adjust header spacing

src/App.vue

@@ -3,14 +3,18 @@
     <app-header app />
 
     <v-main>
-      <v-card flat class="py-3">
+      <v-responsive class="pa-2">
         <v-row justify="center">
-          <v-responsive width="90%" max-width="1130">
-            <app-nav />
-            <router-view />
-          </v-responsive>
+          <v-card flat width="90%" max-width="1130">
+            <v-layout>
+              <app-nav />
+              <v-main>
+                <router-view />
+              </v-main>
+            </v-layout>
+          </v-card>
         </v-row>
-      </v-card>
+      </v-responsive>
     </v-main>
 
     <app-footer app class="pt-4" />
@@ -39,30 +43,6 @@ export default {
     toggleDialog: function () {
       this.dialog = this.dialog === true ? false : true;
     },
-    clean(word) {
-      if (typeof word === "string") {
-        return (
-          word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
-        ).replaceAll("_", " ");
-      }
-    },
-    parseForNameAndTime(datastream) {
-      var name = datastream.name;
-      if (datastream.phenomenonTime.includes("/")) {
-        const splitTime = datastream.phenomenonTime.split("/");
-        var startDate = new Date(splitTime[0]);
-        var endDate = new Date(splitTime[1]);
-        var timeDifference = endDate.getTime() - startDate.getTime();
-        var hourDifference = Math.floor(timeDifference / (1000 * 3600));
-        if (hourDifference > 0) {
-          name = `${name} (${hourDifference} hr)`;
-        } else {
-          var minuteDifference = Math.floor(timeDifference / (1000 * 60));
-          name = `${name} (${minuteDifference} min)`;
-        }
-      }
-      return this.clean(name);
-    },
   },
   setup() {
     const { t } = useI18n();

src/components/ChartDialog.vue

@@ -2,8 +2,19 @@
   <div class="chart-dialog">
     <v-overlay v-model="$root.dialog" class="align-center justify-center">
       <div>
-        <v-card min-width="1100" class="pa-4">
-          <v-card-title class="text-h4" v-html="station.properties.name" />
+        <v-card
+          :width="$vuetify.display.width"
+          :max-height="$vuetify.display.height * 0.95"
+          max-width="1100"
+          class="pa-4 scroll"
+        >
+          <v-toolbar color="#FFF">
+            <v-card-title class="text-h4" v-html="station.properties.name" />
+            <v-spacer />
+            <v-btn varaint="text" color="pink" icon @click="$root.toggleDialog">
+              <v-icon icon="mdi-close"></v-icon>
+            </v-btn>
+          </v-toolbar>
           <v-card-subtitle v-html="station.id" />
           <v-responsive height="590">
             <data-viewer :station="station" />
@@ -41,3 +52,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped>
+.scroll {
+   overflow-y: scroll
+}
+</style>

src/components/app/AppHeader.vue

@@ -9,22 +9,23 @@
       </template>
 
       <template v-slot:default>
-        <v-row justify="center">
-          <v-responsive width="90%" max-width="1130">
-            <v-container fluid>
-              <v-row>
-                <v-spacer />
-                <token-auth class="pt-4" />
-                <select-locale class="pt-4 pr-4" />
-              </v-row>
-              <v-row>
-                <a :href="wis2" title="wis2box">
-                  <img :src="logo" class="px-4 pb-6" />
-                </a>
-              </v-row>
-            </v-container>
-          </v-responsive>
-        </v-row>
+        <v-responsive
+          width="90%"
+          max-width="1130"
+          height="100%"
+          class="mx-auto"
+        >
+          <v-container fluid>
+            <v-row align="start" fill-height>
+              <a :href="wis2" title="wis2box">
+                <img :src="logo" class="pl-6 my-3" />
+              </a>
+              <v-spacer />
+              <token-auth />
+              <select-locale class="pr-6" />
+            </v-row>
+          </v-container>
+        </v-responsive>
       </template>
     </v-app-bar>
   </div>

src/components/app/AppNav.vue

@@ -1,30 +1,28 @@
 <template id="app-nav">
   <div class="app-nav">
     <v-app-bar flat>
-      <v-responsive class="mx-auto" width="90%" max-width="1130">
-        <v-btn-toggle divided>
-          <template v-for="(item, i) in items" :key="i">
-            <v-hover v-slot="{ isHovering, props }">
-              <v-btn
-                :href="item.href"
-                :to="item.target"
-                :target="`_window_${item.text}`"
-                :color="isHovering ? '#014e9e' : undefined"
-                class="font-weight-bold"
-                variant="text"
-                v-bind="props"
-              >
-                {{ $t(`navigation.${item.text}`) }}
-                <v-icon
-                  v-if="item.href !== undefined"
-                  end
-                  icon="mdi-open-in-new"
-                />
-              </v-btn>
-            </v-hover>
-          </template>
-        </v-btn-toggle>
-      </v-responsive>
+      <v-btn-toggle divided>
+        <template v-for="(item, i) in items" :key="i">
+          <v-hover v-slot="{ isHovering, props }">
+            <v-btn
+              :href="item.href"
+              :to="item.target"
+              :target="`_window_${item.text}`"
+              :color="isHovering ? '#014e9e' : undefined"
+              class="font-weight-bold"
+              variant="text"
+              v-bind="props"
+            >
+              {{ $t(`navigation.${item.text}`) }}
+              <v-icon
+                v-if="item.href !== undefined"
+                end
+                icon="mdi-open-in-new"
+              />
+            </v-btn>
+          </v-hover>
+        </template>
+      </v-btn-toggle>
     </v-app-bar>
   </div>
 </template>

src/components/app/TokenAuth.vue

@@ -70,6 +70,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-</style>

src/components/data/DataNavigation.vue

@@ -1,6 +1,6 @@
 <template id="data-navigation">
   <div class="data-navigation">
-    <v-navigation-drawer floating permanent absolute class="text-center">
+    <v-navigation-drawer v-model="drawer_" bottom absolute class="text-center">
       <v-list-item-subtitle
         class="mt-2"
         v-html="$t('chart.observed_property')"
@@ -18,7 +18,7 @@
             class="text-left text-body-2"
             @click="updateData(item, i)"
           >
-            {{ $root.parseForNameAndTime(item) }}
+            {{ getNameTime(item) }}
           </v-list-item>
           <v-divider
             class="pb-1 mx-2"
@@ -32,22 +32,28 @@
 
 <script>
 let oapi = window.VUE_APP_OAPI;
+import { getNameTime, hasLinks } from "@/scripts/helpers.js";
 
 export default {
   name: "DataNavigation",
   template: "#data-navigation",
-  props: ["choices", "alert", "station"],
+  props: ["choices", "alert", "station", "drawer"],
   data() {
     return {
       choices_: this.choices,
       alert_: this.alert,
       model: -1,
     };
   },
+  computed: {
+    drawer_: function () {
+      return this.drawer.model;
+    },
+  },
   watch: {
     "choices.collections": {
       handler(c) {
-        if (this.station.links.length > 0) {
+        if (hasLinks(this.station)) {
           for (const item of c) {
             if (this.station.links[0].title === item.id) {
               this.updateCollection(item);
@@ -59,6 +65,7 @@ export default {
     },
   },
   methods: {
+    getNameTime,
     async updateCollection(newC) {
       this.alert_value = false;
       this.choices_.collection = newC;
@@ -126,7 +133,7 @@ export default {
       this.choices_.datastream = {
         id: newD.name,
         index: newD.index,
-        name: this.$root.parseForNameAndTime(newD),
+        name: getNameTime(newD),
         units: newD.units,
       };
       this.model = index;

src/components/data/DataPlotter.vue

@@ -7,11 +7,9 @@
         <v-progress-linear striped indeterminate color="primary" />
       </div>
       <div :style="{ visibility: !loading ? 'visible' : 'hidden' }">
-        <v-container>
-          <v-row justify="center" align="end">
-            <div :id="'plotly-chart-' + choices_.collection.id" />
-          </v-row>
-        </v-container>
+        <v-card class="mx-auto" flat>
+          <div :id="'plotly-chart-' + choices_.collection.id" />
+        </v-card>
       </div>
     </v-card>
   </div>
@@ -84,6 +82,7 @@ export default defineComponent({
         },
       },
       config: {
+        responsive: true,
         displayModeBar: true,
         modeBarButtonsToAdd: [],
         modeBarButtonsToRemove: [

src/components/data/DataTable.vue

@@ -96,6 +96,7 @@ export default defineComponent({
       },
       config: {
         editable: false,
+        responsive: true,
         displayModeBar: true,
         modeBarButtonsToAdd: [],
         modeBarButtonsToRemove: [
@@ -202,7 +203,10 @@ export default defineComponent({
             self.plot(response.request.responseURL);
             if (datastream.units === "CODE TABLE") {
               self.title = `${datastream.name}`;
-              self.data.value = self.getCol(response.data.features, "description");
+              self.data.value = self.getCol(
+                response.data.features,
+                "description"
+              );
             } else {
               self.title = `${datastream.name} (${datastream.units})`;
               self.data.value = self.getCol(response.data.features, "value");

src/components/data/DataViewer.vue

@@ -2,7 +2,10 @@
   <div class="data-viewer">
     <v-layout>
       <v-app-bar color="#EEEEEE" flat>
-        <v-toolbar-title class="pa-2 text-h6">
+        <template v-slot:prepend v-if="$vuetify.display.smAndDown">
+          <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+        </template>
+        <v-toolbar-title v-show="$vuetify.display.mdAndUp" class="pa-2 text-h6">
           {{ choices.collection.description || $t("chart.collection") }}
         </v-toolbar-title>
         <v-tabs v-model="tab" end color="#014e9e">
@@ -16,7 +19,12 @@
           </v-tab>
         </v-tabs>
       </v-app-bar>
-      <data-navigation :choices="choices" :station="station" :alert="alert" />
+      <data-navigation
+        :choices="choices"
+        :station="station"
+        :alert="alert"
+        :drawer="{ model: drawer }"
+      />
       <v-main>
         <v-window v-model="tab">
           <v-window-item :value="0">
@@ -72,6 +80,15 @@ export default defineComponent({
       window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
     },
   },
+  watch: {
+    "choices.datastream": {
+      handler(datastream) {
+        if (datastream !== "" && this.$vuetify.display.smAndDown) {
+          this.drawer = false;
+        }
+      },
+    },
+  },
   async created() {
     this.loading = true;
     const response = await fetch(oapi + "/collections?f=json");