From 4a460b25d10f823f3186f460f5c608cbad49d7f5 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@g-u-i.me>
Date: Wed, 15 Apr 2015 19:18:57 +0200
Subject: [PATCH] fixed mobile vids behaviour

---
 sites/all/themes/gui/jee/css/jee.css  | 140 +++++++++++++-------------
 sites/all/themes/gui/jee/css/jee.scss |  40 ++++----
 sites/all/themes/gui/jee/js/jee.js    |   7 +-
 3 files changed, 98 insertions(+), 89 deletions(-)

diff --git a/sites/all/themes/gui/jee/css/jee.css b/sites/all/themes/gui/jee/css/jee.css
index 0ea0223..9e0651d 100644
--- a/sites/all/themes/gui/jee/css/jee.css
+++ b/sites/all/themes/gui/jee/css/jee.css
@@ -5070,35 +5070,37 @@ div.messages {
   left: -1em;
   font-family: "epflul";
 }
-/* line 916, jee.scss */
-#main #chapter-wrapper .field-name-field-partie {
-  height: 60%;
-  width: 100%;
-  top: 20%;
-  left: 0;
-}
-/* line 920, jee.scss */
-#main #chapter-wrapper .field-name-field-partie .field-items {
-  position: relative;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: auto;
-}
-/* line 925, jee.scss */
-#main #chapter-wrapper .field-name-field-partie .field-items .field {
-  position: relative;
-  display: inline-block;
-}
-/* line 928, jee.scss */
-#main #chapter-wrapper .field-name-field-partie .field-items .field .mask {
-  position: absolute;
-  width: 100%;
-  height: 85%;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  cursor: move;
+@media only screen and (min-width: 40.063em) {
+  /* line 917, jee.scss */
+  #main #chapter-wrapper .field-name-field-partie {
+    height: 60%;
+    width: 100%;
+    top: 20%;
+    left: 0;
+  }
+  /* line 921, jee.scss */
+  #main #chapter-wrapper .field-name-field-partie .field-items {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: auto;
+  }
+  /* line 926, jee.scss */
+  #main #chapter-wrapper .field-name-field-partie .field-items .field {
+    position: relative;
+    display: inline-block;
+  }
+  /* line 929, jee.scss */
+  #main #chapter-wrapper .field-name-field-partie .field-items .field .mask {
+    position: absolute;
+    width: 100%;
+    height: 85%;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    cursor: move;
+  }
 }
 
 /* ______________  ________________   _       ______  ___    ____  ____  __________
@@ -5107,7 +5109,7 @@ div.messages {
  ___/ // / / ___ |/ / _/ // /___     | |/ |/ / _, _/ ___ |/ ____/ ____/ /___/ _, _/
 /____//_/ /_/  |_/_/ /___/\____/     |__/|__/_/ |_/_/  |_/_/   /_/   /_____/_/ |_|
 */
-/* line 949, jee.scss */
+/* line 951, jee.scss */
 #static-wrapper {
   position: absolute;
   background-color: #fff;
@@ -5118,7 +5120,7 @@ div.messages {
           transition-property: opacity;
 }
 @media only screen and (max-width: 40em) {
-  /* line 949, jee.scss */
+  /* line 951, jee.scss */
   #static-wrapper {
     top: 10%;
     bottom: 0;
@@ -5128,7 +5130,7 @@ div.messages {
   }
 }
 @media only screen and (min-width: 40.063em) {
-  /* line 949, jee.scss */
+  /* line 951, jee.scss */
   #static-wrapper {
     top: 15%;
     bottom: 0;
@@ -5138,14 +5140,14 @@ div.messages {
     z-index: -1;
   }
 }
-/* line 970, jee.scss */
+/* line 972, jee.scss */
 #static-wrapper.visible {
   opacity: 0.9;
   -webkit-transition: 1.5s ease-out;
           transition: 1.5s ease-out;
   z-index: 500;
 }
-/* line 976, jee.scss */
+/* line 978, jee.scss */
 #static-wrapper > .close {
   position: absolute;
   cursor: pointer;
@@ -5153,7 +5155,7 @@ div.messages {
   background: none, url("../assets/img/close.svg") no-repeat center center;
 }
 @media only screen and (max-width: 40em) {
-  /* line 976, jee.scss */
+  /* line 978, jee.scss */
   #static-wrapper > .close {
     top: 10px;
     right: 10px;
@@ -5163,7 +5165,7 @@ div.messages {
   }
 }
 @media only screen and (min-width: 40.063em) {
-  /* line 976, jee.scss */
+  /* line 978, jee.scss */
   #static-wrapper > .close {
     top: 20px;
     right: 20px;
@@ -5173,7 +5175,7 @@ div.messages {
   }
 }
 @media only screen and (max-width: 40em) {
-  /* line 992, jee.scss */
+  /* line 994, jee.scss */
   #static-wrapper > .inner {
     padding: 1em 1em 1.5em;
     width: 100%;
@@ -5182,7 +5184,7 @@ div.messages {
   }
 }
 @media only screen and (min-width: 40.063em) {
-  /* line 992, jee.scss */
+  /* line 994, jee.scss */
   #static-wrapper > .inner {
     padding: 5em 7em;
     width: 100%;
@@ -5190,7 +5192,7 @@ div.messages {
     overflow: hidden;
   }
 }
-/* line 1002, jee.scss */
+/* line 1004, jee.scss */
 #static-wrapper > .inner > .node {
   width: 100%;
   height: 100%;
@@ -5198,42 +5200,42 @@ div.messages {
   overflow-x: hidden;
   padding-right: 1.5em;
 }
-/* line 1009, jee.scss */
+/* line 1011, jee.scss */
 #static-wrapper h2.node-title {
   font-family: "epflulb";
   text-transform: uppercase !important;
   font-size: 3em;
   color: #000;
 }
-/* line 1017, jee.scss */
+/* line 1019, jee.scss */
 #static-wrapper .content h3 {
   font-family: "epflulb";
   font-size: 2em;
   text-transform: uppercase !important;
   color: #8d198f;
 }
-/* line 1024, jee.scss */
+/* line 1026, jee.scss */
 #static-wrapper .content h4 {
   font-size: 1em;
   font-weight: 700;
 }
-/* line 1031, jee.scss */
+/* line 1033, jee.scss */
 #static-wrapper .content p {
   font-family: "open_sans", sans-serif;
   font-weight: 600;
   font-size: 0.85em;
   line-height: 1.5em;
 }
-/* line 1038, jee.scss */
+/* line 1040, jee.scss */
 #static-wrapper .content a {
   text-decoration: underline;
 }
-/* line 1041, jee.scss */
+/* line 1043, jee.scss */
 #static-wrapper .content img.floatleft {
   float: left;
   margin-right: 1em;
 }
-/* line 1042, jee.scss */
+/* line 1044, jee.scss */
 #static-wrapper .content img.floatright {
   float: right;
   margin-left: 1em;
@@ -5245,71 +5247,71 @@ div.messages {
  / __/ / /_/ / /_/ / / / / /___/ _, _/
 /_/    \____/\____/ /_/ /_____/_/ |_|
 */
-/* line 1054, jee.scss */
+/* line 1056, jee.scss */
 #footer {
   position: fixed;
   bottom: 0;
   right: 20px;
   z-index: 900;
 }
-/* line 1059, jee.scss */
+/* line 1061, jee.scss */
 body.chapter-displayed #footer {
   display: none;
 }
-/* line 1063, jee.scss */
+/* line 1065, jee.scss */
 #footer .block {
   display: inline-block;
   vertical-align: top;
   font-size: 0.5em;
 }
-/* line 1067, jee.scss */
+/* line 1069, jee.scss */
 #footer .block p {
   font-size: inherit;
 }
-/* line 1068, jee.scss */
+/* line 1070, jee.scss */
 #footer .block a {
   color: #000;
 }
-/* line 1071, jee.scss */
+/* line 1073, jee.scss */
 #footer .block-menu {
   display: block;
   font-size: inherit;
 }
-/* line 1074, jee.scss */
+/* line 1076, jee.scss */
 #footer .block-menu ul {
   margin: 0;
   padding: 0;
 }
-/* line 1076, jee.scss */
+/* line 1078, jee.scss */
 #footer .block-menu ul li {
   padding: 0;
   display: inline-block;
   list-style: none;
 }
 @media only screen and (max-width: 40em) {
-  /* line 1076, jee.scss */
+  /* line 1078, jee.scss */
   #footer .block-menu ul li {
     margin: 0 0.5em 0.5em 0;
   }
 }
 @media only screen and (min-width: 40.063em) {
-  /* line 1076, jee.scss */
+  /* line 1078, jee.scss */
   #footer .block-menu ul li {
     margin: 0 1em 0 0;
   }
 }
-/* line 1086, jee.scss */
+/* line 1088, jee.scss */
 #footer .block-menu ul li a {
   font-family: "epflulb";
   color: #000;
   text-transform: uppercase;
   font-size: 0.6em;
 }
-/* line 1096, jee.scss */
+/* line 1098, jee.scss */
 #footer p {
   margin: 0;
 }
-/* line 1100, jee.scss */
+/* line 1102, jee.scss */
 #footer #block-block-1 {
   display: none;
 }
@@ -5321,7 +5323,7 @@ body.chapter-displayed #footer {
  / /  / // / ___/ / /___
 /_/  /_/___//____/\____/
 */
-/* line 1109, jee.scss */
+/* line 1111, jee.scss */
 #loader {
   position: absolute;
   top: 50%;
@@ -5338,13 +5340,13 @@ body.chapter-displayed #footer {
   -webkit-transition-property: opacity;
           transition-property: opacity;
 }
-/* line 1120, jee.scss */
+/* line 1122, jee.scss */
 body.loading #loader {
   z-index: 1000;
   opacity: 1;
 }
 
-/* line 1126, jee.scss */
+/* line 1128, jee.scss */
 #fullscreen-btn {
   position: fixed;
   right: 20px;
@@ -5358,13 +5360,13 @@ body.loading #loader {
   background: transparent url("../assets/img/fullscreen-on.png") no-repeat center center;
   background: none, url("../assets/img/fullscreen-on.svg") no-repeat center center;
 }
-/* line 1135, jee.scss */
+/* line 1137, jee.scss */
 .fullscreen #fullscreen-btn {
   background: transparent url("../assets/img/fullscreen-off.png") no-repeat center center;
   background: none, url("../assets/img/fullscreen-off.svg") no-repeat center center;
 }
 
-/* line 1148, jee.scss */
+/* line 1150, jee.scss */
 .bubble-1 {
   position: absolute;
   z-index: 0;
@@ -5377,7 +5379,7 @@ body.loading #loader {
   left: -200px;
 }
 
-/* line 1152, jee.scss */
+/* line 1154, jee.scss */
 .bubble-2 {
   position: absolute;
   z-index: 0;
@@ -5390,7 +5392,7 @@ body.loading #loader {
   right: -400px;
 }
 
-/* line 1157, jee.scss */
+/* line 1159, jee.scss */
 .star {
   position: absolute;
   z-index: 0;
@@ -5403,7 +5405,7 @@ body.loading #loader {
 }
 
 /*Remove Mozilla Firefox Border – Remove Dotted Line Around Link */
-/* line 1167, jee.scss */
+/* line 1169, jee.scss */
 * {
   outline: 0 !important;
 }
@@ -5414,7 +5416,7 @@ body.loading #loader {
  / /_/ / /___/ /_/ / /_/ / /_/ /
 /_____/_____/_____/\____/\____/
 */
-/* line 1176, jee.scss */
+/* line 1178, jee.scss */
 #fps {
   position: fixed;
   bottom: 40px;
@@ -5422,7 +5424,7 @@ body.loading #loader {
   z-index: 1000;
 }
 
-/* line 1182, jee.scss */
+/* line 1184, jee.scss */
 #nav-cursor {
   position: absolute;
   width: 6px;
diff --git a/sites/all/themes/gui/jee/css/jee.scss b/sites/all/themes/gui/jee/css/jee.scss
index 76bd3aa..97240ce 100755
--- a/sites/all/themes/gui/jee/css/jee.scss
+++ b/sites/all/themes/gui/jee/css/jee.scss
@@ -913,25 +913,27 @@ div.messages{
       }
     }
 
-    .field-name-field-partie{
-      // position:absolute;
-      height:60%; width:100%;
-      top:20%; left:0;
-      .field-items{
-       position:relative;
-       top:0; left:0;
-       height:100%; width:auto;
-       // overflow:hidden;
-        .field{
-          position:relative;
-          display:inline-block;
-          .mask{
-            position:absolute;
-            width:100%; height:85%;
-            top:0; left:0;
-            z-index:10;
-            cursor:move;
-            // background-color: rgba(150,250,250,0.2);
+    @media #{$medium-up}{
+      .field-name-field-partie{
+        // position:absolute;
+        height:60%; width:100%;
+        top:20%; left:0;
+        .field-items{
+         position:relative;
+         top:0; left:0;
+         height:100%; width:auto;
+         // overflow:hidden;
+          .field{
+            position:relative;
+            display:inline-block;
+            .mask{
+              position:absolute;
+              width:100%; height:85%;
+              top:0; left:0;
+              z-index:10;
+              cursor:move;
+              // background-color: rgba(150,250,250,0.2);
+            }
           }
         }
       }
diff --git a/sites/all/themes/gui/jee/js/jee.js b/sites/all/themes/gui/jee/js/jee.js
index 3434610..d77c323 100755
--- a/sites/all/themes/gui/jee/js/jee.js
+++ b/sites/all/themes/gui/jee/js/jee.js
@@ -861,14 +861,19 @@ jQuery(document).ready(function($) {
           .each(this.redimVideo.bind(this))
           .each(this.setVidsEvents.bind(this));
 
+
         var marge = (_container.w-this.dimvideo.w)/4;
         this.$vids_container.css({
           width:this.dimvideo.w+marge,//*1.2,
-          height:this.dimvideo.h,
+          // height:this.dimvideo.h,
           marginLeft:marge
         });
 
         if(!_is_mobile){
+          this.$vids_container.css({
+            height:this.dimvideo.h
+          });
+
           // add a mask on top of each iframe to avoid bad interaction with vimeo
           this.$vids.after('<div class="mask"></div>');
           // create the slider with peppermint