Improve size of device cards and add max-width for entities (#1838)

fixes #1751

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 {

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: {

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 {
+    .card {
-      flex: 1;
+      box-sizing: border-box;
-      min-width: 300px;
+      display: flex;
-      max-width: 300px;
+      flex: 1 0 300px;
-      margin: 8px;
+      max-width: 500px;
-
+      padding: 8px;
-    }
-    @media(max-width: 600px) {
-      ha-device-card {
-        max-width: 500px;
-        margin-left: auto;
-        margin-right: auto;
-      }
     }
   </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,

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 {
+      :host(:not([narrow])) .device-entities {
-        display: block;
+        max-height: 400px;
-        padding-bottom: 8px;
+        overflow: auto;
       }
-      .device-row {
+      paper-card {
-        display: flex;
+        flex: 1 0 100%;
-        flex-direction: row;
+        padding-bottom: 10px;
-        margin-bottom: 8px;
       }
       .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'>
+      <div class='device-entities'>
-        <paper-icon-item on-click='_openMoreInfo'>
+        <template is='dom-repeat' items='[[_computeDeviceEntities(hass, device, entities)]]' as='entity'>
-          <state-badge
+          <paper-icon-item on-click='_openMoreInfo'>
-            state-obj="[[_computeStateObj(entity, hass)]]"
+            <state-badge
-            slot='item-icon'
+              state-obj="[[_computeStateObj(entity, hass)]]"
-          ></state-badge>
+              slot='item-icon'
-          <paper-item-body>
+            ></state-badge>
-            <div class='name'>[[_computeEntityName(entity, hass)]]</div>
+            <paper-item-body>
-            <div class='secondary entity-id'>[[entity.entity_id]]</div>
+              <div class='name'>[[_computeEntityName(entity, hass)]]</div>
-          </paper-item-body>
+              <div class='secondary entity-id'>[[entity.entity_id]]</div>
-        </paper-icon-item>
+            </paper-item-body>
-      </template>
+          </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)",

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>