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

Center content on mobile

Browse Source
This commit is contained in:
Paul Bottein 2025-07-10 18:49:05 +02:00
parent 341e63e878
commit 082f1ca55e
No known key found for this signature in database
1 changed files with 80 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/dialogs/more-info/components/voice/ha-more-info-view-toggle-group.ts
View File

@ -117,53 +117,61 @@ class HaMoreInfoViewToggleGroup extends LitElement {
.stateObj=${groupStateObj} .stateObj=${groupStateObj}
.stateOverride=${formattedGroupState} .stateOverride=${formattedGroupState}
></ha-more-info-state-header> ></ha-more-info-state-header>
<ha-control-button-group vertical> <div class="main">
<ha-control-button <ha-control-button-group vertical>
vertical <ha-control-button
@click=${this._turnAllOn} vertical
.disabled=${isAllOn} @click=${this._turnAllOn}
> .disabled=${isAllOn}
<ha-domain-icon >
.hass=${this.hass} <ha-domain-icon
.domain=${domain} .hass=${this.hass}
.state=${ON_STATE} .domain=${domain}
.deviceClass=${deviceClass} .state=${ON_STATE}
></ha-domain-icon> .deviceClass=${deviceClass}
<p> ></ha-domain-icon>
${domain === "cover" <p>
? isMultiple ${domain === "cover"
? this.hass.localize("ui.card.cover.open_all") ? isMultiple
: this.hass.localize("ui.card.cover.open") ? this.hass.localize("ui.card.cover.open_all")
: isMultiple : this.hass.localize("ui.card.cover.open")
? this.hass.localize("ui.card.common.turn_on_all") : isMultiple
: this.hass.localize("ui.card.common.turn_on")} ? this.hass.localize("ui.card.common.turn_on_all")
</p> : this.hass.localize("ui.card.common.turn_on")}
</ha-control-button> </p>
<ha-control-button </ha-control-button>
vertical <ha-control-button
@click=${this._turnAllOff} vertical
.disabled=${isAllOff} @click=${this._turnAllOff}
> .disabled=${isAllOff}
<ha-domain-icon >
.hass=${this.hass} <ha-domain-icon
.domain=${domain} .hass=${this.hass}
.state=${OFF_STATE} .domain=${domain}
.deviceClass=${deviceClass} .state=${OFF_STATE}
.icon=${domain === "light" ? "mdi:lightbulb-off" : undefined} .deviceClass=${deviceClass}
></ha-domain-icon> .icon=${domain === "light" ? "mdi:lightbulb-off" : undefined}
></ha-domain-icon>
<p> <p>
${domain === "cover" ${domain === "cover"
? isMultiple ? isMultiple
? this.hass.localize("ui.card.cover.close_all") ? this.hass.localize("ui.card.cover.close_all")
: this.hass.localize("ui.card.cover.close") : this.hass.localize("ui.card.cover.close")
: isMultiple : isMultiple
? this.hass.localize("ui.card.common.turn_off_all") ? this.hass.localize("ui.card.common.turn_off_all")
: this.hass.localize("ui.card.common.turn_off")} : this.hass.localize("ui.card.common.turn_off")}
</p> </p>
</ha-control-button> </ha-control-button>
</ha-control-button-group> </ha-control-button-group>
<hui-section .config=${sectionConfig} .hass=${this.hass}></hui-section> </div>
<div class="entities">
<hui-section
.config=${sectionConfig}
.hass=${this.hass}
></hui-section>
</div>
</div> </div>
`; `;
} }
@ -206,18 +214,33 @@ class HaMoreInfoViewToggleGroup extends LitElement {
static styles = [ static styles = [
css` css`
.content { :host {
padding: 24px;
padding-bottom: max(var(--safe-area-inset-bottom), 24px);
display: flex; display: flex;
flex: 1;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 24px; gap: 24px;
} }
ha-more-info-state-header {
margin-top: 24px;
}
.main {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
ha-control-button-group { ha-control-button-group {
--control-button-group-spacing: 12px; --control-button-group-spacing: 12px;
--control-button-group-thickness: 130px; --control-button-group-thickness: 130px;
margin-bottom: 32px;
} }
ha-control-button { ha-control-button {
--control-button-border-radius: 16px; --control-button-border-radius: 16px;
@ -228,6 +251,13 @@ class HaMoreInfoViewToggleGroup extends LitElement {
ha-control-button p { ha-control-button p {
margin: 0; margin: 0;
} }
.entities {
box-sizing: border-box;
width: 100%;
background-color: var(--primary-background-color);
padding: 12px;
padding-bottom: max(var(--safe-area-inset-bottom), 12px);
}
hui-section { hui-section {
width: 100%; width: 100%;
} }