converted agenda output to themeable template, scss : started to implement responsivness in grid system

sites/all/modules/figli/edlp_agenda/edlp_agenda.module

@@ -7,3 +7,21 @@
 # @Last modified by:   bach
 # @Last modified time: 20-12-2017
 # @License: GPL-V3
+
+/**
+ * Implements hook_theme().
+ */
+function edlp_agenda_theme($existing, $type, $theme, $path) {
+  // @see https://www.drupal.org/docs/8/theming/twig/create-custom-twig-templates-from-custom-module
+  return array(
+    'edlp_agenda' => array(
+      // 'render element' => '',
+      'file' => 'includes/edlp_agenda.inc',
+      'variables' => array(
+        'next_event_node' => NULL,
+        'coming_events_nodes' => NULL,
+        'past_events_nodes' => NULL
+      ),
+    ),
+  );
+}

sites/all/modules/figli/edlp_agenda/includes/edlp_agenda.inc

@@ -0,0 +1,67 @@
+<?php
+
+// use Drupal\Core\Url;
+
+function template_preprocess_edlp_agenda(&$vars){
+  // dpm($vars);
+/*
+  @see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
+  */
+  $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
+
+  $vars['next_event'] = array(
+    "#markup"=>"<h3>Prochaine Date</h3>",
+    "event"=>$view_builder->view($vars['next_event_node'], 'default')
+  );
+
+  $future_list = array (
+    '#theme' => 'item_list',
+    '#items' => [],
+  );
+  foreach($vars['coming_events_nodes'] as $node){
+    $future_list['#items'][] = $view_builder->view($node, 'teaser');
+  }
+
+  $vars['coming_events'] = array(
+    "#type"=>"container",
+    "#attributes"=>array(
+      "class"=>['future-events']
+    ),
+    "#markup"=>"<h3>Dates à venir</h3>",
+    "future_events"=>$future_list
+  );
+
+
+  $past_list = array (
+    '#theme' => 'item_list',
+    '#items' => [],
+  );
+  foreach($vars['past_events_nodes'] as $node){
+    $past_list['#items'][] = $view_builder->view($node, 'teaser');
+  }
+
+  $vars['past_events'] = array(
+    "#type"=>"container",
+    "#attributes"=>array(
+      "class"=>['past-events']
+    ),
+    "#markup"=>"<h3>Dates passées</h3>",
+    "past_events"=>$past_list
+  );
+
+  // return array(
+  //   "#type" => "container",
+  //   "#attributes"=>array(
+  //     "id"=>['agenda']
+  //   ),
+  //   "future_past"=>array(
+  //     "#type"=>"container",
+  //     "#attributes"=>array(
+  //       "class"=>['future-past-events', 'column', 'os-scroll']
+  //     ),
+  //     "future"=>,
+  //     "past"=>
+  //   )
+  // );
+
+}

sites/all/modules/figli/edlp_agenda/src/Controller/AgendaController.php

@@ -39,67 +39,13 @@ class AgendaController extends ControllerBase {
 
   private function toRenderable(){
     $this->query();
-    //
     // dpm($this->future_nodes);
-    // dpm($this->next_event);
-    /*
-    @see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
-    */
-
-    $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
-
-    $future_list = array (
-      '#theme' => 'item_list',
-      '#items' => [],
-    );
-    foreach($this->future_nodes as $node){
-      $future_list['#items'][] = $view_builder->view($node, 'teaser');
-    }
-
-    $past_list = array (
-      '#theme' => 'item_list',
-      '#items' => [],
-    );
-    foreach($this->past_nodes as $node){
-      $past_list['#items'][] = $view_builder->view($node, 'teaser');
-    }
 
     return array(
-      "#type" => "container",
+      "#theme"=>'edlp_agenda',
-      "#attributes"=>array(
+      '#next_event_node' => $this->next_event,
-        "id"=>['agenda']
+      "#coming_events_nodes" => $this->future_nodes,
-      ),
+      "#past_events_nodes" => $this->past_nodes,
-      // "#markup"=> "<h2>Agenda</h2>",
-      "next"=>array(
-        "#type"=>"container",
-        "#attributes"=>array(
-          "class"=>['next-event', 'column', 'os-scroll']
-        ),
-        "#markup"=>"<h3>Prochaine Date</h3>",
-        "event"=>$view_builder->view($this->next_event, 'default')
-      ),
-      "future_past"=>array(
-        "#type"=>"container",
-        "#attributes"=>array(
-          "class"=>['future-past-events', 'column', 'os-scroll']
-        ),
-        "future"=>array(
-          "#type"=>"container",
-          "#attributes"=>array(
-            "class"=>['future-events']
-          ),
-          "#markup"=>"<h3>Dates à venir</h3>",
-          "future_events"=>$future_list
-        ),
-        "past"=>array(
-          "#type"=>"container",
-          "#attributes"=>array(
-            "class"=>['past-events']
-          ),
-          "#markup"=>"<h3>Dates passées</h3>",
-          "past_events"=>$past_list
-        )
-      )
     );
 
   }

sites/all/modules/figli/edlp_agenda/templates/edlp-agenda.html.twig

@@ -0,0 +1,3 @@
+{{ next_event }}
+{{ coming_events }}
+{{ past_events }}

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

@@ -110,9 +110,11 @@ main[role="main"]{
       overflow: hidden;
       .col{
         pointer-events:all;
-        max-height: 100%;
+        height: 100%;
         position: relative;
         &>.wrapper{
+          position: relative;
+          box-sizing: border-box;
           border-top: 1px solid red;
           border-bottom: 1px solid red;
           background-color: $transparent-bg;
@@ -139,13 +141,10 @@ main[role="main"]{
     list-style: none;
   }
 }
+body.path-agenda main .col>.wrapper{
+  height:100%;
+}
 #agenda{
-  pointer-events: auto;
-  background-color: $transparent-bg;
-  box-sizing: border-box;
-  border-top: 1px solid red;
-  border-bottom: 1px solid red;
-  padding: 1em;
   position: relative;
   white-space: nowrap;
   height: 100%;
@@ -161,13 +160,12 @@ main[role="main"]{
   div.future-past-events{
     width:33%;
   }
-
   ul,li{
     margin:0; padding:0;
     list-style: none;
   }
   article.node--type-evenement{
-    h2{font-size: 1em;}
+    h2{ @include content_titles; }
   }
 }
 

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

@@ -3,6 +3,10 @@
 $default_gap: 1em;
 $default_sum: 12;
 
+$small-bp:768px;
+$med-bp:1080px;
+$large-bp:1900px;
+
 @mixin row() {
   font-size: 0;
   white-space: nowrap;
@@ -24,10 +28,10 @@ $default_sum: 12;
   &:last-child{padding-right: 0;}
   margin-left: percentage(($col/$sum)*$offset);
 
-  @media only screen and (min-width: 768px) {
+  // @media only screen and (min-width: 768px) {
     width: percentage($col/$sum);
     vertical-align: $align;
-  }
+  // }
 }
 
 .row{
@@ -38,6 +42,28 @@ $default_sum: 12;
   .col-#{$c} {
       @include col($c);
   }
+
+  // small
+  .small-col-#{$c} {
+    @media only screen and (max-width: $small-bp) {
+      @include col($c);
+    }
+  }
+
+  // medium
+  .med-col-#{$c} {
+    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
+      @include col($c);
+    }
+  }
+
+  // large
+  .large-col-#{$c} {
+    @media only screen and (min-width: $med-bp+1) and (max-width: $large-bp) {
+      @include col($c);
+    }
+  }
+
 }
 
 @for $c from 1 through $default_sum - 1 {

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

@@ -0,0 +1,17 @@
+<div class="row">
+  <div class="col small-col-12 med-col-6 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">
+          {{ coming_events }}
+          {{ past_events }}
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>