diff --git a/static/css/map.css b/static/css/map.css
index 88d55be3e15b47992a18f055df3808f0c5b14672..1f72df187f356a0c2bea55076653ac6153f7112e 100644
--- 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;
}
diff --git a/templates/base.html b/templates/base.html
index a7994e45eeaeb938741ab3cdd24bb4ed50fe5429..212512c41da22a590847ce7791cdd1f6f151d6b1 100644
--- 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>
diff --git a/templates/map.html b/templates/map.html
index 74778eb23535f40cbd11475caab5779abad9be82..b092a414e1f48961be16718f1e68eacbe7b29153 100644
--- 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>
diff --git a/templates/modal-about.html b/templates/modal-about.html
index e840bdda59c39ad9cf25bbad1d9ebbb2430c3ef6..b5e7ce02e9907d1577143de64133503222b3c0ef 100644
--- a/templates/modal-about.html
+++ b/templates/modal-about.html
@@ -1,8 +1,12 @@
-<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.
diff --git a/templates/modal-embed.html b/templates/modal-embed.html
index 56982085ae344e5e37c21f08650da6bcd251e9b6..77a9521405d7a42e3a8ae2302ca306ad6629d0c2 100644
--- a/templates/modal-embed.html
+++ b/templates/modal-embed.html
@@ -1,6 +1,6 @@
<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>