From 862044ca2378b71976140a2414b559d442e3756a Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 4 Feb 2020 10:54:10 +0100 Subject: [PATCH] Hassio styling tweaks (#4749) * Hassio styling tweaks * Update hassio-style.ts * Update hassio-pages-with-tabs.ts --- .../addon-store/hassio-addon-repository.ts | 67 ++++++----- .../addon-store/hassio-repositories-editor.ts | 108 +++++++++--------- hassio/src/dashboard/hassio-addons.ts | 64 ++++++----- hassio/src/dashboard/hassio-update.ts | 28 ++--- hassio/src/hassio-pages-with-tabs.ts | 2 +- hassio/src/resources/hassio-style.ts | 51 ++++----- hassio/src/snapshots/hassio-snapshots.ts | 16 +-- hassio/src/system/hassio-host-info.ts | 18 +-- hassio/src/system/hassio-supervisor-info.ts | 15 +-- hassio/src/system/hassio-supervisor-log.ts | 3 + hassio/src/system/hassio-system.ts | 34 ++++-- 11 files changed, 199 insertions(+), 207 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 722697ecd2..895b729973 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -42,46 +42,45 @@ class HassioAddonRepositoryEl extends LitElement { if (this.filter && addons.length < 1) { return html` -
-
-
- No results found in "${repo.name}" -
-
+
+

+ No results found in "${repo.name}" +

`; } return html` -
-
+
+

${repo.name} -
- Maintained by ${repo.maintainer}
- ${repo.url} -
+

+

+ Maintained by ${repo.maintainer}
+ ${repo.url} +

+
+ ${addons.map( + (addon) => html` + +
+ +
+ + ` + )}
- - ${addons.map( - (addon) => html` - -
- -
- - ` - )}
`; } diff --git a/hassio/src/addon-store/hassio-repositories-editor.ts b/hassio/src/addon-store/hassio-repositories-editor.ts index 5110a77c45..27241482b4 100644 --- a/hassio/src/addon-store/hassio-repositories-editor.ts +++ b/hassio/src/addon-store/hassio-repositories-editor.ts @@ -36,61 +36,63 @@ class HassioRepositoriesEditor extends LitElement { protected render(): TemplateResult { const repos = this._sortedRepos(this.repos); return html` -
-
+
+

Repositories -
- Configure which add-on repositories to fetch data from: -
-

- ${// Use repeat so that the fade-out from call-service-api-button - // stays with the correct repo after we add/delete one. - repeat( - repos, - (repo) => repo.slug, - (repo) => html` - -
- -
-
- - Remove - -
- - ` - )} + +

+ Configure which add-on repositories to fetch data from: +

+
+ ${// Use repeat so that the fade-out from call-service-api-button + // stays with the correct repo after we add/delete one. + repeat( + repos, + (repo) => repo.slug, + (repo) => html` + +
+ +
+
+ + Remove + +
+ + ` + )} - -
- - -
-
- - Add - -
- + +
+ + +
+
+ + Add + +
+ +
`; } diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 3d21fc9ea4..e0403b4cf2 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -23,37 +23,39 @@ class HassioAddons extends LitElement { protected render(): TemplateResult { return html` -
-
Add-ons
- ${!this.addons - ? html` - -
- You don't have any add-ons installed yet. Head over to - the add-on store to - get started! -
- - ` - : this.addons - .sort((a, b) => (a.name > b.name ? 1 : -1)) - .map( - (addon) => html` - -
- -
- - ` - )} +
+

Add-ons

+
+ ${!this.addons + ? html` + +
+ You don't have any add-ons installed yet. Head over to + the add-on store + to get started! +
+ + ` + : this.addons + .sort((a, b) => (a.name > b.name ? 1 : -1)) + .map( + (addon) => html` + +
+ +
+ + ` + )} +
`; } diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts index e9d699c669..17f37b083f 100644 --- a/hassio/src/dashboard/hassio-update.ts +++ b/hassio/src/dashboard/hassio-update.ts @@ -38,7 +38,12 @@ export class HassioUpdate extends LitElement { this.supervisorInfo, this.hassOsInfo, ].filter((value) => { - return !!value && value.version !== value.last_version; + return ( + !!value && + (value.last_version + ? value.version !== value.last_version + : value.version !== value.version_latest) + ); }).length; if (!updatesAvailable) { @@ -52,12 +57,12 @@ export class HassioUpdate extends LitElement {
Error: ${this._error}
` : ""} +

+ ${updatesAvailable > 1 + ? "Updates Available 🎉" + : "Update Available 🎉"} +

-
- ${updatesAvailable > 1 - ? "Updates Available 🎉" - : "Update Available 🎉"} -
${this._renderUpdateCard( "Home Assistant", this.hassInfo.version, @@ -149,13 +154,6 @@ export class HassioUpdate extends LitElement { haStyle, hassioStyle, css` - :host { - width: 33%; - } - paper-card { - display: inline-block; - margin-bottom: 32px; - } .icon { --iron-icon-height: 48px; --iron-icon-width: 48px; @@ -170,6 +168,10 @@ export class HassioUpdate extends LitElement { .warning { color: var(--secondary-text-color); } + .card-content { + height: calc(100% - 47px); + box-sizing: border-box; + } .card-actions { text-align: right; } diff --git a/hassio/src/hassio-pages-with-tabs.ts b/hassio/src/hassio-pages-with-tabs.ts index 9bb5eca5cd..a34eb11666 100644 --- a/hassio/src/hassio-pages-with-tabs.ts +++ b/hassio/src/hassio-pages-with-tabs.ts @@ -123,7 +123,7 @@ class HassioPagesWithTabs extends LitElement { } paper-tabs { margin-left: 12px; - --paper-tabs-selection-bar-color: #fff; + --paper-tabs-selection-bar-color: var(--text-primary-color, #fff); text-transform: uppercase; } app-header, diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts index 6eb6c2340a..fa33f100b3 100644 --- a/hassio/src/resources/hassio-style.ts +++ b/hassio/src/resources/hassio-style.ts @@ -4,45 +4,36 @@ const documentContainer = document.createElement("template"); documentContainer.setAttribute("style", "display: none;"); export const hassioStyle = css` - .card-group { - margin-top: 24px; + .content { + margin: 8px; } - .card-group .title { + h1 { color: var(--primary-text-color); font-size: 2em; - padding-left: 8px; margin-bottom: 8px; + font-family: var(--paper-font-headline_-_font-family); + -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing); + font-size: var(--paper-font-headline_-_font-size); + font-weight: var(--paper-font-headline_-_font-weight); + letter-spacing: var(--paper-font-headline_-_letter-spacing); + line-height: var(--paper-font-headline_-_line-height); + padding-left: 16px; } - .card-group .description { - font-size: 0.5em; - font-weight: 500; + .description { margin-top: 4px; + padding-left: 16px; } - .card-group paper-card { - --card-group-columns: 4; - width: calc( - (100% - 12px * var(--card-group-columns)) / var(--card-group-columns) - ); - margin: 4px; - vertical-align: top; + .card-group { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: 8px; } - @media screen and (max-width: 1200px) and (min-width: 901px) { - .card-group paper-card { - --card-group-columns: 3; - } + .card-group > * { + max-width: 450px; } - @media screen and (max-width: 900px) and (min-width: 601px) { - .card-group paper-card { - --card-group-columns: 2; - } - } - @media screen and (max-width: 600px) and (min-width: 0) { - .card-group paper-card { - width: 100%; - margin: 4px 0; - } - .content { - padding: 0; + @media screen and (max-width: 800px) { + .card-group > * { + max-width: 100%; } } ha-call-api-button { diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts index db8d047cd7..90116dbb5e 100644 --- a/hassio/src/snapshots/hassio-snapshots.ts +++ b/hassio/src/snapshots/hassio-snapshots.ts @@ -79,14 +79,14 @@ class HassioSnapshots extends LitElement { protected render(): TemplateResult { return html`
+

+ Create snapshot +

+

+ Snapshots allow you to easily backup and restore all data of your + Hass.io instance. +

-
- Create snapshot -
- Snapshots allow you to easily backup and restore all data of your - Hass.io instance. -
-
+

Available snapshots

-
Available snapshots
${this._snapshots === undefined ? undefined : this._snapshots.length === 0 diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index b02dbf1b92..bdaaecbcfa 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -126,23 +126,13 @@ class HassioHostInfo extends LitElement { hassioStyle, css` paper-card { - display: inline-block; - width: 400px; - margin-left: 8px; + height: 100%; + width: 100%; } .card-content { - height: 200px; color: var(--primary-text-color); - } - @media screen and (max-width: 830px) { - paper-card { - margin-top: 8px; - margin-left: 0; - width: 100%; - } - .card-content { - height: auto; - } + box-sizing: border-box; + height: calc(100% - 47px); } .info { width: 100%; diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts index 91854c0952..2ff33b4bae 100644 --- a/hassio/src/system/hassio-supervisor-info.ts +++ b/hassio/src/system/hassio-supervisor-info.ts @@ -103,20 +103,13 @@ class HassioSupervisorInfo extends LitElement { hassioStyle, css` paper-card { - display: inline-block; - width: 400px; + height: 100%; + width: 100%; } .card-content { - height: 200px; color: var(--primary-text-color); - } - @media screen and (max-width: 830px) { - paper-card { - width: 100%; - } - .card-content { - height: auto; - } + box-sizing: border-box; + height: calc(100% - 47px); } .info { width: 100%; diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 9524aac54c..a111969bb7 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -50,6 +50,9 @@ class HassioSupervisorLog extends LitElement { hassioStyle, ANSI_HTML_STYLE, css` + paper-card { + width: 100%; + } pre { white-space: pre-wrap; } diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts index 5fbff5de08..fb9c4c192f 100644 --- a/hassio/src/system/hassio-system.ts +++ b/hassio/src/system/hassio-system.ts @@ -32,17 +32,19 @@ class HassioSystem extends LitElement { public render(): TemplateResult | void { return html`
-
Information
- - -
System log
+

Information

+
+ + +
+

System log

`; @@ -54,7 +56,7 @@ class HassioSystem extends LitElement { hassioStyle, css` .content { - margin: 4px; + margin: 8px; color: var(--primary-text-color); } .title { @@ -64,6 +66,14 @@ class HassioSystem extends LitElement { padding-left: 8px; margin-bottom: 8px; } + .side-by-side { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-gap: 8px; + } + hassio-supervisor-log { + width: 100%; + } `, ]; }