From eb0584d466387992cc396992f07364366865c596 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Fri, 22 May 2015 00:21:47 -0700
Subject: [PATCH] Polymer .9: Style fixes

---
 .../polymer/components/state-cards.html       |   1 +
 .../components/state-history-charts.html      |  13 +-
 .../www_static/polymer/home-assistant.html    |  22 ++--
 .../polymer/layouts/home-assistant-main.html  | 114 +++++++++---------
 .../polymer/layouts/partial-base.html         |  44 +++----
 .../polymer/layouts/partial-history.html      |   8 +-
 .../polymer/layouts/partial-states.html       |   2 +-
 7 files changed, 99 insertions(+), 105 deletions(-)

diff --git a/homeassistant/components/frontend/www_static/polymer/components/state-cards.html b/homeassistant/components/frontend/www_static/polymer/components/state-cards.html
index c479792d98c..db1630d1c7d 100755
--- a/homeassistant/components/frontend/www_static/polymer/components/state-cards.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/state-cards.html
@@ -7,6 +7,7 @@
   :host {
     display: block;
     width: 100%;
+    background-color: #E5E5E5;
   }
 
   @media all and (min-width: 1020px) {
diff --git a/homeassistant/components/frontend/www_static/polymer/components/state-history-charts.html b/homeassistant/components/frontend/www_static/polymer/components/state-history-charts.html
index a4fecc03a4b..4f833ac8a1b 100644
--- a/homeassistant/components/frontend/www_static/polymer/components/state-history-charts.html
+++ b/homeassistant/components/frontend/www_static/polymer/components/state-history-charts.html
@@ -11,16 +11,17 @@
   :host {
     display: block;
   }
+
+  .loading-container {
+    text-align: center;
+    padding: 8px;
+  }
   </style>
   <template>
     <google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>
 
-    <div hidden$="{{!isLoading}}" >
-      <div class='layout horizontal center'>
-        <div class='layout vertical center'>
-        <loading-box>Loading history data</loading-box>
-        </div>
-      </div>
+    <div hidden$="{{!isLoading}}" class='loading-container'>
+      <loading-box>Loading history data</loading-box>
     </div>
 
     <template is='dom-if' if='[[!isLoading]]'>
diff --git a/homeassistant/components/frontend/www_static/polymer/home-assistant.html b/homeassistant/components/frontend/www_static/polymer/home-assistant.html
index 9b01fdab961..cc4b3b4b919 100644
--- a/homeassistant/components/frontend/www_static/polymer/home-assistant.html
+++ b/homeassistant/components/frontend/www_static/polymer/home-assistant.html
@@ -1,16 +1,16 @@
-<link rel="import" href="bower_components/polymer/polymer.html">
-<link rel="import" href="bower_components/font-roboto/roboto.html">
+<link rel='import' href='bower_components/polymer/polymer.html'>
+<!-- <link rel='import' href='bower_components/font-roboto/roboto.html'> -->
 
-<link rel="import" href="resources/home-assistant-js.html">
-<link rel="import" href="resources/home-assistant-icons.html">
-<link rel="import" href="resources/store-listener-behavior.html">
+<link rel='import' href='resources/home-assistant-js.html'>
+<link rel='import' href='resources/home-assistant-icons.html'>
+<link rel='import' href='resources/store-listener-behavior.html'>
 
-<link rel="import" href="layouts/login-form.html">
-<link rel="import" href="layouts/home-assistant-main.html">
+<link rel='import' href='layouts/login-form.html'>
+<link rel='import' href='layouts/home-assistant-main.html'>
 
-<link rel="import" href="resources/home-assistant-style.html">
+<link rel='import' href='resources/home-assistant-style.html'>
 
-<dom-module id="home-assistant">
+<dom-module id='home-assistant'>
   <style>
     :host {
       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
@@ -21,11 +21,11 @@
   <home-assistant-icons></home-assistant-icons>
 
   <template>
-    <template is="dom-if" if="[[!loaded]]">
+    <template is='dom-if' if='[[!loaded]]'>
       <login-form></login-form>
     </template>
 
-    <template is="dom-if" if="[[loaded]]">
+    <template is='dom-if' if='[[loaded]]'>
       <home-assistant-main></home-assistant-main>
     </template>
 
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html b/homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html
index 6fd0693aa7a..055f6f0938c 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html
@@ -1,32 +1,28 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/layout/layout.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
+<link rel='import' href='../bower_components/layout/layout.html'>
 
-<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
-<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
-<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
-<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
-<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel='import' href='../bower_components/paper-drawer-panel/paper-drawer-panel.html'>
+<link rel='import' href='../bower_components/paper-header-panel/paper-header-panel.html'>
+<link rel='import' href='../bower_components/paper-toolbar/paper-toolbar.html'>
+<link rel='import' href='../bower_components/paper-menu/paper-menu.html'>
+<link rel='import' href='../bower_components/iron-icon/iron-icon.html'>
+<link rel='import' href='../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
 
-<link rel="import" href="../layouts/partial-states.html">
-<link rel="import" href="../layouts/partial-logbook.html">
-<link rel="import" href="../layouts/partial-history.html">
-<link rel="import" href="../layouts/partial-dev-call-service.html">
-<link rel="import" href="../layouts/partial-dev-fire-event.html">
-<link rel="import" href="../layouts/partial-dev-set-state.html">
+<link rel='import' href='../layouts/partial-states.html'>
+<link rel='import' href='../layouts/partial-logbook.html'>
+<link rel='import' href='../layouts/partial-history.html'>
+<link rel='import' href='../layouts/partial-dev-call-service.html'>
+<link rel='import' href='../layouts/partial-dev-fire-event.html'>
+<link rel='import' href='../layouts/partial-dev-set-state.html'>
 
-<link rel="import" href="../managers/notification-manager.html">
-<link rel="import" href="../managers/modal-manager.html">
+<link rel='import' href='../managers/notification-manager.html'>
+<link rel='import' href='../managers/modal-manager.html'>
 
-<link rel="import" href="../components/stream-status.html">
+<link rel='import' href='../components/stream-status.html'>
 
-<dom-module id="home-assistant-main">
+<dom-module id='home-assistant-main'>
   <style>
-    paper-drawer-panel {
-      background-color: #E5E5E5;
-    }
-
     .sidenav {
       background: #fafafa;
       box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
@@ -67,36 +63,36 @@
     <notification-manager></notification-manager>
     <modal-manager></modal-manager>
 
-    <paper-drawer-panel id="drawer" narrow='{{narrow}}'>
-      <paper-header-panel mode="scroll" drawer class='sidenav fit'>
+    <paper-drawer-panel id='drawer' narrow='{{narrow}}'>
+      <paper-header-panel mode='scroll' drawer class='sidenav fit'>
         <paper-toolbar>
           Home Assistant
         </paper-toolbar>
 
-        <paper-menu id="menu" class="layout vertical fit"
-          selectable="[data-panel]" attr-for-selected="data-panel"
-          on-iron-select="menuSelect" selected="[[selected]]">
-          <paper-item data-panel="states">
-            <iron-icon icon="apps"></iron-icon> States
+        <paper-menu id='menu' class='layout vertical fit'
+          selectable='[data-panel]' attr-for-selected='data-panel'
+          on-iron-select='menuSelect' selected='[[selected]]'>
+          <paper-item data-panel='states'>
+            <iron-icon icon='apps'></iron-icon> States
           </paper-item>
 
-          <template is="dom-repeat" items="{{activeFilters}}">
-            <paper-item data-panel$="[[filterType(item)]]">
-              <iron-icon icon="[[filterIcon(item)]]"></iron-icon>
+          <template is='dom-repeat' items='{{activeFilters}}'>
+            <paper-item data-panel$='[[filterType(item)]]'>
+              <iron-icon icon='[[filterIcon(item)]]'></iron-icon>
               <span>[[filterName(item)]]</span>
             </paper-item>
           </template>
 
-          <template is="dom-if" if="[[hasHistoryComponent]]">
-            <paper-item data-panel="history">
-              <iron-icon icon="assessment"></iron-icon>
+          <template is='dom-if' if='[[hasHistoryComponent]]'>
+            <paper-item data-panel='history'>
+              <iron-icon icon='assessment'></iron-icon>
               History
             </paper-item>
           </template>
 
-          <template is="dom-if" if="[[hasLogbookComponent]]">
-            <paper-item data-panel="logbook">
-              <iron-icon icon="list"></iron-icon>
+          <template is='dom-if' if='[[hasLogbookComponent]]'>
+            <paper-item data-panel='logbook'>
+              <iron-icon icon='list'></iron-icon>
               Logbook
             </paper-item>
           </template>
@@ -104,7 +100,7 @@
           <div class='flex'></div>
 
           <paper-item data-panel='logout'>
-            <iron-icon icon="exit-to-app"></iron-icon>
+            <iron-icon icon='exit-to-app'></iron-icon>
             Log Out
           </paper-item>
 
@@ -116,14 +112,14 @@
           <div class='text label divider'>Developer Tools</div>
           <div class='dev-tools layout horizontal justified'>
             <paper-icon-button
-              icon="settings-remote" data-panel$='[[selectedDevService]]'
-              on-click="handleDevClick"></paper-icon-button>
+              icon='settings-remote' data-panel$='[[selectedDevService]]'
+              on-click='handleDevClick'></paper-icon-button>
             <paper-icon-button
-              icon="settings-ethernet" data-panel$='[[selectedDevState]]'
-              on-click="handleDevClick"></paper-icon-button>
+              icon='settings-ethernet' data-panel$='[[selectedDevState]]'
+              on-click='handleDevClick'></paper-icon-button>
             <paper-icon-button
-              icon="settings-input-antenna" data-panel$='[[selectedDevEvent]]'
-              on-click="handleDevClick"></paper-icon-button>
+              icon='settings-input-antenna' data-panel$='[[selectedDevEvent]]'
+              on-click='handleDevClick'></paper-icon-button>
           </div>
         </paper-menu>
       </paper-header-panel>
@@ -132,25 +128,25 @@
           This is the main partial, never remove it from the DOM but hide it
           to speed up when people click on states.
       -->
-      <partial-states hidden$="[[hideStates]]"
-        main narrow="[[narrow]]"
-        filter="[[stateFilter]]">
+      <partial-states hidden$='[[hideStates]]'
+        main narrow='[[narrow]]'
+        filter='[[stateFilter]]'>
       </partial-states>
 
-      <template is='dom-if' if="[[isSelectedLogbook]]">
-        <partial-logbook main narrow="[[narrow]]"></partial-logbook>
+      <template is='dom-if' if='[[isSelectedLogbook]]'>
+        <partial-logbook main narrow='[[narrow]]'></partial-logbook>
       </template>
-      <template is='dom-if' if="[[isSelectedHistory]]">
-        <partial-history main narrow="[[narrow]]"></partial-history>
+      <template is='dom-if' if='[[isSelectedHistory]]'>
+        <partial-history main narrow='[[narrow]]'></partial-history>
       </template>
-      <template is='dom-if' if="[[isSelectedDevService]]">
-        <partial-dev-call-service main narrow="[[narrow]]"></partial-dev-call-service>
+      <template is='dom-if' if='[[isSelectedDevService]]'>
+        <partial-dev-call-service main narrow='[[narrow]]'></partial-dev-call-service>
       </template>
-      <template is='dom-if' if="[[isSelectedDevEvent]]">
-        <partial-dev-fire-event main narrow="[[narrow]]"></partial-dev-fire-event>
+      <template is='dom-if' if='[[isSelectedDevEvent]]'>
+        <partial-dev-fire-event main narrow='[[narrow]]'></partial-dev-fire-event>
       </template>
-      <template is='dom-if' if="[[isSelectedDevState]]">
-        <partial-dev-set-state main narrow="[[narrow]]"></partial-dev-set-state>
+      <template is='dom-if' if='[[isSelectedDevState]]'>
+        <partial-dev-set-state main narrow='[[narrow]]'></partial-dev-set-state>
       </template>
     </paper-drawer-panel>
 
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html b/homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html
index 39136194dff..35149768a0d 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html
@@ -1,34 +1,28 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
 
-<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
+<link rel='import' href='../bower_components/paper-header-panel/paper-header-panel.html'>
 
-<!-- <link rel="import" href="../bower_components/core-scroll-header-panel/core-scroll-header-panel.html"> -->
-<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
-<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel='import' href='../bower_components/paper-toolbar/paper-toolbar.html'>
+<link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
 
-<!-- <link rel="import" href="../bower_components/core-style/core-style.html"> -->
+<dom-module id='partial-base'>
+  <template>
+    <paper-header-panel class='fit' mode='scroll'>
+      <paper-toolbar>
+        <paper-icon-button icon='menu' paper-drawer-toggle></paper-icon-button>
+        <div class='flex'>
+          <content select='[header-title]'></content>
+        </div>
+        <content select='[header-buttons]'></content>
+      </paper-toolbar>
 
-<dom-module id="partial-base">
-<template>
-  <paper-header-panel class='fit' mode="scroll">
-    <paper-toolbar>
-      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
-      <div class='flex'>
-        <content select="[header-title]"></content>
-      </div>
-      <content select="[header-buttons]"></content>
-    </paper-toolbar>
-
-    <content></content>
-
-  </paper-header-panel>
-</template>
+      <div class='fit'><content></content></div>
+    </paper-header-panel>
+  </template>
 </dom-module>
 
 <script>
-
 (function() {
-
   Polymer({
     is: 'partial-base',
 
@@ -39,7 +33,5 @@
       },
     },
   });
-
 })();
-
-</script>
\ No newline at end of file
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/partial-history.html b/homeassistant/components/frontend/www_static/polymer/layouts/partial-history.html
index 5e0ff4f9dae..d7128134dd7 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/partial-history.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/partial-history.html
@@ -22,7 +22,7 @@
       <paper-icon-button icon="refresh" header-buttons
         on-click="handleRefreshClick"></paper-icon-button>
 
-      <div flex class="[[computeContentClasses(narrow)]]">
+      <div class$="[[computeContentClasses(narrow)]]">
         <state-history-charts state-history="[[stateHistory]]"
           is-loading-data="[[isLoadingData]]"></state-history-charts>
       </div>
@@ -39,6 +39,10 @@
     behaviors: [StoreListenerBehavior],
 
     properties: {
+      narrow: {
+        type: Boolean,
+      },
+
       stateHistory: {
         type: Object,
       },
@@ -67,7 +71,7 @@
     },
 
     computeContentClasses: function(narrow) {
-      return 'content ' + (this.narrow ? 'narrow' : 'wide');
+      return 'flex content ' + (narrow ? 'narrow' : 'wide');
     },
   });
 })();
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html b/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
index 58a5e652260..d5343d30a19 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
@@ -51,7 +51,7 @@
         <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
       </div>
 
-      <state-cards states="[[states]]">
+      <state-cards states="[[states]]" class='fit'>
         <h3>Hi there!</h3>
         <p>
           It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.