Merge pull request #68 from morkro/release/1.5.1

Release 1.5.1

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented here.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.5.1] - 2018-11-10
+
+### Added
+- Added plant name to header when scrolling down.
+
+### Changed
+- Header height is now slightly reduced
+
+### Fixed
+- Login/Logout button size in settings menu.
+- An info layer when the application is offline should now actually show up.
+
 ## [1.5.0] - 2018-10-31
 
 ### Added

README.md

@@ -3,7 +3,7 @@
 </h1>
 
 <p align="center">
-  Current version: <code>1.5.0</code> <a href="CHANGELOG.md">(Changelog)</a>
+  Current version: <code>1.5.1</code> <a href="CHANGELOG.md">(Changelog)</a>
 </p>
 
 <p align="center">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "happy-plants",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "private": true,
   "scripts": {
     "serve": "npm run svg && vue-cli-service serve",
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "blob-util": "^2.0.2",
-    "firebase": "^5.5.5",
-    "localforage": "^1.7.2",
+    "firebase": "^5.5.7",
+    "localforage": "^1.7.3",
     "localforage-startswith": "^1.4.0",
     "lodash.throttle": "^4.1.1",
     "normalize.css": "^8.0.0",
@@ -32,11 +32,11 @@
   "devDependencies": {
     "@ascendancyy/vue-cli-plugin-stylelint": "^1.1.0",
     "@babel/core": "^7.1.2",
-    "@vue/cli-plugin-babel": "^3.0.5",
-    "@vue/cli-plugin-eslint": "^3.0.5",
-    "@vue/cli-plugin-pwa": "^3.0.5",
-    "@vue/cli-plugin-unit-jest": "^3.0.5",
-    "@vue/cli-service": "^3.0.5",
+    "@vue/cli-plugin-babel": "^3.1.1",
+    "@vue/cli-plugin-eslint": "^3.1.4",
+    "@vue/cli-plugin-pwa": "^3.1.1",
+    "@vue/cli-plugin-unit-jest": "^3.1.1",
+    "@vue/cli-service": "^3.1.2",
     "@vue/eslint-config-standard": "^3.0.5",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",

public/manifest.json

@@ -31,4 +31,4 @@
       "sizes": "576x576"
     }
   ]
-}
+}

src/app/App.vue

@@ -112,10 +112,7 @@
         showIconBackdrop: state => state.appheader.showIconBackdrop
       }),
       canSeeOfflineNotification () {
-        return (
-          this.storageType === 'cloud' &&
-          this.authenticated
-        )
+        return this.storageType === 'cloud'
       }
     },
 
@@ -184,7 +181,7 @@
     },
 
     mounted () {
-      if (!this.applicationOnline && this.canSeeOfflineNotification) {
+      if (this.applicationOnline === false && this.canSeeOfflineNotification) {
         this.showNotification({ message: 'You are currently offline.' })
       }
       window.addEventListener('online', this.setApplicationOnline)

src/app/plant/Plant.vue

@@ -130,6 +130,7 @@
         this.updateAppHeader({
           transparent: show,
           iconColor: this.headerInView ? 'white' : this.defaultIconColor,
+          title: this.headerInView ? false : this.plant.name,
           showIconBackdrop: this.headerInView
         })
       },
@@ -268,29 +269,20 @@
       }
     },
 
-    created () {
+    mounted () {
       this.updateAppHeader({
         transparent: true,
         title: false,
         backBtn: true,
+        backBtnPath: '/',
         settingsBtn: 'edit',
         settingsBtnOnClick: this.openPlantEditModal,
         iconColor: this.headerInView ? 'white' : this.defaultIconColor,
         showIconBackdrop: true
       })
-    },
-
-    mounted () {
       this.loadPlantItem(this.$route.params.id)
     },
 
-    updated () {
-      // this.updateAppHeader({
-      //   iconColor: this.headerInView ? 'white' : this.defaultIconColor,
-      //   showIconBackdrop: this.headerInView
-      // })
-    },
-
     beforeDestroy () {
       this.updateAppHeader({
         transparent: false,

src/app/settings/components/SettingsMenu.vue

@@ -402,7 +402,10 @@
   .menu-user span {
     font-size: var(--text-size-xsmall);
     word-break: break-all;
-    padding-right: var(--base-gap);
+
+    @nest .menu-user > div > & {
+      padding-right: var(--base-gap);
+    }
 
     & strong {
       display: block;

src/components/AppHeader.vue

@@ -12,7 +12,7 @@
         <slot name="custom-action-left" />
       </div>
 
-      <div @click="scrollTop">
+      <div class="header-title" @click="scrollTop">
         <slot name="title" />
       </div>
 
@@ -129,8 +129,10 @@
     & h1 {
       text-transform: uppercase;
       color: var(--text-color-base);
-      margin: 0 var(--base-gap);
       padding: var(--base-gap) 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     &.transparent {
@@ -178,6 +180,12 @@
     }
   }
 
+  .app-header .header-title {
+    flex-shrink: 1;
+    overflow: hidden;
+    padding: 0 var(--base-gap);
+  }
+
   .app-header .header-ctrl {
     width: var(--app-header-size);
     min-height: var(--app-header-size);
@@ -190,8 +198,8 @@
       position: absolute;
       top: 50%;
       left: 50%;
-      width: calc(var(--icon-size-base) * 2.5);
-      height: calc(var(--icon-size-base) * 2.5);
+      width: calc(var(--icon-size-base) * 2);
+      height: calc(var(--icon-size-base) * 2);
       transform: translate(-50%, -50%);
       z-index: -1;
     }
@@ -202,6 +210,7 @@
 
     & a,
     & button {
+      color: var(--text-color-base);
       width: var(--app-header-size);
       min-height: var(--app-header-size);
       height: 100%;

src/components/LazyImage.vue

@@ -4,7 +4,7 @@
     <img
       :data-src="source"
       :alt="alt"
-      :title="title">
+      :title="title || alt">
   </figure>
 </template>
 
@@ -20,7 +20,7 @@
     props: {
       source: { type: String, required: true },
       alt: { type: String, required: true },
-      title: { type: String, required: true }
+      title: { type: String, default: '' }
     }
   }
 </script>

src/styles/layout.css

@@ -2,8 +2,8 @@
   --app-mobile-max-size: 600px;
   --app-desktop-min-size: 1100px;
   --app-desktop-max-width: 1000px;
-  --app-header-size: 60px;
-  --app-footer-size: calc(var(--app-header-size) / 1.2);
+  --app-header-size: 50px;
+  --app-footer-size: var(--app-header-size);
 
   --border-radius: 6px;
   --base-gap: 15px;

vue.config.js

@@ -27,5 +27,9 @@ module.exports = {
     stylelint: {
       fix: false
     }
+  },
+
+  pwa: {
+    name: 'HappyPlants'
   }
 }