From 117c33cf5aa1a5ef70e50d96402f1fe0d33e0b6b Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 5 Dec 2016 22:13:55 -0800
Subject: [PATCH] Fill bottom screen with toast

---
 src/managers/notification-manager.html | 31 +++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/managers/notification-manager.html b/src/managers/notification-manager.html
index d45a5e6751..e541b516f6 100644
--- a/src/managers/notification-manager.html
+++ b/src/managers/notification-manager.html
@@ -12,8 +12,13 @@
       }
     </style>
 
-    <paper-toast id="toast" text='{{text}}' no-cancel-on-outside-click='[[neg]]'></paper-toast>
     <paper-toast
+      id="toast"
+      text='{{text}}'
+      no-cancel-on-outside-click='[[neg]]'
+    ></paper-toast>
+    <paper-toast
+      id='connToast'
       duration='0'
       text='Connection lost. Reconnecting…'
       opened='[[!isStreaming]]'
@@ -50,6 +55,30 @@ Polymer({
       },
       observer: 'showNotification',
     },
+
+    toastClass: {
+      type: String,
+      value: '',
+    },
+  },
+
+  created: function () {
+    this.handleWindowChange = this.handleWindowChange.bind(this);
+    this._mediaq = window.matchMedia('(max-width: 599px)');
+    this._mediaq.addListener(this.handleWindowChange);
+  },
+
+  attached: function () {
+    this.handleWindowChange(this._mediaq);
+  },
+
+  detached: function () {
+    this._mediaq.removeListener(this.handleWindowChange);
+  },
+
+  handleWindowChange: function (ev) {
+    this.$.toast.classList.toggle('fit-bottom', ev.matches);
+    this.$.connToast.classList.toggle('fit-bottom', ev.matches);
   },
 
   showNotification: function (newText) {