fix modal

3 files changed, 36 insertions, 31 deletions

diff --git a/public/assets/css.css b/public/assets/css.css
index 7e4ded7..c80c32b 100644
--- a/public/assets/css.css
+++ b/public/assets/css.css
@@ -13,9 +13,7 @@ html,body {
   background-color: white;
   color: black;
 }
-body.about,
-body.entry,
-body.submit {
+html.entry, .entry body {
   overflow: hidden;
 }
 .readmore, a {
@@ -137,11 +135,13 @@ h2 {
 .media {
   position: relative;
   width: 100%;
-  margin-top: 20px;
+}
+#entry .media {
+  margin-top: 60px; 
 }
 .media iframe {
   margin: 10px auto;
-  max-height: 30vh;
+  max-height: 40vh;
   max-width: 82vw;
 }
 .media img {
@@ -188,6 +188,7 @@ h2 {
 .comments {
   width: 90vw;
   margin: 0 auto;
+  margin-bottom: 40px;
 }
 
 /* TESTIMONIALS */
@@ -217,6 +218,10 @@ h2 {
 }
 .close {
   top: 0; left: 0;
+  width: 100vw;
+  padding: 5px 0 0 0;
+  display: none;
+  text-align: center;
 }
 .close span {
   display: inline-block;
@@ -224,7 +229,10 @@ h2 {
   color: white;
   padding: 1px 5px 2px 5px;
   border-radius: 50%;
+}
+.entry .close {
   position: fixed;
+  display: block;
 }
 
 /* MOBILE STYLES */
diff --git a/public/assets/site.js b/public/assets/site.js
index c414e2d..3be8f38 100644
--- a/public/assets/site.js
+++ b/public/assets/site.js
@@ -22,13 +22,29 @@ $(function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
   ga('create', 'UA-35821710-3', 'auto');
   ga('send', 'pageview');
+  window.fbAsyncInit = function() {
+    FB.init({
+      appId            : '1073570216112784',
+      autoLogAppEvents : true,
+      xfbml            : true,
+      version          : 'v2.10'
+    });
+    FB.AppEvents.logPageView();
+  };
+  (function(d, s, id){
+     var js, fjs = d.getElementsByTagName(s)[0];
+     if (d.getElementById(id)) {return;}
+     js = d.createElement(s); js.id = id;
+     js.src = "//connect.facebook.net/en_US/sdk.js";
+     fjs.parentNode.insertBefore(js, fjs);
+   }(document, 'script', 'facebook-jssdk'));
 })
 
 function ready() {
-  $('.readmore').click( function(){
+  $('.readmore').click( function(e){
+    e.preventDefault()
     var id = $(this).data().id
     var entry = site.entries[id]
     show_entry(entry)
@@ -88,7 +104,7 @@ function show_entry(entry){
         break
       case 'image':
         dom = new Image
-        dom.src = media.url
+        dom.src = media.uri
         break
     }
     dom && $('#entry .media').append(dom)
@@ -96,7 +112,7 @@ function show_entry(entry){
   $('#entry .content').html(newlineToBr(entry.body))
   $('#entry .comments').html( '<div class="fb-comments" data-href="https://howtomakeafolkestone.life/entry/' + entry.id +'" data-width="360"></div>' )
   FB && FB.XFBML.parse( $('#entry .comments').get(0) )
-  $('body').addClass('entry')
+  $('html').addClass('entry')
 }
 function hide_entry(){
   setTimeout(clear_entry, 500)
@@ -104,7 +120,7 @@ function hide_entry(){
 function clear_entry(){
 }
 function close_modals(){
-  $('body').removeClass('entry').removeClass('about')
+  $('.entry').removeClass('entry')
 }
 
 function newlineToBr(s){ return s.replace(/\n/g,'<br>') }
diff --git a/templates/entry.liquid b/templates/entry.liquid
index 25f7b42..0439ae0 100644
--- a/templates/entry.liquid
+++ b/templates/entry.liquid
@@ -91,7 +91,7 @@ SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
             {{ entry.body | split: '. ' | first }}
             <br><br>
           {% endif %}
-          <a class='readmore' data-id='{{ entry.id }}'>Read and Comment</a> 
+          <a class='readmore' href='#' data-id='{{ entry.id }}'>Read and Comment</a> 
         </div>
       </div>
     {% endunless %}
@@ -129,7 +129,6 @@ SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
 
 <div id='entry'>
   <div class='inner'>
-    <div class='close'><span>&times;</span></div>
     <div class='media'></div>
     <h3></h3>
     <div class='content'></div>
@@ -137,26 +136,8 @@ SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
   </div>
 </div>
 
+<div class='close'><span>&times;</span></div>
 
-<script>
-  window.fbAsyncInit = function() {
-    FB.init({
-      appId            : '1073570216112784',
-      autoLogAppEvents : true,
-      xfbml            : true,
-      version          : 'v2.10'
-    });
-    FB.AppEvents.logPageView();
-  };
-
-  (function(d, s, id){
-     var js, fjs = d.getElementsByTagName(s)[0];
-     if (d.getElementById(id)) {return;}
-     js = d.createElement(s); js.id = id;
-     js.src = "//connect.facebook.net/en_US/sdk.js";
-     fjs.parentNode.insertBefore(js, fjs);
-   }(document, 'script', 'facebook-jssdk'));
-</script>
 </body>
 <script src="http://www.youtube.com/player_api"></script>
 <script src="/assets/jquery.min.js"></script>