Cleanup embed UI

static/css/map.css

@@ -8,6 +8,24 @@ html, body {
     font-family: sans-serif;
     font-size: 14px;
 }
+input,
+textarea,
+select,
+button {
+    max-width: 100%;
+}
+fieldset {
+    margin: 0;
+    border: none;
+    padding: .25em 1em;
+}
+legend {
+    padding: 0;
+    margin-left: -1em;
+}
+fieldset legend ~ label {
+    font-size: .9em;
+}
 #map {
     height: 100%;
     width: 100%;
@@ -136,15 +154,15 @@ html, body {
 }
 .modal {
     display: none;
-    background-color: #444;
-    color: #eee;
+    background-color: #fff;
+    color: #333;
     border-radius: 1em;
     box-sizing: border-box;
     border: 2px solid #888;
     position: absolute;
     width: 80%;
     left: 10%;
-    top: 20%;
+    top: 7.5%;
     padding: 1em;
     max-height: 80%;
     overflow: auto;
@@ -154,15 +172,30 @@ html, body {
     float: right;
     cursor: pointer;
 }
+.modal hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+}
 .modal h1,
 .modal h2 {
     text-align: center;
 }
+.modal .close + h1,
+.modal .close + h2 {
+    margin-top: .5em;
+}
+.modal h3 {
+    margin-bottom: .5em;
+}
 .modal a,
 .modal a:hover,
 .modal a:visited,
 .modal a:active {
-    color: #fff;
+    color: #000;
     font-weight: bold;
     text-decoration: none;
 }
@@ -170,6 +203,13 @@ html, body {
 .modal h2 a {
     text-decoration: underline;
 }
+#embed-form input {
+    width: 5em;
+}
+#embed-form label span {
+    display: inline-block;
+    width: 8em;
+}
 
 @media all and (max-width: 600px) {
     .modal {

static/js/embed.js

@@ -2,7 +2,7 @@
 
 var updateCode = function() {
     var code = $("#embed-preview").html();
-    $("#embed-code").html(code);
+    $("#embed-code").html(code.trim());
 }
 
 $("#embed-height").change(function() {

templates/modal-embed.html

 <h2>Embed This Map</h2>
 <p>
-    Use PyBusMap in your own website or display!
+    This map can be used in websites, displays, or digital signage solutions.
 </p>
-<p>
-    Tweak the options to your liking, then copy the code.
-</p>
-<form id="form">
-    <label for="embed-height">Height</label>
-    <input id="embed-height" type="number" min=50 step=50 value=250>
-    <br>
-    <label for="embed-width">Width</label>
-    <input id="embed-width" type="number" min=50 step=50 value=400>
-    <br>
-    <label for="embed-mode">Mode</label>
-    <select id="embed-mode">
-        <option value="map">Map</option>
-        <option value="predictions">Predictions</option>
-        <option value="split">Combined</option>
-    </select>
-</form>
+<h3>Embed Code</h3>
+<textarea id="embed-code" cols=100 rows=3  readonly=true></textarea>
+<h3>Preview</h3>
 <div id="embed-preview">
 <iframe src="{{ url_for('map_embed', _external=True, _scheme='') }}" width="400px" height="250px" frameborder=0></iframe>
 </div>
-<textarea id="embed-code" cols=100 rows=5  readonly=true></textarea>
+<h3>Options</h3>
+<form id="embed-form">
+    <p>
+        <label for="embed-mode">
+            <span>Mode:</span>
+            <select id="embed-mode">
+                <option value="map">Map</option>
+                <option value="predictions">Predictions</option>
+                <option value="split">Combined</option>
+            </select>
+        </label>
+    </p>
+    <p>
+        <fieldset>
+            <legend>Size</legend>
+            <label for="embed-width">
+                <span>Width:</span>
+                <input id="embed-width" type="number" min=50 step=50 value=400> px
+            </label>
+            <br>
+            <label for="embed-height">
+                <span>Height:</span>
+                <input id="embed-height" type="number" min=50 step=50 value=250> px
+            </label>
+        </fieldset>
+    </p>
+    <p>
+        <label for="embed-responsive">
+            <span>Responsive:</span>
+            <input id="embed-responsive" type="checkbox" checked>
+            <small>Map will resize automatically to fit a smaller window or device.</small>
+        </label>
+    </p>
+</form>
+<hr>
 <p class="legalese">
     Data not guaranteed to be correct.
     Refer to your transit agency for official schedules and/or predictions.
 </p>
+<p class="legalese">
+    No guarantees are made about availability, performance, or suitability of this service for any purpose.
+</p>
 <script src="static/js/embed.js"></script>