responive header and footer ready (remains centering entree block

sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js

@@ -1,2 +1,20 @@
+console.log('EDLP THEME HISTORY.js');
+// var edlp is provided by edlp_ajax.module file
+if(edlp.redirect){
+  console.log('history redirect', edlp);
+  console.log('window.location', window.location);
+  // window.localStorage.setItem('edlp_origin_path', edlp.sys_path.replace(/^\//, ''));
+  edlp.sys_path = edlp.sys_path.replace(/^\//, '');
 
-void 0;if(edlp.redirect){void 0;void 0;edlp.sys_path=edlp.sys_path.replace(/^\//,'');edlp.url=window.location.pathname;edlp.hash=window.location.hash;window.localStorage.setItem('edlp_origin',JSON.stringify(edlp));window.location.replace(window.location.origin+'/'+edlp.lang_code);}else{void 0;}
+  // window.localStorage.setItem('edlp_origin_url', window.location.pathname);
+  edlp.url = window.location.pathname;
+
+  // window.localStorage.setItem('edlp_origin_hash', window.location.hash);
+  edlp.hash = window.location.hash;
+
+  window.localStorage.setItem('edlp_origin', JSON.stringify(edlp));
+  // redirect to home
+  window.location.replace(window.location.origin+'/'+edlp.lang_code);
+}else{
+  console.log('history do not redirect');
+}

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1072,7 +1072,9 @@ header[role="banner"] {
 
 #block-mainnavigation {
   float: right;
-  margin-top: 25px; }
+  margin-top: 25px;
+  z-index: 21;
+  position: relative; }
   #block-mainnavigation ul {
     margin: 0;
     padding: 0;
@@ -1118,6 +1120,17 @@ header[role="banner"] {
     transform: rotate(359deg); } }
         #block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a.is-active-trail:before, #block-mainnavigation ul li a:hover:before {
           background-color: red; }
+  @media only screen and (max-width: 1280px) {
+    #block-mainnavigation {
+      margin-top: 15px; }
+      #block-mainnavigation ul li {
+        display: block; }
+        #block-mainnavigation ul li a {
+          font-size: 0.756em;
+          font-weight: normal;
+          line-height: 1.4; }
+      #block-mainnavigation ul li:first-of-type {
+        display: none; } }
 
 .block-language {
   float: right;
@@ -1149,6 +1162,17 @@ header[role="banner"] {
       .block-language ul li.is-active a:before, .block-language ul li:hover a:before {
         border-color: red;
         background-color: red; }
+  @media only screen and (max-width: 1280px) {
+    .block-language {
+      margin-top: 15px;
+      margin-left: 0.5em;
+      border-left: 1px solid red; }
+      .block-language ul li {
+        display: block; }
+        .block-language ul li a {
+          font-size: 0.756em;
+          font-weight: normal;
+          line-height: 1.4; } }
 
 #corpus-map {
   opacity: 0; }
@@ -1421,11 +1445,13 @@ main[role="main"] span.close-col-btn {
 
 #audio-player {
   position: absolute;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   top: 0;
   left: 0;
   padding-left: 0.7em;
   height: 100%;
-  min-width: 300px;
+  min-width: 700px;
   z-index: 20;
   opacity: 0;
   pointer-events: none;
@@ -1505,6 +1531,7 @@ main[role="main"] span.close-col-btn {
     height: 100%; }
   #audio-player .cartel {
     position: relative;
+    width: calc(100% - 260px);
     margin-left: 1em;
     background-color: white;
     opacity: 1;
@@ -1520,93 +1547,95 @@ main[role="main"] span.close-col-btn {
       position: relative; }
     #audio-player .cartel .actions {
       width: 1.5em; }
-    #audio-player .cartel .cartels .first-cartel .entrees {
-      white-space: nowrap;
-      font-size: 0.5em;
-      line-height: 0;
-      letter-spacing: 0px; }
-      #audio-player .cartel .cartels .first-cartel .entrees span {
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        background-color: black;
-        margin-right: 2px; }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='134'] {
-          background-color: var(--e-col-134); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='121'] {
-          background-color: var(--e-col-121); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='125'] {
-          background-color: var(--e-col-125); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='119'] {
-          background-color: var(--e-col-119); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='132'] {
-          background-color: var(--e-col-132); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='122'] {
-          background-color: var(--e-col-122); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='129'] {
-          background-color: var(--e-col-129); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='120'] {
-          background-color: var(--e-col-120); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='130'] {
-          background-color: var(--e-col-130); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='118'] {
-          background-color: var(--e-col-118); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='127'] {
-          background-color: var(--e-col-127); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='133'] {
-          background-color: var(--e-col-133); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='128'] {
-          background-color: var(--e-col-128); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='124'] {
-          background-color: var(--e-col-124); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='116'] {
-          background-color: var(--e-col-116); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='117'] {
-          background-color: var(--e-col-117); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='131'] {
-          background-color: var(--e-col-131); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='126'] {
-          background-color: var(--e-col-126); }
-        #audio-player .cartel .cartels .first-cartel .entrees span[tid='123'] {
-          background-color: var(--e-col-123); }
-    #audio-player .cartel .cartels .first-cartel h2.node-title {
-      margin: 0.2em 0 0;
-      font-size: 0.9em;
-      font-weight: 600; }
-    #audio-player .cartel .cartels .first-cartel p {
-      margin: 0;
-      font-size: 0.756em; }
-    #audio-player .cartel .cartels .second-cartel {
-      position: absolute;
-      top: 0;
-      left: 0;
-      background-color: white;
-      height: 100%;
-      min-width: 100%;
-      opacity: 0;
-      -webkit-transition: opacity 0.2s ease-in-out;
-      transition: opacity 0.2s ease-in-out;
-      white-space: nowrap; }
-      #audio-player .cartel .cartels .second-cartel > * {
-        display: inline-block;
-        vertical-align: top;
-        white-space: normal; }
-      #audio-player .cartel .cartels .second-cartel .col-left a {
-        display: block;
-        font-size: 0.82em;
+    #audio-player .cartel .cartels {
+      width: calc(100% - 1.5em); }
+      #audio-player .cartel .cartels .first-cartel .entrees {
+        white-space: nowrap;
+        font-size: 0.5em;
+        line-height: 0;
+        letter-spacing: 0px; }
+        #audio-player .cartel .cartels .first-cartel .entrees span {
+          display: inline-block;
+          width: 6px;
+          height: 6px;
+          background-color: black;
+          margin-right: 2px; }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='134'] {
+            background-color: var(--e-col-134); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='121'] {
+            background-color: var(--e-col-121); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='125'] {
+            background-color: var(--e-col-125); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='119'] {
+            background-color: var(--e-col-119); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='132'] {
+            background-color: var(--e-col-132); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='122'] {
+            background-color: var(--e-col-122); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='129'] {
+            background-color: var(--e-col-129); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='120'] {
+            background-color: var(--e-col-120); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='130'] {
+            background-color: var(--e-col-130); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='118'] {
+            background-color: var(--e-col-118); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='127'] {
+            background-color: var(--e-col-127); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='133'] {
+            background-color: var(--e-col-133); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='128'] {
+            background-color: var(--e-col-128); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='124'] {
+            background-color: var(--e-col-124); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='116'] {
+            background-color: var(--e-col-116); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='117'] {
+            background-color: var(--e-col-117); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='131'] {
+            background-color: var(--e-col-131); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='126'] {
+            background-color: var(--e-col-126); }
+          #audio-player .cartel .cartels .first-cartel .entrees span[tid='123'] {
+            background-color: var(--e-col-123); }
+      #audio-player .cartel .cartels .first-cartel h2.node-title {
+        margin: 0.2em 0 0;
+        font-size: 0.9em;
         font-weight: 600; }
-      #audio-player .cartel .cartels .second-cartel .col-right {
-        border-left: 1px solid #1A1A1A;
-        margin-left: 5px;
-        padding-left: 5px; }
-        #audio-player .cartel .cartels .second-cartel .col-right h3 {
+      #audio-player .cartel .cartels .first-cartel p {
+        margin: 0;
+        font-size: 0.756em; }
+      #audio-player .cartel .cartels .second-cartel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: white;
+        height: 100%;
+        min-width: 100%;
+        opacity: 0;
+        -webkit-transition: opacity 0.2s ease-in-out;
+        transition: opacity 0.2s ease-in-out;
+        white-space: nowrap; }
+        #audio-player .cartel .cartels .second-cartel > * {
+          display: inline-block;
+          vertical-align: top;
+          white-space: normal; }
+        #audio-player .cartel .cartels .second-cartel .col-left a {
+          display: block;
           font-size: 0.82em;
-          margin: 0; }
-        #audio-player .cartel .cartels .second-cartel .col-right p {
-          font-size: 0.756em;
-          margin: 0; }
-          #audio-player .cartel .cartels .second-cartel .col-right p span.cat {
-            font-weight: 600; }
+          font-weight: 600; }
+        #audio-player .cartel .cartels .second-cartel .col-right {
+          border-left: 1px solid #1A1A1A;
+          margin-left: 5px;
+          padding-left: 5px; }
+          #audio-player .cartel .cartels .second-cartel .col-right h3 {
+            font-size: 0.82em;
+            margin: 0; }
+          #audio-player .cartel .cartels .second-cartel .col-right p {
+            font-size: 0.756em;
+            margin: 0; }
+            #audio-player .cartel .cartels .second-cartel .col-right p span.cat {
+              font-weight: 600; }
     #audio-player .cartel:hover .second-cartel {
       opacity: 1; }
     #audio-player .cartel article:not(.has-second-cartel) .second-cartel {
@@ -2322,6 +2351,17 @@ footer {
     footer > .wrapper .region-footer-right {
       min-width: 12%;
       text-align: right; }
+    @media only screen and (max-width: 1280px) {
+      footer > .wrapper .region-footer-left {
+        width: 9%; }
+      footer > .wrapper .region-footer-center {
+        width: 80%;
+        overflow: hidden;
+        text-align: center; }
+      footer > .wrapper .region-footer-right {
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+        min-width: 5%; } }
   footer #block-footer {
     display: inline-block;
     margin-bottom: 1em; }
@@ -2359,6 +2399,19 @@ footer {
   to {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg); } }
+    @media only screen and (max-width: 1280px) {
+      footer #block-footer {
+        margin-top: 15px; }
+        footer #block-footer ul li {
+          display: block;
+          margin-left: 0 !important;
+          padding: 0;
+          line-height: 0.6; }
+          footer #block-footer ul li a {
+            font-size: 0.756em;
+            font-weight: normal;
+            line-height: 1.4;
+            padding: 0; } }
   footer nav#block-productions.block-menu {
     display: inline-block; }
     footer nav#block-productions.block-menu ul {

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -27,11 +27,13 @@
       if(!drupalSettings.path.isFront)
         return;
 
-      _deferred = initEvents();
+      initEvents();
 
       _audioPlayer = new AudioPlayer();
       _compoPlayer = new CompoPlayer();
 
+      checkLayout();
+
       initAjaxLinks();
 
       initHistory();
@@ -76,7 +78,7 @@
         .on('open_entree', function(e){
           console.log('on_open_entree : e', e);
           closeAllModals();
-
+          checkLayout();
           // add body class for currently loaded content
           // var body_classes = [
           //   'path-'+sys_path.replace(/\//g, '-'),
@@ -88,11 +90,6 @@
 
           // record new history state
           if(typeof e.url != 'undefined'){
-            // var state = {
-            //   ajax_path:null,
-            //   sys_path:null,
-            //   entree_tid:e.tid
-            // };
             var state = getSysPathState(e.sys_path);
             history.pushState(state, null, e.url);
 
@@ -103,17 +100,38 @@
               _paq.push(['setCustomUrl', e.url]);
               _paq.push(['setDocumentTitle', e.title]);
               _paq.push(['trackPageView']);
-              // js event
-              // trackEvent(category, action, [name], [value])
-              // _paq.push(['trackEvent', 'AjaxNav', 'loaded', state.url]);
             }
           }
         })
         .on('close_entree', function(e){
           backToFrontPage();
+          checkLayout();
         });
+
+      window.addEventListener('resize', checkLayout, false);
     }
 
+
+    // __      ___         _              ___        _
+    // \ \    / (_)_ _  __| |_____ __ __ | _ \___ __(_)______
+    //  \ \/\/ /| | ' \/ _` / _ \ V  V / |   / -_|_-< |_ / -_)
+    //   \_/\_/ |_|_||_\__,_\___/\_/\_/  |_|_\___/__/_/__\___|
+    function checkLayout(){
+      var $audioplayer = $("#audio-player");
+      if($audioplayer.length){
+        var navpos = $('#block-mainnavigation').position();
+        console.log('navpos', navpos);
+        $audioplayer.css({
+          'width':navpos.left+'px'
+        });
+      }
+
+      // entrees
+      // TODO: center the entrees menu
+       
+    };
+
+
     //  ___             _ _ ___
     // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
     // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -102,6 +102,8 @@ header[role="banner"]{
 #block-mainnavigation{
   float:right;
   margin-top: 25px;
+  z-index: 21;
+  position: relative;
   ul{
     margin:0; padding: 0;
     white-space: nowrap;
@@ -135,6 +137,20 @@ header[role="banner"]{
       }
     }
   }
+  @media only screen and (max-width: 1280px) {
+    margin-top: 15px;
+    ul{
+      li{
+        display: block;
+        a{
+          @include content_petit;
+        }
+      }
+      li:first-of-type{
+        display:none;
+      }
+    }
+  }
 }
 
 .block-language{
@@ -171,6 +187,20 @@ header[role="banner"]{
       }
     }
   }
+
+  @media only screen and (max-width: 1280px) {
+    margin-top: 15px;
+    margin-left: 0.5em;
+    border-left: 1px solid red;
+    ul{
+      li{
+        display: block;
+        a{
+          @include content_petit;
+        }
+      }
+    }
+  }
 }
 
 
@@ -530,14 +560,17 @@ main[role="main"]{
   }
 }
 #audio-player{
+  // outline: 1px solid blue;
   position: absolute;
+  box-sizing: border-box;
+  // overflow: hidden;
   top:0; left:0;
   padding-left:0.7em;
   // background-color: white;
-  height:100%; min-width:300px;
+  height:100%;
+  min-width:700px;
   z-index: 20;
   opacity: 0;
-  // outline: 1px solid blue;
   pointer-events: none;
   transition: opacity 0.7s ease-in-out;
   &.visible{
@@ -551,7 +584,6 @@ main[role="main"]{
     // word-break:keep-all;
     padding:0;
     max-height: 100%;
-    // outline: 1px solid green;
     white-space: normal;
     @include btn;
   }
@@ -598,9 +630,10 @@ main[role="main"]{
     height:100%;
   }
   .cartel{
-    // TODO: set max-width regarding responsive
     position: relative;
-    // max-width: 350px;
+    // min-width: 200px;
+    width: calc(100% - 260px);
+    // outline: 1px solid orange;
     margin-left: 1em;
     background-color: white;
     opacity: 1;
@@ -617,6 +650,8 @@ main[role="main"]{
       width:1.5em;
     }
     .cartels{
+      width:calc(100% - 1.5em);
+      // outline: 1px solid green;
       .first-cartel{
         // visibility: hidden;
         .entrees{
@@ -1437,8 +1472,23 @@ footer{
       // min-width: 50px;
       text-align: right;
     }
+    @media only screen and (max-width: 1280px) {
+      .region-footer-left{
+        width:9%;
+      }
+      .region-footer-center{
+        width: 80%;
+        overflow:hidden;
+        text-align: center;
+      }
+      .region-footer-right{
+        box-sizing: content-box;
+        min-width:5%;
+      }
+    }
   }
 
+
   #block-footer{
     display: inline-block;
     margin-bottom: 1em;
@@ -1474,6 +1524,22 @@ footer{
         }
       }
     }
+
+    @media only screen and (max-width: 1280px) {
+      margin-top: 15px;
+      ul{
+        li{
+          display: block;
+          margin-left: 0!important;
+          padding:0;
+          line-height: 0.6;
+          a{
+            @include content_petit;
+            padding:0;
+          }
+        }
+      }
+    }
   }
 
   // remove #block-productions from selector