mobile responsive

.directory

@@ -1,5 +1,5 @@
 [Dolphin]
-Timestamp=2015,3,17,13,30,24
+Timestamp=2015,4,15,17,6,30
 Version=3
 ViewMode=1
 

sites/all/themes/gui/jee/bower.json

@@ -5,7 +5,8 @@
     "jquery.transit": "~0.9.12",
     "jquery.pep": "~0.6.3",
     "Peppermint": "~1.3.7",
-    "vimeo-jquery-api": "~0.9.3"
+    "vimeo-jquery-api": "~0.9.3",
+    "detectizr": "~2.0.0"
   },
   "version": "7.x-0.1",
   "authors": [

sites/all/themes/gui/jee/bower_components/modernizr/.bower.json

@@ -1,14 +1,14 @@
 {
   "name": "modernizr",
   "homepage": "https://github.com/Modernizr/Modernizr",
-  "version": "2.8.3",
+  "version": "2.7.1",
-  "_release": "2.8.3",
+  "_release": "2.7.1",
   "_resolution": {
     "type": "version",
-    "tag": "v2.8.3",
+    "tag": "v2.7.1",
-    "commit": "d6bb30c0f12ebb3ddd01e90b0bf435e1c34e6f11"
+    "commit": "54252c10fc7d3b8b17cf458c401ca904dc354d8c"
   },
   "_source": "git://github.com/Modernizr/Modernizr.git",
-  "_target": ">= 2.7.2",
+  "_target": "2.7.1",
   "_originalSource": "modernizr"
 }

sites/all/themes/gui/jee/bower_components/modernizr/feature-detects/css-shapes.js

@@ -1,4 +0,0 @@
-
-// http://html.adobe.com/webplatform/layout/shapes
-
-Modernizr.addTest('shapes', Modernizr.testAllProps('shapeOutside', 'content-box', true));

sites/all/themes/gui/jee/bower_components/modernizr/feature-detects/forms-validation.js

@@ -7,56 +7,77 @@
 (function(document, Modernizr){
 
 
-  Modernizr.formvalidationapi = false;
+Modernizr.formvalidationapi = false;
-  Modernizr.formvalidationmessage = false;
+Modernizr.formvalidationmessage = false;
 
-  Modernizr.addTest('formvalidation', function() {
+Modernizr.addTest('formvalidation', function(){
     var form = document.createElement('form');
-    if ( !('checkValidity' in form) || !('addEventListener' in form) ) {
+    if ( !('checkValidity' in form) ) {
-      return false;
+        return false;
     }
-    if ('reportValidity' in form) {
+    var body = document.body,
-      return true;
-    }
-    var invalidFired = false;
-    var input;
 
-    Modernizr.formvalidationapi =  true;
+    html = document.documentElement,
+
+    bodyFaked = false,
+
+    invaildFired = false,
+
+    input;
+
+    Modernizr.formvalidationapi = true;
 
     // Prevent form from being submitted
-    form.addEventListener('submit', function(e) {
+    form.onsubmit = function(e) {
-      //Opera does not validate form, if submit is prevented
+        //Opera does not validate form, if submit is prevented
-      if ( !window.opera ) {
+        if ( !window.opera ) {
-        e.preventDefault();
+            e.preventDefault();
-      }
+        }
-      e.stopPropagation();
+        e.stopPropagation();
-    }, false);
+    };
 
-    // Calling form.submit() doesn't trigger interactive validation,
+    // Calling form.submit() doesn't trigger interactive validation, 
     // use a submit button instead
     //older opera browsers need a name attribute
     form.innerHTML = '<input name="modTest" required><button></button>';
 
-    Modernizr.testStyles('#modernizr form{position:absolute;top:-99999em}', function( node ) {
+    // FF4 doesn't trigger "invalid" event if form is not in the DOM tree
-      node.appendChild(form);
+    // Chrome throws error if invalid input is not visible when submitting 
+    form.style.position = 'absolute';
+    form.style.top = '-99999em';
 
-      input = form.getElementsByTagName('input')[0];
+    // We might in <head> in which case we need to create body manually
+    if ( !body ) {
+        bodyFaked = true;
+        body = document.createElement('body');
+        //avoid crashing IE8, if background image is used
+        body.style.background = "";
+        html.appendChild(body);
+    }
 
-      // Record whether "invalid" event is fired
+    body.appendChild(form);
-      input.addEventListener('invalid', function(e) {
+
-        invalidFired = true;
+    input = form.getElementsByTagName('input')[0];	
+
+    // Record whether "invalid" event is fired
+    input.oninvalid = function(e) {
+        invaildFired = true;
         e.preventDefault();
         e.stopPropagation();
-      }, false);
+    };
 
-      //Opera does not fully support the validationMessage property
+    //Opera does not fully support the validationMessage property
-      Modernizr.formvalidationmessage = !!input.validationMessage;
+    Modernizr.formvalidationmessage = !!input.validationMessage;
 
-      // Submit form by clicking submit button
+    // Submit form by clicking submit button
-      form.getElementsByTagName('button')[0].click();
+    form.getElementsByTagName('button')[0].click();
-    });
 
-    return invalidFired;
+    // Don't forget to clean up
-  });
+    body.removeChild(form);
+    bodyFaked && html.removeChild(body);
 
-})(document, window.Modernizr);
+    return invaildFired;
+});
+
+
+})(document, window.Modernizr);

sites/all/themes/gui/jee/bower_components/modernizr/feature-detects/notification.js

@@ -7,4 +7,4 @@
 // window.Notification only exist in the draft specs 
 //	http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html#idl-if-Notification
 
-Modernizr.addTest('notification', 'Notification' in window && 'permission' in window.Notification && 'requestPermission' in window.Notification);
+Modernizr.addTest('notification', !!Modernizr.prefixed('Notifications', window));

sites/all/themes/gui/jee/bower_components/modernizr/feature-detects/websockets-binary.js

@@ -1,20 +1,7 @@
 
 // binaryType is truthy if there is support.. returns "blob" in new-ish chrome.
 // plus.google.com/115535723976198353696/posts/ERN6zYozENV
-// github.com/Modernizr/Modernizr/issues/370
 
-Modernizr.addTest('websocketsbinary', function() {
+Modernizr.addTest('websocketsbinary', 
-  var protocol = 'https:'==location.protocol?'wss':'ws',
+  !!(window.WebSocket && (new WebSocket('ws://.')).binaryType)
-  protoBin;
+);
-
-  if('WebSocket' in window) {
-    if( protoBin = 'binaryType' in WebSocket.prototype ) {
-      return protoBin;
-    }
-    try {
-      return !!(new WebSocket(protocol+'://.').binaryType);
-    } catch (e){}
-  }
-
-  return false;
-});

sites/all/themes/gui/jee/bower_components/modernizr/feature-detects/workers-blobworkers.js

@@ -7,60 +7,42 @@
 
 (function(){
   try {
+
     // we're avoiding using Modernizr._domPrefixes as the prefix capitalization on
     // these guys are notoriously peculiar.
-    var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.OBlobBuilder || window.BlobBuilder;
+    var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.OBlobBuilder || window.BlobBuilder,
-    var URL         = window.MozURL || window.webkitURL || window.MSURL || window.OURL || window.URL;
+        URL         = window.MozURL || window.webkitURL || window.MSURL || window.OURL || window.URL;
+
     var data    = 'Modernizr',
-        blob,
+        bb      = new BlobBuilder();
-        bb,
-        worker,
-        url,
-        timeout,
-        scriptText = 'this.onmessage=function(e){postMessage(e.data)}';
 
-    try {
+    bb.append('this.onmessage=function(e){postMessage(e.data)}');
-      blob = new Blob([scriptText], {type:'text/javascript'});
-    } catch(e) {
-      // we'll fall back to the deprecated BlobBuilder
-    }
-    if (!blob) {
-      bb = new BlobBuilder();
-      bb.append(scriptText);
-      blob = bb.getBlob();
-    }
 
-    url = URL.createObjectURL(blob);
+    var url     = URL.createObjectURL(bb.getBlob()),
-    worker = new Worker(url);
+        worker  = new Worker(url);
+
+    bb = null;
 
     worker.onmessage = function(e) {
+      worker.terminate();
+      URL.revokeObjectURL(url);
       Modernizr.addTest('blobworkers', data === e.data);
-      cleanup();
+      worker = null;
     };
 
     // Just in case...
-    worker.onerror = fail;
+    worker.onerror = function() {
-    timeout = setTimeout(fail, 200);
+      Modernizr.addTest('blobworkers', false);
+      worker = null;
+    };
+
+    setTimeout(function() {
+        Modernizr.addTest('blobworkers', false);
+    }, 200);
 
     worker.postMessage(data);
+
   } catch (e) {
-    fail();
-  }
-
-  function fail() {
     Modernizr.addTest('blobworkers', false);
-    cleanup();
-  }
-
-  function cleanup() {
-    if (url) {
-      URL.revokeObjectURL(url);
-    }
-    if (worker) {
-      worker.terminate();
-    }
-    if (timeout) {
-      clearTimeout(timeout);
-    }
   }
 }());

sites/all/themes/gui/jee/bower_components/modernizr/grunt.js

@@ -4,7 +4,7 @@ module.exports = function( grunt ) {
 
     grunt.initConfig({
         meta: {
-          version: '2.8.3',
+          version: '2.7.1',
           banner: '/*!\n' +
             ' * Modernizr v<%= meta.version %>\n' +
             ' * www.modernizr.com\n *\n' +

sites/all/themes/gui/jee/bower_components/modernizr/modernizr.js

@@ -1,5 +1,5 @@
 /*!
- * Modernizr v2.8.3
+ * Modernizr v2.7.1
  * www.modernizr.com
  *
  * Copyright (c) Faruk Ates, Paul Irish, Alex Sexton
@@ -24,7 +24,7 @@
 
 window.Modernizr = (function( window, document, undefined ) {
 
-    var version = '2.8.3',
+    var version = '2.7.1',
 
     Modernizr = {},
 
@@ -156,7 +156,7 @@ window.Modernizr = (function( window, document, undefined ) {
 
       var matchMedia = window.matchMedia || window.msMatchMedia;
       if ( matchMedia ) {
-        return matchMedia(mq) && matchMedia(mq).matches || false;
+        return matchMedia(mq).matches;
       }
 
       var bool;
@@ -605,7 +605,7 @@ window.Modernizr = (function( window, document, undefined ) {
 
     // Note, Android < 4 will pass this test, but can only animate
     //   a single property at a time
-    //   goo.gl/v3V4Gp
+    //   daneden.me/2011/12/putting-up-with-androids-bullshit/
     tests['cssanimations'] = function() {
         return testPropsAll('animationName');
     };

sites/all/themes/gui/jee/css/jee.scss

@@ -35,6 +35,7 @@ $column-gutter: rem-calc(20);
  background: transparent url('../assets/img/#{$img}.png') $r $x $y;
  background: none, url('../assets/img/#{$img}.svg') $r $x $y;
 }
+
 /*
     ___    ____  ____
    /   |  / __ \/ __ \
@@ -44,8 +45,8 @@ $column-gutter: rem-calc(20);
 */
 html{
   position:relative;
-  // overflow:hidden;
+  height:100%; width:100%;
-  // height:100%;
+  overflow:hidden;
 }
 
 body{
@@ -113,11 +114,20 @@ $animeNodesDuration:3s;
   z-index:0;
   position:absolute;
   overflow:hidden;
-  width:700px;
+  @media #{$small-only}{
-  height:310px;
+    width:200px;
-  top:50%; left:50%;
+    height:88px;
-  margin-left:-350px;
+    top:50%; left:50%;
-  margin-top:-155px;
+    margin-left:-100px;
+    margin-top:-44px;
+  }
+  @media #{$medium-up} {
+    width:700px;
+    height:310px;
+    top:50%; left:50%;
+    margin-left:-350px;
+    margin-top:-155px;
+  }
   // transition-property: "transform";
   // transition-duration: 0.2s;
   // transition-timing-function:ease-out;
@@ -138,12 +148,14 @@ $animeNodesDuration:3s;
     }
     &:before{
       @include bg-svg-png('logo');
+      background-size: contain;
       animation: introLogo $animeLogoDuration linear 0s;
       animation-fill-mode: forwards;
     }
     &:after{
       // background: transparent url('../assets/img/logo-blured.svg') no-repeat center center;
       @include bg-svg-png('logo-blured');
+      background-size: contain;
       animation: introLogoBlured $animeLogoDuration linear 0s;
       animation-fill-mode: forwards;
     }
@@ -152,6 +164,7 @@ $animeNodesDuration:3s;
   h2{
     // background: transparent url('../assets/img/slogan.svg') no-repeat center center;
     @include bg-svg-png('slogan');
+    background-size: contain;
     position:absolute;
     width:100%; height:100%;
     a{display:block;margin-top:-500%;}
@@ -188,6 +201,18 @@ div.messages{
   |   --|  |  |  |__|  |  |    -|__   |  | __ -|_   _|  | | | |  |  |  |  |   __|
   |_____|_____|_____|_____|__|__|_____|  |_____| |_|    |_|___|_____|____/|_____|
   */
+
+  @mixin title-size($w, $h) {
+    $factor: 0.5;
+    @media #{$small-only} {
+      width:$w*$factor; height:$h*$factor;
+      margin:0 $w*(1-$factor)*0.4;
+    }
+    @media #{$medium-up} {
+      width:$w; height:$h;
+    }
+  }
+
   //SOL
   #node-2{
     &.node-teaser{
@@ -195,7 +220,11 @@ div.messages{
       &, a{color:$SOL-col-txt;}
       h2.node-title{
         &,a{color:$SOL-color;}
-        a{@include bg-svg-png('title-SOL'); width:170px; height:35px;}
+        a{
+          @include bg-svg-png('title-SOL');
+          @include title-size(170px, 35px);
+          background-size: contain;
+        }
       }
       .field-name-field-vignette{@include bg-svg-png('shadow-sol');}
       .line{background-color:$SOL-col-active;}
@@ -214,7 +243,11 @@ div.messages{
       &, a{color:$DPH-col-txt;}
       h2.node-title{
         &,a{color:$DPH-color;}
-        a{@include bg-svg-png('title-DPH'); width:180px; height:80px;}
+        a{
+          @include bg-svg-png('title-DPH');
+          @include title-size(180px, 80px);
+          background-size: contain;
+        }
       }
       .field-name-field-vignette{@include bg-svg-png('shadow-dph');}
       .line{background-color:$DPH-col-active;}
@@ -233,7 +266,11 @@ div.messages{
       &, a{color:$SUB-col-txt;}
       h2.node-title{
         &,a{color:$SUB-color;}
-        a{@include bg-svg-png('title-SUB'); width:200px; height:35px;}
+        a{
+          @include bg-svg-png('title-SUB');
+          @include title-size(200px, 35px);
+          background-size: contain;
+        }
       }
       .field-name-field-vignette{@include bg-svg-png('shadow-sub');}
       .line{background-color:$SUB-col-active;}
@@ -252,7 +289,11 @@ div.messages{
       &, a{color:$BC-col-txt;}
       h2.node-title{
         &,a{color:$BC-color;}
-        a{@include bg-svg-png('title-BC'); width:120px; height:45px;}
+        a{
+          @include bg-svg-png('title-BC');
+          @include title-size(120px, 45px);
+          background-size: contain;
+        }
        }
       .field-name-field-vignette{@include bg-svg-png('shadow-bc');}
       .line{background-color:$BC-col-active;}
@@ -271,7 +312,11 @@ div.messages{
       &, a{color:$OPP-col-txt;}
       h2.node-title{
         &,a{color:$OPP-color;}
-        a{@include bg-svg-png('title-OPP'); width:245px; height:95px;}
+        a{
+          @include bg-svg-png('title-OPP');
+          @include title-size(245px, 95px);
+          background-size: contain;
+        }
       }
       .field-name-field-vignette{@include bg-svg-png('shadow-opp');}
       .line{background-color:$OPP-col-active;}
@@ -290,7 +335,11 @@ div.messages{
       &, a{color:$DUB-col-txt;}
       h2.node-title{
         &,a{color:$DUB-color;}
-        a{@include bg-svg-png('title-DUB'); width:195px; height:65px;}
+        a{
+          @include bg-svg-png('title-DUB');
+          @include title-size(195px, 65px);
+          background-size: contain;
+        }
       }
       .field-name-field-vignette{@include bg-svg-png('shadow-dub');}
       .line{background-color:$DUB-col-active;}
@@ -309,7 +358,11 @@ div.messages{
       &, a{color:$JUSO-col-txt;}
       h2.node-title{
         &,a{color:$JUSO-color;}
-        a{@include bg-svg-png('title-JUSO'); width:200px; height:65px; }
+        a{
+          @include bg-svg-png('title-JUSO');
+          @include title-size(200px, 65px);
+          background-size: contain;
+        }
       }
       .field-name-field-vignette{@include bg-svg-png('shadow-juso');}
       .line{background-color:$JUSO-col-active;}
@@ -369,7 +422,7 @@ div.messages{
         z-index:5;
       }
     }
-    >.content{position:relative;}
+    >.content{position:relative; left:0;}
     .texts{
       opacity:0; height:1px; overflow:hidden;
       transition:1s ease-out;
@@ -533,7 +586,11 @@ div.messages{
       }
     }
 
-    .field-name-field-partie{clear:both; padding-top:1em;}
+    .field-name-field-partie{clear:both;
+      @media #{$medium-up} {
+        padding-top:1em;
+      }
+    }
 
 
     $shadow-size:3.5em;
@@ -591,6 +648,7 @@ div.messages{
     position:absolute;
     top:0; left:0;
     width:100%; height:100%;
+    overflow:hidden;
     z-index: -1;
     opacity:0;
     transition:2s ease-out;
@@ -624,7 +682,15 @@ div.messages{
       .field-name-field-partager .field-label{
         color:$SOL-col-active;
       }
-      h2.node-title{@include bg-svg-png('title-SOL-blur');}
+      @media #{$small-only} {
+        h2.node-title{
+          @include bg-svg-png('title-SOL-activ');
+          height:1.5em;
+        }
+      }
+      @media #{$medium-up} {
+        h2.node-title{@include bg-svg-png('title-SOL-blur');}
+      }
     }
     // DPH
     #node-3{
@@ -635,7 +701,15 @@ div.messages{
       .field-name-field-partager .field-label{
         color:$DPH-col-active;
       }
-      h2.node-title{@include bg-svg-png('title-DPH-blur');}
+      @media #{$small-only} {
+        h2.node-title{
+          @include bg-svg-png('title-DPH-activ');
+          height:5em;
+        }
+      }
+      @media #{$medium-up} {
+        h2.node-title{@include bg-svg-png('title-DPH-blur');}
+      }
     }
     // SUB
     #node-4{
@@ -646,7 +720,15 @@ div.messages{
       .field-name-field-partager .field-label{
         color:$SUB-col-active;
       }
-      h2.node-title{@include bg-svg-png('title-SUB-blur');}
+      @media #{$small-only} {
+        h2.node-title{
+          @include bg-svg-png('title-SUB-activ');
+          height:1.5em;
+        }
+      }
+      @media #{$medium-up} {
+        h2.node-title{@include bg-svg-png('title-SUB-blur');}
+      }
     }
     // BC
     #node-5{
@@ -657,7 +739,15 @@ div.messages{
       .field-name-field-partager .field-label{
         color:$BC-col-active;
       }
-      h2.node-title{@include bg-svg-png('title-BC-blur');}
+      @media #{$small-only} {
+        h2.node-title{
+          @include bg-svg-png('title-BC-activ');
+          height:4em;
+        }
+      }
+      @media #{$medium-up} {
+        h2.node-title{@include bg-svg-png('title-BC-blur');}
+      }
     }
     // OPP
     #node-6{
@@ -668,7 +758,15 @@ div.messages{
       .field-name-field-partager .field-label{
         color:$OPP-col-active;
       }
-      h2.node-title{@include bg-svg-png('title-OPP-blur');}
+      @media #{$small-only} {
+        h2.node-title{
+          @include bg-svg-png('title-OPP-activ');
+          height:6em;
+        }
+      }
+      @media #{$medium-up} {
+        h2.node-title{@include bg-svg-png('title-OPP-blur');}
+      }
     }
     // DUB
     #node-7{
@@ -679,7 +777,15 @@ div.messages{
       .field-name-field-partager .field-label{
         color:$DUB-col-active;
       }
-      h2.node-title{@include bg-svg-png('title-DUB-blur');}
+      @media #{$small-only} {
+        h2.node-title{
+          @include bg-svg-png('title-DUB-activ');
+          height:5em;
+        }
+      }
+      @media #{$medium-up} {
+        h2.node-title{@include bg-svg-png('title-DUB-blur');}
+      }
     }
     // JUSO
     #node-8{
@@ -690,7 +796,15 @@ div.messages{
       .field-name-field-partager .field-label{
         color:$JUSO-col-active;
       }
-      h2.node-title{@include bg-svg-png('title-JUSO-blur');}
+      @media #{$small-only} {
+        h2.node-title{
+          @include bg-svg-png('title-JUSO-activ');
+          height:3em;
+        }
+      }
+      @media #{$medium-up} {
+        h2.node-title{@include bg-svg-png('title-JUSO-blur');}
+      }
     }
 
     /*
@@ -705,6 +819,10 @@ div.messages{
       position:relative;
       height:100%; width:100%;
       a{color:inherit;}
+
+      @media #{$small-only} {
+        overflow-y:auto;
+      }
     }
 
     .node-title{
@@ -714,24 +832,47 @@ div.messages{
       text-align: center;
       // max-width: 8.5em;
       line-height: 0.85;
-      font-size: 2.268em;
+
-      position:absolute; display:block;
+      @media #{$small-only} {
-      top:0; left:0; width:100%; height:100%;
+        width:80%;
-      background-size: contain!important;
+        margin:2em auto 1em;
-      text-indent: -5000px;
+        background-size: contain!important;
-      z-index:-1;
+        background-position: center center;
-      opacity:0.4;
+        text-indent: -5000px;
+      }
+
+      @media #{$medium-up} {
+        font-size: 2.268em;
+        position:absolute; display:block;
+        top:0; left:0; width:100%; height:100%;
+        background-size: contain!important;
+        text-indent: -5000px;
+        z-index:-1;
+        opacity:0.4;
+      }
+
     }
 
-    .node>.field, .node>.block{
+    @media #{$medium-up} {
-      position:absolute;
+      .node>.field, .node>.block{
+        position:absolute;
+      }
     }
 
     .field-type-text-long, .field-type-text{
       background-color: rgba(255,255,255,0.9);
-      min-height:5em; width:19em; padding:1em;
+      min-height:5em; padding:1em;
-      z-index:10;
+
-      cursor:move;
+      @media #{$small-only} {
+        width:80%;
+        margin:1em auto;
+      }
+
+      @media #{$medium-up} {
+        width:19em;
+        z-index:10;
+        cursor:move;
+      }
 
       .field-label{
         text-transform: uppercase;
@@ -751,6 +892,7 @@ div.messages{
         text-decoration: underline;
       }
     }
+
     .field-name-field-dbatre{
       left:60em;
       ul{
@@ -771,8 +913,8 @@ div.messages{
       }
     }
 
-
     .field-name-field-partie{
+      // position:absolute;
       height:60%; width:100%;
       top:20%; left:0;
       .field-items{
@@ -806,9 +948,19 @@ div.messages{
 */
 #static-wrapper{
   position:absolute;
-  top:15%; bottom:0; right:20px;
+
-  width:80%; max-width:55em;
+  @media #{$small-only} {
-  z-index: -1;
+    top:10%;
+    bottom:0; right:0;
+    width:100%;
+    z-index: -1;
+  }
+  @media #{$medium-up} {
+    top:15%; bottom:0; right:20px;
+    width:80%; max-width:55em;
+    z-index: -1;
+  }
+
   background-color: #fff;
 
   opacity:0;
@@ -823,16 +975,29 @@ div.messages{
 
   >.close{
     position:absolute;
-    top:20px; right:20px;
+    @media #{$small-only} {
-    z-index: 500;
+      top:10px; right:10px;
-    width:25px; height:25px;
+      z-index: 500;
+      width:15px; height:15px;
+    }
+    @media #{$medium-up} {
+      top:20px; right:20px;
+      z-index: 500;
+      width:25px; height:25px;
+    }
     cursor:pointer;
     @include bg-svg-png('close');
   }
 
   >.inner{
-    padding:5em 7em;
+    @media #{$small-only} {
-    width:100%; height:100%; overflow:hidden;
+      padding:1em 1em 1.5em;
+      width:100%; height:100%; overflow:hidden;
+    }
+    @media #{$medium-up} {
+      padding:5em 7em;
+      width:100%; height:100%; overflow:hidden;
+    }
 
     >.node{
       width:100%; height:100%; overflow-y:auto; overflow-x:hidden;
@@ -909,7 +1074,13 @@ div.messages{
     ul{
       margin:0; padding:0;
       li{
-        margin:0 1em 0 0; padding:0;
+        @media #{$small-only} {
+          margin:0 0.5em 0.5em 0;
+        }
+        @media #{$medium-up} {
+          margin:0 1em 0 0;
+        }
+        padding:0;
         display:inline-block;
         list-style: none;
         a{

sites/all/themes/gui/jee/js/jee.js

@@ -22,6 +22,7 @@ jQuery(document).ready(function($) {
       _$nav_cursor;
 
   var _$body = $('body'),
+      _is_mobile = $('html').is('.mobile'),
       _$header = $("#header"),
       _$chapitres = $('.node-chapitre', '#main'),
       _chapitres_len = _$chapitres.length,
@@ -484,8 +485,15 @@ jQuery(document).ready(function($) {
         //http://technify.me/user-experience/javascript/jquery/trigger-custom-events-with-jquery/
         // click to preview chapter
         // $('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', this.$e)
+
         this.$e
-          .on('click',this.preview.bind(this))
+          .on('click', this, function(e){
+            if(_is_mobile){
+              e.data.loadNode(e);
+            }else{
+              e.data.preview(e);
+            }
+          });
           // .on('click', this, function(e){
           //   // e.stopImmediatePropagation();
           //   console.log('click on chapter');
@@ -771,14 +779,16 @@ jQuery(document).ready(function($) {
         console.log('Chapter :: displayNode '+this.nid);
 
         // place text blocks
-        this.texts_pos = shuffleArray([1,2,3,4]);
+        if(!_is_mobile){
-        this.$blocks
+          this.texts_pos = shuffleArray([1,2,3,4]);
-          .each(this.placeText.bind(this))
+          this.$blocks
-          .pep({
+            .each(this.placeText.bind(this))
-            allowDragEventPropagation:false,
+            .pep({
-            disableSelect:true,
+              allowDragEventPropagation:false,
-            velocityMultiplier:1
+              disableSelect:true,
-          });
+              velocityMultiplier:1
+            });
+        }
 
         // build video player
         this.buildVideos();
@@ -846,10 +856,13 @@ jQuery(document).ready(function($) {
           this.dimvideo.h = (this.dimvideo.w * parseInt($first_vid.attr("height")))/parseInt($first_vid.attr("width"));
         }
 
-        // redim each iframe to fit
+
         // add a mask on top of each iframe to avoid bad interaction with vimeo
+        if(_is_mobile)
+          this.$vids.after('<div class="mask"></div>');
+
+        // redim each iframe to fit
         this.$vids
-          .after('<div class="mask"></div>')
           .each(this.redimVideo.bind(this))
           .each(this.setVidsEvents.bind(this));
 

sites/all/themes/gui/jee/preprocess/html.pre.php

@@ -31,7 +31,7 @@ $heads['viewport'] = array(
   '#tag' => 'meta',
   '#attributes' => array(
     'name' => 'viewport',
-    'content' => 'width=device-width,initial-scale=1,maximum-scale=1',
+    'content' => 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
   ),
 );
 

sites/all/themes/gui/jee/templates/html.tpl.php

@@ -69,7 +69,8 @@
 	  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
 	       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
 	       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
-	  <script src="<?php print $theme_path ?>/bower_components/modernizr/modernizr.js" type="text/javascript"></script>
+    <script src="<?php print $theme_path ?>/bower_components/modernizr/modernizr.js" type="text/javascript"></script>
+    <script src="<?php print $theme_path ?>/bower_components/detectizr/src/detectizr.js" type="text/javascript"></script>
 
 
 		<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->