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

Make dialogs full width on mobile, and modal (#4642)

Browse Source 
* Make dialogs full width on mobile, and modal

* Fix dialog to bottom screen mobile
This commit is contained in:
Bram Kragten 2020-01-29 17:59:37 +01:00 committed by GitHub
parent adec2fc2df
commit 7021fd5809
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ha-dialog.ts
View File

@ -16,6 +16,9 @@ export class HaDialog extends MwcDialog {
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);
}
.mdc-dialog__container {
align-items: var(--vertial-align-dialog, center);
}
`,
];
}

32
src/panels/config/person/dialog-person-detail.ts
View File

@ -55,13 +55,26 @@ class DialogPersonDetail extends LitElement {
return html``;
}
const nameInvalid = this._name.trim() === "";
const title = html`
${this._params.entry
? this._params.entry.name
: this.hass!.localize("ui.panel.config.person.detail.new_person")}
<paper-icon-button
aria-label=${this.hass.localize(
"ui.panel.config.integrations.config_flow.dismiss"
)}
icon="hass:close"
dialogAction="close"
style="position: absolute; right: 16px; top: 12px;"
></paper-icon-button>
`;
return html`
<ha-dialog
open
@closing="${this._close}"
.title=${this._params.entry
? this._params.entry.name
: this.hass!.localize("ui.panel.config.person.detail.new_person")}
scrimClickAction=""
escapeKeyAction=""
.title=${title}
>
<div>
${this._error
@ -225,11 +238,20 @@ class DialogPersonDetail extends LitElement {
return [
css`
ha-dialog {
min-width: 400px;
max-width: 600px;
--mdc-dialog-min-width: 400px;
--mdc-dialog-max-width: 600px;
--mdc-dialog-title-ink-color: var(--primary-text-color);
--justify-action-buttons: space-between;
}
/* make dialog fullscreen on small screens */
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-height: 100vh;
--mdc-dialog-shape-radius: 0px;
--vertial-align-dialog: flex-end;
}
}
.form {
padding-bottom: 24px;
}

29
src/panels/config/zone/dialog-zone-detail.ts
View File

@ -62,13 +62,26 @@ class DialogZoneDetail extends LitElement {
if (!this._params) {
return html``;
}
const title = html`
${this._params.entry
? this._params.entry.name
: this.hass!.localize("ui.panel.config.zone.detail.new_zone")}
<paper-icon-button
aria-label=${this.hass.localize(
"ui.panel.config.integrations.config_flow.dismiss"
)}
icon="hass:close"
dialogAction="close"
style="position: absolute; right: 16px; top: 12px;"
></paper-icon-button>
`;
return html`
<ha-dialog
open
@closing="${this._close}"
.title=${this._params.entry
? this._params.entry.name
: this.hass!.localize("ui.panel.config.zone.detail.new_zone")}
scrimClickAction=""
escapeKeyAction=""
.title=${title}
>
<div>
${this._error
@ -252,6 +265,16 @@ class DialogZoneDetail extends LitElement {
--mdc-dialog-min-width: 600px;
}
}
/* make dialog fullscreen on small screens */
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-height: 100vh;
--mdc-dialog-shape-radius: 0px;
--vertial-align-dialog: flex-end;
}
}
.form {
padding-bottom: 24px;
}