mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
Layout Bugfixes
This commit is contained in:
parent
3cb2e6a5db
commit
a97750b5dd
@ -22,7 +22,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<ha-card header="Welcome to Home Assistant!">
|
<ha-card header="Welcome Home!">
|
||||||
<div class='content'>
|
<div class='content'>
|
||||||
Here are some resources to get started.
|
Here are some resources to get started.
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class='main'>
|
<div class='main'>
|
||||||
<template is='dom-if' if='[[cards._badges]]'>
|
<template is='dom-if' if='[[cards._badges.length]]'>
|
||||||
<div class='badges'>
|
<div class='badges'>
|
||||||
<template is='dom-if' if='[[cards._demo]]'>
|
<template is='dom-if' if='[[cards._demo]]'>
|
||||||
<ha-demo-badge></ha-demo-badge>
|
<ha-demo-badge></ha-demo-badge>
|
||||||
@ -40,54 +40,29 @@
|
|||||||
<ha-badges-card states='[[cards._badges]]'></ha-badges-card>
|
<ha-badges-card states='[[cards._badges]]'></ha-badges-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template is='dom-if' if='[[!cards._badges]]'>
|
<template is='dom-if' if='[[!cards._badges.length]]'>
|
||||||
<div class='no-badges'> </div>
|
<div class='no-badges'> </div>
|
||||||
</template>
|
</template>
|
||||||
<div class='horizontal layout'>
|
<div class='horizontal layout'>
|
||||||
<div class='column flex-1'>
|
<template is='dom-repeat' items='[[cards._columns]]' as='column'>
|
||||||
<template is='dom-if' if='[[computeShowIntroduction(showIntroduction, cards)]]'>
|
<template is='dom-if'
|
||||||
<div class='zone-card'>
|
if='[[computeShouldRenderColumn(index, column)]]'>
|
||||||
<ha-introduction-card show-hide-instruction='[[computeShowHideInstruction(states, cards)]]'></ha-introduction-card>
|
<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>
|
</div>
|
||||||
</template>
|
</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>
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -59,7 +59,7 @@ export default new Polymer({
|
|||||||
const cards = {
|
const cards = {
|
||||||
_demo: false,
|
_demo: false,
|
||||||
_badges: [],
|
_badges: [],
|
||||||
_columns: {},
|
_columns: [],
|
||||||
};
|
};
|
||||||
for (let i = 0; i < columns; i++) { cards._columns[i] = []; }
|
for (let i = 0; i < columns; i++) { cards._columns[i] = []; }
|
||||||
|
|
||||||
@ -114,8 +114,12 @@ export default new Polymer({
|
|||||||
return cards;
|
return cards;
|
||||||
},
|
},
|
||||||
|
|
||||||
computeShowIntroduction(showIntroduction, cards) {
|
computeShouldRenderColumn(index, items) {
|
||||||
return showIntroduction || cards._demo;
|
return index === 0 || items.length;
|
||||||
|
},
|
||||||
|
|
||||||
|
computeShowIntroduction(index, showIntroduction, cards) {
|
||||||
|
return index === 0 && (showIntroduction || cards._demo);
|
||||||
},
|
},
|
||||||
|
|
||||||
computeShowHideInstruction(states, cards) {
|
computeShowHideInstruction(states, cards) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user