jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-01 13:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update hui-gauge-card.ts (#5241)

Browse Source
This commit is contained in:
Bram Kragten 2020-03-18 12:48:16 +01:00 committed by GitHub
parent 1d3aeec0de
commit 205b7451fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -136,7 +136,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
>
<div class="container">
<div class="gauge-a"></div>
<div class="gauge-b"></div>
<div
class="gauge-c"
style=${styleMap({
@ -144,16 +143,17 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
"background-color": this._computeSeverity(state),
})}
></div>
<div class="gauge-data">
<div id="percent">
${stateObj.state}
${this._config.unit ||
stateObj.attributes.unit_of_measurement ||
""}
</div>
<div id="name">
${this._config.name || computeStateName(stateObj)}
</div>
<div class="gauge-b"></div>
</div>
<div class="gauge-data">
<div id="percent">
${stateObj.state}
${this._config.unit ||
stateObj.attributes.unit_of_measurement ||
""}
</div>
<div id="name">
${this._config.name || computeStateName(stateObj)}
</div>
</div>
</ha-card>
@ -250,9 +250,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult {
return css`
ha-card {
height: calc(var(--base-unit) * 3);
position: relative;
cursor: pointer;
padding: 16px 16px 0 16px;
}
ha-card:focus {
outline: none;
@ -261,15 +260,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
.container {
width: calc(var(--base-unit) * 4);
height: calc(var(--base-unit) * 2);
position: absolute;
top: calc(var(--base-unit) * 1.5);
left: 50%;
overflow: hidden;
position: relative;
text-align: center;
transform: translate(-50%, -50%);
margin: auto;
}
.gauge-a {
z-index: 1;
position: absolute;
background-color: var(--primary-background-color);
width: calc(var(--base-unit) * 4);
@ -279,7 +275,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
0px 0px;
}
.gauge-b {
z-index: 3;
position: absolute;
background-color: var(--paper-card-background-color);
width: calc(var(--base-unit) * 2.5);
@ -291,7 +286,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
0px 0px;
}
.gauge-c {
z-index: 2;
position: absolute;
background-color: var(--label-badge-blue);
width: calc(var(--base-unit) * 4);
@ -307,15 +301,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
transition: all 1.3s ease-in-out;
}
.gauge-data {
z-index: 4;
text-align: center;
color: var(--primary-text-color);
line-height: calc(var(--base-unit) * 0.3);
position: absolute;
width: calc(var(--base-unit) * 4);
height: var(--base-unit);
top: var(--base-unit);
margin-left: auto;
margin-right: auto;
width: 100%;
position: relative;
top: calc(var(--base-unit) * -0.5);
}
.init .gauge-data {
transition: all 1s ease-out;