Polymer 1.0: style fixes

homeassistant/components/frontend/www_static/polymer/components/state-cards.html

@@ -6,8 +6,6 @@
   <style>
   :host {
     display: block;
-    width: 100%;
-    background-color: #E5E5E5;
   }
 
   @media all and (min-width: 1020px) {

homeassistant/components/frontend/www_static/polymer/layouts/home-assistant-main.html

@@ -7,6 +7,7 @@
 <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-item/paper-icon-item.html'>
 <link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
 
 <link rel='import' href='../layouts/partial-states.html'>
@@ -29,22 +30,15 @@
       overflow: hidden;
     }
 
-    .sidenav paper-toolbar {
-      padding-left: 16px;
-    }
-
     .sidenav paper-menu {
-      --paper-menu-color: #757575;
+      --paper-menu-color: var(--secondary-text-color);
+      --paper-menu-background-color: #fafafa;
     }
 
-    .sidenav paper-item[data-panel] {
+    paper-icon-item {
       cursor: pointer;
     }
 
-    .sidenav iron-icon {
-      margin-right: 24px;
-    }
-
     .divider {
       border-top: 1px solid #e0e0e0;
     }
@@ -66,43 +60,45 @@
     <paper-drawer-panel id='drawer' narrow='{{narrow}}'>
       <paper-header-panel mode='scroll' drawer class='sidenav fit'>
         <paper-toolbar>
-          Home Assistant
+          <!-- forces paper toolbar to style title appropriate -->
+          <paper-icon-button hidden></paper-icon-button>
+          <div title>Home Assistant</div>
         </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-item>
+          <paper-icon-item data-panel='states'>
+            <iron-icon item-icon icon='apps'></iron-icon> States
+          </paper-icon-item>
 
           <template is='dom-repeat' items='{{activeFilters}}'>
-            <paper-item data-panel$='[[filterType(item)]]'>
-              <iron-icon icon='[[filterIcon(item)]]'></iron-icon>
+            <paper-icon-item data-panel$='[[filterType(item)]]'>
+              <iron-icon item-icon icon='[[filterIcon(item)]]'></iron-icon>
               <span>[[filterName(item)]]</span>
-            </paper-item>
+            </paper-icon-item>
           </template>
 
           <template is='dom-if' if='[[hasHistoryComponent]]'>
-            <paper-item data-panel='history'>
-              <iron-icon icon='assessment'></iron-icon>
+            <paper-icon-item data-panel='history'>
+              <iron-icon item-icon icon='assessment'></iron-icon>
               History
-            </paper-item>
+            </paper-icon-item>
           </template>
 
           <template is='dom-if' if='[[hasLogbookComponent]]'>
-            <paper-item data-panel='logbook'>
-              <iron-icon icon='list'></iron-icon>
+            <paper-icon-item data-panel='logbook'>
+              <iron-icon item-icon icon='list'></iron-icon>
               Logbook
-            </paper-item>
+            </paper-icon-item>
           </template>
 
           <div class='flex'></div>
 
-          <paper-item data-panel='logout'>
-            <iron-icon icon='exit-to-app'></iron-icon>
+          <paper-icon-item data-panel='logout'>
+            <iron-icon item-icon icon='exit-to-app'></iron-icon>
             Log Out
-          </paper-item>
+          </paper-icon-item>
 
           <paper-item class='divider horizontal layout justified'>
             <div>Streaming updates</div>
@@ -178,7 +174,6 @@
 
       narrow: {
         type: Boolean,
-        value: false,
       },
 
       activeFilters: {

homeassistant/components/frontend/www_static/polymer/layouts/partial-base.html

@@ -10,13 +10,13 @@
     <paper-scroll-header-panel class='fit'>
       <paper-toolbar>
         <paper-icon-button icon='menu' hidden$='[[!narrow]]' on-click='toggleMenu'></paper-icon-button>
-        <div class='flex'>
+        <div title>
           <content select='[header-title]'></content>
         </div>
         <content select='[header-buttons]'></content>
       </paper-toolbar>
 
-      <div class='fit'><content></content></div>
+      <content></content>
     </paper-scroll-header-panel>
   </template>
 </dom-module>

homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html

@@ -31,6 +31,11 @@
     .listening paper-spinner {
       float: right;
     }
+
+    state-cards {
+      height: 100%;
+      background-color: #E5E5E5;
+    }
   </style>
 
   <template>
@@ -51,7 +56,7 @@
         <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
       </div>
 
-      <state-cards states="[[states]]" class='fit'>
+      <state-cards states="[[states]]">
         <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.