badge laureat twig et css

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -4107,25 +4107,11 @@ body {
   position: relative;
   transition: transform 0.4s ease-in-out;
 }
+.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet.is-laureat {
+  padding-top: 1.2rem;
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:hover {
-  transform: scale(1.05); /* effet de zoom léger */
+  transform: scale(1.05);
-}
-.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:has(.laureat:not(:empty)) {
-  padding-top: 1.5rem;
-}
-.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet:has(.laureat:not(:empty))::before {
-  content: "";
-  position: absolute;
-  top: -0.1rem;
-  left: -1rem;
-  width: 2.5rem;
-  height: 2.5rem;
-  background-image: url("../img/laureat-ouvert.svg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  z-index: 0;
-  margin-top: 0.3rem;
 }
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .node-projet-title {
   width: 80%;
@@ -4168,6 +4154,23 @@ body {
   height: auto;
   font-size: 0px;
 }
+.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_laureats.is-laureat {
+  position: relative;
+}
+.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .node-type-projet .field_field_laureats.is-laureat::before {
+  content: "";
+  position: absolute;
+  top: -3rem;
+  left: -1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-image: url("../img/laureat-ouvert.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  z-index: 0;
+  margin-top: 0.3rem;
+}
 .node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third .prevnext {
   display: none;
   flex-direction: row;
@@ -4403,7 +4406,7 @@ body {
   flex-direction: column;
   padding-left: 2rem;
 }
-.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_laureats:has(.laureat:not(:empty))::before {
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_laureats.is-laureat::before {
   content: "";
   position: absolute;
   top: -0.1rem;
@@ -4654,7 +4657,28 @@ body {
   transition: transform 0.4s ease-in-out;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row:hover {
-  transform: scale(1.05); /* effet de zoom léger */
+  transform: scale(1.05);
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .is-laureat {
+  position: relative;
+  padding-top: 1.5rem;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .is-laureat ::before {
+  content: "";
+  position: absolute;
+  top: 0.5rem;
+  left: -1.4rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-image: url("../img/laureat-ouvert.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  z-index: 0;
+  margin-top: 0.2rem;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .is-laureat .field-content {
+  font-size: 0;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--third .block-region-third div .views-row .views-field-title h2 {
   font-size: 0.5rem;

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss

@@ -128,7 +128,7 @@
                 }
                 .field_field_laureats{
 
-                    &:has(.laureat:not(:empty))::before {
+                    &.is-laureat::before {
                         content: "";
                         position: absolute;
                         // display: block;
@@ -397,10 +397,32 @@
                         border-bottom: solid black 1px;
                         padding-bottom: 0.5rem;
                         padding-top: 0.5rem;
-                        transition: transform 0.4s ease-in-out; // animation plus fluide
+                        transition: transform 0.4s ease-in-out;
-                                    &:hover {
+                            &:hover {
-                                        transform: scale(1.05); /* effet de zoom léger */
+                                transform: scale(1.05); 
-                                        }
+                            }
+                        .is-laureat{
+                            position: relative;
+                            padding-top: 1.5rem;
+                            ::before {
+                                content: "";
+                                position: absolute;
+                                top: 0.5rem;
+                                left: -1.4rem;
+                                width: 2.5rem;
+                                height: 2.5rem;
+                                background-image: url("../img/laureat-ouvert.svg");
+                                background-repeat: no-repeat;
+                                background-position: center;
+                                background-size: contain;
+                                z-index: 0;
+                                margin-top: 0.2rem;
+                            }
+                            .field-content{
+                                font-size: 0;
+                            }
+                        }
+
                         .views-field-title {
                             h2 {
                             font-size: 0.5rem;

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss

@@ -429,28 +429,12 @@
                     }
                     .node-type-projet {
                         position: relative;
-                        transition: transform 0.4s ease-in-out; // animation plus fluide
+                        transition: transform 0.4s ease-in-out; 
-                        &:hover {
+                        &.is-laureat{
-                            transform: scale(1.05); /* effet de zoom léger */
+                            padding-top: 1.2rem;
-                            }
-                        &:has(.laureat:not(:empty)){
-                            padding-top: 1.5rem;
                         }
-                        &:has(.laureat:not(:empty))::before {
+                        &:hover {
-                            content: "";
+                            transform: scale(1.05); 
-                            position: absolute;
-                            // display: block;
-                            top: -0.1rem;          // adapte la position selon ton visuel
-                            left: -1rem;
-                            width: 2.5rem;
-                            height: 2.5rem;
-                            // background-color: #f6f7f3;
-                            background-image: url("../img/laureat-ouvert.svg");
-                            background-repeat: no-repeat;
-                            background-position: center;
-                            background-size: contain;
-                            z-index: 0;
-                            margin-top: 0.3rem;
                         }
                         .node-projet-title{
                             width: 80%;
@@ -493,6 +477,25 @@
                             align-items: flex-start;    
                             height: auto;   
                             font-size: 0px;  
+                            &.is-laureat{
+                                position: relative;
+                            }
+                            &.is-laureat::before {
+                                content: "";
+                                position: absolute;
+                                // display: block;
+                                top: -3rem;          // adapte la position selon ton visuel
+                                left: -1rem;
+                                width: 2.5rem;
+                                height: 2.5rem;
+                                // background-color: #f6f7f3;
+                                background-image: url("../img/laureat-ouvert.svg");
+                                background-repeat: no-repeat;
+                                background-position: center;
+                                background-size: contain;
+                                z-index: 0;
+                                margin-top: 0.3rem;
+                            }
     
                         }
                       }

web/themes/custom/quartiers_de_demain/templates/field--field-laureats.html.twig

@@ -50,6 +50,15 @@
 {%
   set ancre_href = '#paragraph-id--' ~ paragraph.id()
 %}
+
+{# Vrai si au moins un item a du contenu (donc booléen "vrai") #}
+{% set is_laureat = false %}
+{% for item in items %}
+  {% if item.content|render|trim is not empty %}
+    {% set is_laureat = true %}
+  {% endif %}
+{% endfor %}
+
 {% if label_hidden %}
   {% if multiple %}
     <div{{ attributes }}>
@@ -63,17 +72,16 @@
     {% endfor %}
   {% endif %}
 {% else %}
-  <div{{ attributes }}>
+  <div{{ attributes.addClass(is_laureat ? 'is-laureat') }}>
     <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
     {% if multiple %}
       <div>
     {% endif %}
-    {% for item in items %}
+    {# {% for item in items %}
       <div class="laureat"{{ item.attributes }}>{{ item.content }}</div>
-    {% endfor %}
+    {% endfor %} #}
     {% if multiple %}
       </div>
     {% endif %}
   </div>
-  
+{% endif %}
-{% endif %}

web/themes/custom/quartiers_de_demain/templates/node--projets-lies.html.twig

@@ -62,7 +62,11 @@
  * @ingroup themeable
  */
 #}
-  <article{{ attributes }}>
+
+{# Le node est lauréat si field_laureats vaut "1" #}
+{% set is_laureat = node.field_laureats is defined and node.field_laureats.value == '1' %}
+
+  <article{{ attributes.addClass(is_laureat ? 'is-laureat') }}>
 
     {{ title_prefix }}  
     {% if label and not page %}

web/themes/custom/quartiers_de_demain/templates/views-view-fields.html.twig

@@ -31,7 +31,7 @@
  * @ingroup themeable
  */
 #}
-
+{# 
 
 
 {% for field in fields -%}
@@ -54,5 +54,45 @@
   {%- if field.wrapper_element -%}
     </{{ field.wrapper_element }}>
   {%- endif %}
-{%- endfor %}
+{%- endfor %} #}
 
+{# Vrai si le champ field_laureats a une valeur brute #}
+{# On récupère la valeur brute du champ field_laureats sur l'entité #}
+{% set laureat_value = row._entity.field_laureats.value ?? null %}
+
+
+{% set laureat_value = row._entity.field_laureats.value ?? null %}
+
+{% for id, field in fields -%}
+  {{ field.separator }}
+
+  {%- if field.wrapper_element -%}
+    {# On part des attributs existants du wrapper #}
+    {% set wrapper_attributes = field.wrapper_attributes %}
+
+    {# Si c'est le champ field_laureats ET qu'il a une valeur, on ajoute la classe #}
+    {% if id == 'field_laureats' and laureat_value %}
+      {% set wrapper_attributes = wrapper_attributes.addClass('is-laureat') %}
+    {% endif %}
+
+    <{{ field.wrapper_element }}{{ wrapper_attributes }}>
+  {%- endif %}
+
+  {%- if field.label -%}
+    {%- if field.label_element -%}
+      <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
+    {%- else -%}
+      {{ field.label }}{{ field.label_suffix }}
+    {%- endif %}
+  {%- endif %}
+
+  {%- if field.element_type -%}
+    <{{ field.element_type }}{{ field.element_attributes }}>
+      {{ field.content }}
+    </{{ field.element_type }}>
+  {%- endif %}
+
+  {%- if field.wrapper_element -%}
+    </{{ field.wrapper_element }}>
+  {%- endif %}
+{%- endfor %}