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

Sidebar view: Move all cards to 1 column on mobile (#9656)

Browse Source
This commit is contained in:
Bram Kragten 2021-07-30 21:57:01 +02:00 committed by GitHub
parent 2cdf78c504
commit 5147dff670
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/panels/energy/strategies/energy-strategy.ts
View File

@ -69,23 +69,6 @@ export class EnergyStrategy {
});
}
if (hasGrid || hasSolar) {
view.cards!.push({
title: "Sources",
type: "energy-sources-table",
prefs: energyPrefs,
});
}
// Only include if we have at least 1 device in the config.
if (energyPrefs.device_consumption.length) {
view.cards!.push({
title: "Monitor individual devices",
type: "energy-devices-graph",
prefs: energyPrefs,
});
}
// Only include if we have a grid.
if (hasGrid) {
view.cards!.push({
@ -96,6 +79,14 @@ export class EnergyStrategy {
});
}
if (hasGrid || hasSolar) {
view.cards!.push({
title: "Sources",
type: "energy-sources-table",
prefs: energyPrefs,
});
}
// Only include if we have a solar source.
if (hasSolar) {
view.cards!.push({
@ -123,6 +114,15 @@ export class EnergyStrategy {
});
}
// Only include if we have at least 1 device in the config.
if (energyPrefs.device_consumption.length) {
view.cards!.push({
title: "Monitor individual devices",
type: "energy-devices-graph",
prefs: energyPrefs,
});
}
return view;
}
}

10
src/panels/lovelace/views/hui-masonry-view.ts
View File

@ -64,6 +64,8 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
private _mqls?: MediaQueryList[];
private _mqlListenerRef?: () => void;
public constructor() {
super();
this.addEventListener("iron-resize", (ev: Event) => ev.stopPropagation());
@ -77,8 +79,9 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
public disconnectedCallback() {
super.disconnectedCallback();
this._mqls?.forEach((mql) => {
mql.removeListener(this._updateColumns);
mql.removeListener(this._mqlListenerRef!);
});
this._mqlListenerRef = undefined;
this._mqls = undefined;
}
@ -112,7 +115,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
private _initMqls() {
this._mqls = [300, 600, 900, 1200].map((width) => {
const mql = window.matchMedia(`(min-width: ${width}px)`);
mql.addListener(this._updateColumns.bind(this));
if (!this._mqlListenerRef) {
this._mqlListenerRef = this._updateColumns.bind(this);
}
mql.addListener(this._mqlListenerRef);
return mql;
});
}

37
src/panels/lovelace/views/hui-sidebar-view.ts
View File

@ -35,6 +35,24 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
@state() private _config?: LovelaceViewConfig;
private _mqlListenerRef?: () => void;
private _mql?: MediaQueryList;
public connectedCallback() {
super.connectedCallback();
this._mql = window.matchMedia("(min-width: 760px)");
this._mqlListenerRef = this._createCards.bind(this);
this._mql.addListener(this._mqlListenerRef);
}
public disconnectedCallback() {
super.disconnectedCallback();
this._mql?.removeListener(this._mqlListenerRef!);
this._mqlListenerRef = undefined;
this._mql = undefined;
}
public setConfig(config: LovelaceViewConfig): void {
this._config = config;
}
@ -96,8 +114,14 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
private _createCards(): void {
const mainDiv = document.createElement("div");
mainDiv.id = "main";
const sidebarDiv = document.createElement("div");
sidebarDiv.id = "sidebar";
let sidebarDiv: HTMLDivElement;
if (this._mql?.matches) {
sidebarDiv = document.createElement("div");
sidebarDiv.id = "sidebar";
} else {
sidebarDiv = mainDiv;
}
if (this.hasUpdated) {
const oldMain = this.renderRoot.querySelector("#main");
@ -177,15 +201,6 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
margin: var(--masonry-view-card-margin, 4px 4px 8px);
}
@media (max-width: 760px) {
.container {
flex-direction: column;
}
#sidebar {
max-width: unset;
}
}
@media (max-width: 500px) {
.container > div > * {
margin-left: 0;