Hassio styling tweaks (#4749)

* Hassio styling tweaks

* Update hassio-style.ts

* Update hassio-pages-with-tabs.ts

hassio/src/addon-store/hassio-addon-repository.ts

@@ -42,25 +42,23 @@ class HassioAddonRepositoryEl extends LitElement {
 
     if (this.filter && addons.length < 1) {
       return html`
-        <div class="card-group">
-          <div class="title">
-            <div class="description">
+        <div class="content">
+          <p class="description">
             No results found in "${repo.name}"
-            </div>
-          </div>
+          </p>
         </div>
       `;
     }
     return html`
-      <div class="card-group">
-        <div class="title">
+      <div class="content">
+        <h1>
           ${repo.name}
-          <div class="description">
+        </h1>
+        <p class="description">
           Maintained by ${repo.maintainer}<br />
           <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
-          </div>
-        </div>
-
+        </p>
+        <div class="card-group">
           ${addons.map(
             (addon) => html`
               <paper-card
@@ -83,6 +81,7 @@ class HassioAddonRepositoryEl extends LitElement {
             `
           )}
         </div>
+      </div>
     `;
   }
 

hassio/src/addon-store/hassio-repositories-editor.ts

@@ -36,13 +36,14 @@ class HassioRepositoriesEditor extends LitElement {
   protected render(): TemplateResult {
     const repos = this._sortedRepos(this.repos);
     return html`
-      <div class="card-group">
-        <div class="title">
+      <div class="content">
+        <h1>
           Repositories
-          <div class="description">
+        </h1>
+        <p class="description">
           Configure which add-on repositories to fetch data from:
-          </div>
-        </div>
+        </p>
+        <div class="card-group">
           ${// Use repeat so that the fade-out from call-service-api-button
           // stays with the correct repo after we add/delete one.
           repeat(
@@ -92,6 +93,7 @@ class HassioRepositoriesEditor extends LitElement {
             </div>
           </paper-card>
         </div>
+      </div>
     `;
   }
 

hassio/src/dashboard/hassio-addons.ts

@@ -23,15 +23,16 @@ class HassioAddons extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="content card-group">
-        <div class="title">Add-ons</div>
+      <div class="content">
+        <h1>Add-ons</h1>
+        <div class="card-group">
           ${!this.addons
             ? html`
                 <paper-card>
                   <div class="card-content">
                     You don't have any add-ons installed yet. Head over to
-                  <a href="#" @click=${this._openStore}>the add-on store</a> to
-                  get started!
+                    <a href="#" @click=${this._openStore}>the add-on store</a>
+                    to get started!
                   </div>
                 </paper-card>
               `
@@ -55,6 +56,7 @@ class HassioAddons extends LitElement {
                   `
                 )}
         </div>
+      </div>
     `;
   }
 

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 {
               <div class="error">Error: ${this._error}</div>
             `
           : ""}
-        <div class="card-group">
-          <div class="title">
+        <h1>
           ${updatesAvailable > 1
             ? "Updates Available 🎉"
             : "Update Available 🎉"}
-          </div>
+        </h1>
+        <div class="card-group">
           ${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;
         }

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,

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 {

hassio/src/snapshots/hassio-snapshots.ts

@@ -79,14 +79,14 @@ class HassioSnapshots extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="content">
-        <div class="card-group">
-          <div class="title">
+        <h1>
           Create snapshot
-            <div class="description">
+        </h1>
+        <p class="description">
           Snapshots allow you to easily backup and restore all data of your
           Hass.io instance.
-            </div>
-          </div>
+        </p>
+        <div class="card-group">
           <paper-card>
             <div class="card-content">
               <paper-input
@@ -173,8 +173,8 @@ class HassioSnapshots extends LitElement {
           </paper-card>
         </div>
 
+        <h1>Available snapshots</h1>
         <div class="card-group">
-          <div class="title">Available snapshots</div>
           ${this._snapshots === undefined
             ? undefined
             : this._snapshots.length === 0

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;
-        }
-        .card-content {
-          height: 200px;
-          color: var(--primary-text-color);
-        }
-        @media screen and (max-width: 830px) {
-          paper-card {
-            margin-top: 8px;
-            margin-left: 0;
+          height: 100%;
           width: 100%;
         }
         .card-content {
-            height: auto;
-          }
+          color: var(--primary-text-color);
+          box-sizing: border-box;
+          height: calc(100% - 47px);
         }
         .info {
           width: 100%;

hassio/src/system/hassio-supervisor-info.ts

@@ -103,20 +103,13 @@ class HassioSupervisorInfo extends LitElement {
       hassioStyle,
       css`
         paper-card {
-          display: inline-block;
-          width: 400px;
-        }
-        .card-content {
-          height: 200px;
-          color: var(--primary-text-color);
-        }
-        @media screen and (max-width: 830px) {
-          paper-card {
+          height: 100%;
           width: 100%;
         }
         .card-content {
-            height: auto;
-          }
+          color: var(--primary-text-color);
+          box-sizing: border-box;
+          height: calc(100% - 47px);
         }
         .info {
           width: 100%;

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;
         }

hassio/src/system/hassio-system.ts

@@ -32,7 +32,8 @@ class HassioSystem extends LitElement {
   public render(): TemplateResult | void {
     return html`
       <div class="content">
-        <div class="title">Information</div>
+        <h1>Information</h1>
+        <div class="side-by-side">
           <hassio-supervisor-info
             .hass=${this.hass}
             .supervisorInfo=${this.supervisorInfo}
@@ -42,7 +43,8 @@ class HassioSystem extends LitElement {
             .hostInfo=${this.hostInfo}
             .hassOsInfo=${this.hassOsInfo}
           ></hassio-host-info>
-        <div class="title">System log</div>
+        </div>
+        <h1>System log</h1>
         <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
       </div>
     `;
@@ -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%;
+        }
       `,
     ];
   }