Переглянути джерело

imporved home display (masonry) and fixed visibility of production footer menu

Bachir Soussi Chiadmi 7 роки тому
батько
коміт
4b986903cb

+ 22 - 1
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -31,7 +31,7 @@
       }
       }
 
 
       if(_$body.is('.path-frontpage')){
       if(_$body.is('.path-frontpage')){
-        addCloseBtnToCols();
+        initHome();
       }
       }
 
 
       // initScrollbars();
       // initScrollbars();
@@ -859,6 +859,27 @@
     };
     };
 
 
 
 
+    //  _  _
+    // | || |___ _ __  ___
+    // | __ / _ \ '  \/ -_)
+    // |_||_\___/_|_|_\___|
+    function initHome(){
+      addCloseBtnToCols();
+
+      console.log('theme : initProductions');
+      var $grid = $('.row', _$row).masonry({
+        itemSelector:'.col',
+        columnWidth:'.col-2'
+      });
+
+      // layout Masonry after each image loads
+      $grid.imagesLoaded().progress( function() {
+        $grid.masonry('layout');
+      });
+
+    }
+
+
     //  ___             _         _   _
     //  ___             _         _   _
     // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
     // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
     // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
     // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<

+ 25 - 23
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -2143,40 +2143,40 @@ body.path-agenda main .col > .wrapper {
     font-weight: normal;
     font-weight: normal;
     text-transform: uppercase; }
     text-transform: uppercase; }
 
 
-body.path-productions .layout-content .row {
+body.path-frontpage .layout-content .row, body.path-productions .layout-content .row {
   white-space: normal; }
   white-space: normal; }
-  body.path-productions .layout-content .row .col {
+  body.path-frontpage .layout-content .row .col, body.path-productions .layout-content .row .col {
     height: auto; }
     height: auto; }
-    body.path-productions .layout-content .row .col.col-2:last-child {
+    body.path-frontpage .layout-content .row .col.col-2:last-child, body.path-productions .layout-content .row .col.col-2:last-child {
       padding-left: 0em;
       padding-left: 0em;
       padding-right: 1em; }
       padding-right: 1em; }
-    body.path-productions .layout-content .row .col > .wrapper {
+    body.path-frontpage .layout-content .row .col > .wrapper, body.path-productions .layout-content .row .col > .wrapper {
       margin-bottom: 1em;
       margin-bottom: 1em;
       padding: 0; }
       padding: 0; }
-      body.path-productions .layout-content .row .col > .wrapper > * {
+      body.path-frontpage .layout-content .row .col > .wrapper > *, body.path-productions .layout-content .row .col > .wrapper > * {
         padding: 0; }
         padding: 0; }
-      body.path-productions .layout-content .row .col > .wrapper article.node .field--name-field-visuel a, body.path-productions .layout-content .row .col > .wrapper article.node .field--name-field-visuel img {
+      body.path-frontpage .layout-content .row .col > .wrapper article.node .field--name-field-visuel a, body.path-frontpage .layout-content .row .col > .wrapper article.node .field--name-field-visuel img, body.path-productions .layout-content .row .col > .wrapper article.node .field--name-field-visuel a, body.path-productions .layout-content .row .col > .wrapper article.node .field--name-field-visuel img {
         display: block;
         display: block;
         width: 100%;
         width: 100%;
         height: auto; }
         height: auto; }
-      body.path-productions .layout-content .row .col > .wrapper article.node header {
+      body.path-frontpage .layout-content .row .col > .wrapper article.node header, body.path-productions .layout-content .row .col > .wrapper article.node header {
         background-color: rgba(255, 255, 255, 0.95);
         background-color: rgba(255, 255, 255, 0.95);
         padding: 0.5em 1em; }
         padding: 0.5em 1em; }
-        body.path-productions .layout-content .row .col > .wrapper article.node header h2.node-title {
+        body.path-frontpage .layout-content .row .col > .wrapper article.node header h2.node-title, body.path-productions .layout-content .row .col > .wrapper article.node header h2.node-title {
           margin: 0; }
           margin: 0; }
-        body.path-productions .layout-content .row .col > .wrapper article.node header p {
+        body.path-frontpage .layout-content .row .col > .wrapper article.node header p, body.path-productions .layout-content .row .col > .wrapper article.node header p {
           margin: 0; }
           margin: 0; }
-      body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-2-columns header {
+      body.path-frontpage .layout-content .row .col > .wrapper article.node.node--view-mode-image-2-columns header, body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-2-columns header {
         position: absolute;
         position: absolute;
         bottom: 0;
         bottom: 0;
         left: 0; }
         left: 0; }
-        body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-2-columns header h2.node-title {
+        body.path-frontpage .layout-content .row .col > .wrapper article.node.node--view-mode-image-2-columns header h2.node-title, body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-2-columns header h2.node-title {
           font-size: 1.6em;
           font-size: 1.6em;
           font-weight: 500; }
           font-weight: 500; }
-      body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-1-columns h2.node-title {
+      body.path-frontpage .layout-content .row .col > .wrapper article.node.node--view-mode-image-1-columns h2.node-title, body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-image-1-columns h2.node-title {
         font-size: 1.2em;
         font-size: 1.2em;
         font-weight: 500; }
         font-weight: 500; }
-      body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-text-1-column {
+      body.path-frontpage .layout-content .row .col > .wrapper article.node.node--view-mode-text-1-column, body.path-productions .layout-content .row .col > .wrapper article.node.node--view-mode-text-1-column {
         padding: 0 1em; }
         padding: 0 1em; }
 
 
 footer {
 footer {
@@ -2280,30 +2280,31 @@ footer {
   to {
   to {
     -webkit-transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg); } }
     transform: rotate(359deg); } }
-  footer #block-productions {
+  footer nav#block-productions.block-menu {
     position: relative;
     position: relative;
-    pointer-events: none; }
-    body:not(.path-productions) footer #block-productions {
-      display: none; }
-    footer #block-productions ul {
+    pointer-events: none;
+    display: none; }
+    body.path-productions footer nav#block-productions.block-menu, body.entity-type-node.bundle-page footer nav#block-productions.block-menu {
+      display: inline-block; }
+    footer nav#block-productions.block-menu ul {
       margin-left: -3em;
       margin-left: -3em;
       white-space: nowrap; }
       white-space: nowrap; }
-      footer #block-productions ul li {
+      footer nav#block-productions.block-menu ul li {
         height: 200px; }
         height: 200px; }
-        footer #block-productions ul li a {
+        footer nav#block-productions.block-menu ul li a {
           pointer-events: all;
           pointer-events: all;
           background-color: #fff;
           background-color: #fff;
           padding-right: 0.4em; }
           padding-right: 0.4em; }
-          footer #block-productions ul li a:before {
+          footer nav#block-productions.block-menu ul li a:before {
             content: "";
             content: "";
             display: inline-block;
             display: inline-block;
             width: 7px;
             width: 7px;
             height: 7px;
             height: 7px;
             border: 1px solid red;
             border: 1px solid red;
             margin-right: 0.5em; }
             margin-right: 0.5em; }
-          footer #block-productions ul li a:hover:before {
+          footer nav#block-productions.block-menu ul li a:hover:before {
             background-color: red; }
             background-color: red; }
-          footer #block-productions ul li a.ajax-loading:before {
+          footer nav#block-productions.block-menu ul li a.ajax-loading:before {
             -webkit-animation: rotation 2s infinite linear;
             -webkit-animation: rotation 2s infinite linear;
             animation: rotation 2s infinite linear; }
             animation: rotation 2s infinite linear; }
 
 
@@ -2318,6 +2319,7 @@ footer {
     pointer-events: none;
     pointer-events: none;
     display: inline-block; }
     display: inline-block; }
     body.path-productions footer .block-block-edlp-entrees,
     body.path-productions footer .block-block-edlp-entrees,
+    body.entity-type-node.bundle-page footer .block-block-edlp-entrees,
     body.path-agenda footer .block-block-edlp-entrees {
     body.path-agenda footer .block-block-edlp-entrees {
       display: none; }
       display: none; }
     footer .block-block-edlp-entrees ul {
     footer .block-block-edlp-entrees ul {

+ 22 - 1
sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -31,7 +31,7 @@
       }
       }
 
 
       if(_$body.is('.path-frontpage')){
       if(_$body.is('.path-frontpage')){
-        addCloseBtnToCols();
+        initHome();
       }
       }
 
 
       // initScrollbars();
       // initScrollbars();
@@ -859,6 +859,27 @@
     };
     };
 
 
 
 
+    //  _  _
+    // | || |___ _ __  ___
+    // | __ / _ \ '  \/ -_)
+    // |_||_\___/_|_|_\___|
+    function initHome(){
+      addCloseBtnToCols();
+
+      console.log('theme : initProductions');
+      var $grid = $('.row', _$row).masonry({
+        itemSelector:'.col',
+        columnWidth:'.col-2'
+      });
+
+      // layout Masonry after each image loads
+      $grid.imagesLoaded().progress( function() {
+        $grid.masonry('layout');
+      });
+
+    }
+
+
     //  ___             _         _   _
     //  ___             _         _   _
     // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
     // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
     // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
     // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<

+ 13 - 5
sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -1030,11 +1030,17 @@ body.path-agenda main .col{
 }
 }
 
 
 
 
+
+//  _  _
+// | || |___ _ __  ___
+// | __ / _ \ '  \/ -_)
+// |_||_\___/_|_|_\___|
+
 //  ___             _         _   _
 //  ___             _         _   _
 // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
 // | _ \_ _ ___  __| |_  _ __| |_(_)___ _ _  ___
 // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
 // |  _/ '_/ _ \/ _` | || / _|  _| / _ \ ' \(_-<
 // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
 // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
-body.path-productions{
+body.path-frontpage, body.path-productions{
   .layout-content .row{
   .layout-content .row{
     white-space: normal;
     white-space: normal;
     .col{
     .col{
@@ -1190,7 +1196,8 @@ footer{
     }
     }
   }
   }
 
 
-  // remove #block-productions to enable again oblique style for all block-menu
+  // remove #block-productions from selector
+  // to enable again oblique style for all block-menu
   nav#block-productions.block-menu{
   nav#block-productions.block-menu{
     display: inline-block;
     display: inline-block;
     ul{
     ul{
@@ -1257,10 +1264,11 @@ footer{
   //   }
   //   }
   // }
   // }
 
 
-  #block-productions{
+  nav#block-productions.block-menu{
     position: relative;
     position: relative;
     pointer-events: none;
     pointer-events: none;
-    body:not(.path-productions) & {display:none}
+    display:none;
+    body.path-productions &, body.entity-type-node.bundle-page & {display:inline-block;}
 
 
     ul{
     ul{
       margin-left: -3em;
       margin-left: -3em;
@@ -1295,12 +1303,12 @@ footer{
   .block-block-edlp-entrees{
   .block-block-edlp-entrees{
     pointer-events: none;
     pointer-events: none;
     body.path-productions &,
     body.path-productions &,
+    body.entity-type-node.bundle-page &,
     body.path-agenda & {display:none}
     body.path-agenda & {display:none}
 
 
     display: inline-block;
     display: inline-block;
     // vertical-align: top;
     // vertical-align: top;
     ul{
     ul{
-
       margin:0;
       margin:0;
       white-space: nowrap;
       white-space: nowrap;
       li{
       li{