add pipe nav

2020-07-30 11:07:54 +02:00
parent 62e09ba0eb
commit fc54e18ab9
9 changed files with 201 additions and 14 deletions
@@ -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;
+                }
+              }
            }
          }
        }
@@ -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;
+          }
+        }
+
+      }
    }
  }
 }
@@ -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%;
        }
@@ -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);
-      $('.side_notes').css("top", $top_link);
+      if ( $this.is('#ressource') || $this.is('#bibliographie') ) {
+        $('.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);
-        $('.side_notes').css("top", $top_link);
+        if ( $this.is('#ressource') || $this.is('#bibliographie') ) {
+          $('.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);

      });

@@ -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 %}
@@ -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>
@@ -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 %}