Release 2.2.0

- Reduce header paddings
- Align buttons/dropdowns

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 Dates are in UTC.
 
+## 2.2.0 (2020-03-18)
+
+- Improve mobile layout further:
+  - Reduce header paddings
+  - Align buttons/dropdowns
+- Upgrade dependencies
+
 ## 2.1.0 (2020-03-18)
 
 - Replace default Leaflet marker with a custom one ([#2](https://github.com/owntracks/frontend/issues/2))

docker/Dockerfile

@@ -6,7 +6,7 @@ COPY . ./
 RUN yarn build
 
 FROM nginx:1.17-alpine
-LABEL version="2.1.0"
+LABEL version="2.2.0"
 LABEL description="OwnTracks UI"
 LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owntracks-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": {
     "name": "Linus Groh",
     "email": "mail@linusgroh.de"
@@ -50,7 +50,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^10.0.8",
-    "moment-locales-webpack-plugin": "^1.1.2",
+    "moment-locales-webpack-plugin": "^1.2.0",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-i18n": "^0.6.1",

src/components/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header :class="$mq === 'sm' ? 'header-sm' : null">
     <div v-if="$mq === 'sm'" class="header-item">
       <button
         class="button button-flat button-icon"

src/styles/_base.scss

@@ -106,6 +106,14 @@ pre {
     color: var(--color-primary-text);
     background: var(--color-primary);
 
+    &.header-sm {
+      padding: 10px;
+
+      .header-item:not(.nav-sm) .nav-item:not(:first-child) {
+        margin-left: 10px;
+      }
+    }
+
     .header-item {
       display: flex;
       align-items: center;
@@ -152,19 +160,42 @@ pre {
         left: 0;
         margin: 0;
         overflow-x: auto;
-        padding: 30px;
+        padding: 20px;
         position: absolute;
         right: 0;
-        top: 76px;
+        top: 56px;
         z-index: 1;
 
         .nav-item {
+          align-items: center;
+          display: flex;
+          flex-wrap: wrap;
+          margin-left: auto;
+          margin-right: auto;
+          max-width: 400px;
+
           &:not(:first-child) {
-            margin-left: 0;
             margin-top: 20px;
           }
 
+          > .button,
+          > .dropdown,
+          > .date-time-picker {
+            flex: 1;
+          }
+
+          > .dropdown .dropdown-button,
+          > .date-time-picker .dropdown-button {
+            width: 100%;
+          }
+
+          > .date-time-picker {
+            margin-left: 0;
+            margin-right: 0;
+          }
+
           > span {
+            flex-basis: 100%;
             margin: 0;
           }
 

yarn.lock

@@ -7608,10 +7608,10 @@ mkdirp@0.5.1, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp
   dependencies:
     minimist "0.0.8"
 
-moment-locales-webpack-plugin@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.1.2.tgz#9ae5263ac38d5cba227fc9d76efad025bb685a0c"
-  integrity sha512-s+JE7lADQjUyeQvqB3sVcfxXncg1o+t5hrRl2GBY66vXuLO2tXIjD+4mNUXQMS10qCGoeK3R3skBrW34gHobBQ==
+moment-locales-webpack-plugin@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz#9af83876a44053706b868ceece5119584d10d7aa"
+  integrity sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==
   dependencies:
     lodash.difference "^4.5.0"