jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes for horizontal stack optimization (#5427)

Browse Source
This commit is contained in:
Bram Kragten 2020-04-03 13:42:37 +02:00 committed by GitHub
parent b217291b04
commit 0241334656
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/panels/lovelace/cards/hui-entities-card.ts
View File

@ -187,6 +187,9 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
return css` return css`
ha-card { ha-card {
height: 100%; height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.card-header { .card-header {
display: flex; display: flex;
@ -199,6 +202,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#states {
flex: 1;
}
#states > * { #states > * {
margin: 8px 0; margin: 8px 0;
} }

6
src/panels/lovelace/cards/hui-entity-card.ts
View File

@ -189,6 +189,12 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
ha-card > div { ha-card > div {
cursor: pointer; cursor: pointer;
} }

38
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -125,16 +125,17 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
<div class="content"> <div class="content">
<div id="controls"> <div id="controls">
<div id="slider"> <div id="slider">
${supportsFeature(stateObj, SUPPORT_BRIGHTNESS) <round-slider
? html` min="0"
<round-slider .value=${brightness}
min="0" @value-changing=${this._dragEvent}
.value=${brightness} @value-changed=${this._setBrightness}
@value-changing=${this._dragEvent} style=${styleMap({
@value-changed=${this._setBrightness} visibility: supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
></round-slider> ? "visible"
` : "hidden",
: ""} })}
></round-slider>
<paper-icon-button <paper-icon-button
class="light-button ${classMap({ class="light-button ${classMap({
"slider-center": supportsFeature( "slider-center": supportsFeature(
@ -322,6 +323,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
color: var(--paper-item-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
width: 60%; width: 60%;
height: auto; height: auto;
position: absolute;
max-width: calc(100% - 40px);
box-sizing: border-box;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
.light-button.state-on { .light-button.state-on {
@ -332,16 +340,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
color: var(--state-icon-unavailable-color); color: var(--state-icon-unavailable-color);
} }
.slider-center {
position: absolute;
max-width: calc(100% - 40px);
box-sizing: border-box;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#info { #info {
text-align: center; text-align: center;
margin-top: -56px; margin-top: -56px;

38
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

@ -239,24 +239,26 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
tabindex="0" tabindex="0"
></paper-icon-button> ></paper-icon-button>
<div id="controls"> <div class="content">
<div id="slider"> <div id="controls">
${slider} <div id="slider">
<div id="slider-center"> ${slider}
<div id="temperature"> <div id="slider-center">
${currentTemperature} ${setValues} <div id="temperature">
${currentTemperature} ${setValues}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div id="info">
<div id="info"> <div id="modes">
<div id="modes"> ${(stateObj.attributes.hvac_modes || [])
${(stateObj.attributes.hvac_modes || []) .concat()
.concat() .sort(compareClimateHvacModes)
.sort(compareClimateHvacModes) .map((modeItem) => this._renderIcon(modeItem, mode))}
.map((modeItem) => this._renderIcon(modeItem, mode))} </div>
${name}
</div> </div>
${name}
</div> </div>
</ha-card> </ha-card>
`; `;
@ -423,6 +425,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
} }
ha-card { ha-card {
height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
--name-font-size: 1.2rem; --name-font-size: 1.2rem;
@ -481,6 +484,13 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
z-index: 25; z-index: 25;
} }
.content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
#controls { #controls {
display: flex; display: flex;
justify-content: center; justify-content: center;