From 017e38d5124b89ee394d11accaebb3f0718c9eea Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Fri, 8 Apr 2016 21:10:32 -0700
Subject: [PATCH] Fix layout dev tools for Safari

---
 src/layouts/partial-dev-call-service.html | 42 +++++++++++++----------
 src/layouts/partial-dev-call-service.js   |  2 +-
 src/layouts/partial-dev-fire-event.html   | 29 +++++++++-------
 src/layouts/partial-dev-fire-event.js     |  2 +-
 src/layouts/partial-dev-set-state.html    | 32 ++++++++++-------
 src/layouts/partial-dev-set-state.js      |  3 +-
 src/layouts/partial-dev-template.html     | 12 ++++---
 src/layouts/partial-dev-template.js       |  2 +-
 8 files changed, 71 insertions(+), 53 deletions(-)

diff --git a/src/layouts/partial-dev-call-service.html b/src/layouts/partial-dev-call-service.html
index 455192d950..dcd2e6dadd 100644
--- a/src/layouts/partial-dev-call-service.html
+++ b/src/layouts/partial-dev-call-service.html
@@ -11,10 +11,11 @@
 <dom-module id="partial-dev-call-service">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
-    .form {
+    .content {
+      @apply(--paper-font-body1);
+      margin-top: 64px;
       padding: 24px;
       background-color: white;
-      margin-top: 64px;
       -ms-user-select: initial;
       -webkit-user-select: initial;
       -moz-user-select: initial;
@@ -28,30 +29,33 @@
       margin-top: 24px;
       white-space: pre-wrap;
     }
+
+    .header {
+      @apply(--paper-font-title);
+    }
   </style>
   <template>
     <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
       <span header-title>Call Service</span>
 
-      <div class='form fit'>
-        <p>
-          Call a service from a component.
-        </p>
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='flex'>
+          <p>
+            Call a service from a component.
+          </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
-          <div class='layout vertical flex'>
-            <div class='ha-form'>
-              <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
-              <paper-input label="Service" value='{{service}}'></paper-input>
-              <paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
-              <paper-button on-tap='callService' raised>Call Service</paper-button>
-            </div>
-            <div class='description'>[[description]]</div>
-          </div>
-          <div>
-            <h4>Available services:</h4>
-            <services-list on-service-selected='serviceSelected'></services-list>
+          <div class='ha-form'>
+            <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
+            <paper-input label="Service" value='{{service}}'></paper-input>
+            <paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
+            <paper-button on-tap='callService' raised>Call Service</paper-button>
           </div>
+          <div class='description'>[[description]]</div>
+        </div>
+
+        <div>
+          <div class='header'>Available services</div>
+          <services-list on-service-selected='serviceSelected'></services-list>
         </div>
       </div>
     </partial-base>
diff --git a/src/layouts/partial-dev-call-service.js b/src/layouts/partial-dev-call-service.js
index 8f51925867..0c0c3c2cdc 100644
--- a/src/layouts/partial-dev-call-service.js
+++ b/src/layouts/partial-dev-call-service.js
@@ -75,6 +75,6 @@ export default new Polymer({
   },
 
   computeFormClasses(narrow) {
-    return `layout ${narrow ? 'vertical' : 'horizontal'}`;
+    return `content fit ${narrow ? '' : 'layout horizontal'}`;
   },
 });
diff --git a/src/layouts/partial-dev-fire-event.html b/src/layouts/partial-dev-fire-event.html
index 2acf4e7eee..b96c552f8d 100644
--- a/src/layouts/partial-dev-fire-event.html
+++ b/src/layouts/partial-dev-fire-event.html
@@ -11,10 +11,11 @@
 <dom-module id="partial-dev-fire-event">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
-    .form {
+    .content {
+      @apply(--paper-font-body1);
+      margin-top: 64px;
       padding: 24px;
       background-color: white;
-      margin-top: 64px;
       -ms-user-select: initial;
       -webkit-user-select: initial;
       -moz-user-select: initial;
@@ -23,28 +24,32 @@
     .ha-form {
       margin-right: 16px;
     }
+
+    .header {
+      @apply(--paper-font-title);
+    }
   </style>
 
   <template>
     <partial-base narrow="{{narrow}}" show-menu='[[showMenu]]'>
       <span header-title>Fire Event</span>
 
-      <div class='form fit'>
-        <p>
-          Fire an event on the event bus.
-        </p>
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='flex'>
+          <p>
+            Fire an event on the event bus.
+          </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
-          <div class='ha-form flex'>
+          <div class='ha-form'>
             <paper-input label="Event Type" autofocus required value='{{eventType}}'></paper-input>
             <paper-textarea label="Event Data (JSON, optional)" value='{{eventData}}'></paper-textarea>
             <paper-button on-tap='fireEvent' raised>Fire Event</paper-button>
           </div>
+        </div>
 
-          <div>
-            <h4>Available events:</h4>
-            <events-list on-event-selected='eventSelected'></event-list>
-          </div>
+        <div>
+          <div class='header'>Available Events</div>
+          <events-list on-event-selected='eventSelected'></event-list>
         </div>
       </div>
     </partial-base>
diff --git a/src/layouts/partial-dev-fire-event.js b/src/layouts/partial-dev-fire-event.js
index 1241f2de4e..d9898088fd 100644
--- a/src/layouts/partial-dev-fire-event.js
+++ b/src/layouts/partial-dev-fire-event.js
@@ -52,6 +52,6 @@ export default new Polymer({
   },
 
   computeFormClasses(narrow) {
-    return `layout ${narrow ? 'vertical' : 'horizontal'}`;
+    return `content fit ${narrow ? '' : 'layout horizontal'}`;
   },
 });
diff --git a/src/layouts/partial-dev-set-state.html b/src/layouts/partial-dev-set-state.html
index cb6df91276..2bc24eb705 100644
--- a/src/layouts/partial-dev-set-state.html
+++ b/src/layouts/partial-dev-set-state.html
@@ -6,15 +6,17 @@
 
 <link rel="import" href="./partial-base.html">
 
+<link rel="import" href="../components/ha-dev-responsive-content.html">
 <link rel="import" href="../components/entity-list.html">
 
 <dom-module id="partial-dev-set-state">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
-    .form {
+    .content {
+      @apply(--paper-font-body1);
+      margin-top: 64px;
       padding: 24px;
       background-color: white;
-      margin-top: 64px;
       -ms-user-select: initial;
       -webkit-user-select: initial;
       -moz-user-select: initial;
@@ -23,30 +25,34 @@
     .ha-form {
       margin-right: 16px;
     }
+
+    .header {
+      @apply(--paper-font-title);
+    }
   </style>
 
   <template>
     <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
       <span header-title>Set State</span>
 
-      <div class='form fit'>
-        <div>
-          Set the representation of a device within Home Assistant.<br />
-          This will not communicate with the actual device.
-        </div>
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='flex'>
+          <p>
+            Set the representation of a device within Home Assistant.<br />
+            This will not communicate with the actual device.
+          </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
-          <div class='ha-form flex'>
+          <div class='ha-form'>
             <paper-input label="Entity ID" autofocus required value='{{entityId}}'></paper-input>
             <paper-input label="State" required value='{{state}}'></paper-input>
             <paper-textarea label="State attributes (JSON, optional)" value='{{stateAttributes}}'></paper-textarea>
             <paper-button on-tap='handleSetState' raised>Set State</paper-button>
           </div>
+        </div>
 
-          <div class='sidebar'>
-            <h4>Current entities:</h4>
-            <entity-list on-entity-selected='entitySelected'></entity-list>
-          </div>
+        <div>
+          <div class='header'>Current entities</div>
+          <entity-list on-entity-selected='entitySelected'></entity-list>
         </div>
       </div>
     </partial-base>
diff --git a/src/layouts/partial-dev-set-state.js b/src/layouts/partial-dev-set-state.js
index dbdbe03ed9..404cf46c6b 100644
--- a/src/layouts/partial-dev-set-state.js
+++ b/src/layouts/partial-dev-set-state.js
@@ -4,6 +4,7 @@ import Polymer from '../polymer';
 
 require('./partial-base');
 require('../components/entity-list');
+require('../components/ha-dev-responsive-content');
 
 const { reactor, entityGetters, entityActions } = hass;
 
@@ -73,6 +74,6 @@ export default new Polymer({
   },
 
   computeFormClasses(narrow) {
-    return `layout ${narrow ? 'vertical' : 'horizontal'}`;
+    return `content fit ${narrow ? '' : 'layout horizontal'}`;
   },
 });
diff --git a/src/layouts/partial-dev-template.html b/src/layouts/partial-dev-template.html
index 2cd4b0ac3c..2a7796f1f8 100644
--- a/src/layouts/partial-dev-template.html
+++ b/src/layouts/partial-dev-template.html
@@ -11,6 +11,7 @@
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .content {
+      @apply(--paper-font-body1);
       margin-top: 64px;
       padding: 16px;
       background-color: white;
@@ -42,6 +43,7 @@
     }
 
     .rendered {
+      @apply(--paper-font-code1)
       clear: both;
       white-space: pre-wrap;
     }
@@ -59,13 +61,13 @@
           <p>
             Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.
           </p>
-            <ul>
-              <li><a href='http://jinja.pocoo.org/docs/dev/templates/' target='_blank'>Jinja2 tempate documentation</a></li>
-              <li><a href='https://home-assistant.io/topics/templating/' target='_blank'>Home Assistant template extensions</a></li>
-            </ul>
-          </p>
+          <ul>
+            <li><a href='http://jinja.pocoo.org/docs/dev/templates/' target='_blank'>Jinja2 tempate documentation</a></li>
+            <li><a href='https://home-assistant.io/topics/templating/' target='_blank'>Home Assistant template extensions</a></li>
+          </ul>
           <paper-textarea label="Template" value='{{template}}'></paper-textarea>
         </div>
+
         <div class='render-pane'>
           <paper-spinner class='render-spinner' active='[[rendering]]'></paper-spinner>
           <pre class$='[[computeRenderedClasses(error)]]'>[[processed]]</pre>
diff --git a/src/layouts/partial-dev-template.js b/src/layouts/partial-dev-template.js
index 9f5a8e4355..6010a835e6 100644
--- a/src/layouts/partial-dev-template.js
+++ b/src/layouts/partial-dev-template.js
@@ -67,7 +67,7 @@ export default new Polymer({
   },
 
   computeFormClasses(narrow) {
-    return `content fit layout ${narrow ? 'vertical' : 'horizontal'}`;
+    return `content fit ${narrow ? '' : 'layout horizontal'}`;
   },
 
   computeRenderedClasses(error) {