jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 01:06:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make energy period selector less wide for mobile (#9814)

Browse Source
This commit is contained in:
Bram Kragten 2021-08-16 05:43:35 +02:00 committed by GitHub
parent 456209dded
commit 3a112531cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/panels/lovelace/components/hui-energy-period-selector.ts
View File

@ -53,6 +53,11 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@state() private _period?: "day" | "week" | "month" | "year"; @state() private _period?: "day" | "week" | "month" | "year";
public connectedCallback() {
super.connectedCallback();
this.toggleAttribute("narrow", this.offsetWidth < 600);
}
public hassSubscribe(): UnsubscribeFunc[] { public hassSubscribe(): UnsubscribeFunc[] {
return [ return [
getEnergyDataCollection(this.hass, { getEnergyDataCollection(this.hass, {
@ -82,18 +87,17 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
this._endDate || new Date(), this._endDate || new Date(),
this.hass.locale this.hass.locale
)}`} )}`}
</div>
<mwc-icon-button label="Previous" @click=${this._pickPrevious}> <mwc-icon-button label="Previous" @click=${this._pickPrevious}>
<ha-svg-icon .path=${mdiChevronLeft}></ha-svg-icon> <ha-svg-icon .path=${mdiChevronLeft}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-icon-button label="Next" @click=${this._pickNext}> <mwc-icon-button label="Next" @click=${this._pickNext}>
<ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon> <ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-button dense outlined @click=${this._pickToday}> <mwc-button dense outlined @click=${this._pickToday}>
Today Today
</mwc-button> </mwc-button>
</div>
<div class="period">
<ha-button-toggle-group <ha-button-toggle-group
.buttons=${viewButtons} .buttons=${viewButtons}
.active=${this._period} .active=${this._period}
@ -101,6 +105,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@value-changed=${this._handleView} @value-changed=${this._handleView}
></ha-button-toggle-group> ></ha-button-toggle-group>
</div> </div>
</div>
`; `;
} }
@ -200,14 +205,24 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
return css` return css`
.row { .row {
display: flex; display: flex;
align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
:host([narrow]) .row {
flex-direction: column-reverse;
}
:host([narrow]) .period {
margin-bottom: 8px;
}
.label { .label {
padding: 0 8px; display: flex;
text-align: center; justify-content: flex-end;
align-items: center;
font-size: 20px; font-size: 20px;
} }
.period {
display: flex;
justify-content: flex-end;
}
:host { :host {
--mdc-button-outline-color: currentColor; --mdc-button-outline-color: currentColor;
--primary-color: currentColor; --primary-color: currentColor;
@ -219,7 +234,6 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
mwc-icon-button { mwc-icon-button {
--mdc-icon-button-size: 28px; --mdc-icon-button-size: 28px;
} }
mwc-button,
ha-button-toggle-group { ha-button-toggle-group {
padding-left: 8px; padding-left: 8px;
} }