paragraph id

web/themes/custom/eql/css-compiled/styles.css

@@ -150,6 +150,14 @@ a {
       width: 100%; } }
 
 @media (max-width: 479px) {
+  #header-top #block-logogouv img {
+    min-width: 60px;
+    width: 70%;
+    height: auto; }
+  #header-top #block-logoeql img {
+    min-width: 60px;
+    width: 80%;
+    height: auto; }
   .path-frontpage .block-region-content .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content {
     display: flex;
     flex-direction: column; } }
@@ -706,7 +714,7 @@ a {
     text-transform: uppercase; }
 
 .node-id-3 {
-  background: url("../images/pictos/carre-contour-bleu_partenaire.svg");
+  background: url("../images/pictos/carre_site.mp4");
   background-repeat: no-repeat;
   background-position-y: 7rem;
   max-width: 100vw;
@@ -1037,15 +1045,13 @@ header {
       height: 100%;
       align-items: center; }
       #header-top .region-header-top-left #block-logogouv img {
-        min-width: 80px;
+        width: 80%;
-        width: 70%;
         height: auto; }
     #header-top .region-header-top-left #block-logoeql {
       display: flex;
       height: 100%;
       align-items: center; }
       #header-top .region-header-top-left #block-logoeql img {
-        min-width: 80px;
         width: 80%;
         height: auto; }
     #header-top .region-header-top-left ul {
@@ -1094,9 +1100,9 @@ header {
       display: flex;
       flex-direction: row-reverse;
       margin-bottom: 0;
-      min-height: 54px;
+      min-height: 65px;
       justify-content: space-around;
-      min-width: 120%; }
+      width: 120%; }
       #header-top #block-socialnetwork-2 p a {
         color: white;
         font-size: 0; }
@@ -1105,7 +1111,7 @@ header {
       #header-top #block-socialnetwork-2 p .link-twitter {
         display: flex;
         background-color: black;
-        min-width: 40px;
+        width: 40px;
         justify-content: center;
         align-items: end; }
         #header-top #block-socialnetwork-2 p .link-twitter:before {

web/themes/custom/eql/eql.libraries.yml

@@ -5,7 +5,6 @@ global-css:
 global-js:
   js:
     scripts/main.js: {}
-
+  dependencies:
-# dependencies:
+    - core/jquery
-#   - core/jquery
     

web/themes/custom/eql/eql.theme

@@ -31,13 +31,40 @@ function eql_preprocess_node(&$variables){
 
 // counter pour id
 
-// function eql_preprocess_field(&$variables) {
+            // function eql_preprocess_field(&$variables) {
-//   static $counter = 0;
+            //   // static $counter = 0;
-//   $variables['counter'] = $counter++;ext
+            //   // $variables['counter'] = $counter++;
-// }
+            //   $variables['elements']['#paragraph']->item_id;
+            // }
+// la fonction suivante ne sert à rien
+function eql_preprocess_field(&$variables) {
+
+  $paragraph = &$variables['paragraph'];
+  $variables['attributes']['class'][] = 'paragraph-type-' . $paragraph->id();
+  $hook_id = $paragraph->get('paragraph-id--')->getString();
+  $variables['attributes']['class'][] = 'hook-id-' . $hook_id;
+}
+                  //might be useful for if-clause: $variables['field_name'] and $variables['field_type']
+                  // if ($paragraph && $paragraph->getEntityTypeId() == 'paragraph' . $paragraph->id() ) {
+                    //whatever logic you need goes here, e.g. something like
+                    //$variables['attributes']['data-from-parent-paragraph'] = $parentEntity->getYourStuff();
+                  // }
 
 
-// function MYTHEME_preprocess_views_view_fields__view_machine_name(&$vars) {
+
-//   static $counter = 0;
+                // function yourtheme_preprocess_field(&$variables, $hook) {
-//   $vars['counter'] = $counter++;
+                //   $element = $variables['element'];
-// }
+                //   $parentEntity = $element['#object'];
+                //   //might be useful for if-clause: $variables['field_name'] and $variables['field_type']
+                //   if ($parentEntity && $parentEntity->getEntityTypeId() == 'paragraph' ) {
+                //     //whatever logic you need goes here, e.g. something like
+                //     //$variables['attributes']['data-from-parent-paragraph'] = $parentEntity->getYourStuff();
+                //   }
+                // }
+
+                // $variables['elements']['#entity']->item_id;
+
+                // function MYTHEME_preprocess_views_view_fields__view_machine_name(&$vars) {
+                //   static $counter = 0;
+                //   $vars['counter'] = $counter++;
+                // }

web/themes/custom/eql/scripts/main.js

@@ -14,6 +14,8 @@ function toggleMenu(event) {
 
 
 // faq reponse open 
+// Attention ouvre toutes les question en même temps
+
 
 var answers = document.getElementsByClassName("field--name-field-reponse");
 var questions = document.getElementsByClassName("field--name-field-question");
@@ -31,6 +33,22 @@ function toggleFaq(event) {
   answer.classList.toggle('opened');}
 }
 
+// fonction pour attribuer la class du parents
+
+var fields = document.getElementsByClassName("field--name-field-titre");
+var paragraphs = document.getElementsByClassName("paragraph--type--texte");
+for  (let i = 0; i < fields.length; i++) {
+  const field = fields[i]
+}
+function giveIdParent(){
+  document.field.classList="paragraphs";
+}
+
+// Function mouseOut ()
+// {
+//     document.getelementbyid("flashdiv").classname="flash-I";
+// }
+
 // open external link in new window
 // $(".ext").each(
 //   function(i,e){

web/themes/custom/eql/scss/global/_mediaqueries.scss

@@ -47,6 +47,22 @@
 
 
 @media (max-width: 479px){ 
+    #header-top{
+        #block-logogouv{
+            img{
+                min-width: 60px;
+                width: 70%;
+                height: auto;
+            }
+        }
+        #block-logoeql{
+            img{
+                min-width: 60px;
+                width: 80%;
+                height: auto;
+            }
+        }
+    }
     .path-frontpage{
         .block-region-content{
             .block-views-blockactus-blocks-pages-block-1{

web/themes/custom/eql/scss/pages/_ami.scss

@@ -1,6 +1,6 @@
 .node-id-3{
 
-    background: url('../images/pictos/carre-contour-bleu_partenaire.svg');
+    background: url('../images/pictos/carre_site.mp4');
     background-repeat: no-repeat;
     background-position-y: 7rem;
     max-width: 100vw;

web/themes/custom/eql/scss/partials/_header.scss

@@ -33,15 +33,13 @@ header{
         color: $black;  
         font-weight: 800;
         flex: 1;
-        // justify-content: space-between;
 
         #block-logogouv{
             display: flex;
             height: 100%;
             align-items: center;
             img{
-                min-width: 80px;
+                width: 80%;
-                width: 70%;
                 height: auto;
             }
         }
@@ -51,7 +49,7 @@ header{
             align-items: center;
 
             img{
-                min-width: 80px;
+                // min-width: 80px;
                 width: 80%;
                 height: auto;
             }
@@ -68,11 +66,8 @@ header{
                 flex-direction: column;
                 padding: 1rem;
             }
-            .ul1.sous-liste{
-                // padding-right: 2rem;
-            }
             li{
-            //    width: 200px;
+
                 a {
                     color: $black;
                 }
@@ -120,29 +115,28 @@ header{
             }
         }
     } 
+
+    // reseaux sociaux
+
     #block-socialnetwork-2{
         position: relative;
         top: -33px;
         align-self: flex-end;
         margin-left: auto;
-        // display: none;
         .field--name-body{
             min-height: 75px;
             margin-right: 1rem;
         }
-        
             p{
                 display: flex;
                 flex-direction: row-reverse;
                 margin-bottom: 0;
-                min-height: 54px;
+                min-height: 65px;
                 justify-content: space-around;
-                min-width: 120%;
+                width: 120%;
                 a{
                     color: $white;
                     font-size: 0;
-                    // padding-left: 0.5rem;
-                    // padding-right: 0.5rem;
                 }
                 svg.ext{
                     display: none;
@@ -150,7 +144,7 @@ header{
                 .link-twitter{
                     display: flex;
                     background-color: black;
-                    min-width: 40px;
+                    width: 40px;
                     justify-content: center;
                     align-items: end;
                     &:before{

web/themes/custom/eql/templates/field.html.twig

@@ -59,11 +59,18 @@
     'first_part_home',
   ]
 %}
-{%
+{# {%
   set id_titre =  [
-  'id' ~ paragraph_id|clean_id,
+  'id-' ~ paragraph|clean_id,
   'block-' ~ plugin_id|clean_class,
   key.value,
+   'id-' ~ counter,
+  ]
+%} #}
+{%
+  set id_hook = [
+    'hook-id-' ~ paragraph.id()|clean_id,
+    'paragraph-id--'  ~ paragraph.id()|clean_id,
   ]
 %}
 
@@ -82,7 +89,9 @@
       {# <span> {{index}}</span> #}
         {# <span id="{{item[key].value }}"></span> #}
          {# <span>{{counter}}</span> #}
-        <div {{ attributes.addClass(classes, 'field__item').setAttribute('id', id_titre) }}>{{ item.content }}</div>
+          {# <div {{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div> #}
+
+        <div {{ attributes.addClass(classes, 'field__item').setAttribute('id', id_hook) }}>{{ item.content }}</div>
            
         {# {% endfor %} #}
       {% endfor %}

web/themes/custom/eql/templates/paragraph.html.twig

@@ -47,7 +47,8 @@
   ]
 %}
 {% block paragraph %}
-  <div{{ attributes.addClass(classes) }}>
+  {# <div{{ attributes.addClass(classes) }}> #}
+    <div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
     {% block content %}
       {{ content }}
     {% endblock %}