Fix layout dev tools for Safari

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'>
+      <div class$='[[computeFormClasses(narrow)]]'>
-        <p>
+        <div class='flex'>
-          Call a service from a component.
+          <p>
-        </p>
+            Call a service from a component.
+          </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
+          <div class='ha-form'>
-          <div class='layout vertical flex'>
+            <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
-            <div class='ha-form'>
+            <paper-input label="Service" value='{{service}}'></paper-input>
-              <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
+            <paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
-              <paper-input label="Service" value='{{service}}'></paper-input>
+            <paper-button on-tap='callService' raised>Call Service</paper-button>
-              <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>
+          <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>

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'}`;
   },
 });

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'>
+      <div class$='[[computeFormClasses(narrow)]]'>
-        <p>
+        <div class='flex'>
-          Fire an event on the event bus.
+          <p>
-        </p>
+            Fire an event on the event bus.
+          </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
+          <div class='ha-form'>
-          <div class='ha-form flex'>
             <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>
+        <div>
-            <h4>Available events:</h4>
+          <div class='header'>Available Events</div>
-            <events-list on-event-selected='eventSelected'></event-list>
+          <events-list on-event-selected='eventSelected'></event-list>
-          </div>
         </div>
       </div>
     </partial-base>

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'}`;
   },
 });

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 class$='[[computeFormClasses(narrow)]]'>
-        <div>
+        <div class='flex'>
-          Set the representation of a device within Home Assistant.<br />
+          <p>
-          This will not communicate with the actual device.
+            Set the representation of a device within Home Assistant.<br />
-        </div>
+            This will not communicate with the actual device.
+          </p>
 
-        <div class$='[[computeFormClasses(narrow)]]'>
+          <div class='ha-form'>
-          <div class='ha-form flex'>
             <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'>
+        <div>
-            <h4>Current entities:</h4>
+          <div class='header'>Current entities</div>
-            <entity-list on-entity-selected='entitySelected'></entity-list>
+          <entity-list on-entity-selected='entitySelected'></entity-list>
-          </div>
         </div>
       </div>
     </partial-base>

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'}`;
   },
 });

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>
+          <ul>
-              <li><a href='http://jinja.pocoo.org/docs/dev/templates/' target='_blank'>Jinja2 tempate documentation</a></li>
+            <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>
+            <li><a href='https://home-assistant.io/topics/templating/' target='_blank'>Home Assistant template extensions</a></li>
-            </ul>
+          </ul>
-          </p>
           <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>

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) {