comments

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -10,6 +10,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
@@ -37,7 +38,7 @@ class HaConfigDashboard extends LitElement {
 
   protected render(): TemplateResult {
     const content = html`
-      <ha-config-section .narrow=${this.narrow}>
+      <ha-config-section .isWide=${this.isWide}>
         <div slot="header">
           ${this.hass.localize("ui.panel.config.header")}
         </div>
@@ -46,36 +47,38 @@ class HaConfigDashboard extends LitElement {
           ${this.hass.localize("ui.panel.config.introduction")}
         </div>
 
-        ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
+        <div class="content ${classMap({ narrow: this.narrow })}">
-          ? html`
+          ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
+            ? html`
+                <ha-card class="cloud">
+                  <ha-config-navigation
+                    .hass=${this.hass}
+                    .showAdvanced=${this.showAdvanced}
+                    .pages=${[
+                      {
+                        component: "cloud",
+                        path: "/config/cloud",
+                        translationKey: "ui.panel.config.cloud.caption",
+                        info: this.cloudStatus,
+                        iconPath: mdiCloudLock,
+                      },
+                    ]}
+                  ></ha-config-navigation>
+                </ha-card>
+              `
+            : ""}
+          ${Object.values(configSections).map(
+            (section) => html`
               <ha-card>
                 <ha-config-navigation
                   .hass=${this.hass}
                   .showAdvanced=${this.showAdvanced}
-                  .pages=${[
+                  .pages=${section}
-                    {
-                      component: "cloud",
-                      path: "/config/cloud",
-                      translationKey: "ui.panel.config.cloud.caption",
-                      info: this.cloudStatus,
-                      iconPath: mdiCloudLock,
-                    },
-                  ]}
                 ></ha-config-navigation>
               </ha-card>
             `
-          : ""}
+          )}
-        ${Object.values(configSections).map(
+        </div>
-          (section) => html`
-            <ha-card>
-              <ha-config-navigation
-                .hass=${this.hass}
-                .showAdvanced=${this.showAdvanced}
-                .pages=${section}
-              ></ha-config-navigation>
-            </ha-card>
-          `
-        )}
         ${isComponentLoaded(this.hass, "zha")
           ? html`
               <div class="promo-advanced">
@@ -174,6 +177,27 @@ class HaConfigDashboard extends LitElement {
         .promo-advanced a {
           color: var(--secondary-text-color);
         }
+
+        .content {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          margin: 0;
+        }
+
+        .content > * {
+          width: calc(50% - 12px);
+          margin: 12px 0;
+          align-self: flex-start;
+        }
+
+        .cloud {
+          width: 100%;
+        }
+
+        .narrow.content > * {
+          width: 100%;
+        }
       `,
     ];
   }

src/panels/config/ha-panel-config.ts

@@ -1,10 +1,30 @@
+import {
+  mdiAccount,
+  mdiBadgeAccountHorizontal,
+  mdiDevices,
+  mdiHomeAssistant,
+  mdiInformation,
+  mdiMapMarkerRadius,
+  mdiMathLog,
+  mdiNfcVariant,
+  mdiPalette,
+  mdiPencil,
+  mdiPuzzle,
+  mdiRobot,
+  mdiScriptText,
+  mdiServer,
+  mdiShape,
+  mdiSofa,
+  mdiTools,
+  mdiViewDashboard,
+} from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { PolymerElement } from "@polymer/polymer";
 import {
   customElement,
-  property,
   internalProperty,
+  property,
   PropertyValues,
 } from "lit-element";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
@@ -14,26 +34,6 @@ import "../../layouts/hass-loading-screen";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../types";
-import {
-  mdiPuzzle,
-  mdiDevices,
-  mdiShape,
-  mdiSofa,
-  mdiRobot,
-  mdiPalette,
-  mdiScriptText,
-  mdiTools,
-  mdiViewDashboard,
-  mdiAccount,
-  mdiMapMarkerRadius,
-  mdiBadgeAccountHorizontal,
-  mdiHomeAssistant,
-  mdiServer,
-  mdiInformation,
-  mdiMathLog,
-  mdiPencil,
-  mdiNfcVariant,
-} from "@mdi/js";
 
 declare global {
   // for fire event
@@ -167,8 +167,6 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconPath: mdiInformation,
       core: true,
     },
-  ],
-  advanced: [
     {
       component: "customize",
       path: "/config/customize",

src/panels/config/info/ha-config-info.ts

@@ -6,12 +6,12 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import { configSections } from "../ha-panel-config";
 import "./integrations-card";
 import "./system-health-card";
-import { configSections } from "../ha-panel-config";
-import "../../../layouts/hass-tabs-subpage";
 
 const JS_TYPE = __BUILD__;
 const JS_VERSION = __VERSION__;
@@ -93,10 +93,10 @@ class HaConfigInfo extends LitElement {
               >Python 3</a
             >,
             <a
-              href="https://www.polymer-project.org"
+              href="https://lit-element.polymer-project.org/"
               target="_blank"
               rel="noreferrer"
-              >Polymer</a
+              >LitElement</a
             >, ${this.hass.localize("ui.panel.config.info.icons_by")}
             <a
               href="https://www.google.com/design/icons/"

src/panels/config/logs/system-log-card.ts

@@ -1,20 +1,20 @@
-import "../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../components/ha-circular-progress";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-card";
+import "../../../components/ha-circular-progress";
+import "../../../components/ha-icon-button";
 import { domainToName } from "../../../data/integration";
 import {
   fetchSystemLog,
@@ -164,6 +164,10 @@ export class SystemLogCard extends LitElement {
         align-items: center;
         justify-content: center;
       }
+
+      .card-actions {
+        display: flex;
+      }
     `;
   }
 }