Limit demo card mobile (#3281)

* Limit demo card on mobile

* Remove unused deps

* Remove tabs from ARS demo

* Set title to Home Assistant

demo/src/custom-cards/ha-demo-card.ts

@@ -6,12 +6,9 @@ import {
   PropertyDeclarations,
 } from "lit-element";
 import { until } from "lit-html/directives/until";
-import "@polymer/paper-icon-button";
 import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import "../../../src/components/ha-card";
-import "../../../src/components/ha-paper-icon-button-next";
-import "../../../src/components/ha-paper-icon-button-prev";
 import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@@ -49,11 +46,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card>
         <div class="picker">
-          <ha-paper-icon-button-prev
-            @click=${this._prevConfig}
-            .disabled=${this._switching}
-          ></ha-paper-icon-button-prev>
-          <div>
+          <div class="label">
             ${this._switching
               ? html`
                   <paper-spinner-lite active></paper-spinner-lite>
@@ -73,16 +66,15 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                   ""
                 )}
           </div>
-          <ha-paper-icon-button-next
-            @click=${this._nextConfig}
-            .disabled=${this._switching}
-          ></ha-paper-icon-button-next>
+          <mwc-button @click=${this._nextConfig} .disabled=${this._switching}>
+            Next demo
+          </mwc-button>
         </div>
-        <div class="content">
+        <div class="content small-hidden">
           Welcome home! You've reached the Home Assistant demo where we showcase
           the best UIs created by our community.
         </div>
-        <div class="actions">
+        <div class="actions small-hidden">
           <a href="https://www.home-assistant.io" target="_blank">
             <mwc-button>Learn more about Home Assistant</mwc-button>
           </a>
@@ -91,14 +83,6 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private _prevConfig() {
-    this._updateConfig(
-      selectedDemoConfigIndex > 0
-        ? selectedDemoConfigIndex - 1
-        : demoConfigs.length - 1
-    );
-  }
-
   private _nextConfig() {
     this._updateConfig(
       selectedDemoConfigIndex < demoConfigs.length - 1
@@ -125,6 +109,10 @@ export class HADemoCard extends LitElement implements LovelaceCard {
           color: var(--primary-color);
         }
 
+        .actions a {
+          text-decoration: none;
+        }
+
         .content {
           padding: 16px;
         }
@@ -136,17 +124,27 @@ export class HADemoCard extends LitElement implements LovelaceCard {
           height: 60px;
         }
 
-        .picker div {
-          text-align: center;
+        .picker mwc-button {
+          margin-right: 8px;
         }
 
-        .picker small {
+        .label {
+          padding-left: 16px;
+        }
+
+        .label small {
           display: block;
         }
 
         .actions {
           padding-left: 8px;
         }
+
+        @media only screen and (max-width: 500px) {
+          .small-hidden {
+            display: none;
+          }
+        }
       `,
     ];
   }

demo/src/html/index.html.template

@@ -87,7 +87,7 @@
       #ha-init-skeleton::before {
         display: block;
         content: "";
-        height: 112px;
+        height: 64px;
         background-color: #03a9f4;
       }
     </style>