diff options
Diffstat (limited to 'site')
| -rw-r--r-- | site/public/assets/javascripts/_env.js | 69 | ||||
| -rw-r--r-- | site/public/assets/style.css | 26 | ||||
| -rw-r--r-- | site/templates/all.liquid | 8 |
3 files changed, 76 insertions, 27 deletions
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index b6b5785..0b10daf 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -1,6 +1,7 @@ var strips = [], boxImages = [] var done_loading = false, menu_open = false, entry_open = false +var shuffled_indexes var environment = {}, hashes = {} environment.init = function(){ @@ -184,19 +185,21 @@ environment.ready = function(){ toggle_menu() } }) - $(document).on("mouseenter", ".project", function(){ - var type = $(this).data("type") - $(".entry").addClass("hover") - $(this).addClass("hover") - $(".top .cat").not("[data-type=" + type + "]").addClass("no-hover") - $(".cat[data-type=" + type + "]").addClass("hover") - }) - $(document).on("mouseleave", ".project", function(){ - var type = $(this).data("type") - $(".entry").removeClass("hover") - $(this).removeClass("hover") - $(".cat").removeClass("hover").removeClass("no-hover") - }) + if (is_desktop) { + $(document).on("mouseenter", ".project", function(){ + var type = $(this).data("type") + $(".entry").addClass("hover") + $(this).addClass("hover") + $(".top .cat").not("[data-type=" + type + "]").addClass("no-hover") + $(".cat[data-type=" + type + "]").addClass("hover") + }) + $(document).on("mouseleave", ".project", function(){ + var type = $(this).data("type") + $(".entry").removeClass("hover") + $(this).removeClass("hover") + $(".cat").removeClass("hover").removeClass("no-hover") + }) + } } @@ -305,15 +308,17 @@ function load_index (e){ e && e.preventDefault() // if (done_loading && window.location.hash == "#/index") return // window.location.hash = "#/index" - console.log("load index") + // console.log("load index") $("nav a.active").removeClass("active") - open_entry() + open_entry(true) + + window.location.hash = "#" $("#entry_container").removeClass("visible") var $loader = $("<div>") $loader.load("all .entry", function(){ - console.log("index did load") + $("body").addClass("menuActive") display_entry($loader.children()[0]) }) } @@ -328,8 +333,8 @@ function load_hash (hash) { $menu.parent().prev(".cat").addClass('active') $menu.trigger("click") } -function open_entry () { - if (is_mobile) { +function open_entry (entryIsAll) { + if (is_mobile && ! entryIsAll) { $("body").removeClass("menuActive") } if (! entry_open) { @@ -342,12 +347,34 @@ function open_entry () { entry_open_time = +new Date $("#entry_container").addClass("fade") } -function display_entry ($el) { +function display_entry (el) { var now = +new Date + var $el = $(el) + var isIndex = $el.hasClass("all") + if (is_mobile) { + $("body").toggleClass("menuActive", isIndex) + $el.find(".brady").remove() + } + if (isIndex) { + var $projects = $el.find(".project") + if (! shuffled_indexes) { + shuffled_indexes = [] + for (var i = 0; i < $projects.length; i++) { + shuffled_indexes[i] = i + } + shuffle(shuffled_indexes) + } + $el.html("") + for (var i = 0; i < $projects.length; i++) { + $el.append($projects[shuffled_indexes[i]]) + } + } setTimeout(function(){ $("#entry_container").empty().append($el) $("#entry_container").removeClass("fade") - build_gallery() + setTimeout(function(){ + build_gallery() + }) if (is_mobile) { $(".video").each(function(){ load_video( $(this) ) @@ -470,12 +497,14 @@ function build_gallery () { }) gallery.on("cellSelect", function(){ + if (! gallery.selectedElement) return $caption.html( $(gallery.selectedElement).data("caption") ) videos.forEach(function(player){ player.api('pause') }) }) gallery.on("settle", function(){ + if (! gallery || ! gallery.selectedElement) { return } $caption.html( $(gallery.selectedElement).data("caption") ) }) gallery.on("staticClick", function(e){ diff --git a/site/public/assets/style.css b/site/public/assets/style.css index 5cd0b15..3ccb1a7 100644 --- a/site/public/assets/style.css +++ b/site/public/assets/style.css @@ -491,7 +491,7 @@ nav .sub.active a { background: #888; cursor:pointer; } -.galnav span:hover { +.desktop .galnav span:hover { background:black; } .singleton .galnav { display: none } @@ -829,7 +829,7 @@ nav .sub.active a { position: relative; display: inline-block; } -.brady a:hover:after { +.desktop .brady a:hover:after { content: 'SAY HELLO!'; position: absolute; top: 40%; @@ -877,6 +877,7 @@ nav .sub.active a { transition: 0.1s opacity ease-in; display: block; text-overflow: ellipsis; + text-transform: uppercase; } .mobile .project span, .desktop .project:hover span { @@ -973,6 +974,10 @@ nav .sub.active a { width:33.3333%; height: 16.6vw; } + .brady a { + width: 160px; + height: 160px; + } } @@ -1019,7 +1024,7 @@ nav .sub.active a { height: 55vw; } .menuActive #entry_container { - left:160px; + left:120px; } #scene { -webkit-transition: left 0.2s; @@ -1031,6 +1036,21 @@ nav .sub.active a { body { font-size: 18px; } + nav { + font-size: 0.6em; + width: 120px; + } + .menuActive #entry_container .entry.all { + width:65%; + } + .menuActive .project { + height: 36vw; + text-transform: uppercase; + font-size:0.6em; + } + .menuActive .project span { + top: -18px; + } } .mobile .cell iframe { width: 100%; diff --git a/site/templates/all.liquid b/site/templates/all.liquid index 73da67b..97528c2 100644 --- a/site/templates/all.liquid +++ b/site/templates/all.liquid @@ -2,25 +2,25 @@ {% for project in advertisings %} <div class="project" data-id="{{ project.id }}" data-type="advertising"> <img src="{{ project.thumbnail.uri }}"> - <span>{{ project.title }}</span> + <span>{{ project.menu }}</span> </div> {% endfor %} {% for project in contents %} <div class="project" data-id="{{ project.id }}" data-type="content"> <img src="{{ project.thumbnail.uri }}"> - <span>{{ project.title }}</span> + <span>{{ project.menu }}</span> </div> {% endfor %} {% for project in experientials %} <div class="project" data-id="{{ project.id }}" data-type="experiential"> <img src="{{ project.thumbnail.uri }}"> - <span>{{ project.title }}</span> + <span>{{ project.menu }}</span> </div> {% endfor %} {% for project in retails %} <div class="project" data-id="{{ project.id }}" data-type="retail"> <img src="{{ project.thumbnail.uri }}"> - <span>{{ project.title }}</span> + <span>{{ project.menu }}</span> </div> {% endfor %} </div> |