mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +00:00
Improve size of device cards and add max-width for entities (#1838)
fixes #1751
This commit is contained in:
parent
54e3191de6
commit
cc97e82a78
@ -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 {
|
||||||
|
@ -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: {
|
||||||
|
@ -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;
|
max-width: 500px;
|
||||||
|
padding: 8px;
|
||||||
}
|
|
||||||
@media(max-width: 600px) {
|
|
||||||
ha-device-card {
|
|
||||||
max-width: 500px;
|
|
||||||
margin-left: auto;
|
|
||||||
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,
|
||||||
|
@ -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,18 +78,20 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
</template>
|
</template>
|
||||||
</div>
|
</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>
|
</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)",
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user