Give the tabs more breathing space

src/layouts/partial-cards.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
+<link rel="import" href="../../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
 
@@ -17,24 +17,54 @@
       -moz-user-select: none;
     }
 
+    paper-scroll-header-panel[has-views] paper-toolbar {
+      height: 128px;
+    }
+
+    .menu-icon {
+      margin-right: 24px;
+    }
+
+    #menu > .title {
+      line-height: 40px;
+    }
+
+    paper-tabs {
+      --paper-tabs-selection-bar-color: var(--accent-color);
+    }
+
     paper-tab {
       text-transform: uppercase;
     }
   </style>
 
   <template>
-    <paper-header-panel mode="waterfall">
-      <paper-toolbar class='medium'>
-        <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
+    <paper-scroll-header-panel
+      condenses keep-condensed-header class='fit' has-views$='[[hasViews]]'
+      header-height="[[computeHeaderHeight(hasViews)]]"
+      condensed-header-height="[[computeCondensedHeaderHeight(hasViews)]]"
+      on-paper-header-transform='headerScrollAdjust'
+      >
+      <paper-toolbar>
+        <div class='flex layout horizontal' id='menu'>
+          <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
 
-        <template is='dom-if' if='[[!hasViews]]'>
-          <div class='title'>[[locationName]]</div>
-        </template>
+          <span class='title flex'>[[computeTitle(hasViews, locationName)]]</span>
+
+          <paper-icon-button
+            icon="mdi:refresh"
+            class$="[[computeRefreshButtonClass(isFetching)]]"
+            on-tap="handleRefresh" hidden$="[[isStreaming]]"
+          ></paper-icon-button>
+          <paper-icon-button
+            icon="mdi:microphone" hidden$='[[!canListen]]'
+            on-tap="handleListenClick"></paper-icon-button>
+        </div>
 
         <template is='dom-if' if='[[hasViews]]'>
-          <div class='flex'>
+          <div class='fit bottom'>
             <paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
-              on-iron-select='viewSelected' scrollable='true'>
+              on-iron-select='viewSelected' scrollable=''>
                 <paper-tab data-entity=''>[[locationName]]</paper-tab>
                 <template is='dom-repeat' items='[[views]]'>
                   <paper-tab data-entity$='[[item.entityId]]'>
@@ -49,22 +79,11 @@
             </paper-tabs>
           </div>
         </template>
-
-        <paper-icon-button
-          icon="mdi:refresh"
-          class$="[[computeRefreshButtonClass(isFetching)]]"
-          on-tap="handleRefresh" hidden$="[[isStreaming]]"
-        ></paper-icon-button>
-        <paper-icon-button
-          icon="mdi:microphone" hidden$='[[!canListen]]'
-          on-tap="handleListenClick"></paper-icon-button>
       </paper-toolbar>
 
-      <div class='fit'>
-        <ha-cards
-          show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, states)]]'
-          states='[[states]]' columns='[[columns]]'></ha-cards>
-      </div>
+      <ha-cards
+        show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, states)]]'
+        states='[[states]]' columns='[[columns]]'></ha-cards>
     </paper-header-panel>
   </template>
 

src/layouts/partial-cards.js

@@ -136,14 +136,31 @@ export default new Polymer({
     voiceActions.listen();
   },
 
+  headerScrollAdjust(ev) {
+    if (!this.hasViews) return;
+    Polymer.Base.transform(`translateY(-${ev.detail.y}px)`, this.$.menu);
+  },
+
+  computeHeaderHeight(hasViews) {
+    return hasViews ? 128 : 64;
+  },
+
+  computeCondensedHeaderHeight(hasViews) {
+    return hasViews ? 48 : 64;
+  },
+
   computeMenuButtonClass(narrow, showMenu) {
-    return !narrow && showMenu ? 'invisible' : '';
+    return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
   },
 
   computeRefreshButtonClass(isFetching) {
     return isFetching ? 'ha-spin' : '';
   },
 
+  computeTitle(hasViews, locationName) {
+    return hasViews ? 'Home Assistant' : locationName;
+  },
+
   computeShowIntroduction(currentView, introductionLoaded, states) {
     return currentView === '' && (introductionLoaded || states.size === 0);
   },