tweak demo cards layout (#1479)

* tweak demo cards layout

* Lint

gallery/src/components/demo-card.js

@@ -2,59 +2,65 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import JsYaml from 'js-yaml';
 
-import '../../../src/panels/lovelace/cards/hui-glance-card.js';
-import '../../../src/panels/lovelace/cards/hui-picture-entity-card.js';
-import '../../../src/panels/lovelace/cards/hui-picture-glance-card.js';
-
 import HomeAssistant from '../data/hass.js';
 import demoStates from '../data/demo_dump.js';
+import createCardElement from '../../../src/panels/lovelace/common/create-card-element.js';
 
 class DemoCard extends PolymerElement {
   static get template() {
     return html`
       <style>
-        #root {
-          padding: 8px 8px 32px 8px;
+        .root {
+          display: flex;
         }
         h2 {
           margin: 0;
           color: var(--primary-color);
           margin-bottom: 20px;
         }
+        #card {
+          max-width: 400px;
+        }
+        pre {
+          margin-left: 16px;
+        }
       </style>
-      <div id="root"></div>
+      <h2>[[config.heading]]</h2>
+      <div class='root'>
+        <div id="card"></div>
+        <template is='dom-if' if='[[showConfig]]'>
+          <pre>[[_trim(config.config)]]</pre>
+        </template>
+      </div>
     `;
   }
 
   static get properties() {
     return {
-      type: String,
       config: {
         type: Object,
         observer: '_configChanged'
-      }
+      },
+      showConfig: Boolean,
     };
   }
 
   _configChanged(config) {
-    const root = this.$.root;
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
+    const card = this.$.card;
+    while (card.lastChild) {
+      card.removeChild(card.lastChild);
     }
 
     const hass = new HomeAssistant();
     hass.states = demoStates;
 
-    const heading = document.createElement('h2');
-    heading.innerText = config.heading;
-    root.appendChild(heading);
-    const el = document.createElement(this.type);
-    el.setConfig(JsYaml.safeLoad(config.config)[0]);
+    const el = createCardElement(JsYaml.safeLoad(config.config)[0]);
     el.hass = hass;
-    root.appendChild(el);
-    const yaml = document.createElement('pre');
-    yaml.innerText = config.config.trim();
-    root.appendChild(yaml);
+    card.appendChild(el);
+  }
+
+  _trim(config) {
+    return config.trim();
   }
 }
 

gallery/src/components/demo-cards.js

@@ -1,5 +1,7 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '@polymer/app-layout/app-toolbar/app-toolbar.js';
+import '@polymer/paper-toggle-button/paper-toggle-button.js';
 
 import './demo-card.js';
 
@@ -7,41 +9,52 @@ class DemoCards extends PolymerElement {
   static get template() {
     return html`
       <style>
-        #root {
+        .cards {
           display: flex;
           flex-wrap: wrap;
+          justify-content: center;
         }
-        #root > * {
-          flex-basis: 600px;
+        demo-card {
+          display: block;
+          margin: 16px 16px 32px;
+        }
+        app-toolbar {
+          background-color: var(--light-primary-color);
+        }
+        .filters {
+          margin-left: 60px;
         }
       </style>
-      <div id="root"></div>
+      <app-toolbar>
+        <div class='filters'>
+          <paper-toggle-button
+            checked='{{showConfig}}'
+          >Show config</paper-toggle-button>
+        </div>
+      </app-toolbar>
+      <div class='cards'>
+        <template is='dom-repeat' items='[[configs]]'>
+          <demo-card
+            config='[[item]]'
+            type='[[type]]'
+            show-config='[[showConfig]]'
+          ></demo-card>
+        </template>
+      </div>
     `;
   }
 
   static get properties() {
     return {
-      type: String,
       configs: {
         type: Object,
-        observer: '_configsChanged'
+      },
+      showConfig: {
+        type: Boolean,
+        value: false,
       }
     };
   }
-
-  _configsChanged(configs) {
-    const root = this.$.root;
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
-
-    configs.forEach((config) => {
-      const el = document.createElement('demo-card');
-      el.config = config;
-      el.type = this.type;
-      root.appendChild(el);
-    });
-  }
 }
 
 customElements.define('demo-cards', DemoCards);

gallery/src/demos/demo-hui-glance-card.js

@@ -130,7 +130,7 @@ const CONFIGS = [
 class DemoPicEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards type="hui-glance-card" configs="[[_configs]]"></demo-cards>
+      <demo-cards configs="[[_configs]]"></demo-cards>
     `;
   }