More embed ui tweaks. Still feature-incomplete.

c4e72d66 · Anton Sarukhanov · 6f1a05be · c4e72d66 · c4e72d66 · c4e72d66
Commit c4e72d66 authored 8 years ago by Anton Sarukhanov
--- a/static/css/map.css
+++ b/static/css/map.css
@@ -203,6 +203,12 @@ fieldset legend ~ label {
 .modal h2 a {
    text-decoration: underline;
 }
+.embed-only {
+    display: none;
+}
+body.embed .embed-only {
+    display: block;
+}
 #embed-form input {
    width: 5em;
 }

--- a/templates/base.html
+++ b/templates/base.html
@@ -7,7 +7,7 @@
    {% block head %}
    {% endblock %}
 </head>
-<body>
+<body class="{% if embed %}embed{% endif %}">
 {% block body %}{% endblock %}
 {% block body_end %}{% endblock %}
 </body>

--- a/templates/map.html
+++ b/templates/map.html
@@ -11,7 +11,7 @@
    <link href="static/css/map.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
-    <div id="map" class="{% if embed %}embed{% endif %}"></div>
+    <div id="map"></div>
    {# TODO: Generate these using JS, not here. #}
    <div id="msg">
        <span id="msg-zoomForVehicles">Zoom in to see vehicles.</span>

--- a/templates/modal-about.html
+++ b/templates/modal-about.html
-<h2>About PyBusMap</h2>
+<h2>About This Map</h2>
 <p>
    This map displays real-time vehicle locations and arrival predictions
    for public transit systems which are tracked by NextBus.
 </p>
+<p class="embed-only" style="text-align: center; font-size: 1.2em;">
+    <a href="{{ url_for('map', _external=True) }}" target="_blank">
+        Click to see the full map</a>
+</p>
 <p>
    Built by <a href="https://ant.sr">Anton Sarukhanov</a>. Open source
    and MIT licensed.

--- a/templates/modal-embed.html
+++ b/templates/modal-embed.html
 <h2>Embed This Map</h2>
 <p>
-    This map can be used in websites, displays, or digital signage solutions.
+    This map can be used in websites, displays, or digital signage solutions. To embed a list of predictions instead, change the <strong>Mode</strong> selector.
 </p>
 <h3>Embed Code</h3>
 <textarea id="embed-code" cols=100 rows=3  readonly=true></textarea>
@@ -25,12 +25,12 @@
            <legend>Size</legend>
            <label for="embed-width">
                <span>Width:</span>
-                <input id="embed-width" type="number" min=50 step=50 value=400> px
+                <input id="embed-width" type="number" min=200 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
+                <input id="embed-height" type="number" min=200 step=50 value=250> px
            </label>
        </fieldset>
    </p>