display imporovement (fonts) + agenda nav + prod linked events nav

sites/all/modules/figli/edlp_ajax/edlp_ajax.module

@@ -93,8 +93,9 @@ function edlp_ajax_theme($existing, $type, $theme, $path) {
     'edlp_ajax' => array(
       'file' => 'includes/edlp_ajax.inc',
       'variables' => array(
-        'entity_type' => 'node',
-        'entity' => NULL,
+        'entity_type' => null,
+        'bundle' => null,
+        'entity' => null,
         'view_mode' => 'default',
         'aside' => array(),
       ),
@@ -110,6 +111,7 @@ function edlp_ajax_theme_suggestions_edlp_ajax(array $vars) {
   $suggestions = [];
   // $node = $variables['elements']['#node'];
   $sanitized_view_mode = strtr($vars['view_mode'], '.', '_');
+  // $entity = $vars['entity'];
   //
   $suggestions[] = 'edlp_ajax__' . $vars['entity_type'];
   $suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $sanitized_view_mode;
@@ -117,5 +119,8 @@ function edlp_ajax_theme_suggestions_edlp_ajax(array $vars) {
   $suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $vars['entity']->id();
   $suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $vars['entity']->id() . '__' . $sanitized_view_mode;
 
+  $suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $vars['bundle'];
+  $suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $vars['bundle'] . '__' . $sanitized_view_mode;
+
   return $suggestions;
 }

sites/all/modules/figli/edlp_ajax/src/Controller/EdlpAjaxController.php

@@ -59,7 +59,10 @@ class EdlpAjaxController extends ControllerBase {
     if(count($future_nids) || count($past_nids)){
 
       $aside = array(
-        '#type'=>'container'
+        '#type'=>'container',
+        "#attributes"=>array(
+          "class"=>['agenda']
+        )
       );
 
       $node_view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
@@ -71,7 +74,7 @@ class EdlpAjaxController extends ControllerBase {
           '#items' => [],
         );
         foreach($future_nodes as $node){
-          $future_list['#items'][] = $node_view_builder->view($node, 'teaser');
+          $future_list['#items'][] = $node_view_builder->view($node, 'aside');
         }
         $aside['future_events'] = array(
           "#type"=>"container",
@@ -90,12 +93,12 @@ class EdlpAjaxController extends ControllerBase {
           '#items' => [],
         );
         foreach($past_nodes as $node){
-          $past_list['#items'][] = $node_view_builder->view($node, 'teaser');
+          $past_list['#items'][] = $node_view_builder->view($node, 'aside');
         }
         $aside['past_events'] = array(
           "#type"=>"container",
           "#attributes"=>array(
-            "class"=>['future-events']
+            "class"=>['past-events']
           ),
           "#markup"=>"<h3>" . t("Past events") . "</h3>",
           "past_events"=>$past_list
@@ -130,6 +133,7 @@ class EdlpAjaxController extends ControllerBase {
         '#entity' => $this->entity,
         '#view_mode' => $this->viewmode,
         '#aside' => $this->getAside(),
+        '#bundle' => $this->bundle,
       );
     }else{
       return array(

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

@@ -14,7 +14,6 @@ if(edlp.redirect){
 
   window.localStorage.setItem('edlp_origin', JSON.stringify(edlp));
   // redirect to home
-  // debugger;
   window.location.replace(window.location.origin+'/'+edlp.lang_code);
 }else{
   console.log('history do not redirect');

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

@@ -169,7 +169,17 @@
       // reset all style may been added by other pages (like masonry for productions)
       // and replace all content with newly loaded
       // TODO: build a system to replace or append contents (like studio + search)
-      _$row.removeAttr('style').html(data.rendered);
+      if(data.entity_type == "node" && data.bundle == "evenement"){
+        if(_$row.find('.col.event').length){
+          _$row.find('.col.event').replaceWith(data.rendered);
+        }else if(_$row.find('.col.aside').length){
+          _$row.find('.col.aside').replaceWith(data.rendered);
+        }else{
+          _$row.append(data.rendered);
+        }
+      }else{
+        _$row.removeAttr('style').html(data.rendered);
+      }
 
       // add body class for currently loaded content
       var body_classes = [

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

@@ -14,7 +14,6 @@ if(edlp.redirect){
 
   window.localStorage.setItem('edlp_origin', JSON.stringify(edlp));
   // redirect to home
-  // debugger;
   window.location.replace(window.location.origin+'/'+edlp.lang_code);
 }else{
   console.log('history do not redirect');

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

@@ -169,7 +169,17 @@
       // reset all style may been added by other pages (like masonry for productions)
       // and replace all content with newly loaded
       // TODO: build a system to replace or append contents (like studio + search)
-      _$row.removeAttr('style').html(data.rendered);
+      if(data.entity_type == "node" && data.bundle == "evenement"){
+        if(_$row.find('.col.event').length){
+          _$row.find('.col.event').replaceWith(data.rendered);
+        }else if(_$row.find('.col.aside').length){
+          _$row.find('.col.aside').replaceWith(data.rendered);
+        }else{
+          _$row.append(data.rendered);
+        }
+      }else{
+        _$row.removeAttr('style').html(data.rendered);
+      }
 
       // add body class for currently loaded content
       var body_classes = [

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

@@ -248,11 +248,6 @@ main[role="main"]{
         }
       }
     }
-    .field.text-formatted{
-      a.audio-link{
-        border-bottom: 1px dotted red;
-      }
-    }
   }
   h3.sur-title{
     @include content_titles;
@@ -311,9 +306,123 @@ main[role="main"]{
       }
     }
   }
-  article.node p{
+
+  article.node--type-page.node--view-mode-default{
+    >h2.node-title{
+      @include content_big_titles;
+      margin:0.3em 0;
+    }
+    .field--name-field-visuel{
+      margin-bottom: 1em;
+    }
+  }
+
+  .agenda{
+    .past-events{
+      border-top: 1px solid red;
+      margin-top: 1em;
+    }
+    text-align: center;
+    h3{
+      @include content_titles;
+    }
+    article.node > h2.node-title{
+      @include content_subtitles;
+      margin-bottom: 0;
+    }
+    .field--name-field-date{
+      time{
+        @include content_courant;
+      }
+    }
+
+  }
+
+  div.taxonomy-term{
+    >h2{display:none;}
+    >.content{
+      margin-top: 1em;
+    }
+    .field__label{
+      @include content_titles;
+    }
+    .field--name-field-notice{
+      .field__label{
+        margin-bottom: 1em;
+      }
+    }
+    article.node--type-enregistrement{
+      h2.node-title{
+        @include content_subtitles;
+        margin:0.9em 0 0 0;
+      }
+    }
+  }
+
+  article.node p, div.taxonomy-term p{
     @include content_courant;
+    margin:0 0 1em 0;
+  }
+
+  .field.text-formatted{
+    a{
+      display: inline-block;
+      position: relative;
+      &:after{
+        content:'';
+        position: absolute;
+        // z-index: -1;
+        width:100%;
+        left:0; bottom:0.2em;
+        border-bottom: 1px dotted #1A1A1A;
+      }
+      &.audio-link{
+        &:after{
+          border-color: red;
+        }
+      }
+    }
+  }
+
+  .productions-subtree{
+    a{
+      @include nav_link;
+      &:before{
+        content: "";
+        display:inline-block;
+        $sq:7px;
+        width: $sq; height:$sq;
+        border: 1px solid black;
+        margin-right: 0.5em;
+      }
+      &:hover:before,
+      &.is-active:before{
+        background-color: black;
+      }
+      &.ajax-loading:before{
+        @include spining-loader-square;
+      }
+    }
   }
+
+  .productions-parent{
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    a{
+      @include nav_link;
+      &:before{
+        content:'\2039';
+        // font-weight: bold;
+        font-size: 1.7em;
+        line-height: 0.95;
+        margin-right:0.1em;
+        margin-left: -0.4em;
+        display: inline-block;
+        vertical-align:bottom;
+      }
+    }
+  }
+
   img{
     max-width: 100%;
     height: auto;
@@ -1118,29 +1227,28 @@ body.path-agenda main .col{
     height:100%;
   }
 }
-#agenda{
-  position: relative;
-  white-space: nowrap;
-  height: 100%;
-  div.column{
-    white-space: normal;
-    display: inline-block;
-    vertical-align: top;
-    height:100%;
-  }
-  div.next-event{
-    width:65%;
-  }
-  div.future-past-events{
-    width:33%;
-  }
+.agenda{
+  // position: relative;
+  // white-space: nowrap;
+  // height: 100%;
+  // >*{
+  //   white-space: normal;
+  // }
+  // div.column{
+  //   display: inline-block;
+  //   vertical-align: top;
+  //   height:100%;
+  // }
+  // div.next-event{
+  //   width:65%;
+  // }
+  // div.future-past-events{
+  //   width:33%;
+  // }
   ul,li{
     margin:0; padding:0;
     list-style: none;
   }
-  article.node--type-evenement{
-    h2{ @include content_titles; }
-  }
 }
 
 
@@ -1183,8 +1291,7 @@ body.path-frontpage, body.path-productions{
             padding:0.5em 1em;
             h2.node-title{
               margin:0;
-              font-size: 0.8em;
-              text-transform: lowercase;
+              @include content_titles;
             }
             // p{margin: 0;}
           }
@@ -1194,21 +1301,21 @@ body.path-frontpage, body.path-productions{
               position: absolute;
               bottom: 0; left:0;
               h2.node-title{
-                font-size: 1.2em;
-                font-weight: 500;
+                @include content_big_titles;
               }
             }
           }
-          &.node--view-mode-image-1-columns{
-            h2.node-title{
-              font-size: 1em;
-              font-weight: 500;
-            }
-          }
+          // &.node--view-mode-image-1-columns{
+          //   h2.node-title{
+          //     // font-size: 1em;
+          //     // font-weight: 500;
+          //   }
+          // }
           &.node--view-mode-text-1-column{
             padding:0 1em;
           }
         }
+
       }
     }
   }

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

@@ -1,3 +1,9 @@
+@mixin content_big_titles {
+  font-size: 1.3em;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
 @mixin content_titles {
   font-size: 0.9em;
   font-weight: normal;
@@ -7,16 +13,24 @@
 @mixin document_titles_teaser {
   font-size: 0.82em;
   font-weight: 500;
+  text-transform: none;
 }
 
 @mixin content_subtitles {
   font-size: 0.82em;
   font-weight: 600;
   line-height: 1.6;
+  text-transform: none;
 }
 
 @mixin content_courant {
   font-size: 0.82em;
   font-weight: normal;
-  line-height: 1.6;
+  line-height: 1.4;
+}
+
+@mixin nav_link {
+  font-size: 0.82em;
+  font-weight: normal;
+  text-transform: uppercase;
 }

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

@@ -8,8 +8,8 @@ $med-bp:1080px;
 // $large-bp:1900px;
 
 @mixin row() {
-  font-size: 0;
-  white-space: nowrap;
+  // font-size: 0;
+  // white-space: nowrap;
   position: relative;
   >*{
     font-size: 16px;
@@ -18,10 +18,11 @@ $med-bp:1080px;
 
 %col-reset {
     width: 100%;
-    display: inline-block;
-    font-size: 16px;
+    // display: inline-block;
+    // white-space:normal;
+    // font-size: 16px;
+    float:left;
     box-sizing: border-box;
-    white-space:normal;
 }
 
 @mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
@@ -33,7 +34,7 @@ $med-bp:1080px;
 
   // @media only screen and (min-width: 768px) {
     width: percentage($col/$sum);
-    vertical-align: $align;
+    // vertical-align: $align;
   // }
 }
 

sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig

@@ -1,15 +1,15 @@
-<div class="col small-col-12 med-col-12 large-col-8 ">
+<div class="col small-col-12 med-col-4 large-col-3 ">
   <div class="wrapper">
-    <div id="agenda">
-
-      <div class="column next-event">
-        {{ next_event }}
-      </div>
-      <div class="column future-past-events os-scroll">
+    <div class="agenda">
         {{ coming_events }}
         {{ past_events }}
-      </div>
-
+    </div>
+  </div>
+</div>
+<div class="col small-col-12 med-col-8 large-col-5 event float-right">
+  <div class="wrapper">
+    <div class="agenda">
+        {{ next_event }}
     </div>
   </div>
 </div>

sites/all/themes/custom/edlptheme/templates/content/edlp-ajax--node--default.html.twig

@@ -1,4 +1,4 @@
-<div class="col small-col-12 med-col-6 large-col-6">
+<div class="col small-col-12 med-col-6 large-col-5">
   <div class="wrapper">
     {#<div class="os-scroll">#}
       {{ content }}
@@ -6,7 +6,7 @@
   </div>
 </div>
 {% if aside %}
-  <div class="col small-col-12 med-col-6 large-col-6 aside">
+  <div class="col small-col-12 med-col-4 large-col-3 aside float-right">
     <div class="wrapper">
       {#<div class="os-scroll">#}
         {{ aside }}

sites/all/themes/custom/edlptheme/templates/content/edlp-ajax--node--evenement--default.html.twig

@@ -0,0 +1,7 @@
+<div class="col small-col-12 med-col-6 large-col-4 event float-right">
+  <div class="wrapper">
+    <div class="agenda">
+        {{ content }}
+    </div>
+  </div>
+</div>

sites/default/config/sync/core.entity_view_display.node.evenement.aside.yml

@@ -0,0 +1,39 @@
+uuid: f5c1b1ab-e59e-4d7c-9b30-adc390450b46
+langcode: fr
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.aside
+    - field.field.node.evenement.body
+    - field.field.node.evenement.field_date
+    - field.field.node.evenement.field_page_liee
+    - field.field.node.evenement.field_workflow_generic
+    - node.type.evenement
+  module:
+    - datetime_range
+    - user
+id: node.evenement.aside
+targetEntityType: node
+bundle: evenement
+mode: aside
+content:
+  field_date:
+    weight: 1
+    label: hidden
+    settings:
+      timezone_override: ''
+      format_type: long
+      separator: '-'
+    third_party_settings: {  }
+    type: daterange_default
+    region: content
+  links:
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  body: true
+  field_page_liee: true
+  field_workflow_generic: true
+  langcode: true

sites/default/config/sync/core.entity_view_mode.node.aside.yml

@@ -0,0 +1,10 @@
+uuid: f634def2-a5a8-4b28-a71e-be46cf1edbd4
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: node.aside
+label: Aside
+targetEntityType: node
+cache: true