From c201a9073fac109d6d74bcea7d1bc0102409e221 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 3 Jul 2018 14:47:36 -0400
Subject: [PATCH] Fix opening menu triggers column change (#1400)

---
 src/layouts/partial-cards.js             | 13 +++++++-----
 src/panels/lovelace/ha-panel-lovelace.js | 26 ++++++++++++++----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/layouts/partial-cards.js b/src/layouts/partial-cards.js
index ab4f53375b..28b812fecc 100644
--- a/src/layouts/partial-cards.js
+++ b/src/layouts/partial-cards.js
@@ -118,7 +118,6 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
 
       showMenu: {
         type: Boolean,
-        observer: 'handleWindowChange',
       },
 
       panelVisible: {
@@ -171,23 +170,27 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
     };
   }
 
+  static get observers() {
+    return ['_updateColumns(narrow, showMenu)'];
+  }
+
   ready() {
-    this.handleWindowChange = this.handleWindowChange.bind(this);
+    this._updateColumns = this._updateColumns.bind(this);
     this.mqls = [300, 600, 900, 1200].map(width => matchMedia(`(min-width: ${width}px)`));
     super.ready();
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this.mqls.forEach(mql => mql.addListener(this.handleWindowChange));
+    this.mqls.forEach(mql => mql.addListener(this._updateColumns));
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.mqls.forEach(mql => mql.removeListener(this.handleWindowChange));
+    this.mqls.forEach(mql => mql.removeListener(this._updateColumns));
   }
 
-  handleWindowChange() {
+  _updateColumns() {
     const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
     // Do -1 column if the menu is docked and open
     this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
diff --git a/src/panels/lovelace/ha-panel-lovelace.js b/src/panels/lovelace/ha-panel-lovelace.js
index 2316c81c55..a023e92856 100644
--- a/src/panels/lovelace/ha-panel-lovelace.js
+++ b/src/panels/lovelace/ha-panel-lovelace.js
@@ -80,19 +80,23 @@ class Lovelace extends PolymerElement {
     };
   }
 
-  ready() {
-    super.ready();
-    this._fetchConfig();
-    this._handleWindowChange = this._handleWindowChange.bind(this);
-    this.mqls = [300, 600, 900, 1200].map((width) => {
-      const mql = matchMedia(`(min-width: ${width}px)`);
-      mql.addListener(this._handleWindowChange);
-      return mql;
-    });
-    this._handleWindowChange();
+  static get observers() {
+    return ['_updateColumns(narrow, showMenu)'];
   }
 
-  _handleWindowChange() {
+  ready() {
+    this._fetchConfig();
+    this._updateColumns = this._updateColumns.bind(this);
+    this.mqls = [300, 600, 900, 1200].map((width) => {
+      const mql = matchMedia(`(min-width: ${width}px)`);
+      mql.addListener(this._updateColumns);
+      return mql;
+    });
+    this._updateColumns();
+    super.ready();
+  }
+
+  _updateColumns() {
     const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
     // Do -1 column if the menu is docked and open
     this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));