From 7c073e83edf335fe611864c00a14abca0d718b11 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 12:14:18 -0400 Subject: preload images, inject iframes --- public/assets/ok.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'public/assets/ok.css') diff --git a/public/assets/ok.css b/public/assets/ok.css index 7429523..acc7ea2 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -537,11 +537,13 @@ button svg { button.next { right: 0; cursor: url(img/r.png)64 32, pointer; + z-index: 4; } button.previous { left: 0; cursor: url(img/l.png) 0 32, pointer; + z-index: 4; } .desktop button.previous:hover svg, @@ -555,7 +557,8 @@ button.previous { transform: scale(0.1); } -.cell { +.cell, +.cell iframe { width: 100vw; height: 100%; /*THIS SHOULD BE DYNAMIC*/ @@ -744,7 +747,7 @@ ul li { padding: 3px 0 2px 0; font-weight: 600; } - iframe.cell { + .cell iframe { pointer-events: none; } .five span.description { -- cgit v1.2.3-70-g09d2 From bc5c9ff05b113df0907f442c225ce61c3f15f1b3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 12:16:22 -0400 Subject: fix missing brief if no press --- db.json | 7 +------ public/assets/ok.css | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) (limited to 'public/assets/ok.css') diff --git a/db.json b/db.json index 6307d24..bf7b9ea 100644 --- a/db.json +++ b/db.json @@ -198,12 +198,7 @@ "containImage": "true", "__index": "6", "dateCreated": "Sun, 03 Apr 2016 19:12:17 GMT", - "press": [ - { - "text": "", - "uri": "" - } - ] + "press": [] }, { "id": "soylent-website", diff --git a/public/assets/ok.css b/public/assets/ok.css index acc7ea2..785a6d6 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -654,7 +654,7 @@ ul li { height: 100% } -.nopress span:last-child { +.nopress span:nth-child(6) { display: none; } -- cgit v1.2.3-70-g09d2 From d1714eb9c50ebacc12431fe08122764397106013 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 14:12:38 -0400 Subject: making mobile work better --- index.js | 2 ++ public/assets/js/app.js | 18 +++++++++++----- public/assets/js/lib/ProjectView.js | 25 +++++++++++++++------- public/assets/ok.css | 42 +++++++++++++++++++++++-------------- templates/index.liquid | 13 +++++++++--- 5 files changed, 69 insertions(+), 31 deletions(-) (limited to 'public/assets/ok.css') diff --git a/index.js b/index.js index 5162769..d8dc14f 100644 --- a/index.js +++ b/index.js @@ -27,12 +27,14 @@ var app = okcms.createApp({ id: {type: 'string', hidden: true}, title: {type: 'string'}, alternateTitle: {type: 'string'}, + mobileTitle: {type: 'string'}, year: {type: 'number'}, client: {type: 'string'}, link: {type: 'string'}, NatureOfWork: {type: 'text'}, brief: {type: 'text'}, media: {type: 'media-list'}, + mobileMedia: {type: 'media-list'}, containImage: {type: 'flag'}, press: {type: 'link-list'}, }, diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 040b99c..91ccdaf 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -40,13 +40,12 @@ var app = (function() { app.header = new HeaderView() app.nav = new NavView() - // should this go here or elsewhere? - app.resizeItems() + app.$items = $(".item") - var $items = $(".item") + app.resizeItems() app.lookup = {} - app.projects = $items.toArray().map(function(el, i){ + app.projects = app.$items.toArray().map(function(el, i){ var view = new ProjectView ({ el: el, page_number: i, @@ -98,11 +97,20 @@ var app = (function() { } app.resizeItems = function(){ + var windowHeight = window.innerHeight + + if (is_iphone) { + windowHeight -= 44 // account for lower bar + window.scrollTo(0,0) + } + $(".item").each(function(i){ - var height = window.innerHeight - ($(this).find(".bottom").height() + 10) + + var height = windowHeight - ($(this).find(".bottom").height() + 10) if (is_desktop) { height -= $("nav").height() // account for top bar } + $(".cell, .top, .previous, .next, .flickity-viewport", this).css({ 'height': height }) var cellCount = $(this).find(".cell").length if ($.browser.mozilla) { diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 97a7e1c..7e38d2a 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -9,10 +9,7 @@ var ProjectView = View.extend({ initialize: function(opt){ // this.gallery = new GalleryView () - this.project_id = this.$el.data("id") - this.page_number = opt.page_number - this.slide_count = this.$(".cell").length - + this.$iframes = this.$(".cell.iframe") this.$images = this.$(".cell.image") this.$videos = this.$(".cell.video") @@ -20,8 +17,17 @@ var ProjectView = View.extend({ this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") }) if (is_mobile) { - $iframes.remove() - $videos.remove() + this.$iframes.remove() + this.$videos.remove() + this.$iframes = this.$videos = $(".nothing") + if (this.$(".mobile").length) { + this.$(".desktop").remove() + this.$(".mobile").removeClass("desktop") + } + } + else { + this.$(".mobile").remove() + this.$(".desktop").removeClass("desktop") } if (this.$(".cell").length > 1) { @@ -47,7 +53,12 @@ var ProjectView = View.extend({ this.$el.append( $("
").addClass("page-up") ) this.$el.append( $("
").addClass("page-down") ) } - + + // now that the gallery is ready, store this data.. + this.project_id = this.$el.data("id") + this.page_number = opt.page_number + this.slide_count = this.$(".cell").length + this.$el.addClass('hidden') }, diff --git a/public/assets/ok.css b/public/assets/ok.css index 785a6d6..0f09323 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -149,7 +149,7 @@ h3 { top: 0; left: 0; z-index: 2; - transform: translateX(-50vw); + transform: translateZ(0) translateX(-50vw); padding: 24px 0 5px 0; transition: 150ms transform cubic-bezier(0, 0, 0, 1); z-index: 0; @@ -193,16 +193,16 @@ nav { } .navopen .menu { - transform: translateX(0vw); + transform: translateZ(0) translateX(0vw); z-index: 2; opacity: 1; overflow: auto; + background: #f9f9f9; } .navopen .item { - transform: translateX(50vw); + transform: translateZ(0) translateX(50vw); /*opacity:0.5;*/ - background: black; } nav svg g g rect { @@ -265,7 +265,7 @@ span { height: 100vh; width: 100%; display: block; - transition: 150ms transform cubic-bezier(0, 0, 0, 1), 200ms background cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0); + transition: 150ms transform cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0); } .item.intro { @@ -276,10 +276,6 @@ span { background: white; } -.navopen .item.intro { - background: black; -} - .navopen .item.intro > * { background: transparent; } @@ -289,6 +285,20 @@ body.navopen { background: #f9f9f9; } +#curtain { + position: absolute; + top: 0; left: 0; + background: black; + transition: 200ms opacity cubic-bezier(0, 0, 0, 1); + opacity: 0; + z-index: 0; + width: 100%; + height: 100%; +} +.navopen #curtain { + opacity: 1; +} + nav { position: fixed; top: 0; @@ -328,7 +338,7 @@ nav span div:last-child { } .navopen nav span div:last-child { - transform: translateX(110px); + transform: translateZ(0) translateX(110px); transition: 150ms all; position: absolute; right: 5px; @@ -411,12 +421,12 @@ body { } .up .showing.item { - transform: translateY(-10px); + transform: translateZ(0) translateY(-10px); opacity: 0; } .down .showing.item { - transform: translateY(10px); + transform: translateZ(0) translateY(10px); opacity: 0; } @@ -549,12 +559,12 @@ button.previous { .desktop button.previous:hover svg, .desktop button.next:hover svg { opacity: 1; - transform: scale(0.2); + transform: translateZ(0) scale(0.2); } .desktop button.next:active svg, .desktop button.previous:active svg { - transform: scale(0.1); + transform: translateZ(0) scale(0.1); } .cell, @@ -777,10 +787,10 @@ ul li { } .menu { width: 90vw; - transform: translateX(-90vw); + transform: translateZ(0) translateX(-90vw); } .navopen .item { - transform: translateX(90vw); + transform: translateZ(0) translateX(90vw); } .top { margin-top: 30px; diff --git a/templates/index.liquid b/templates/index.liquid index d822579..73b694e 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -60,6 +60,7 @@
fig.1 OF 3 • PG.1
+
@@ -118,11 +119,17 @@
{% for media in project.media %} {% if media.type == 'image' %} -
+
{% elsif media.type == 'video' %} -
+
{% elsif media.type == 'link' %} -
+
+ {% endif %} + {% endfor %} + + {% for media in project.mobileMedia %} + {% if media.type == 'image' %} +
{% endif %} {% endfor %}
-- cgit v1.2.3-70-g09d2 From 70441ec0cc8f4d1258de98adf50d738c32ac757b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 15:00:31 -0400 Subject: optional mobile title --- public/assets/ok.css | 18 ++++++++++++++++++ templates/index.liquid | 5 ++++- 2 files changed, 22 insertions(+), 1 deletion(-) (limited to 'public/assets/ok.css') diff --git a/public/assets/ok.css b/public/assets/ok.css index 0f09323..b8e0ff6 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -181,6 +181,10 @@ ul li { text-transform: capitalize; } +ul li[data-id='dump-fm'] { + text-transform: none; +} + .desktop .menu ul li:hover, .menu ul li.active { background: black; @@ -188,6 +192,20 @@ ul li { cursor: pointer; } +.desktop .mobiletitle, +.mobile .desktoptitle { + display: none; +} + +.desktop .desktoptitle +.mobile .mobiletitle { + display: inline; +} + +.menu u { + text-decoration: none; +} + nav { background: white; } diff --git a/templates/index.liquid b/templates/index.liquid index 73b694e..8328227 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -33,7 +33,10 @@ {% for page in pages %}
  • {{ page.title }}
    • {% endfor %} {% for project in projects %} -
  • {{ project.title }}
    • +
  • + {{ project.title }} + {% if project.mobileTitle %}{{ project.mobileTitle }}{% else %}{{ project.title }}{% endif %} +
    • {% endfor %}
    -- cgit v1.2.3-70-g09d2 From 267ab668915933f170a6255f60cfc0bb0713391a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 15:38:44 -0400 Subject: swipe --- public/assets/js/app.js | 4 ++-- public/assets/js/lib/HeaderView.js | 1 - public/assets/js/lib/ProjectView.js | 2 ++ public/assets/js/lib/Scroller.js | 39 ++++++++++++++++++++++++++++++------- public/assets/ok.css | 3 +++ 5 files changed, 39 insertions(+), 10 deletions(-) (limited to 'public/assets/ok.css') diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 91ccdaf..5ae0c99 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -1,7 +1,7 @@ var app = (function() { var app = {} - app.navigation_delay = 200 + app.navigation_delay = 150 app.iscroll_options = { mouseWheel: true, @@ -100,7 +100,7 @@ var app = (function() { var windowHeight = window.innerHeight if (is_iphone) { - windowHeight -= 44 // account for lower bar + windowHeight -= 22 // account for lower bar window.scrollTo(0,0) } diff --git a/public/assets/js/lib/HeaderView.js b/public/assets/js/lib/HeaderView.js index 374f84c..59ca255 100644 --- a/public/assets/js/lib/HeaderView.js +++ b/public/assets/js/lib/HeaderView.js @@ -26,7 +26,6 @@ var HeaderView = View.extend({ }, updateSlideCount: function(n){ - console.log(n) if (n > 1) { if (n < 10) n = "0" + n this.$figText.show() diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 7e38d2a..4b1c994 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -123,11 +123,13 @@ var ProjectView = View.extend({ }, previous: function(e){ + if (is_mobile) return; e.stopPropagation() app.nav.previous() }, next: function(e){ + if (is_mobile) return; e.stopPropagation() app.nav.next() }, diff --git a/public/assets/js/lib/Scroller.js b/public/assets/js/lib/Scroller.js index 3bebce7..4b4c95b 100644 --- a/public/assets/js/lib/Scroller.js +++ b/public/assets/js/lib/Scroller.js @@ -11,9 +11,9 @@ var Scroller = (function(){ left = opt.left right = opt.right if (is_mobile) { -// document.body.addEventListener("touchstart", touchstart) -// document.body.addEventListener("touchmove", touchmove) -// document.body.addEventListener("touchend", touchend) + document.body.addEventListener("touchstart", touchstart) + document.body.addEventListener("touchmove", touchmove) + document.body.addEventListener("touchend", touchend) } else { document.body.addEventListener("wheel", wheelDelta) @@ -22,10 +22,14 @@ var Scroller = (function(){ } var touching = false, touchStartTime, touchStartY, touchEndY, touchDist, touchScrollTop + var touchAdvanceDistance = 60 + var touchFadeDistance = 60 + var $items = $("#items")[0] function touchstart (e) { touching = true touchStartTime = +(new Date) touchStartY = touchEndY = e.touches ? e.touches[0].pageY : e.pageY +// $items.className = "no-tween" } function touchmove (e) { if (! touching) return @@ -34,6 +38,15 @@ var Scroller = (function(){ var duration = timestamp - touchStartTime touchEndY = e.touches ? e.touches[0].pageY : e.pageY touchDist = touchStartY - touchEndY + var touchAbs = Math.abs(touchDist) + if (touchAbs > touchAdvanceDistance) { +// touchend(e) + // touchAbs -= 9 + // $items.style.opacity = clamp(1-touchAbs / (touchFadeDistance * 2), 0, 1) + // touchAbs *= -sign(touchDist) + // touchAbs /= 2 + // $items.style[transformProp] = "translateZ(0) translateY(" + touchAbs + "px)" + } } function touchend (e) { if (! touching) return @@ -42,12 +55,24 @@ var Scroller = (function(){ var timestamp = +(new Date) var duration = timestamp - touchStartTime touchDist = touchStartY - touchEndY - if (Math.abs(touchDist) < 10 || duration < 100) { - step(1) - } - else { + console.log("DURATION >>", duration, touchDist) + if ( (duration < 120 && Math.abs(touchDist) < 10) || Math.abs(touchDist) >= touchAdvanceDistance) { touchDist > 0 ? step(1) : step(-1) } + +// $items.className = "" +// setTimeout(function(){ +// $items.style[transformProp] = "translateZ(0) translateY(0)" +// if (Math.abs(touchDist) >= touchAdvanceDistance) { +// $items.style.opacity = 0 +// setTimeout(function(){ +// $items.style.opacity = 1 +// }, 200) +// } +// else { +// $items.style.opacity = 1 +// } +// }, 0) } function wheelDelta (e){ diff --git a/public/assets/ok.css b/public/assets/ok.css index b8e0ff6..25392e5 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -278,6 +278,9 @@ span { display: block; float: none; } +#items.notween { + transition: opacity 0, transform 0; +} .item { height: 100vh; -- cgit v1.2.3-70-g09d2