From 41ce75a63005498820f8c88f0d348d44b4f96189 Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 28 May 2025 00:47:58 +0200 Subject: [PATCH] class type-media sur body et position block third --- .../custom/eql/dist/assets/css/bundle.css | 10 +- web/themes/custom/eql/eql.theme | 28 +- .../scss/pages/_ressource-type-en-images.scss | 306 +++++++++--------- 3 files changed, 176 insertions(+), 168 deletions(-) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index 642bdfa..02f1dc5 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -5785,9 +5785,13 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items { display: none; } -.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-liens, -.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-projets-liee, -.page-node-type-ressource.block-region-third .block-entity-fieldnodefield-fichiers { + +body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-liens, +body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-projets-liee, +body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-fichiers, +body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-liens, +body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-projets-liee, +body.type-media-vidéos .block-region-third .block-entity-fieldnodefield-fichiers { transform: translateY(-45.5rem); } diff --git a/web/themes/custom/eql/eql.theme b/web/themes/custom/eql/eql.theme index 71f8568..a0875e9 100644 --- a/web/themes/custom/eql/eql.theme +++ b/web/themes/custom/eql/eql.theme @@ -11,23 +11,29 @@ use Drupal\Component\Utility\Html; use Drupal\Component\Transliteration\TransliterationInterface; use Drupal\taxonomy\Entity\Term; use Drupal\Core\Template\Attribute; +use Drupal\node\NodeInterface; + function eql_preprocess_html(&$variables) { $node = \Drupal::routeMatch()->getParameter('node'); - if ($node){ - $variables['attributes']['class'][] = 'node-type-' . $node->bundle(); - $variables['attributes']['class'][] = 'node-id-' . $node->id(); - } - if ($node instanceof NodeInterface) { + + if ($node instanceof \Drupal\node\NodeInterface) { $variables['attributes']['class'][] = 'node-type-' . $node->bundle(); $variables['attributes']['class'][] = 'node-id-' . $node->id(); - // Pour les ressources : ajoute la classe de type de ressource - if ($node->bundle() === 'ressource' && $node->hasField('field_type_de_ressource')) { - foreach ($node->get('field_type_de_ressource')->referencedEntities() as $term) { - $label = $term->label(); - $css_class = 'type-' . Html::getClass($label); - $variables['attributes']['class'][] = $css_class; + // Liste des champs à traiter pour générer des classes dynamiques + $fields_to_classify = [ + 'field_type_de_ressource' => 'type-', + 'field_type_de_media' => 'type-media-', + ]; + + foreach ($fields_to_classify as $field_name => $prefix) { + if ($node->hasField($field_name) && !$node->get($field_name)->isEmpty()) { + foreach ($node->get($field_name)->referencedEntities() as $term) { + $label = $term->label(); + $css_class = $prefix . Html::cleanCssIdentifier(strtolower($label)); + $variables['attributes']['class'][] = $css_class; + } } } } diff --git a/web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss b/web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss index 675825c..1a10f7b 100644 --- a/web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss +++ b/web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss @@ -1,161 +1,159 @@ .carousel{display: none;} .page-node-type-ressource{ - - .type-les-projets-en-images.layout__region--top{ - .block-region-top{ - display: flex !important; - flex-direction: column; - margin-left: 11%; - @media screen and (min-width:1100px) { + .type-les-projets-en-images.layout__region--top{ + .block-region-top{ + display: flex !important; + flex-direction: column; + margin-left: 11%; + @media screen and (min-width:1100px) { + display: flex; + } + .block { + margin-left: 0; + } + .block-entity-fieldnodefield-images{ + margin-top: 5rem; + padding: 0; + order: 7; + .carousel { + display: block; + max-width: 60vw; + margin: auto; + text-align: center; + + .main-image-container { + position: relative; + // background: #e0f5ff; + height: 500px; + max-height: 500px; + overflow: hidden; + width: 100%; + object-fit: contain; + + img { + width: 100%; + height: 100%; + object-fit: contain; + transition: transform 0.3s ease-in-out; + border: none ; + // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité + &.animate { + transform: scale(1.02); // léger effet smooth sur changement + } + } + + .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: #00aaff; + border-radius: 50%; + padding: 5px 10px; + color: white; + cursor: pointer; + content + + &.left { + left: 10px; + } + + &.right { + right: 10px; + } + } + // #prevArrow{ + // &::before{ + // content:url("../images/pictos/fleche-droite-dans-rond.png"); + // display: block; + // transform: scaleX(-1); + // width: 50px; + // } + // } + // #nextArrow{ + // &::before{ + // content:url("../images/pictos/fleche-droite-dans-rond.png"); + // display: block; + // } + // } + } + + .caption { + margin-top: 10px; + font-family: sans-serif; + } + + .thumbnails-wrapper { + position: relative; + max-width: 100%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + + .thumb-arrow { + cursor: pointer; + padding: 5px 10px; + background: #00aaff; + color: white; + border-radius: 50%; + user-select: none; + z-index: 2; + // font-weight: bold; + + &.left { + margin-right: 10px; + } + + &.right { + margin-left: 10px; + } + } + + .thumbnails { display: flex; - } - .block { - margin-left: 0; - } - .block-entity-fieldnodefield-images{ - margin-top: 5rem; - padding: 0; - order: 7; - - .carousel { - display: block; - max-width: 60vw; - margin: auto; - text-align: center; - - .main-image-container { - position: relative; - // background: #e0f5ff; - height: 500px; - max-height: 500px; - overflow: hidden; - width: 100%; - object-fit: contain; - - img { - width: 100%; - height: 100%; - object-fit: contain; - transition: transform 0.3s ease-in-out; - border: none ; - // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité - &.animate { - transform: scale(1.02); // léger effet smooth sur changement - } - } - - .arrow { - position: absolute; - top: 50%; - transform: translateY(-50%); - background: #00aaff; - border-radius: 50%; - padding: 5px 10px; - color: white; - cursor: pointer; - content - - &.left { - left: 10px; - } - - &.right { - right: 10px; - } - } - // #prevArrow{ - // &::before{ - // content:url("../images/pictos/fleche-droite-dans-rond.png"); - // display: block; - // transform: scaleX(-1); - // width: 50px; - // } - // } - // #nextArrow{ - // &::before{ - // content:url("../images/pictos/fleche-droite-dans-rond.png"); - // display: block; - // } - // } - } - - .caption { - margin-top: 10px; - font-family: sans-serif; - } - - .thumbnails-wrapper { - position: relative; - max-width: 100%; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - - .thumb-arrow { - cursor: pointer; - padding: 5px 10px; - background: #00aaff; - color: white; - border-radius: 50%; - user-select: none; - z-index: 2; - // font-weight: bold; - - &.left { - margin-right: 10px; - } - - &.right { - margin-left: 10px; - } - } - - .thumbnails { - display: flex; - gap: 10px; - overflow-x: auto; - scroll-behavior: smooth; - max-width: 100%; - padding: 10px 0; - scrollbar-width: none; // Firefox - - &::-webkit-scrollbar { - display: none; // Chrome, Safari - } - - img { - width: 60px; - height: 60px; - object-fit: cover; - border: 2px solid transparent; - cursor: pointer; - - &.active { - border-color: #00aaff; - } - } - } - } - } - - // Masquer les images Drupal originales (facultatif) - .field__items { - display: none; + gap: 10px; + overflow-x: auto; + scroll-behavior: smooth; + max-width: 100%; + padding: 10px 0; + scrollbar-width: none; // Firefox + + &::-webkit-scrollbar { + display: none; // Chrome, Safari + } + + img { + width: 60px; + height: 60px; + object-fit: cover; + border: 2px solid transparent; + cursor: pointer; + + &.active { + border-color: #00aaff; } + } + } } - - } - - } - - &.block-region-third{ - .block-entity-fieldnodefield-liens, - .block-entity-fieldnodefield-projets-liee, - .block-entity-fieldnodefield-fichiers{ - transform: translateY(-45.5rem); - } - + // Masquer les images Drupal originales (facultatif) + .field__items { + display: none; } -} \ No newline at end of file + } + + } + } + +} +body.type-media-reportage-photos, +body.type-media-vidéos{ + .block-region-third{ + .block-entity-fieldnodefield-liens, + .block-entity-fieldnodefield-projets-liee, + .block-entity-fieldnodefield-fichiers{ + transform: translateY(-45.5rem); + } +} + +} \ No newline at end of file