From a97750b5dd887af42030e01bfe50bc3c60183514 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 29 Aug 2015 21:57:37 -0700
Subject: [PATCH] Layout Bugfixes

---
 src/cards/ha-introduction-card.html |  2 +-
 src/components/ha-zone-cards.html   | 61 +++++++++--------------------
 src/components/ha-zone-cards.js     | 10 +++--
 3 files changed, 26 insertions(+), 47 deletions(-)

diff --git a/src/cards/ha-introduction-card.html b/src/cards/ha-introduction-card.html
index 6959c47dac..d982c210c2 100644
--- a/src/cards/ha-introduction-card.html
+++ b/src/cards/ha-introduction-card.html
@@ -22,7 +22,7 @@
     }
   </style>
   <template>
-    <ha-card header="Welcome to Home Assistant!">
+    <ha-card header="Welcome Home!">
       <div class='content'>
         Here are some resources to get started.
         <ul>
diff --git a/src/components/ha-zone-cards.html b/src/components/ha-zone-cards.html
index 74557f20fe..5a811eb362 100644
--- a/src/components/ha-zone-cards.html
+++ b/src/components/ha-zone-cards.html
@@ -31,7 +31,7 @@
 
   <template>
     <div class='main'>
-      <template is='dom-if' if='[[cards._badges]]'>
+      <template is='dom-if' if='[[cards._badges.length]]'>
         <div class='badges'>
           <template is='dom-if' if='[[cards._demo]]'>
             <ha-demo-badge></ha-demo-badge>
@@ -40,54 +40,29 @@
           <ha-badges-card states='[[cards._badges]]'></ha-badges-card>
         </div>
       </template>
-      <template is='dom-if' if='[[!cards._badges]]'>
+      <template is='dom-if' if='[[!cards._badges.length]]'>
         <div class='no-badges'> </div>
       </template>
       <div class='horizontal layout'>
-        <div class='column flex-1'>
-          <template is='dom-if' if='[[computeShowIntroduction(showIntroduction, cards)]]'>
-            <div class='zone-card'>
-              <ha-introduction-card show-hide-instruction='[[computeShowHideInstruction(states, cards)]]'></ha-introduction-card>
+        <template is='dom-repeat' items='[[cards._columns]]' as='column'>
+          <template is='dom-if'
+                    if='[[computeShouldRenderColumn(index, column)]]'>
+            <div class='column flex-1'>
+              <template is='dom-if' if='[[computeShowIntroduction(index, showIntroduction, cards)]]'>
+                <div class='zone-card'>
+                  <ha-introduction-card show-hide-instruction='[[computeShowHideInstruction(states, cards)]]'></ha-introduction-card>
+                </div>
+              </template>
+              <template is='dom-repeat' items='[[column]]' as='domain'>
+                <div class='zone-card'>
+                  <ha-domain-card domain='[[domain]]'
+                    states='[[computeStatesOfCard(cards, domain)]]'
+                  ></ha-domain-card>
+                </div>
+              </template>
             </div>
           </template>
-          <template is='dom-repeat' items='[[cards._columns.0]]'>
-            <div class='zone-card'>
-              <ha-domain-card domain='[[item]]'
-                states='[[computeStatesOfCard(cards, item)]]'></ha-domain-card>
-            </div>
-          </template>
-        </div>
-        <template is='dom-if' if='[[cards._columns.1]]'>
-          <div class='column flex-1'>
-            <template is='dom-repeat' items='[[cards._columns.1]]'>
-              <div class='zone-card'>
-                <ha-domain-card domain='[[item]]'
-                  states='[[computeStatesOfCard(cards, item)]]'></ha-domain-card>
-              </div>
-            </template>
-          </div>
         </template>
-        <template is='dom-if' if='[[cards._columns.2]]'>
-          <div class='column flex-1'>
-            <template is='dom-repeat' items='[[cards._columns.2]]'>
-              <div class='zone-card'>
-                <ha-domain-card domain='[[item]]'
-                  states='[[computeStatesOfCard(cards, item)]]'></ha-domain-card>
-              </div>
-            </template>
-          </div>
-        </template>
-        <template is='dom-if' if='[[cards._columns.3]]'>
-          <div class='column flex-1'>
-            <template is='dom-repeat' items='[[cards._columns.3]]'>
-              <div class='zone-card'>
-                <ha-domain-card domain='[[item]]'
-                  states='[[computeStatesOfCard(cards, item)]]'></ha-domain-card>
-              </div>
-            </template>
-          </div>
-        </template>
-      </div>
     </div>
   </template>
 
diff --git a/src/components/ha-zone-cards.js b/src/components/ha-zone-cards.js
index 5d22ca2618..8c6430f15c 100644
--- a/src/components/ha-zone-cards.js
+++ b/src/components/ha-zone-cards.js
@@ -59,7 +59,7 @@ export default new Polymer({
     const cards = {
       _demo: false,
       _badges: [],
-      _columns: {},
+      _columns: [],
     };
     for (let i = 0; i < columns; i++) { cards._columns[i] = []; }
 
@@ -114,8 +114,12 @@ export default new Polymer({
     return cards;
   },
 
-  computeShowIntroduction(showIntroduction, cards) {
-    return showIntroduction || cards._demo;
+  computeShouldRenderColumn(index, items) {
+    return index === 0 || items.length;
+  },
+
+  computeShowIntroduction(index, showIntroduction, cards) {
+    return index === 0 && (showIntroduction || cards._demo);
   },
 
   computeShowHideInstruction(states, cards) {