diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/css.css | 29 | ||||
| -rw-r--r-- | public/assets/site.js | 62 |
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(){ |