diff options
| -rw-r--r-- | public/assets/css.css | 29 | ||||
| -rw-r--r-- | public/assets/site.js | 62 | ||||
| -rw-r--r-- | templates/entry.liquid | 37 |
3 files changed, 79 insertions, 49 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(){ diff --git a/templates/entry.liquid b/templates/entry.liquid index cf7f1b2..25f7b42 100644 --- a/templates/entry.liquid +++ b/templates/entry.liquid @@ -45,6 +45,7 @@ SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS <meta property="og:image" content="http://howtomakeafolkestone.life/assets/header.jpg" /> <meta property="og:url" content="http://howtomakeafolkestone.life/" /> <meta property="og:site_name" content="Tree" /> + <meta property="fb:admins" content="100006974534106"/> <meta name="apple-mobile-web-app-capable" content="no"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> @@ -86,11 +87,11 @@ SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS {% endfor %} </div> <div class="content"> - {{ entry.body | newline_to_br }} -<!-- - <br><br> - <span class='readmore' data-id='{{ entry.id }}'>Read More</a> - --> + {% if entry.body %} + {{ entry.body | split: '. ' | first }} + <br><br> + {% endif %} + <a class='readmore' data-id='{{ entry.id }}'>Read and Comment</a> </div> </div> {% endunless %} @@ -128,12 +129,34 @@ SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS <div id='entry'> <div class='inner'> - <div class='close'>×</div> + <div class='close'><span>×</span></div> <div class='media'></div> - <h2></h2> + <h3></h3> <div class='content'></div> + <div class='comments'></div> </div> </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> |