added inline maps to entry pages and fixed some media and footnote css bugs

2 files changed, 48 insertions, 23 deletions

diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index 6a8140e..24087f8 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -72,6 +72,33 @@
         margin-top: 1em;
     }
 }
+.footnote-ref {
+    padding: 0 2px;
+    @include fontsize(16);
+}
+.dark .footnote-ref {
+    padding: 0px 3px 0 4px;
+}
+
+//### Inline Maps ###
+#detail-map-canvas {
+    width: 100%;
+    height: 0;
+    margin: 0 auto;
+    float: none;
+    border: none !important;
+}
+#detail-map-canvas .detail-map-inner-canvas {
+    width: 100%; 
+    height: 100%; 
+    border: none !important;
+}
+#detail-map-canvas img {
+    max-width: 100%;
+    padding: 0;
+    margin: 0;
+    background: none;
+}
 
 /* special case for debi's master list*/
 .list-debi {
@@ -123,6 +150,7 @@
         font-size: 0.875em;
         line-height: 1.4
     }
+    hr {display: none;}
 }
 .dark .footnote:before {
     @include light_faded_line_after;
@@ -193,19 +221,19 @@ display: block;
     @include transparent_class;
     position: absolute;
     bottom: 10px;
-    left: 0;
+    left: 10px;
     font-size: 13px;
     padding: 8px 0 8px 2%;
-    width: 98%;
+    width: 96%;
     background: $brown;
     color: #999999;
   }
 }
 
 .embed-wrapper {
+    @include constrain_wide;
+    margin-bottom: 1em;
     @include breakpoint(gamma) {
-        width: 960px;
-        max-width: 960px;
         margin-left: auto;
         margin-right: auto;
         border: 5px solid $brown;
diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html
index 0fe59ae..5288c3c 100644
--- a/design/templates/details/entry.html
+++ b/design/templates/details/entry.html
@@ -19,18 +19,18 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en
 {% block primary %}		
     <main role="main">
     <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}">
-            <header id="head" class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
+            <header id="header" class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
                 <h1 class="p-name entry-title post--title">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
-                <time id="map-anchor" class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
                 <p class="p-author author hide" id="author">Scott Gilbertson</p>
                 <aside class="p-location h-adr adr post--location" >
                     {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name|safe}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name|safe}}</a>{%endif%}
                     <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
                     <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
-                    {%comment%} &nbsp;&nbsp;(<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%}
+                    {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} &ndash;&nbsp;<a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a>{%endif%}{%endwith%}
                 </aside>
             </header>
-        <div class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}">
+        <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}">
             {{object.body_html|safe|smartypants|widont}}
         </div>
         </article>
@@ -61,20 +61,14 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en
 {% render_comment_form for object %}
 {% endblock %}
 {% block js %}
-     <script type="text/javascript">
-window.onload = function() {
-    var map_anchor = document.getElementById("head");
-    var parentDiv = map_anchor.parentNode;
-    var map_icon = document.createElement("div");
-    //var img = document.createElement("img");
-    //img.src = '//images.luxagraf.net/map-icons/ath.png';
-    //map_icon.appendChild(img);
-    map_icon.className += "map--icon";
-    map_icon.style.background = "url('//images.luxagraf.net/map-icons/ath.png')";
-    //parentDiv.insertAfter(map_icon, map_anchor);
-    map_anchor.parentNode.insertBefore(map_icon, map_anchor.nextSibling);
+{% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %}
+<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
+<script src="/media/js/detail.js"></script>
+{%endif%}{%endwith%}
 
-    //delay loading of gravatar images using nsoscript data-hash attribute
+<script type="text/javascript">
+window.onload = function() {
+    //delay loading of gravatar images using noscript data-hash attribute
     dataattr = document.getElementsByClassName("datahashloader");
     for(var i=0; i<dataattr.length; i++) {
         var c = dataattr[i].parentNode;
@@ -82,10 +76,13 @@ window.onload = function() {
         img.src = 'https://images.luxagraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg';
         img.className += "gravatar";
         c.insertBefore(img, c.childNodes[3]);
-
     }
+    {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %}
+    createMap();
+    var open = false;
+    {%endif%}{%endwith%}
 }
-     </script>
+</script>
 {% with object.template_name as t %}{%if t == 1 or t == 3 %}
 <script src="{{MEDIA_URL}}js/hyphenate.min.js" type="text/javascript"></script>
 {%endif%}{%endwith%}{%endblock%}