Make it usable on mobile

Closes #19

package.json

@@ -28,6 +28,7 @@
     "vue-feather-icons": "^5.0.0",
     "vue-i18n": "^8.15.5",
     "vue-js-modal": "^1.3.33",
+    "vue-mq": "^1.0.1",
     "vue-outside-events": "^1.1.3",
     "vue-router": "^3.1.6",
     "vue2-leaflet": "^2.5.2",

src/components/AppHeader.vue

@@ -1,7 +1,25 @@
 <template>
   <header>
-    <nav>
+    <div v-if="$mq === 'sm'" class="header-item">
+      <button
+        class="button button-flat button-icon"
+        @click="showMobileNav = !showMobileNav"
+      >
+        <MenuIcon size="1x" aria-hidden="true" role="img" />
+      </button>
+    </div>
+    <nav
+      v-if="$mq === 'sm' ? showMobileNav : true"
+      class="header-item header-item-grow"
+      :class="$mq === 'sm' ? 'nav-sm' : null"
+    >
       <div class="nav-item">
+        <CrosshairIcon
+          v-if="$mq === 'sm'"
+          size="1x"
+          aria-hidden="true"
+          role="img"
+        />
         <button
           class="button button-outline"
           :title="
@@ -46,7 +64,7 @@
             :title="$t('Select start date')"
           />
         </VueCtkDateTimePicker>
-        {{ $t("to") }}
+        <span>{{ $t("to") }}</span>
         <VueCtkDateTimePicker
           v-model="endDateTime"
           :format="DATE_TIME_FORMAT"
@@ -97,7 +115,7 @@
         </select>
       </div>
     </nav>
-    <nav class="nav-shrink">
+    <nav class="header-item header-item-right">
       <div
         v-if="$config.showDistanceTravelled && distanceTravelled"
         class="nav-item"
@@ -136,9 +154,11 @@ import moment from "moment";
 import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
 import {
   CalendarIcon,
+  CrosshairIcon,
   DownloadIcon,
   InfoIcon,
   LayersIcon,
+  MenuIcon,
   SmartphoneIcon,
   UserIcon,
 } from "vue-feather-icons";
@@ -153,9 +173,11 @@ import { humanReadableDistance } from "@/util";
 export default {
   components: {
     CalendarIcon,
+    CrosshairIcon,
     DownloadIcon,
     InfoIcon,
     LayersIcon,
+    MenuIcon,
     SmartphoneIcon,
     UserIcon,
     VueCtkDateTimePicker,
@@ -170,6 +192,7 @@ export default {
         { layer: "points", label: this.$t("Show location history (points)") },
         { layer: "heatmap", label: this.$t("Show location heatmap") },
       ],
+      showMobileNav: false,
     };
   },
   computed: {

src/main.js

@@ -1,15 +1,23 @@
 import Vue from "vue";
+import VueModal from "vue-js-modal";
+import VueOutsideEvents from "vue-outside-events";
+import VueMq from "vue-mq";
+
 import App from "@/App.vue";
 import config from "@/config";
 import { log } from "@/logging";
 import i18n from "@/i18n";
 import router from "@/router";
 import store from "@/store";
-import VModal from "vue-js-modal";
-import VOutsideEvents from "vue-outside-events";
 
-Vue.use(VModal);
-Vue.use(VOutsideEvents);
+Vue.use(VueModal);
+Vue.use(VueOutsideEvents);
+Vue.use(VueMq, {
+  breakpoints: {
+    sm: 1300,
+    lg: Infinity,
+  },
+});
 
 Vue.config.productionTip = false;
 

src/styles/_base.scss

@@ -106,30 +106,75 @@ pre {
     color: var(--color-primary-text);
     background: var(--color-primary);
 
-    nav {
+    .header-item {
       display: flex;
-      flex: 1;
       align-items: center;
 
       &:not(:first-child) {
         margin-left: 20px;
       }
 
-      &.nav-shrink {
-        flex: 0 1 auto;
+      &-grow {
+        flex: 1;
       }
 
-      .nav-item:not(:first-child) {
-        margin-left: 20px;
+      &-right {
+        margin-left: auto !important;
       }
 
       .feather {
         font-size: 20px;
-        margin-right: 10px;
       }
 
-      .button-icon .feather {
+      .nav-item {
+        &:not(:first-child) {
+          margin-left: 20px;
+        }
+
+        > span {
+          margin: 0 5px;
+        }
+
+        .feather {
+          margin-right: 10px;
+        }
+
+        .button-icon .feather {
+          margin: 0;
+        }
+      }
+
+      &.nav-sm {
+        background: var(--color-primary);
+        border-top: 1px solid rgba(0, 0, 0, 0.2);
+        bottom: 0;
+        display: block;
+        left: 0;
         margin: 0;
+        overflow-x: auto;
+        padding: 30px;
+        position: absolute;
+        right: 0;
+        top: 76px;
+        z-index: 1;
+
+        .nav-item {
+          &:not(:first-child) {
+            margin-left: 0;
+            margin-top: 20px;
+          }
+
+          > span {
+            margin: 0;
+          }
+
+          // THIS IS TERRIBLE (but it works for now)
+          > :not(:nth-child(1)):not(:nth-child(2)) {
+            display: block;
+            margin-left: 30px;
+            margin-top: 5px;
+          }
+        }
       }
     }
   }
@@ -173,8 +218,8 @@ pre {
   overflow: hidden;
   padding: 8px 16px;
   text-overflow: ellipsis;
-  white-space: nowrap;
   transition: box-shadow 0.2s;
+  white-space: nowrap;
 
   &:focus {
     outline: none;

src/styles/_datepicker.scss

@@ -6,5 +6,14 @@
     box-shadow: none !important;
     filter: var(--drop-shadow);
     margin-top: 5px;
+
+    @media screen and (max-width: 415px) {
+      // Fix buttons being off screen
+      .datepicker-buttons-container {
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+      }
+    }
   }
 }

yarn.lock

@@ -6873,6 +6873,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
+  dependencies:
+    string-convert "^0.2.0"
+
 json3@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
@@ -10255,6 +10262,11 @@ string-argv@0.3.1:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
   integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -11219,6 +11231,13 @@ vue-loader@^15.8.3:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-mq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue-mq/-/vue-mq-1.0.1.tgz#ee7dec5a0f50b4e2edbacd8ed43c57e15a072989"
+  integrity sha512-FceZ1tFE0MZ8GroRBKPQWBRy4ZEAa7p5R7cGAzJpGuKPU2AI4ClmE+S6O/yV4jO5271o9tgaUFt7fzUAIf9xOQ==
+  dependencies:
+    json2mq "^0.2.0"
+
 vue-outside-events@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/vue-outside-events/-/vue-outside-events-1.1.3.tgz#75b3e3b7856590fbe4455c87075b54f92b2a9654"