ajax loading of edlp studio from custom block link ok

also refactored page layout for better display of footer

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

@@ -49,9 +49,9 @@
 }
 
 
-.layout-container{
-  pointer-events: none;
-}
+// .layout-container{
+//   pointer-events: none;
+// }
 
 
 //  _                _
@@ -59,12 +59,8 @@
 // | ' \/ -_) _` / _` / -_) '_|
 // |_||_\___\__,_\__,_\___|_|
 header[role="banner"]{
-  position: relative;
-  padding:0 0 0.5em 0;
-  border-bottom: 1px solid red;
   pointer-events: all;
   // TODO: what header height to fit well with player ??
-  height:70px;
 }
 
 #block-edlptheme-branding{
@@ -430,6 +426,47 @@ main[role="main"]{
   }
 }
 
+.row .col .studio-ui-wrapper{
+  height: 100%;
+}
+#studio-ui{
+  height:100%;
+  .chutier_ui{
+    height: 50%;
+    border-bottom: 1px solid red;
+    &>h2{
+      margin:0.5em 0;
+      font-size: 1em;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+    .documents{
+      ul,li{
+        margin:0; padding:0;
+        line-height: 1.2;
+      }
+      li{
+        display: inline-block; vertical-align: top;
+        width:49%; margin-bottom: 0.5em;
+        .entrees{
+          line-height: 0;
+          display:inline-block;
+          span{
+            @include entrie-micro-square;
+          }
+        }
+        a{
+          text-transform: capitalize;
+          font-size: 1em;
+        }
+      }
+
+    }
+  }
+  .composition_ui{
+    height:50%;
+  }
+}
 
  //    _    _            _  _         _
  //   /_\  (_)__ ___ __ | \| |___  __| |___
@@ -561,22 +598,45 @@ body.path-productions{
 }
 
 footer{
+  position: relative;
   pointer-events: none;
   // outline: 1px dotted blue;
-  // text-align: center;
-  display: table;
-  padding: 0 0 0.5em 0;
 
-  >.region{
-    display: table-cell;
+  >.wrapper{
     white-space: nowrap;
-    // pointer-events: none;
-    // outline: 1px dotted purple;
-    // position: relative;
+
+    >.region{
+      // display: table-cell;
+      display: inline-block;
+      vertical-align: baseline;
+      white-space:normal;
+
+      // pointer-events: none;
+      // outline: 1px dotted purple;
+      // position: relative;
+      >*{
+        display: inline-block; vertical-align: bottom;
+      }
+    }
+    .region-footer-left{
+      // float:left;
+      width:12%;
+      // min-width:50px;
+      text-align: left;
+    }
+    .region-footer-center{
+      // float: none;
+      width: 72%;
+      overflow:hidden;
+      text-align: center;
+    }
+    .region-footer-right{
+      // float:right;
+      width:12%;
+      // min-width: 50px;
+      text-align: right;
+    }
   }
-  .region-footer-left{text-align: left;}
-  .region-footer-center{text-align: center;}
-  .region-footer-right{text-align: right;min-width: 30px;}
 
   nav.block-menu{
     display: inline-block;
@@ -586,6 +646,9 @@ footer{
       li{
         pointer-events: all;
         @include oblique-list;
+        &:first-of-type{
+          margin-left: 1em;
+        }
       }
     }
   }
@@ -630,6 +693,7 @@ footer{
     body:not(.path-productions) & {display:none}
 
     ul{
+      margin-left: -3em;
       white-space: nowrap;
       li{
         a{
@@ -663,6 +727,7 @@ footer{
     display: inline-block;
     // vertical-align: top;
     ul{
+      margin:0;
       white-space: nowrap;
       li{
         @include oblique-list;
@@ -834,10 +899,28 @@ footer{
     }
   }
 
+  $icons_w:20px;
+  #block-studiolinkblock{
+    pointer-events: all;
+    a{
+      $wh:$icons_w;
+      display: block;
+      width:$wh; height:$wh;
+      background-image: url(../img/studio.svg);
+      background-size: contain;
+      text-indent: $wh*2;
+      margin: 0;
+      overflow: hidden;
+    }
+  }
+  // #block-fancylogin{
+  //   pointer-events: all;
+  //
+  // }
   #block-userlogin{
     pointer-events: all;
     // outline: 1px solid blue;
-    $wh:20px;
+    $wh:$icons_w;
     position: relative;
     width:$wh; height: $wh;
     // background-color: blue;
@@ -860,6 +943,8 @@ footer{
       padding:0.5em;
       padding-bottom: 20px;
       background-color: $transparent-bg;
+      border-top: 1px solid red;
+      border-bottom: 1px solid red;
       overflow: hidden;
       box-sizing:border-box;
       height: 0px;

sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss

@@ -10,22 +10,30 @@ body, html{
   // background-color: rgb(219, 219, 219);
 }
 
-div.layout-container{
-  position: relative;
-  width:100%; height:100%;
-  padding:0.5em 1em;
-  box-sizing: border-box;
-  z-index: 1;
-}
+// div.layout-container{
+//   position: relative;
+//   width:100%; height:100%;
+//   padding:0.5em 1em;
+//   box-sizing: border-box;
+//   z-index: 1;
+// }
 
 header[role="banner"]{
   // outline: 1px solid blue;
+  z-index: 1;
+  position: relative;
+  padding:0.5em 1em;
+  >.wrapper{
+    border-bottom: 1px solid red;
+    // TODO: what header height to fit well with player ??
+    height:70px;
+  }
 }
 
 
 main[role="main"]{
   // outline:1px solid green;
-  // display: none;
+  z-index: 1;
   pointer-events: none;
   position: absolute;
   left:0; top:0;
@@ -36,17 +44,24 @@ main[role="main"]{
   .layout-content{
     width: 100%; height:100%;
     overflow:hidden;
-  }
-  .layout-content>*{
-    pointer-events: auto;
+    &>.messages{
+      max-height: 500px;
+      overflow: auto;
+    }
+    &>*{
+      pointer-events: auto;
+    }
   }
 }
 
 footer[role="contentinfo"]{
   // outline: 1px solid pink;
-  position: fixed;
+  z-index: 1;
+  position:fixed;
   bottom:0;
+  box-sizing: content-box;
   width:100%;
+  padding:0.5em 1em;
 }
 
 canvas#corpus-map{