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

fixes #1751
This commit is contained in:
Tom Raithel 2018-10-23 00:12:39 +02:00 committed by Paulus Schoutsen
parent 54e3191de6
commit cc97e82a78
5 changed files with 40 additions and 33 deletions

View File

@ -26,7 +26,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
return html` return html`
<style> <style>
paper-card { paper-card {
display: block; flex: 1 0 100%;
padding-bottom: 8px; padding-bottom: 8px;
} }
paper-icon-item { paper-icon-item {

View File

@ -21,6 +21,7 @@ class HaConfigEntries extends NavigateMixin(PolymerElement) {
entries='[[_entries]]' entries='[[_entries]]'
entities='[[_entities]]' entities='[[_entities]]'
devices='[[_devices]]' devices='[[_devices]]'
narrow='[[narrow]]'
></ha-config-entry-page> ></ha-config-entry-page>
</template> </template>
<template is='dom-if' if='[[!_configEntry]]'> <template is='dom-if' if='[[!_configEntry]]'>
@ -39,6 +40,7 @@ class HaConfigEntries extends NavigateMixin(PolymerElement) {
return { return {
hass: Object, hass: Object,
isWide: Boolean, isWide: Boolean,
narrow: Boolean,
route: Object, route: Object,
_configEntry: { _configEntry: {

View File

@ -23,20 +23,14 @@ class HaConfigEntryPage extends NavigateMixin(
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 4px; 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;
}
@media(max-width: 600px) {
ha-device-card {
max-width: 500px; max-width: 500px;
margin-left: auto; padding: 8px;
margin-right: auto;
}
} }
</style> </style>
<hass-subpage header='[[configEntry.title]]'> <hass-subpage header='[[configEntry.title]]'>
@ -51,17 +45,21 @@ class HaConfigEntryPage extends NavigateMixin(
</template> </template>
<template is='dom-repeat' items='[[_configEntryDevices]]' as='device'> <template is='dom-repeat' items='[[_configEntryDevices]]' as='device'>
<ha-device-card <ha-device-card
class="card"
hass='[[hass]]' hass='[[hass]]'
devices='[[devices]]' devices='[[devices]]'
device='[[device]]' device='[[device]]'
entities='[[entities]]' entities='[[entities]]'
narrow='[[narrow]]'
></ha-device-card> ></ha-device-card>
</template> </template>
<template is='dom-if' if='[[_noDeviceEntities.length]]'> <template is='dom-if' if='[[_noDeviceEntities.length]]'>
<ha-ce-entities-card <ha-ce-entities-card
class="card"
heading="[[localize('ui.panel.config.integrations.config_entry.no_device')]]" heading="[[localize('ui.panel.config.integrations.config_entry.no_device')]]"
entities='[[_noDeviceEntities]]' entities='[[_noDeviceEntities]]'
hass='[[hass]]' hass='[[hass]]'
narrow='[[narrow]]'
></ha-ce-entities-card> ></ha-ce-entities-card>
</template> </template>
</div> </div>
@ -73,6 +71,7 @@ class HaConfigEntryPage extends NavigateMixin(
return { return {
hass: Object, hass: Object,
isWide: Boolean, isWide: Boolean,
narrow: Boolean,
configEntry: { configEntry: {
type: Object, type: Object,
value: null, value: null,

View File

@ -25,14 +25,13 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
static get template() { static get template() {
return html` return html`
<style> <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 { .device {
width: 30%; width: 30%;
@ -79,6 +78,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
</template> </template>
</div> </div>
<div class='device-entities'>
<template is='dom-repeat' items='[[_computeDeviceEntities(hass, device, entities)]]' as='entity'> <template is='dom-repeat' items='[[_computeDeviceEntities(hass, device, entities)]]' as='entity'>
<paper-icon-item on-click='_openMoreInfo'> <paper-icon-item on-click='_openMoreInfo'>
<state-badge <state-badge
@ -91,6 +91,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
</paper-item-body> </paper-item-body>
</paper-icon-item> </paper-icon-item>
</template> </template>
</div>
</paper-card> </paper-card>
`; `;
@ -102,6 +103,10 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
devices: Array, devices: Array,
entities: Array, entities: Array,
hass: Object, hass: Object,
narrow: {
type: Boolean,
reflectToAttribute: true,
},
_childDevices: { _childDevices: {
type: Array, type: Array,
computed: "_computeChildDevices(device, devices)", computed: "_computeChildDevices(device, devices)",

View File

@ -106,6 +106,7 @@ class HaPanelConfig extends EventsMixin(NavigateMixin(PolymerElement)) {
page-name='integrations' page-name='integrations'
hass='[[hass]]' hass='[[hass]]'
is-wide='[[isWide]]' is-wide='[[isWide]]'
narrow='[[narrow]]'
></ha-config-entries> ></ha-config-entries>
</template> </template>