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

Fix cloud page design on mobile (#20661)

Browse Source
This commit is contained in:
Paul Bottein 2024-04-29 16:03:02 +02:00 committed by GitHub
parent 3ad1be50a2
commit dc67f9faf4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ha-settings-row.ts
View File

@ -8,6 +8,9 @@ export class HaSettingsRow extends LitElement {
@property({ type: Boolean, attribute: "three-line" }) @property({ type: Boolean, attribute: "three-line" })
public threeLine = false; public threeLine = false;
@property({ type: Boolean, attribute: "wrap-heading", reflect: true })
public wrapHeading = false;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class="prefix-wrap"> <div class="prefix-wrap">
@ -51,7 +54,7 @@ export class HaSettingsRow extends LitElement {
.body[three-line] { .body[three-line] {
min-height: var(--paper-item-body-three-line-min-height, 88px); min-height: var(--paper-item-body-three-line-min-height, 88px);
} }
.body > * { :host(:not([wrap-heading])) > * {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

1
src/panels/config/cloud/account/cloud-account.ts
View File

@ -187,6 +187,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
<cloud-remote-pref <cloud-remote-pref
.hass=${this.hass} .hass=${this.hass}
.narrow=${this.narrow}
.cloudStatus=${this.cloudStatus} .cloudStatus=${this.cloudStatus}
></cloud-remote-pref> ></cloud-remote-pref>

38
src/panels/config/cloud/account/cloud-remote-pref.ts
View File

@ -32,6 +32,8 @@ export class CloudRemotePref extends LitElement {
@property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn; @property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
@property({ type: Boolean }) public narrow = false;
@state() private _unmaskedUrl = false; @state() private _unmaskedUrl = false;
protected render() { protected render() {
@ -229,11 +231,15 @@ export class CloudRemotePref extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.cloud.account.remote.strict_connection_option_guard_page_secondary" "ui.panel.config.cloud.account.remote.strict_connection_option_guard_page_secondary"
)} )}
<br /><br /> ${strict_connection === "guard_page"
⚠️ ? html`
${this.hass.localize( <br /><br />
"ui.panel.config.cloud.account.remote.strict_connection_option_guard_page_warning" ⚠️
)} ${this.hass.localize(
"ui.panel.config.cloud.account.remote.strict_connection_option_guard_page_warning"
)}
`
: nothing}
</div> </div>
</div> </div>
</ha-formfield> </ha-formfield>
@ -255,11 +261,15 @@ export class CloudRemotePref extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.cloud.account.remote.strict_connection_option_drop_connection_secondary" "ui.panel.config.cloud.account.remote.strict_connection_option_drop_connection_secondary"
)} )}
<br /><br /> ${strict_connection === "drop_connection"
⚠️ ? html`
${this.hass.localize( <br /><br />
"ui.panel.config.cloud.account.remote.strict_connection_option_drop_connection_warning" ⚠️
)} ${this.hass.localize(
"ui.panel.config.cloud.account.remote.strict_connection_option_drop_connection_warning"
)}
`
: nothing}
</div> </div>
</div> </div>
</ha-formfield> </ha-formfield>
@ -267,7 +277,7 @@ export class CloudRemotePref extends LitElement {
${strict_connection !== "disabled" ${strict_connection !== "disabled"
? html` ? html`
<ha-settings-row> <ha-settings-row .narrow=${this.narrow}>
<span slot="heading" <span slot="heading"
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.cloud.account.remote.strict_connection_link" "ui.panel.config.cloud.account.remote.strict_connection_link"
@ -288,7 +298,7 @@ export class CloudRemotePref extends LitElement {
: nothing} : nothing}
<hr /> <hr />
<ha-settings-row> <ha-settings-row wrap-heading>
<span slot="heading" <span slot="heading"
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.cloud.account.remote.external_activation" "ui.panel.config.cloud.account.remote.external_activation"
@ -305,7 +315,7 @@ export class CloudRemotePref extends LitElement {
></ha-switch> ></ha-switch>
</ha-settings-row> </ha-settings-row>
<hr /> <hr />
<ha-settings-row> <ha-settings-row .narrow=${this.narrow}>
<span slot="heading" <span slot="heading"
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.cloud.account.remote.certificate_info" "ui.panel.config.cloud.account.remote.certificate_info"
@ -494,6 +504,7 @@ export class CloudRemotePref extends LitElement {
} }
ha-settings-row { ha-settings-row {
padding: 0; padding: 0;
border-top: none !important;
} }
ha-expansion-panel { ha-expansion-panel {
--expansion-panel-content-padding: 0 16px; --expansion-panel-content-padding: 0 16px;
@ -543,6 +554,7 @@ export class CloudRemotePref extends LitElement {
.strict-connection-container .primary { .strict-connection-container .primary {
font-size: 14px; font-size: 14px;
margin-top: 12px; margin-top: 12px;
margin-bottom: 4px;
} }
.strict-connection-container .secondary { .strict-connection-container .secondary {
color: var(--secondary-text-color); color: var(--secondary-text-color);

1
src/panels/config/cloud/account/cloud-tts-pref.ts
View File

@ -188,6 +188,7 @@ export class CloudTTSPref extends LitElement {
} }
.row > * { .row > * {
flex: 1; flex: 1;
width: 0;
} }
.row > *:first-child { .row > *:first-child {
margin-right: 8px; margin-right: 8px;