modalllllll

2 files changed, 49 insertions, 42 deletions

diff --git a/public/assets/css.css b/public/assets/css.css
index e3ce765..6f1e634 100644
--- a/public/assets/css.css
+++ b/public/assets/css.css
@@ -82,15 +82,16 @@ h2 {
   cursor: pointer;
 }
 .inner {
-  cursor: normal;
+  cursor: default;
   position: absolute;
   top: 50%; left: 50%;
-  min-width: 400px;
-  max-width: 80vw;
-  height: 80vh;
+  width: 100vw;
+  height: 100vh;
   padding: 10px;
   transform: translate3d(-50%, -50%, 0);
   background: #fff;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 }
 .about #about,
 .entry #entry,
@@ -132,6 +133,7 @@ h2 {
 .media {
   position: relative;
   width: 100%;
+  margin-top: 20px;
 }
 .media iframe {
   margin: 10px auto;
@@ -142,6 +144,7 @@ h2 {
   display: block;
   margin: 10px auto;
   max-width: 82vw;
+  max-height: 67vh;
 }
 .content {
   padding: 8px;
@@ -171,10 +174,17 @@ h2 {
   cursor: pointer;
   z-index: 2;
 }
+.entry #left, .entry #right {
+  display: none;
+}
 .readmore {
   cursor: pointer;
   text-decoration: underline;
 }
+.comments {
+  width: 90vw;
+  margin: 0 auto;
+}
 
 /* TESTIMONIALS */
 
@@ -201,6 +211,17 @@ h2 {
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
   line-height: 1.5;
 }
+.close {
+  top: 0; left: 0;
+}
+.close span {
+  display: inline-block;
+  background: black;
+  color: white;
+  padding: 1px 5px 2px 5px;
+  border-radius: 50%;
+  position: fixed;
+}
 
 /* MOBILE STYLES */
 
diff --git a/public/assets/site.js b/public/assets/site.js
index 91e0c0b..4f1654d 100644
--- a/public/assets/site.js
+++ b/public/assets/site.js
@@ -3,7 +3,6 @@ var isIpad = !! (navigator.userAgent.match(/iPad/i))
 var isAndroid = !! (navigator.userAgent.match(/Android/i))
 var isMobile = isIphone || isIpad || isAndroid
 var isDesktop = ! isMobile
-var youtubePlayer = null
 
 document.body.classList.add(isDesktop ? 'desktop' : 'mobile')
 
@@ -29,10 +28,6 @@ $(function(){
 })
 
 function ready() {
-  bind()
-  build()
-}
-function bind(){
   $('.readmore').click( function(){
     var id = $(this).data().id
     var entry = site.entries[id]
@@ -73,43 +68,34 @@ function bind(){
   $("#left").click(() => { postGallery.previous() })
   $("#right").click(() => { postGallery.next() })
 }
-function build(){
-  $('.cell').each( function(){
-    var id = $(this).data().id
-    var entry = site.entries[id]
-    if (! entry) return
-    if (entry.media && entry.media.length) {
-      /*
-      var media = entry.media[0]
-      switch (media.type) {
-        case 'youtube':
-          bg = media.thumb
-          break
-        case 'image':
-          bg = media.uri
-          break
-      }
-      */
-      // $(this).css('background-image', 'url(' + bg + ')')
-			if (youtubePlayer) {
-				youtubePlayer.seekTo(0, true)
-				return youtubePlayer.playVideo()
-			}
-    }
-  })
-}
 
 function show_entry(entry){
   console.log('showing', entry)
-  $('#entry h2').html(entry.title)
-  $('#entry .content').html(newlineToBr(entry.body))
+  $('#entry h3').html(entry.title)
   $('#entry .media').empty()
-  if (entry.gallery) {
-    
-  }
-  else {
-    
-  }
+  entry.media.forEach( (media) => {
+    console.log(media)
+    var dom;
+    switch (media.type) {
+      case 'youtube':
+        dom = $('<iframe>').attr({
+          src: 'https://www.youtube.com/embed/' + media.token + '?modestbranding=1&rel=0',
+          width: media.width,
+          height: media.height,
+          frameborder: 0,
+          allowfullscreen: 'allowfullscreen',
+        })
+        break
+      case 'image':
+        dom = new Image
+        dom.src = media.src
+        break
+    }
+    dom && $('#entry .media').append(dom)
+  })
+  $('#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')
 }
 function hide_entry(){