Fix static assets (#1484)

gallery/src/components/demo-card.js

@@ -21,7 +21,9 @@ class DemoCard extends PolymerElement {
           width: 400px;
         }
         pre {
-          margin-left: 16px;
+          width: 400px;
+          margin: 16px;
+          overflow: auto;
         }
         @media only screen and (max-width: 800px) {
           .root {

gallery/src/entrypoint.js

@@ -4,16 +4,9 @@ import '@polymer/polymer/lib/elements/dom-repeat.js';
 
 import '../../src/resources/hass-icons.js';
 import '../../src/resources/ha-style.js';
-// We don't have static mapped yet
+import '../../src/resources/roboto.js';
-// import '../../src/resources/roboto.js';
 import '../../src/components/ha-iconset-svg.js';
 
 import './ha-gallery.js';
 
-// Temp roboto fix
-const link = document.createElement('link');
-link.href = 'https://fonts.googleapis.com/css?family=Roboto';
-link.rel = 'stylesheet';
-document.head.appendChild(link);
-
 document.body.appendChild(document.createElement('ha-gallery'));

gallery/src/ha-gallery.js

@@ -1,7 +1,10 @@
 import '@polymer/app-layout/app-header-layout/app-header-layout.js';
 import '@polymer/app-layout/app-header/app-header.js';
 import '@polymer/app-layout/app-toolbar/app-toolbar.js';
+import '@polymer/iron-icon/iron-icon.js';
 import '@polymer/paper-card/paper-card.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-item/paper-item-body.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -32,17 +35,19 @@ class HaGallery extends PolymerElement {
         margin: 20px auto;
       }
 
-      p:first-child {
+      .intro {
-        margin-top: 0;
+        margin: -1em 0;
       }
 
-      a {
+      p a {
         color: var(--primary-color);
       }
 
-      ul {
+      a paper-item {
-        padding-left: 24px;
+        color: var(--primary-text-color);
+        text-decoration: none;
       }
+
       </style>
 
       <app-header-layout>
@@ -61,7 +66,7 @@ class HaGallery extends PolymerElement {
           <div id='demo'></div>
           <template is='dom-if' if='[[!_demo]]'>
             <paper-card heading="Lovelace card demos">
-              <div class='card-content'>
+              <div class='card-content intro'>
                 <p>
                   Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
                 </p>
@@ -73,14 +78,15 @@ class HaGallery extends PolymerElement {
                 <p>
                   Check <a href='https://www.home-assistant.io/lovelace'>the official website</a> for instructions on how to get started with Lovelace.</a>.
                 </p>
-
-
-                <ul>
-                  <template is='dom-repeat' items='[[_demos]]'>
-                    <li><a href='#[[item]]'>{{ item }}</a></li>
-                  </template>
-                </ul>
               </div>
+              <template is='dom-repeat' items='[[_demos]]'>
+                <a href='#[[item]]'>
+                  <paper-item>
+                    <paper-item-body>{{ item }}</paper-item-body>
+                    <iron-icon icon="hass:chevron-right"></iron-icon>
+                  </paper-item>
+                </a>
+              </template>
             </paper-card>
           </template>
         </div>

gallery/webpack.config.js

@@ -47,7 +47,12 @@ module.exports = {
     ]
   },
   plugins: [
-    new CopyWebpackPlugin(['public']),
+    new CopyWebpackPlugin([
+      'public',
+      { from: '../node_modules/leaflet/dist/leaflet.css', to: `static/images/leaflet/` },
+      { from: '../node_modules/@polymer/font-roboto-local/fonts', to: 'static/fonts' },
+      { from: '../node_modules/leaflet/dist/images', to: `static/images/leaflet/` },
+    ]),
     isProd && new UglifyJsPlugin({
       extractComments: true,
       sourceMap: true,