From d1d06e58283eac26dd78b0a19bcfcbf16e64013f Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 14 Apr 2015 19:38:23 -0400
Subject: fix videos on mobile

---
 site/public/assets/javascripts/_env.js | 30 ++++++++++++----------
 site/public/assets/style.css           | 47 ++++++++++++++++++++++------------
 2 files changed, 47 insertions(+), 30 deletions(-)

(limited to 'site/public/assets')

diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 7ff471d..c4e9ace 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -352,17 +352,19 @@ function build_gallery () {
     var $play = $('<div class="play"></div>')
     var $el = $(this)
     $el.append($play)
-    $play.click(function(e){
-      e.stopPropagation()
-      e.preventDefault()
-      if ($el.hasClass('loaded')) {
-        var player = $el.data('player')
-        player.api('play')
-      }
-      else {
-        load_video($el)
-      }
-    })
+    if (is_desktop) {
+      $play.on("click", function(e){
+        e.stopPropagation()
+        e.preventDefault()
+        if ($el.hasClass('loaded')) {
+          var player = $el.data('player')
+          player.api('play')
+        }
+        else {
+          load_video($el)
+        }
+      })
+    }
   })
   
   $(".caption").click(function(){
@@ -416,8 +418,10 @@ function load_video ($el) {
   var vimeo_id = $el.data("video").match(/\d+/)[0]
   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)
-  var $mask = $('<div class="mask"></div>')
-  $el.append($mask)
+  if (! is_mobile) {
+    var $mask = $('<div class="mask"></div>')
+    $el.append($mask)
+  }
   var player = $f( $el.find("iframe")[0] )
   $el.data('player', player)
   player.addEvent('ready', function(){
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index 65235ce..825f46c 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -113,7 +113,7 @@ cursor: grabbing;
 	transform: translateY(-50%);
 }
 
-.flickity-prev-next-button:hover { background: white; }
+.desktop .flickity-prev-next-button:hover { background: white; }
 
 .flickity-prev-next-button:focus {
 	outline: none;
@@ -256,7 +256,7 @@ nav {
 	border-top: 1px solid #222;
 	padding-top: 10px;
 }
-.toplogo:hover {
+.desktop .toplogo:hover {
 	cursor:pointer;
 	opacity:1;
 }
@@ -295,13 +295,13 @@ nav a {
 	color:black;
 }
 
-nav .cat:hover {
+.desktop nav .cat:hover {
 	cursor:pointer;
 	background:#eee;
 }
 
 
-nav a.active:hover {
+.desktop nav a.active:hover {
 	cursor:default;
 }
 nav .cat {
@@ -313,7 +313,7 @@ nav .cat.active {
 	display: inline-block;
 	font-family: 'BellGothic-Bold';
 }
-nav .top .cat.active:hover {
+.desktop nav .top .cat.active:hover {
 	background:transparent;
 }
 
@@ -409,7 +409,7 @@ nav .sub.active a {
 	transform:translateY(0)scale(1)skew(0deg);
 }
 
-nav a.active, nav .sub a:hover {
+.desktop nav a.active, nav .sub a:hover {
 	text-decoration:none;
 	background:#eee;
 	color:black;
@@ -460,7 +460,7 @@ nav a.active, nav .sub a:hover {
 	cursor: pointer;
 	width: 18px;
 }
-.credit img:hover {
+.desktop .credit img:hover {
 	opacity:1;
 }
 
@@ -559,7 +559,7 @@ nav a.active, nav .sub a:hover {
 	opacity: 0.7;
 	z-index: 4;
 }
-.cell.video .play:hover {
+.desktop .cell.video .play:hover {
 	opacity: 1.0;
 }
 .cell iframe {
@@ -621,12 +621,12 @@ nav a.active, nav .sub a:hover {
 	opacity:0.5;
 	cursor:pointer;
 }
-.caption:hover {
+.desktop .caption:hover {
 	background:#222;
 	color:#222;
 	cursor:pointer;
 }
-.caption:hover::after {
+.desktop .caption:hover::after {
 	color:white;
 	opacity:1;
 }
@@ -734,7 +734,7 @@ nav a.active, nav .sub a:hover {
 	transition: 0.1s opacity ease-in;
 	transition-delay:0.4s;
 }
-.ready .project:hover {
+.desktop .ready .project:hover {
 	opacity: 1.0;
 }
 .project img {
@@ -852,14 +852,27 @@ nav a.active, nav .sub a:hover {
 	.menuActive #entry_container {
 		left:160px;
 	}
-	body{
-		  font-size: 18px;
+  #scene {
+    -webkit-transition: left 0.2s;
+    transition: left 0.2s;
+  }
+	.menuActive #scene {
+		left:160px;
+	}
+	body {
+		font-size: 18px;
 	}
 }
 .mobile .cell iframe {
-	position: fixed; /* REALLY WEIRD, vimeo won't play without this! */
-	width: 80%;
-	opacity:0.2;
+	width: 100%;
+	opacity: 0.0!important;
 	transition:0.4s opacity ease-in;
-	z-index: 2;
+	z-index: 100;
+	height: 100%;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
 }
+.mobile .play {
+  pointer-events: none;
+  opacity: 1;
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2