jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize cards for horizontal stack (#5254)

Browse Source
This commit is contained in:
Bram Kragten 2020-03-21 15:59:30 +01:00 committed by GitHub
parent 02e01626f5
commit eed3263c70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 67 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/panels/lovelace/cards/hui-button-card.ts
View File

@ -228,6 +228,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
text-align: center; text-align: center;
padding: 4% 0; padding: 4% 0;
font-size: 1.2rem; font-size: 1.2rem;
height: 100%;
box-sizing: border-box;
justify-content: center;
} }
ha-card:focus { ha-card:focus {

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

@ -185,6 +185,9 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card {
height: 100%;
}
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

8
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -249,6 +249,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
ha-card { ha-card {
cursor: pointer; cursor: pointer;
padding: 16px 16px 0 16px; padding: 16px 16px 0 16px;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
align-items: center;
} }
ha-card:focus { ha-card:focus {
outline: none; outline: none;
@ -259,8 +265,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
height: calc(var(--base-unit) * 2); height: calc(var(--base-unit) * 2);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
text-align: center;
margin: auto;
} }
.gauge-a { .gauge-a {
position: absolute; position: absolute;

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

@ -116,40 +116,45 @@ export class HuiLightCard 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">
<round-slider <div id="slider">
min="0" ${supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
.value=${brightness} ? html`
@value-changing=${this._dragEvent} <round-slider
@value-changed=${this._setBrightness} min="0"
style=${styleMap({ .value=${brightness}
visibility: supportsFeature(stateObj, SUPPORT_BRIGHTNESS) @value-changing=${this._dragEvent}
? "visible" @value-changed=${this._setBrightness}
: "hidden", ></round-slider>
})} `
></round-slider> : ""}
<paper-icon-button <paper-icon-button
class="light-button ${classMap({ class="light-button ${classMap({
"state-on": stateObj.state === "on", "slider-center": supportsFeature(
"state-unavailable": stateObj.state === "unavailable", stateObj,
})}" SUPPORT_BRIGHTNESS
.icon=${this._config.icon || stateIcon(stateObj)} ),
style=${styleMap({ "state-on": stateObj.state === "on",
filter: this._computeBrightness(stateObj), "state-unavailable": stateObj.state === "unavailable",
color: this._computeColor(stateObj), })}"
})} .icon=${this._config.icon || stateIcon(stateObj)}
@click=${this._handleClick} style=${styleMap({
tabindex="0" filter: this._computeBrightness(stateObj),
></paper-icon-button> color: this._computeColor(stateObj),
})}
@click=${this._handleClick}
tabindex="0"
></paper-icon-button>
</div>
</div> </div>
</div>
<div id="info"> <div id="info">
<div class="brightness"> <div class="brightness">
% %
</div>
${this._config.name || computeStateName(stateObj)}
</div> </div>
${this._config.name || computeStateName(stateObj)}
</div> </div>
</ha-card> </ha-card>
`; `;
@ -256,6 +261,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
} }
ha-card { ha-card {
height: 100%;
box-sizing: border-box;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@ -273,6 +280,13 @@ export class HuiLightCard 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;
@ -298,13 +312,6 @@ 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 {
@ -315,9 +322,17 @@ 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 {
display: flex-vertical;
justify-content: center;
text-align: center; text-align: center;
margin-top: -56px; margin-top: -56px;
padding: 16px; padding: 16px;