edits

8 files changed, 63 insertions, 17 deletions

diff --git a/site/index.js b/site/index.js
index 3434742..50bd870 100644
--- a/site/index.js
+++ b/site/index.js
@@ -41,6 +41,7 @@ var app  = okcms.createApp({
     { type: 'page', static: {id: 'about'}},
     { type: 'page', static: {id: 'contact'}},
     { type: 'shape', static: {id: 'shape-images'}},
+    { type: 'shape', static: {id: 'about-images'}},
     { type: 'advertising' },
     { type: 'content' },
     { type: 'experiential' },
diff --git a/site/public/assets/images/next.png b/site/public/assets/images/next.png
index 7997259..b5782ed 100644
--- a/site/public/assets/images/next.png
+++ b/site/public/assets/images/next.png
diff --git a/site/public/assets/images/prev.png b/site/public/assets/images/prev.png
new file mode 100644
index 0000000..82050a4
--- /dev/null
+++ b/site/public/assets/images/prev.png
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 45d5231..3a72e13 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -286,6 +286,21 @@ function build_scene () {
     offset: 200,
   }) )
   
+  var wasPrev = false, navWidth
+  function resize_for_prev_next(){
+    navWidth = $("nav").width()
+  }
+  resize_for_prev_next()
+  $(window).resize(resize_for_prev_next)
+  $(window).mousemove(function(e){
+    if (! gallery) return
+    prev = ((e.pageX - navWidth) / window.innerWidth) < 0.39
+    if (prev !== wasPrev) {
+      wasPrev = prev
+      $("#okgallery").toggleClass("prev", prev)
+    }
+  })
+  
 	strips.forEach(function(strip){ strip.update(0) })
 	
 	scene.update()
@@ -416,9 +431,15 @@ function build_gallery () {
   })
 
   $("#okgallery .video").each(function(){
-    var $play = $('<div class="play"></div>')
     var $el = $(this)
+    if (! is_mobile) {
+      var $underlay = $('<div class="underlay"></div>')
+      $underlay.css("background-image", $el.css("background-image"))
+      $el.css("background-image", 'none')
+    }    
+    var $play = $('<div class="play"></div>')
     $el.append($play)
+    $el.append($underlay)
     if (is_desktop) {
       $play.on("click", function(e){
         e.stopPropagation()
@@ -454,7 +475,11 @@ function build_gallery () {
       // load_video($el)
     }
     else {
-      gallery.next()
+      if ($("#okgallery").hasClass("prev")) {
+        gallery.previous()
+      } else {
+        gallery.next()
+      }
     }
   })
   gallery.loader.on("progress", function(imagesLoaded, loadingImage){
@@ -484,8 +509,8 @@ function load_video ($el) {
   var $embed = $('<iframe src="https://player.vimeo.com/video/' + vimeo_id + '?autoplay=1&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
   $el.append($embed)
   if (! is_mobile) {
-    var $mask = $('<div class="mask"></div>')
-    $el.append($mask)
+//     var $mask = $('<div class="mask"></div>')
+//     $el.append($mask)
   }
   var player = $f( $el.find("iframe")[0] )
   $el.data('player', player)
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index 543a34a..6316159 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -337,7 +337,7 @@ nav .sub {
 
 nav .sub.active {
 	display: inline-block;
-	max-height:180px;
+	max-height: 450px;
 }
 
 nav .sub a {
@@ -519,12 +519,14 @@ nav .sub.active a {
 	-webkit-column-count: 3;
 	-moz-column-count: 3;
 	column-count: 3;
+  min-height: 130px;
 }
 .entry span div.content.noline {
 	border-top: 0;
 	padding-top: 0;
 }
 .entry span div.content div {
+  min-height: 130px;
 	width:50%;
 	-webkit-column-count: 3;
 	-moz-column-count: 3;
@@ -573,6 +575,10 @@ nav .sub.active a {
 	height:100%;
 	cursor: url(images/next.png), auto!important;
 }
+.gallery.prev,
+.gallery.prev .cell {
+	cursor: url(images/prev.png), auto!important;
+}
 .cell.video {
 	width: 80%;
 	background-size: cover;
@@ -613,12 +619,24 @@ nav .sub.active a {
 	-webkit-transition:0.4s opacity ease-in;
 	transition:0.4s opacity ease-in;
 	pointer-events: none; 
-}
-.cell iframe {
   height: 200%;
   -webkit-transform: translateY(-25%);
   transform: translateY(-25%);
 }
+.cell .underlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+	width: 100%;
+	height:100%;
+	opacity:0.2;
+	-webkit-transition:0.4s opacity ease-in;
+	transition:0.4s opacity ease-in;
+	pointer-events: none; 
+  background-size: cover;
+  background-position: center center;
+}
+
 .fullscreen {
 	text-align: right;
 }
@@ -679,22 +697,27 @@ nav .sub.active a {
 	opacity:0.0;
 	transition:0.4s opacity ease-in;
 }
+
 .cell img.loaded {
   opacity: 0.2;
 }
-.cell.is-selected img, .cell.is-selected iframe {
+.cell.is-selected .underlay, .cell.is-selected img, .cell.is-selected iframe {
 	opacity:1;
 	pointer-events: auto; 
 }
-.cell .mask {
+.cell .underlay {
 	z-index: 2;
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	top: 0; left: 0;
 }
-.cell.playing .mask {
+.cell.loaded .underlay {
+  background-image: none !important;
+}
+.cell.playing .underlay {
 	pointer-events: none;
+	opacity: 0;
 }
 .logo {
 	position: fixed;
diff --git a/site/templates/page.liquid b/site/templates/page.liquid
index 5c3cabe..63f71f2 100644
--- a/site/templates/page.liquid
+++ b/site/templates/page.liquid
@@ -2,10 +2,6 @@
   <span>
 		{% if page.image %}
       <span class="postname">{{page.title}}</span>
-			<div class="galnav">
-				<span class="prevbutton">PREVIOUS ASSET</span>
-				<span class="nextbutton">NEXT ASSET</span>
-			</div>
 		  <img class="mainimg" src="{{page.image}}">
       <div class="content">
         {{page.body | newline_to_br}}
diff --git a/site/templates/project.liquid b/site/templates/project.liquid
index 0dc828c..8c9a26e 100644
--- a/site/templates/project.liquid
+++ b/site/templates/project.liquid
@@ -2,13 +2,13 @@
 	<span>
 		<span class="postname">{{project.title}}</span>
 		<div class="galnav">
-			<span class="prevbutton">PREVIOUS ASSET</span>
-			<span class="nextbutton">NEXT ASSET</span>
+			<span class="prevbutton">PREVIOUS</span>
+			<span class="nextbutton">NEXT</span>
 		</div>
 		<div class="gallery" id="okgallery">
     {% for media in project.media %}
       {% if media.token %}
-        <div class="cell video" style="background-image:url({{ media.thumb }})" data-video="https://player.vimeo.com/video/{{ media.token }}" data-caption="{{ media.title }}"></div>
+        <div class="cell video" style="background-image:url({{ media.thumb }})" data-video="https://player.vimeo.com/video/{{ media.token }}" data-caption=""></div>
       {% else %}
         <div class="cell" data-caption="{{ media.caption }}"><img src="{{ media.uri }}"></div>
       {% endif %}
diff --git a/themes/okadmin/templates/partials/inputs.liquid b/themes/okadmin/templates/partials/inputs.liquid
index 1b8d6b4..b29a289 100644
--- a/themes/okadmin/templates/partials/inputs.liquid
+++ b/themes/okadmin/templates/partials/inputs.liquid
@@ -139,6 +139,7 @@
           {% endfor %}
         </ol>
       </div>
+
     {% elsif type == 'meta' %}
       <input class="hidden" type="hidden" name="{{name}}" value="{{spec.value}}">
     {% else %}