Make it usable on mobile

Closes #19

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%;
+      }
+    }
   }
 }