From 8933199a160da518eff0590486ec5c1ae1c70d53 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 6 Jun 2025 10:44:17 +0200 Subject: [PATCH] carroussel thumbnial vertical --- .../custom/eql/dist/assets/css/bundle.css | 49 ++++--- .../scss/pages/_ressource-type-en-images.scss | 121 +++++++++++++----- 2 files changed, 110 insertions(+), 60 deletions(-) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index 0d42065..39ad22d 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -5841,12 +5841,14 @@ svg.ext { width: 80%; } .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel { - display: block; + display: flex; margin: auto; text-align: center; } .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container { position: relative; + flex: 1; + max-width: 600px; overflow: hidden; width: 100%; object-fit: contain; @@ -5865,10 +5867,10 @@ svg.ext { position: absolute; top: 50%; transform: translateY(-50%); - background: #818181; + background: none; border-radius: 50%; padding: 5px 10px; - color: white; + color: black; cursor: pointer; } content .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .arrow.left { @@ -5882,36 +5884,21 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to font-family: sans-serif; } .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper { - position: relative; - max-width: 100%; - overflow: hidden; display: flex; + flex-direction: column; align-items: center; - justify-content: center; -} -.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow { - cursor: pointer; - padding: 5px 10px; - background: #00aaff; - color: white; - border-radius: 50%; - user-select: none; - z-index: 2; -} -.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.left { - margin-right: 10px; -} -.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.right { - margin-left: 10px; + max-height: 500px; + overflow: hidden; } .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails { display: flex; + flex-direction: column; gap: 10px; - overflow-x: auto; + overflow-y: auto; + overflow-x: hidden; scroll-behavior: smooth; - max-width: 100%; + max-height: 400px; padding: 10px 0; - scrollbar-width: none; } .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails::-webkit-scrollbar { display: none; @@ -5926,6 +5913,18 @@ 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 .carousel .thumbnails-wrapper .thumbnails img.active { border-color: #00aaff; } +.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow { + cursor: pointer; + padding: 5px; + background: #00aaff; + color: white; + border-radius: 50%; + user-select: none; + margin: 5px 0; +} +.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.left, .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.right { + margin: 0; +} .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items { display: none; } 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 0fc13b6..5c31ac9 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 @@ -17,7 +17,7 @@ order: 7; width: 80%; .carousel { - display: block; + display: flex; // max-width: 60vw; margin: auto; text-align: center; @@ -27,6 +27,8 @@ // background: #e0f5ff; // height: 500px; // max-height: 500px; + flex: 1; // prend l’espace restant + max-width: 600px; overflow: hidden; width: 100%; object-fit: contain; @@ -47,10 +49,10 @@ position: absolute; top: 50%; transform: translateY(-50%); - background: #818181; + background:none; border-radius: 50%; padding: 5px 10px; - color: white; + color: black; cursor: pointer; content @@ -82,60 +84,109 @@ margin-top: 10px; font-family: sans-serif; } - .thumbnails-wrapper { - position: relative; - max-width: 100%; - overflow: hidden; display: flex; + flex-direction: column; 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; - } - } - + max-height: 500px; + overflow: hidden; + .thumbnails { display: flex; + flex-direction: column; gap: 10px; - overflow-x: auto; + overflow-y: auto; + overflow-x: hidden; scroll-behavior: smooth; - max-width: 100%; + max-height: 400px; padding: 10px 0; - scrollbar-width: none; // Firefox - + &::-webkit-scrollbar { - display: none; // Chrome, Safari + display: none; } - + img { width: 60px; height: 60px; object-fit: cover; border: 2px solid transparent; cursor: pointer; - + &.active { border-color: #00aaff; } } } + + .thumb-arrow { + cursor: pointer; + padding: 5px; + background: #00aaff; + color: white; + border-radius: 50%; + user-select: none; + margin: 5px 0; + + &.left, &.right { + // on ne les utilise plus horizontalement + margin: 0; + } + } } + + // .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 {