From cc97e82a78dc5a3cb9729c0aba95d5035b88c9bc Mon Sep 17 00:00:00 2001
From: Tom Raithel <t.raithel@googlemail.com>
Date: Tue, 23 Oct 2018 00:12:39 +0200
Subject: [PATCH] Improve size of device cards and add max-width for entities
 (#1838)

fixes #1751
---
 .../config-entries/ha-ce-entities-card.js     |  2 +-
 .../config-entries/ha-config-entries.js       |  2 +
 .../config-entries/ha-config-entry-page.js    | 25 ++++++-----
 .../config/config-entries/ha-device-card.js   | 43 +++++++++++--------
 src/panels/config/ha-panel-config.js          |  1 +
 5 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/panels/config/config-entries/ha-ce-entities-card.js b/src/panels/config/config-entries/ha-ce-entities-card.js
index 2d4f3d2c3b..78719c584a 100644
--- a/src/panels/config/config-entries/ha-ce-entities-card.js
+++ b/src/panels/config/config-entries/ha-ce-entities-card.js
@@ -26,7 +26,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
     return html`
     <style>
       paper-card {
-        display: block;
+        flex: 1 0 100%;
         padding-bottom: 8px;
       }
       paper-icon-item {
diff --git a/src/panels/config/config-entries/ha-config-entries.js b/src/panels/config/config-entries/ha-config-entries.js
index b52c30ec58..85804246f3 100644
--- a/src/panels/config/config-entries/ha-config-entries.js
+++ b/src/panels/config/config-entries/ha-config-entries.js
@@ -21,6 +21,7 @@ class HaConfigEntries extends NavigateMixin(PolymerElement) {
       entries='[[_entries]]'
       entities='[[_entities]]'
       devices='[[_devices]]'
+      narrow='[[narrow]]'
     ></ha-config-entry-page>
   </template>
   <template is='dom-if' if='[[!_configEntry]]'>
@@ -39,6 +40,7 @@ class HaConfigEntries extends NavigateMixin(PolymerElement) {
     return {
       hass: Object,
       isWide: Boolean,
+      narrow: Boolean,
       route: Object,
 
       _configEntry: {
diff --git a/src/panels/config/config-entries/ha-config-entry-page.js b/src/panels/config/config-entries/ha-config-entry-page.js
index 65ea4dcd5d..6851c90096 100644
--- a/src/panels/config/config-entries/ha-config-entry-page.js
+++ b/src/panels/config/config-entries/ha-config-entry-page.js
@@ -23,20 +23,14 @@ class HaConfigEntryPage extends NavigateMixin(
       display: flex;
       flex-wrap: wrap;
       padding: 4px;
+      justify-content: center;
     }
-    ha-device-card, ha-ce-entities-card {
-      flex: 1;
-      min-width: 300px;
-      max-width: 300px;
-      margin: 8px;
-
-    }
-    @media(max-width: 600px) {
-      ha-device-card {
-        max-width: 500px;
-        margin-left: auto;
-        margin-right: auto;
-      }
+    .card {
+      box-sizing: border-box;
+      display: flex;
+      flex: 1 0 300px;
+      max-width: 500px;
+      padding: 8px;
     }
   </style>
   <hass-subpage header='[[configEntry.title]]'>
@@ -51,17 +45,21 @@ class HaConfigEntryPage extends NavigateMixin(
       </template>
       <template is='dom-repeat' items='[[_configEntryDevices]]' as='device'>
         <ha-device-card
+          class="card"
           hass='[[hass]]'
           devices='[[devices]]'
           device='[[device]]'
           entities='[[entities]]'
+          narrow='[[narrow]]'
         ></ha-device-card>
       </template>
       <template is='dom-if' if='[[_noDeviceEntities.length]]'>
         <ha-ce-entities-card
+          class="card"
           heading="[[localize('ui.panel.config.integrations.config_entry.no_device')]]"
           entities='[[_noDeviceEntities]]'
           hass='[[hass]]'
+          narrow='[[narrow]]'
         ></ha-ce-entities-card>
       </template>
     </div>
@@ -73,6 +71,7 @@ class HaConfigEntryPage extends NavigateMixin(
     return {
       hass: Object,
       isWide: Boolean,
+      narrow: Boolean,
       configEntry: {
         type: Object,
         value: null,
diff --git a/src/panels/config/config-entries/ha-device-card.js b/src/panels/config/config-entries/ha-device-card.js
index 1eee1bec58..25ee8b932d 100644
--- a/src/panels/config/config-entries/ha-device-card.js
+++ b/src/panels/config/config-entries/ha-device-card.js
@@ -25,14 +25,13 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
     <style>
-      paper-card {
-        display: block;
-        padding-bottom: 8px;
+      :host(:not([narrow])) .device-entities {
+        max-height: 400px;
+        overflow: auto;
       }
-      .device-row {
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 8px;
+      paper-card {
+        flex: 1 0 100%;
+        padding-bottom: 10px;
       }
       .device {
         width: 30%;
@@ -79,18 +78,20 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
         </template>
       </div>
 
-      <template is='dom-repeat' items='[[_computeDeviceEntities(hass, device, entities)]]' as='entity'>
-        <paper-icon-item on-click='_openMoreInfo'>
-          <state-badge
-            state-obj="[[_computeStateObj(entity, hass)]]"
-            slot='item-icon'
-          ></state-badge>
-          <paper-item-body>
-            <div class='name'>[[_computeEntityName(entity, hass)]]</div>
-            <div class='secondary entity-id'>[[entity.entity_id]]</div>
-          </paper-item-body>
-        </paper-icon-item>
-      </template>
+      <div class='device-entities'>
+        <template is='dom-repeat' items='[[_computeDeviceEntities(hass, device, entities)]]' as='entity'>
+          <paper-icon-item on-click='_openMoreInfo'>
+            <state-badge
+              state-obj="[[_computeStateObj(entity, hass)]]"
+              slot='item-icon'
+            ></state-badge>
+            <paper-item-body>
+              <div class='name'>[[_computeEntityName(entity, hass)]]</div>
+              <div class='secondary entity-id'>[[entity.entity_id]]</div>
+            </paper-item-body>
+          </paper-icon-item>
+        </template>
+      </div>
     </paper-card>
 
     `;
@@ -102,6 +103,10 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
       devices: Array,
       entities: Array,
       hass: Object,
+      narrow: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
       _childDevices: {
         type: Array,
         computed: "_computeChildDevices(device, devices)",
diff --git a/src/panels/config/ha-panel-config.js b/src/panels/config/ha-panel-config.js
index 26627a1bb6..eb84083689 100644
--- a/src/panels/config/ha-panel-config.js
+++ b/src/panels/config/ha-panel-config.js
@@ -106,6 +106,7 @@ class HaPanelConfig extends EventsMixin(NavigateMixin(PolymerElement)) {
         page-name='integrations'
         hass='[[hass]]'
         is-wide='[[isWide]]'
+        narrow='[[narrow]]'
       ></ha-config-entries>
     </template>