diff options
| -rw-r--r-- | index.js | 2 | ||||
| -rw-r--r-- | public/assets/js/app.js | 18 | ||||
| -rw-r--r-- | public/assets/js/lib/ProjectView.js | 25 | ||||
| -rw-r--r-- | public/assets/ok.css | 42 | ||||
| -rw-r--r-- | templates/index.liquid | 13 |
5 files changed, 69 insertions, 31 deletions
@@ -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( $("<figure>").addClass("page-up") ) this.$el.append( $("<figure>").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 @@ <div><b class="fig-text">fig.<b class="slide-no">1</b> OF <b class="slide-count">3</b> •</b> PG.<b class="page-no">1</b></div> </span> </nav> + <div id="curtain"></div> <div id="items"> <div class="item cover intro" data-id="cover"> @@ -118,11 +119,17 @@ <div class="top {% if project.media[2] %}gallery{% else %}single{% endif %}"> {% for media in project.media %} {% if media.type == 'image' %} - <div class="cell image" data-uri="{{ media.uri }}" style="{% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div> + <div class="cell desktop image" data-uri="{{ media.uri }}" style="{% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div> {% elsif media.type == 'video' %} - <div class="cell video" data-uri="{{ media.uri }}"></div> + <div class="cell desktop video" data-uri="{{ media.uri }}"></div> {% elsif media.type == 'link' %} - <div class="cell iframe" data-uri="{{ media.uri }}"></div> + <div class="cell desktop iframe" data-uri="{{ media.uri }}"></div> + {% endif %} + {% endfor %} + + {% for media in project.mobileMedia %} + {% if media.type == 'image' %} + <div class="cell mobile image" data-uri="{{ media.uri }}" style="{% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div> {% endif %} {% endfor %} </div> |