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 --- templates/index.liquid | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'templates') diff --git a/templates/index.liquid b/templates/index.liquid index 697bd7f..d822579 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -118,12 +118,11 @@
{% for media in project.media %} {% if media.type == 'image' %} -
- {% elsif media.type == 'vimeo' %} -
+
+ {% elsif media.type == 'video' %} +
{% elsif media.type == 'link' %} - +
{% endif %} {% endfor %}
-- 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 'templates') 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 'templates') 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