add pipe nav

web/themes/custom/popsu_colloque/css/components/header/header.scss

@@ -81,6 +81,13 @@ header{
             margin-bottom: 0;
             li{
               margin: 0 0.5rem;
+              &:not(:last-child){
+                &:after{
+                  display: inline-block;
+                  content: "|";
+                  margin-left: 0.5rem;
+                }
+              }
             }
           }
         }

web/themes/custom/popsu_colloque/css/index.scss

@@ -57,6 +57,43 @@ article img,
       @media screen and (min-width: 768px){
         position: relative;
       }
+      .notes{
+        & > div{
+          position: absolute;
+          margin-top: 2rem;
+          @media screen and (min-width: 768px){
+            margin-top: -2rem;
+          }
+          &> div{
+            background: white;
+            padding: 0.5rem;
+            p{
+              font-family: 'cormorantBold';
+              margin: 0;
+              color: $color2;
+            }
+          }
+        }
+        .close{
+          cursor: pointer;
+          background: $color2;
+          position: absolute;
+          top: -12px;
+          left: -15px;
+          width: 30px;
+          height: 27px;
+          &::after{
+            content: "+";
+            color: white;
+            display: block;
+            margin: auto;
+            text-align: center;
+            transform: rotate(45deg);
+            margin-top: -6px;
+          }
+        }
+
+      }
     }
   }
 }

web/themes/custom/popsu_colloque/css/pages/layout.scss

@@ -48,9 +48,9 @@ article{
     margin-top: 1rem;
     .paragraph--type--images{
       img{
+        max-width: 100%;
         max-height: 400px;
         object-fit: contain;
-        width: auto;
         @media screen and (min-width: 992px) {
           width: 100%;
         }

web/themes/custom/popsu_colloque/js/script.js

@@ -1,21 +1,65 @@
 (function ($) {
 
+  function currenturl() {
+    $link.each(function(i){
+      var url = $(this).attr('href');
+      var current = window.location.pathname;
+      if (url == current) {
+        $(this).addClass('current');
+        $(this).parents('.navigation__item').addClass('current');
+      }
+    });
+  }
+
+
+
   function notes() {
 
     var $link = $('#presentation a');
+    var allNotes = $ ('.notes > div');
+    allNotes.hide();
+
     $link.each(function(){
       $(this).click(function(e) {
         $this = $(this);
         if ( $this.is('#ressource') || $this.is('#bibliographie') ) {
+
           e.preventDefault();
           var $url = $this.attr("href");
+
           if ($( ".side_notes" )[0]) {
             $( ".side_notes" ).fadeOut(200, function() {
               $(this).remove();
             });
+          } else if ($('.notes > div')[0]) {
+            $( ".notes  > div" ).fadeOut(200);
           }
+
           content_type($url, $this);
           ajax($url, $this);
+
+        } else if ($this.is('#note')) {
+
+          e.preventDefault();
+          var id_notes = $this.attr('href');
+          var notes = $(".notes "+id_notes);
+
+          if ($( ".side_notes" )[0]) {
+            $( ".side_notes" ).fadeOut(200, function() {
+              $(this).remove();
+            });
+          } else if ($('.notes > div')[0]) {
+            $( ".notes > div" ).fadeOut(200);
+          }
+          notes.fadeIn(200);
+
+          position_link($this, notes);
+          $(window).resize(function() {
+            position_link($this, notes);
+          });
+
+          close();
+
         }
       });
     })
@@ -38,8 +82,10 @@
           if ($this.is('#ressource')) {
             var hero = 'article .__wrapper .__hero';
             var head = 'article .__wrapper .__head';
+
             $(data).find(hero +','+ head).appendTo('.side_notes > div a').hide().fadeIn(200);
             $("<div class='close'></div>").appendTo(".side_notes > div");
+
           }else if ($this.is('#bibliographie')) {
             $(data).find('article.bibliographie').appendTo('.side_notes > div');
             $("<div class='close'></div>").appendTo(".side_notes > div");
@@ -56,27 +102,40 @@
       })
     }
 
-    function position_link($this) {
+    function position_link($this, id_notes) {
       var $top_link = $this.position().top;
       var width = $(window).width();
 
-      console.log('$top_link',$top_link);
+      if ( $this.is('#ressource') || $this.is('#bibliographie') ) {
-      $('.side_notes').css("top", $top_link);
+        $('.side_notes').css("top", $top_link);
+      }
+
+      if ( $this.is('#note') ) {
+        id_notes.css("top", $top_link);
+      }
 
       if (width <= '754') {
+
         var $top_link = $this.offset().top;
-        console.log('$top_link',$top_link);
+        if ( $this.is('#ressource') || $this.is('#bibliographie') ) {
-        $('.side_notes').css("top", $top_link);
+          $('.side_notes').css("top", $top_link);
+        }
+
+        if ( $this.is('#note') ) {
+          id_notes.css("top", $top_link);
+        }
+
       }
     }
 
     function close() {
-      var $croix = $('.side_notes .close');
+      var $croix = $('.close');
       $croix.click(function(e) {
 
         $(this).parents('.side_notes').fadeOut(200, function() {
           $(this).remove();
         });
+        $(this).parents('.notes > div').fadeOut(200);
 
       });
 

web/themes/custom/popsu_colloque/template/fields/field--node--field-les-notes.html.twig

@@ -0,0 +1,66 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+      {% for item in items %}
+        {{ item.content }}
+      {% endfor %}
+  {% else %}
+    {% for item in items %}
+      {{ item.content }}
+    {% endfor %}
+  {% endif %}
+{% else %}
+  {{ label }}
+    {% if multiple %}
+    {% endif %}
+    {% for item in items %}
+      {{ item.content }}
+    {% endfor %}
+    {% if multiple %}
+    {% endif %}
+{% endif %}

web/themes/custom/popsu_colloque/template/node/node--presentation.html.twig

@@ -85,10 +85,13 @@
     </div>
     <div class="__wrap_content col-sm-12 col-md-8">
       {{content.body}}
-      {{content.field_les_notes}}
+
     </div>
     <div class="__wrap_side col-sm-12 col-md-3 mt-3">
       {{content.field_add_participant}}
+      <div class="notes">
+        {{content.field_les_notes}}
+      </div>
     </div>
   </div>
 </article>

web/themes/custom/popsu_colloque/template/paragraph/paragraph--notes.html.twig

@@ -49,7 +49,9 @@
 
 
 {% block paragraph %}
-  <div id="{{content.field_number_note|raw}}" class="notes">
+{% set number = content.field_number_note[0]['#markup'] %}
+  <div id="{{number}}">
+  <div class="close"></div>
     {% block content %}
       {{ content|without('field_number_note') }}
     {% endblock %}