largeur titre actu

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

@@ -757,7 +757,7 @@ a {
               padding-left: 0.5rem;
               content: "|"; }
           .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .field:not(.field--name-field-images) {
-            width: 80%; }
+            width: 100%; }
           .path-actualites .block-region-content .block-views .node-type-actualite div:first-child h2 {
             margin: 0; }
           .path-actualites .block-region-content .block-views .node-type-actualite div:first-child .inline.links {

web/themes/custom/eql/eql.theme

@@ -29,3 +29,15 @@ function eql_preprocess_node(&$variables){
 ///////////////////////////////////////////////////
 
 
+// counter pour id
+
+// function eql_preprocess_field(&$variables) {
+//   static $counter = 0;
+//   $variables['counter'] = $counter++;
+// }
+
+
+// function MYTHEME_preprocess_views_view_fields__view_machine_name(&$vars) {
+//   static $counter = 0;
+//   $vars['counter'] = $counter++;
+// }

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

@@ -30,3 +30,4 @@ function toggleFaq(event) {
   const answer = answers[i]
   answer.classList.toggle('opened');}
 }
+

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

@@ -61,7 +61,7 @@
                             content: "|";}
                     }
                     .field:not(.field--name-field-images){
-                        width: 80%;
+                        width: 100%;
                     }
                     h2{ margin:0; }
                     .inline.links{

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

@@ -37,6 +37,7 @@
  * @see template_preprocess_field()
  */
 #}
+
 {%
   set classes = [
     'field',
@@ -58,6 +59,13 @@
     'first_part_home',
   ]
 %}
+{%
+  set id_titre =  [
+  'id' ~ paragraph_id|clean_id,
+  'block-' ~ plugin_id|clean_class,
+  key.value,
+  ]
+%}
 
 
   {% if label_hidden %}
@@ -69,7 +77,14 @@
       </div>
     {% else %}
       {% for item in items %}
-        <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+        {# {% for i in 0..10 %} #}
+
+      {# <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>
+           
+        {# {% endfor %} #}
       {% endfor %}
     {% endif %}
   {% else %}
@@ -86,3 +101,9 @@
       {% endif %}
     </div>
   {% endif %}
+
+
+
+{# {% for key, item in items %}
+      <span id="{{element['#items'][key].value|replace({' ':''}) }}"></span>
+      <div{{ item.attributes }}>{{ item.content }}</div> #}

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

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
+ *   - paragraph.id(): The paragraph ID.
+ *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
+ *   - paragraph.getOwnerId(): The user ID of the paragraph author.
+ *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
+ *   and methods for the paragraph object.
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished'
+  ]
+%}
+{% block paragraph %}
+  <div{{ attributes.addClass(classes) }}>
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
+{% endblock paragraph %}