fichers synthèse tous sites block-config-3 affichage avec js & css

web/themes/custom/reha/dist/css/bundle.css

@@ -2724,15 +2724,15 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   margin: auto;
 }
 .page-node-site .region-content {
-  width: 80%;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(8 1fr);
+  grid-template-rows: repeat(3 auto);
 }
 .page-node-site .region-content #block-reha-prevnextblock {
   display: flex;
   flex-direction: row;
-  width: 1274px;
+  width: 70%;
+  grid-column: 1/span 8;
   grid-row: 1;
   z-index: 97;
   height: fit-content;
@@ -2765,6 +2765,8 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-node-site .region-content #block-reha-contenudelapageprincipale {
   padding-top: 2rem;
   padding-bottom: 3rem;
+  grid-column: 1/span 8;
+  grid-row: 2;
 }
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site {
   margin: auto;
@@ -2774,7 +2776,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .entete_site {
   background-color: white;
   height: 520px;
-  width: 1274px;
+  width: 70%;
   display: flex;
   flex-direction: row;
   margin: auto;
@@ -2924,26 +2926,35 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   order: 3;
   padding-top: 6rem;
   position: relative;
-  width: 50%;
+  width: 70%;
   margin: auto;
   font-size: 1.3rem;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .summary-content {
+  width: 75%;
 }
-.page-node-site .region-content #block-reha-config-pages-3 {
-  width: 15vw;
+.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content {
+  width: 15%;
+  margin-top: 1.5rem;
 }
-.page-node-site .region-content #block-reha-config-pages-3 .field--name-field-fichier {
+.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field--type-file {
   border: none;
   margin-bottom: 1rem;
   background-color: transparent;
 }
-.page-node-site .region-content #block-reha-config-pages-3 .field--name-field-fichier .field__item {
-  text-transform: uppercase;
+.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field__item {
   padding: 0.3rem;
   border: solid black 1px;
   margin-bottom: 1rem;
   background-color: rgb(255, 255, 255);
   font-size: 0.9rem;
 }
+.page-node-site .region-content #block-reha-contenudelapageprincipale .node-type-site .body-content-site .links-content .field__item > * {
+  text-transform: uppercase;
+}
 
 .page-ressources h1 {
   width: 80%;

web/themes/custom/reha/js/reha.js

@@ -237,3 +237,18 @@ jQuery(function($) {
 
 })(jQuery, window);
 
+
+/////////////////// déplace synthèse de tous les sites (dans block config 3) dans node site pour faciliter css ///////////////////
+
+(function ($, Drupal) {
+  Drupal.behaviors.moveFieldContent = {
+    attach: function (context, settings) {
+      // Vérifiez que les éléments existent avant de tenter de les manipuler
+      if ($('#block-reha-config-pages-3 .field--name-field-fichier', context).length && $('.node-type-site .body-content-site .links-content', context).length) {
+        // Déplacer le contenu de .field--name-field-fichier vers .links-content
+        var fieldContent = $('#block-reha-config-pages-3 .field--name-field-fichier', context).detach();
+        $('.node-type-site .body-content-site .links-content', context).append(fieldContent);
+      }
+    }
+  };
+})(jQuery, Drupal);

web/themes/custom/reha/reha.theme

@@ -6,6 +6,8 @@ use Drupal\Core\Link;
 use Drupal\Core\Render\Markup;
 use Drupal\Component\Utility\Html;
 use Drupal\user\Entity\User;
+use Drupal\block\Entity\Block;
+use Drupal\Core\Render\Element;
 
 /**
  * @file
@@ -29,58 +31,61 @@ function reha_preprocess_html(&$variables) {
  * Implements hook_preprocess_HOOK() for node.html.twig.
  */
   
-  function reha_preprocess_node(&$variables) {
-      $node = &$variables['node'];
-      $variables['attributes']['class'][] = 'node-type-' . $node->gettype();
-      
-      if ($node->getType() == 'site' || $node->getType() == 'ressource' || $node->getType() == 'actualite') {
-          $fields_to_exclude = [
-              'field_image', // Remplacez par le nom machine exact de votre champ image
-          ];
-          
-          $filtered_content = [];
-          $image_field_content = '';
-          $body_field_content = '';
-          $files_field_content = '';
-          $liens_field_content = '';
-          $numero_field_content = '';
-          $adresse_field_content = '';
-          $lettre_field_content = '';
-          $image_caption_field_content = '';
-  
-          foreach ($variables['content'] as $field_name => $field_content) {
-              if ($field_name == 'body') {
-                  $body_field_content = $field_content;
-              } elseif ($field_name == 'field_fichiers') {
-                $files_field_content = $field_content;
-              } elseif ($field_name == 'field_liens') {
-                $liens_field_content = $field_content;
-              } elseif  ($field_name == 'field_adresse_site') {
-                $numero_field_content = $field_content;
-              } elseif  ($field_name == 'field_numero_site') {
-                $adresse_field_content = $field_content;
-              } elseif  ($field_name == 'field_lettre_de_site') {
-                $adresse_field_content = $field_content;
-              } elseif  ($field_name == 'image_field_caption') {
-                $image_caption_field_content = $field_content;
-              } elseif (!in_array($field_name, $fields_to_exclude)) {
-                  $filtered_content[$field_name] = $field_content;
-              } else {
-                  $image_field_content = $field_content;
-              }
-          }
-          
-          $variables['filtered_content'] = $filtered_content;
-          $variables['image_field_content'] = $image_field_content;
-          $variables['body_field_content'] = $body_field_content;
-          $variables['files_field_content'] = $files_field_content;
-          $variables['liens_field_content'] = $liens_field_content;
-          $variables['adresse_field_content'] = $adresse_field_content;
-          $variables['numero_field_content'] = $numero_field_content;
-          $variables['field_lettre_de_site'] = $lettre_field_content;
-          $variables['image_field_caption'] = $image_caption_field_content;
-      }
-  }
+function reha_preprocess_node(&$variables) {
+    $node = &$variables['node'];
+    $variables['attributes']['class'][] = 'node-type-' . $node->gettype();
+    
+    if ($node->getType() == 'site' || $node->getType() == 'ressource' || $node->getType() == 'actualite') {
+        $fields_to_exclude = [
+            'field_image', // Remplacez par le nom machine exact de votre champ image
+        ];
+        
+        $filtered_content = [];
+        $image_field_content = '';
+        $body_field_content = '';
+        $files_field_content = '';
+        $liens_field_content = '';
+        $numero_field_content = '';
+        $adresse_field_content = '';
+        $lettre_field_content = '';
+        $image_caption_field_content = '';
+
+        foreach ($variables['content'] as $field_name => $field_content) {
+            if ($field_name == 'body') {
+                $body_field_content = $field_content;
+            } elseif ($field_name == 'field_fichiers') {
+              $files_field_content = $field_content;
+            } elseif ($field_name == 'field_liens') {
+              $liens_field_content = $field_content;
+            } elseif  ($field_name == 'field_adresse_site') {
+              $numero_field_content = $field_content;
+            } elseif  ($field_name == 'field_numero_site') {
+              $adresse_field_content = $field_content;
+            } elseif  ($field_name == 'field_lettre_de_site') {
+              $adresse_field_content = $field_content;
+            } elseif  ($field_name == 'image_field_caption') {
+              $image_caption_field_content = $field_content;
+            } elseif (!in_array($field_name, $fields_to_exclude)) {
+                $filtered_content[$field_name] = $field_content;
+            } else {
+                $image_field_content = $field_content;
+            }
+        }
+
+        
+        $variables['filtered_content'] = $filtered_content;
+        $variables['image_field_content'] = $image_field_content;
+        $variables['body_field_content'] = $body_field_content;
+        $variables['files_field_content'] = $files_field_content;
+        $variables['liens_field_content'] = $liens_field_content;
+        $variables['adresse_field_content'] = $adresse_field_content;
+        $variables['numero_field_content'] = $numero_field_content;
+        $variables['field_lettre_de_site'] = $lettre_field_content;
+        $variables['image_field_caption'] = $image_caption_field_content;
+    }
+
+
+}
    
 
 function reha_preprocess_block(&$variables) {
@@ -90,7 +95,6 @@ function reha_preprocess_block(&$variables) {
     $block_id = 'block-' . uniqid();
     $variables['attributes']['id'] = $block_id;
   }
-
   if ($variables['plugin_id'] === "user_login_block") {
     $url = new Url('user.register', [], ['query' => ['destination' => '/node/add/operation']]);
     $link = new Link('proposer une opération', $url);
@@ -117,8 +121,6 @@ function reha_preprocess_block(&$variables) {
       }
     }
   }
-
-
   if ($variables['plugin_id'] === "views_block:current_user_block-block_1") {
     $user = User::load($variables['user']->id());
     $prenomnom = $user->get('field_prenom')->getString() . ' ' . $user->get('field_nom')->getString();
@@ -126,7 +128,6 @@ function reha_preprocess_block(&$variables) {
     $variables['label']['#markup'] = $prenomnom;
   }
 
-
 }
 
 function reha_preprocess_field(&$variables){
@@ -145,4 +146,5 @@ function reha_preprocess_field(&$variables){
       array_splice($variables['items'], 1);
     }
   }
-}
+}
+

web/themes/custom/reha/scss/global/variables/_buttons.scss

@@ -47,6 +47,7 @@
     @extend %buttonwithborder;
 }
 
+
 .links{    
     @extend %buttonwithborder;
 }

web/themes/custom/reha/scss/pages/node-site.scss

@@ -8,16 +8,19 @@
         }
     }
     .region-content{
-        
-        width: 80%;
-        margin: auto;
-        display: flex;
-        flex-direction: column;
+        display: grid;
+        // width: 80%;
+        // margin: auto;
+        // display: flex;
+        // flex-direction: column;
+        grid-template-columns: repeat(8 1fr);
+        grid-template-rows: repeat(3 auto);
        
         #block-reha-prevnextblock{
             display: flex;
             flex-direction: row;
-            width: 1274px;
+            width: 70%;
+            grid-column: 1 /span 8;
             grid-row: 1;   
             z-index: 97;  
             height: fit-content;
@@ -51,6 +54,8 @@
         #block-reha-contenudelapageprincipale{
             padding-top: 2rem;
             padding-bottom: 3rem;
+            grid-column: 1 /span 8;
+            grid-row: 2;
             .node-type-site{
                 margin: auto;
                 display: flex;
@@ -58,7 +63,7 @@
                 .entete_site{  
                     background-color: white;
                     height: 520px;
-                    width: 1274px;
+                    width: 70%;
                     display: flex;
                     flex-direction: row;
                     margin: auto;
@@ -216,28 +221,37 @@
                     // top: -60px;
                     padding-top: 6rem;
                     position: relative;
-                    width: 50%;
+                    width: 70%;
                     margin: auto;
                     font-size: 1.3rem;
+                    display: flex;
+                    flex-direction: row-reverse;
+                    justify-content: space-between;
+                    .summary-content{
+                        width: 75%;
+                    }
+                    .links-content{
+                        width: 15%;
+                        margin-top: 1.5rem;
+                        .field--type-file{
+                            border: none;
+                            margin-bottom: 1rem;
+                            background-color: transparent;
+                        }
+                        .field__item{
+                            padding: 0.3rem;
+                            border: solid black 1px;
+                            margin-bottom: 1rem;
+                            background-color: rgb(255, 255, 255);
+                            font-size: 0.9rem;
+                            >*{
+                                text-transform: uppercase;
+                            }
+                        }
+                    }
                 }
             }
         }
-        #block-reha-config-pages-3{
-            width: 15vw;
-            .field--name-field-fichier{
-                border: none;
-                margin-bottom: 1rem;
-                background-color: transparent;
-                .field__item{
-                    text-transform: uppercase;
-                    padding: 0.3rem;
-                    border: solid black 1px;
-                    margin-bottom: 1rem;
-                    background-color: rgb(255, 255, 255);
-                    font-size: 0.9rem;
-                }
-            }
 
-        }
     }
 }

web/themes/custom/reha/templates/block--config-pages--fiche-de-synthese-de-tous-les-si.html.twig

@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+    'block-reha-config-pages-3',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/custom/reha/templates/node--site.html.twig

@@ -68,31 +68,7 @@
  * @ingroup themeable
  */
 #}
-{# <article{{ attributes }}>
 
-  {{ title_prefix }}
-  {% if label and not page %}
-    <h2{{ title_attributes }}>
-      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
-    </h2>
-  {% endif %}
-  {{ title_suffix }}
-
-  {% if display_submitted %}
-    <footer>
-      {{ author_picture }}
-      <div{{ author_attributes }}>
-        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
-        {{ metadata }}
-      </div>
-    </footer>
-  {% endif %}
-
-  <div{{ content_attributes }}>
-    {{ content }}
-  </div>
-
-</article> #}
 
 <article{{ attributes.addClass('node-type-site') }}>
   {{ title_prefix }}
@@ -134,6 +110,7 @@
         {{ liens_field_content }}
       </div>
     {% endif %}
+    
   </div>
   {% endif %}
   {{ title_suffix }}