Aligned gallery more-info with hui-cards (#7931)

gallery/src/components/demo-more-info.js

@@ -9,30 +9,29 @@ class DemoMoreInfo extends PolymerElement {
   static get template() {
     return html`
       <style>
-        :host {
+        .root {
           display: flex;
-          align-items: start;
         }
-
+        #card {
+          max-width: 400px;
+          width: 100vw;
+        }
         ha-card {
-          width: 333px;
+          width: 352px;
           padding: 20px 24px;
         }
-
         state-card-content {
           display: block;
           margin-bottom: 16px;
         }
-
         pre {
           width: 400px;
           margin: 0 16px;
           overflow: auto;
           color: var(--primary-text-color);
         }
-
         @media only screen and (max-width: 800px) {
-          :host {
+          .root {
             flex-direction: column;
           }
           pre {
@@ -40,6 +39,8 @@ class DemoMoreInfo extends PolymerElement {
           }
         }
       </style>
+      <div class="root">
+        <div id="card">
           <ha-card>
             <state-card-content
               state-obj="[[_stateObj]]"
@@ -52,9 +53,11 @@ class DemoMoreInfo extends PolymerElement {
               state-obj="[[_stateObj]]"
             ></more-info-content>
           </ha-card>
+        </div>
         <template is="dom-if" if="[[showConfig]]">
           <pre>[[_jsonEntity(_stateObj)]]</pre>
         </template>
+      </div>
     `;
   }
 

gallery/src/components/demo-more-infos.js

@@ -3,12 +3,18 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
+import "../../../src/components/ha-formfield";
 import "./demo-more-info";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 
 class DemoMoreInfos extends PolymerElement {
   static get template() {
     return html`
       <style>
+        #container {
+          min-height: calc(100vh - 128px);
+          background: var(--primary-background-color);
+        }
         .cards {
           display: flex;
           flex-wrap: wrap;
@@ -23,12 +29,22 @@ class DemoMoreInfos extends PolymerElement {
         .filters {
           margin-left: 60px;
         }
+        ha-formfield {
+          margin-right: 16px;
+        }
       </style>
       <app-toolbar>
         <div class="filters">
-          <ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
+          <ha-formfield label="Show entities">
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            </ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Dark theme">
+            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
+          </ha-formfield>
         </div>
       </app-toolbar>
+      <div id="container">
         <div class="cards">
           <template is="dom-repeat" items="[[entities]]">
             <demo-more-info
@@ -38,6 +54,7 @@ class DemoMoreInfos extends PolymerElement {
             ></demo-more-info>
           </template>
         </div>
+      </div>
     `;
   }
 
@@ -51,6 +68,16 @@ class DemoMoreInfos extends PolymerElement {
       },
     };
   }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
+
+  _darkThemeToggled(ev) {
+    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
+      dark: ev.target.checked,
+    });
+  }
 }
 
 customElements.define("demo-more-infos", DemoMoreInfos);