From fb6b2fc5d695f3659668ac10b6b41633b17b5aed Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Fri, 8 Apr 2016 09:08:25 -0700
Subject: [PATCH] Tweak entity card layout

---
 src/cards/ha-entities-card.html                | 7 +++++--
 src/state-summary/state-card-media_player.html | 8 ++++++--
 src/state-summary/state-card-media_player.js   | 5 +++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/cards/ha-entities-card.html b/src/cards/ha-entities-card.html
index 242b4cadb5..ce55d0bf85 100644
--- a/src/cards/ha-entities-card.html
+++ b/src/cards/ha-entities-card.html
@@ -11,13 +11,16 @@
       padding-bottom: 16px;
     }
     .state {
-      padding: 8px 16px;
+      padding: 4px 16px;
       cursor: pointer;
     }
     .header {
       @apply(--paper-font-headline);
+      /* overwriting line-height +8 because entity-toggle can be 40px height,
+         compensating this with reduced padding */
+      line-height: 40px;
       color: var(--primary-text-color);
-      padding: 24px 16px 16px;
+      padding: 20px 16px 12px;
       text-transform: capitalize;
     }
     .header .name {
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index 97e84f7fd3..d640f8e50c 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@@ -22,6 +22,10 @@
     text-transform: capitalize;
   }
 
+  .main-text[take-height] {
+    line-height: 40px;
+  }
+
   .secondary-text {
     @apply(--paper-font-common-nowrap);
     color: var(--secondary-text-color);
@@ -31,8 +35,8 @@
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
-        <div class='main-text'>[[computePrimaryText(stateObj, isPlaying)]]</div>
-        <div class='secondary-text'>[[computeSecondaryText(stateObj)]]</div>
+        <div class='main-text' take-height$='[[!secondaryText]]'>[[computePrimaryText(stateObj, isPlaying)]]</div>
+        <div class='secondary-text'>[[secondaryText]]</div>
       </div>
     </div>
   </template>
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
index 703941b539..4175cf740c 100644
--- a/src/state-summary/state-card-media_player.js
+++ b/src/state-summary/state-card-media_player.js
@@ -21,6 +21,11 @@ export default new Polymer({
       type: Boolean,
       computed: 'computeIsPlaying(stateObj)',
     },
+
+    secondaryText: {
+      type: String,
+      computed: 'computeSecondaryText(stateObj)',
+    },
   },
 
   computeIsPlaying(stateObj) {