1 files changed, 20 insertions, 6 deletions
diff --git a/app/sightings/templates/sightings/ap_detail.html b/app/sightings/templates/sightings/ap_detail.html
index 72c3666..c27b81e 100644
--- a/app/sightings/templates/sightings/ap_detail.html
+++ b/app/sightings/templates/sightings/ap_detail.html
@@ -2,7 +2,18 @@
 {% load typogrify_tags %}
 {% block extrahead %}
 <style>
-#detail-map-canvas { height: 100%;}
+#detail-map-canvas { 
+    height: 100%;
+}
+@media screen and (min-width: 1170px) {
+#detail-map-canvas { 
+    height: 300px; 
+    width: 100vw;
+}
+.map {
+    margin-top: 4rem;
+}
+}
 </style>
 {% endblock %}
 {% block bodyid %}class="detail center"{%endblock%}
@@ -10,7 +21,7 @@
 {% block primary %}<main>
     <article class="content">
         <header class="post-header">
-            <h1 class="p-name post-title" itemprop="headline">{{object.common_name}}</h1>
+            <h1 class="p-name post-title">{{object.common_name}}</h1>
             <h2 class="post-subtitle post-subtitle-line">{{object.scientific_name}}</h2>
             <h3 class="post-smcaps">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3>
         </header>
@@ -38,6 +49,8 @@
         {%endfor%}</ul>
         </div>
     </div>
+    <div id="endnode">
+    </div>
 </article>
 </main>
 {% endblock %}
@@ -45,13 +58,14 @@
 {% block js %}
 <script src="/media/js/leaflet-master/leaflet-mod.js"></script>
 <script src="/media/js/detail.js"></script>
-<script type="text/javascript">
+<script>
 sightings = [];
 {% for s in sighting %}
 sightings.push(['{{s.latitude}}', '{{s.longitude}}']);
 {% endfor %}
-window.onload = function() {
-    createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}, sightings); return false;
-}
+document.addEventListener("DOMContentLoaded", function(event) { 
+    createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{% for s in sighting %}{% if forloop.first %}{{s.latitude}}{%endif%}{%endfor%}', lon:'{% for s in sighting %}{% if forloop.first %}{{s.latitude}}{%endif%}{%endfor%}'}, sightings); return false;
+});
 </script>
+{{ block.super }}
 {% endblock %}