From f9891bbc61ea89ac44248236c063ed7d2a4b492c Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 29 Jun 2023 22:22:14 +0200 Subject: [PATCH] css slick caroussel --- web/themes/custom/eql/css-compiled/styles.css | 423 ++++++++++++------ web/themes/custom/eql/eql.libraries.yml | 4 +- web/themes/custom/eql/scripts/main.js | 43 +- .../custom/eql/scss/pages/_actualite.scss | 1 + web/themes/custom/eql/scss/pages/_home.scss | 224 ++++++---- web/themes/custom/eql/scss/pages/_projet.scss | 27 -- .../eql/scss/partials/_slick-theme.scss | 201 +++++++++ .../custom/eql/scss/partials/_slick.scss | 100 +++++ .../scss/partials/_slick_carousel_custom.scss | 0 .../eql/scss/partials/_slick_custom.scss | 5 + web/themes/custom/eql/scss/styles.scss | 6 +- 11 files changed, 754 insertions(+), 280 deletions(-) create mode 100644 web/themes/custom/eql/scss/partials/_slick-theme.scss create mode 100644 web/themes/custom/eql/scss/partials/_slick.scss delete mode 100644 web/themes/custom/eql/scss/partials/_slick_carousel_custom.scss create mode 100644 web/themes/custom/eql/scss/partials/_slick_custom.scss diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index c01bb71..d332bda 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -414,148 +414,87 @@ a { .path-node.page-node-type-static .layout-container .layout-content .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource div ul.links.inline { display: none; } -/* Slider */ -.slick-slider { - position: relative; - display: block; - box-sizing: border-box; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-touch-action: pan-y; - touch-action: pan-y; - -webkit-tap-highlight-color: transparent; } - -.slick-list { - position: relative; - overflow: hidden; - display: block; - margin: 0; - padding: 0; } - .slick-list:focus { - outline: none; } - .slick-list.dragging { - cursor: pointer; - cursor: hand; } - -.slick-slider .slick-track, -.slick-slider .slick-list { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - -.slick-track { - position: relative; - left: 0; - top: 0; - display: block; - margin-left: auto; - margin-right: auto; } - .slick-track:before, .slick-track:after { - content: ""; - display: table; } - .slick-track:after { - clear: both; } - .slick-loading .slick-track { - visibility: hidden; } - -.slick-slide { - float: left; - height: 100%; - min-height: 1px; - display: none; } - [dir="rtl"] .slick-slide { - float: right; } - .slick-slide img { - display: block; } - .slick-slide.slick-loading img { - display: none; } - .slick-slide.dragging img { - pointer-events: none; } - .slick-initialized .slick-slide { - display: block; } - .slick-loading .slick-slide { - visibility: hidden; } - .slick-vertical .slick-slide { - display: block; - height: auto; - border: 1px solid transparent; } - -.slick-arrow.slick-hidden { - display: none; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 { width: 100vw; + height: 600px; border-bottom: 5px solid #009ee3; background: rgba(0, 158, 227, 0.2); } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages { - padding-top: 5rem; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { - display: flex; - flex-basis: auto; } - @media (max-width: 479px) { - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { - display: flex; - flex-direction: column; - width: 80%; } } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row { - flex-basis: auto; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite { - color: black; - line-height: 1.5rem; - padding: 0.5rem; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite div:first-child { - display: flex; - flex-direction: column; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images { - order: 1; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-images .field__item img { - max-width: 95%; - max-height: 150px; - object-fit: cover; - width: 100%; - padding-bottom: 1rem; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date { - order: 2; - display: flex; - flex-direction: row; - justify-content: flex-start; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date:not(:last-child):after { - padding-right: 1rem; - content: "|"; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-date time { - font-size: 0.9rem; - font-weight: 800; - padding-right: 1rem; - width: fit-content; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-title { - order: 3; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-sous-titre { - order: 4; - margin-top: 0.3rem; - font-weight: 800; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field:not(.field--name-field-images) { - width: 100%; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite h2 { - margin: 0; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite a { - color: black; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links { - padding-top: none !important; - list-style: none; - width: fit-content; - align-self: flex-end; - padding-right: 1rem; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .inline.links a { - display: none; } - .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite .field--name-field-actu-type { - order: 5; - padding-top: 1rem; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div { + height: 100%; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages { + height: 100%; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content { + height: 90%; } + @media (max-width: 479px) { + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content { + display: flex; + flex-direction: column; + width: 80%; } } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite { + color: black; + line-height: 1.5rem; + width: 80%; + height: 600px; + margin: auto; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child { + display: grid; + grid-template-columns: 1fr repeat(8, 1fr) 1fr; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images { + order: 1; + grid-column: 1 /span 5; + grid-row: 1 / span 6; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-images .field__item img { + max-height: 450px; + object-fit: contain; + max-width: 700px; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date { + display: inline; + grid-column: 9 / span 7; + grid-row: 2; + order: 2; + flex-direction: row; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-date time { + font-size: 0.9rem; + font-weight: 800; + padding-right: 1rem; + width: fit-content; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu { + grid-column: 9 / span 9; + grid-row: 2; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-lieu .field__label { + display: none; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-title { + display: inline-flex; + grid-column: 9 / span 9; + grid-row: 3; + order: 3; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-sous-titre { + display: inline-block; + grid-column: 9 / span 9; + grid-row: 4; + order: 4; + margin-top: 0.3rem; + font-weight: 800; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field:not(.field--name-field-images) { + width: 100%; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child h2 { + margin: 0; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child a { + color: black; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .inline.links { + padding-top: none !important; + list-style: none; + width: fit-content; + align-self: flex-end; + padding-right: 1rem; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .inline.links a { + display: none; } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 div .view-actus-blocks-pages .view-content .views-row .node-type-actualite div:first-child .field--name-field-actu-type { + display: inline-block; + grid-column: 9 / span 7; + grid-row: 5; + order: 5; + padding-top: 1rem; } .path-frontpage .block-block-content3ee1f633-aaa7-4b4c-a42a-02206e26d3a2 { visibility: hidden; } @@ -707,6 +646,9 @@ a { margin-top: 0.8rem; font-size: 0.7rem; } +.path-frontpage .block-views-blockprojets-block-2 #leaflet-map-view-projets-block-2 { + height: 500px !important; } + .node-id-20 { background: url("../images/pictos/carre-contour-bleu_partenaire.svg"); background-repeat: no-repeat; @@ -1101,7 +1043,8 @@ a { width: 25%; } .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource div .field--name-field-images img { width: 100%; - height: auto; } + height: auto; + margin: auto; } .path-node.page-node-type-actualite .layout--threecol-25-50-25 .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource div .field--name-field-mots-clefs { order: 6; display: flex; @@ -4103,3 +4046,205 @@ a { #fotter-bottom .region-footer-bottom-middle .view-id-partenaires .view-content .node-type-partenaires_logo_footer_ { padding-right: 1rem; padding-bottom: 1rem; } + +/* Slider */ +.slick-slider { + position: relative; + display: block; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; } + +.slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; } + .slick-list:focus { + outline: none; } + .slick-list.dragging { + cursor: pointer; + cursor: hand; } + +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.slick-track { + position: relative; + left: 0; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; } + .slick-track:before, .slick-track:after { + content: ""; + display: table; } + .slick-track:after { + clear: both; } + .slick-loading .slick-track { + visibility: hidden; } + +.slick-slide { + float: left; + height: 100%; + min-height: 1px; + display: none; } + [dir="rtl"] .slick-slide { + float: right; } + .slick-slide img { + display: block; } + .slick-slide.slick-loading img { + display: none; } + .slick-slide.dragging img { + pointer-events: none; } + .slick-initialized .slick-slide { + display: block; } + .slick-loading .slick-slide { + visibility: hidden; } + .slick-vertical .slick-slide { + display: block; + height: auto; + border: 1px solid transparent; } + +.slick-arrow.slick-hidden { + display: none; } + +/* Slider */ +.slick-loading .slick-list { + background: #fff url("./ajax-loader.gif") center center no-repeat; } + +/* Icons */ +/* Arrows */ +.slick-prev, +.slick-next { + position: absolute; + display: block; + height: 60px; + width: 60px; + line-height: 0px; + font-size: 0px; + cursor: pointer; + background: transparent; + color: transparent; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + padding: 0; + border: none; + outline: none; } + .slick-prev:hover, .slick-prev:focus, + .slick-next:hover, + .slick-next:focus { + outline: none; + background: transparent; + color: transparent; } + .slick-prev:hover:before, .slick-prev:focus:before, + .slick-next:hover:before, + .slick-next:focus:before { + opacity: 1; } + .slick-prev.slick-disabled:before, + .slick-next.slick-disabled:before { + opacity: 0.25; } + .slick-prev:before, + .slick-next:before { + font-family: "marianne"; + font-size: 60px; + line-height: 1; + color: #009ee3; + opacity: 0.75; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.slick-prev { + z-index: 1; + left: 25px; } + [dir="rtl"] .slick-prev { + left: auto; + right: 25px; } + .slick-prev:before { + content: "←"; } + [dir="rtl"] .slick-prev:before { + content: "→"; } + +.slick-next { + right: 25px; } + [dir="rtl"] .slick-next { + left: 25px; + right: auto; } + .slick-next:before { + content: "→"; } + [dir="rtl"] .slick-next:before { + content: "←"; } + +/* Dots */ +.slick-dotted.slick-slider { + margin-bottom: 30px; } + +html.js body.node-type-actualite.node-id-88.path-node.page-node-type-actualite div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.region.region-content div#block-contenudelapageprincipale.block.block-system.block-system-main-block div.layout.layout--threecol-25-50-25 div.layout__region.layout__region--top div.block-region-top div.block.block-ctools-block.block-entity-fieldnodefield-images div.field.field--name-field-images.field--type-image.field--label-hidden.field__items.slick-initialized.slick-slider.slick-dotted ul.slick-dots { + width: 600px; } + +.slick-dots { + position: absolute; + bottom: -25px; + list-style: none; + display: block; + text-align: center; + padding: 0; + margin: 0; + width: 100%; } + .slick-dots li { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + margin: 0 5px; + padding: 0; + cursor: pointer; } + .slick-dots li button { + border: 0; + background: transparent; + display: block; + height: 20px; + width: 20px; + outline: none; + line-height: 0px; + font-size: 0px; + color: transparent; + padding: 5px; + cursor: pointer; } + .slick-dots li button:hover, .slick-dots li button:focus { + outline: none; } + .slick-dots li button:hover:before, .slick-dots li button:focus:before { + opacity: 1; } + .slick-dots li button:before { + position: absolute; + top: 0; + left: 0; + content: "•"; + width: 20px; + height: 20px; + font-family: "marianne"; + font-size: 50px; + line-height: 20px; + text-align: center; + color: black; + opacity: 0.25; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + .slick-dots li.slick-active button:before { + color: black; + opacity: 0.75; } diff --git a/web/themes/custom/eql/eql.libraries.yml b/web/themes/custom/eql/eql.libraries.yml index afafd58..9b7ddd9 100644 --- a/web/themes/custom/eql/eql.libraries.yml +++ b/web/themes/custom/eql/eql.libraries.yml @@ -3,8 +3,8 @@ global-css: theme: css-compiled/styles.css: {} # css-prefixed/styles.css: {} - librairies/slick-1.8.1/slick/slick-theme.css: {} - librairies/slick-1.8.1/slick/slick.css: {} + # librairies/slick-1.8.1/slick/slick-theme.css: {} + # librairies/slick-1.8.1/slick/slick.css: {} global-js: diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index 59361b5..982b760 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -169,28 +169,41 @@ jQuery(function($) { // if ('.view-id-actus_blocks_pages view-display-id-block_1'){ $('.path-frontpage .view-actus-blocks-pages .view-content').slick({ - // slidesToShow: 1, + slidesToShow: 1, // slidesToScroll: 1, dots: true, arrows: true, // centerMode: true, - centerPadding: '200px', - // responsive: [ - // { - // breakpoint: 800, - // settings: { - // centerPadding: '0', - // adaptiveHeight: true - // } - // }] + // centerPadding: '100px', + responsive: [ + { + breakpoint: 800, + settings: { + // centerPadding: '0', + adaptiveHeight: true + } + }] }); - // } + console.log('salut slick home'); + + $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({ + dots: true, + arrows: false, + + + }); + console.log('salut slick actus'); + + + $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({ + dots: true, + arrows: false, + }); + console.log('salut slick projets'); + }); - // $('.slidshow-home2').slick( - // {slidesToShow: 1,} - // ); - console.log('salut slick'); + // console.log('salut slick actus'); })(jQuery, window); diff --git a/web/themes/custom/eql/scss/pages/_actualite.scss b/web/themes/custom/eql/scss/pages/_actualite.scss index 7eccfe1..cb77226 100644 --- a/web/themes/custom/eql/scss/pages/_actualite.scss +++ b/web/themes/custom/eql/scss/pages/_actualite.scss @@ -455,6 +455,7 @@ img{ width: 100%; height: auto; + margin: auto; } } .field--name-field-mots-clefs{ diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index 85d7063..514774b 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -1,116 +1,142 @@ // home juin 2023 -@import "../partials/_slick-slider.scss"; +// @import "../partials/_slick-slider.scss"; .path-frontpage{ // bandeau actus .block-views-blockactus-blocks-pages-block-1{ // grid-area: actus; width: 100vw; + height: 600px; border-bottom: 5px solid $blue-light; - // border-top: 5px solid $blue-light; background: $background-actus; - .view-actus-blocks-pages{ - padding-top: 5rem; - .view-content{ - display: flex; - flex-basis: auto; - // display: grid; - // grid-template-columns: 1fr repeat(4, 2fr) 1fr; - // margin: auto; - // padding-top: 2rem; - // padding-bottom: 4rem; - @media (max-width: 479px){ - display: flex; - flex-direction: column; - // padding-left: 1rem; - width: 80%; - } - .views-row{ - flex-basis: auto; + div{ + height: 100%; + .view-actus-blocks-pages{ + height: 100%; + .view-content{ + // display: flex; + // flex-basis: auto; + height: 90%; - } - // .w3-button{ - - // } - // .views-row:nth-of-type(1) { grid-column: 2; } - - - .node-type-actualite{ - color: $black; - line-height: 1.5rem; - padding: 0.5rem; - div:first-child{ // block actu dans le bandeau + @media (max-width: 479px){ display: flex; flex-direction: column; - // :nth-child(1) { order: 1; } - // :nth-child(4) { order: 2; } - // :nth-child(5) { order: 3; } + width: 80%; } - .field--name-field-images { - order: 1; - .field__item img{ - max-width: 95%; - max-height: 150px; - object-fit: cover; - width: 100%; - padding-bottom: 1rem; - } - } - - .field--name-field-date{ - order: 2; - display: flex; - flex-direction: row; - justify-content: flex-start; - &:not(:last-child):after{ - padding-right: 1rem; - content: "|"; - } - time{ - font-size: 0.9rem; - font-weight: 800; - padding-right: 1rem; - width: fit-content; - // :not(:last-child):after{ - // padding-left: 0.5rem; - // content: "|"; - // } - + .views-row{ + // width: 80%; + // margin: auto; + .node-type-actualite{ + color: $black; + line-height: 1.5rem; + width: 80%; + height: 600px; + margin: auto; - } - } - .field--name-title{ - order:3; - } - .field--name-field-sous-titre{ - order:4; - margin-top: 0.3rem; - font-weight: 800; - } + // background-color: burlywood; + + div:first-child{ // block actu dans le bandeau + // display: flex; + // flex-direction: column; + // flex-wrap: wrap; + display: grid; + grid-template-columns: 1fr repeat(8, 1fr) 1fr; + .field--name-field-images { + order: 1; + grid-column: 1 /span 5; + grid-row: 1 / span 6; + .field__item img{ + max-height: 450px; + object-fit: contain; + // padding-bottom: 1rem; + max-width: 700px; + + } + } + + .field--name-field-date{ + display: inline; + + grid-column: 9 / span 7; + grid-row: 2; + order: 2; + // display: flex; + flex-direction: row; + // justify-content: flex-start; + // &:not(:last-child):after{ + // padding-right: 1rem; + // content: "|"; + // } + time{ + font-size: 0.9rem; + font-weight: 800; + padding-right: 1rem; + width: fit-content; + // :not(:last-child):after{ + // padding-left: 0.5rem; + // content: "|"; + // } + } + } + + .field--name-field-lieu{ + .field__label{ + display: none; + } + grid-column: 9 / span 9; + grid-row: 2; + } + .field--name-title{ + display: inline-flex; + grid-column: 9 / span 9; + grid-row: 3; + order:3; + } + .field--name-field-sous-titre{ + display: inline-block; + grid-column: 9 / span 9; + grid-row: 4; + order:4; + margin-top: 0.3rem; + font-weight: 800; + } + + .field:not(.field--name-field-images){ + width: 100%; + } + h2{ margin:0; } + a{ color: $black; } - .field:not(.field--name-field-images){ - width: 100%; - } - h2{ margin:0; } - a{ color: $black; } - - .inline.links{ - padding-top: none !important; - list-style: none; - width: fit-content; - align-self: flex-end; - padding-right: 1rem; - a{ - display: none; + .inline.links{ + // grid-column: 5; + // grid-row: 4; + padding-top: none !important; + list-style: none; + width: fit-content; + align-self: flex-end; + padding-right: 1rem; + a{ + display: none; + } + } + .field--name-field-actu-type{ + display: inline-block; + + grid-column: 9 / span 7; + grid-row: 5; + order:5; + padding-top: 1rem; + } + } + } } - .field--name-field-actu-type{ - order:5; - padding-top: 1rem; - } + + } } } + } // bouton voir toutes actus du bandeau bleu @@ -381,4 +407,14 @@ } } -} \ No newline at end of file + + //carte + + .block-views-blockprojets-block-2{ + #leaflet-map-view-projets-block-2{ + height: 500px !important; + } + } + + + } \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/_projet.scss b/web/themes/custom/eql/scss/pages/_projet.scss index 0b413be..6510225 100644 --- a/web/themes/custom/eql/scss/pages/_projet.scss +++ b/web/themes/custom/eql/scss/pages/_projet.scss @@ -6,39 +6,12 @@ .region-content{ #block-contenudelapageprincipale{ .layout--threecol-25-50-25{ - // display: grid; - // grid-template-rows: repeat(6, auto); - .layout__region--top{ .block-region-top{ - // position: relative; padding-top: 2rem; display: grid; grid-template-columns: 1fr repeat(8, 1fr) 1fr; - // @media (max-width: 479px) { - // display: flex; - // flex-direction: column; - // } - - // .block-block-contentbfb4368c-4f85-4329-88f1-8769161aa66f{ - // grid-column: 1 / span 10; - // background-color: $blue-light; - - // .field--name-body{ - // vertical-align: middle; - // color: $white; - // font-family: 'Source Code Pro'; - // font-size: 2rem; - // font-weight: 800; - // text-transform: uppercase; - // margin-left: 10%; - // a{ - // color:$white; - // } - // } - // } - .block-entity-fieldnodetitle{ diff --git a/web/themes/custom/eql/scss/partials/_slick-theme.scss b/web/themes/custom/eql/scss/partials/_slick-theme.scss new file mode 100644 index 0000000..0954a70 --- /dev/null +++ b/web/themes/custom/eql/scss/partials/_slick-theme.scss @@ -0,0 +1,201 @@ +@charset "UTF-8"; + +// Default Variables + +// Slick icon entity codes outputs the following +// "\2190" outputs ascii character "←" +// "\2192" outputs ascii character "→" +// "\2022" outputs ascii character "•" + +$slick-font-path: "./fonts/" !default; +$slick-font-family: "marianne" !default; +$slick-loader-path: "./" !default; +$slick-arrow-color: rgb(0,158,227) !default; +$slick-dot-color: black !default; +$slick-dot-color-active: $slick-dot-color !default; +$slick-prev-character: "\2190" !default; +$slick-next-character: "\2192" !default; +$slick-dot-character: "\2022" !default; +$slick-dot-size: 50px !default; +$slick-opacity-default: 0.75 !default; +$slick-opacity-on-hover: 1 !default; +$slick-opacity-not-active: 0.25 !default; + +@function slick-image-url($url) { + @if function-exists(image-url) { + @return image-url($url); + } + @else { + @return url($slick-loader-path + $url); + } +} + +@function slick-font-url($url) { + @if function-exists(font-url) { + @return font-url($url); + } + @else { + @return url($slick-font-path + $url); + } +} + +/* Slider */ + +.slick-list { + .slick-loading & { + background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; + } +} + +/* Icons */ +@if $slick-font-family == "slick" { + @font-face { + font-family: "slick"; + src: slick-font-url("slick.eot"); + src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); + font-weight: normal; + font-style: normal; + } +} + +/* Arrows */ + +.slick-prev, +.slick-next { + position: absolute; + display: block; + height: 60px; + width: 60px; + line-height: 0px; + font-size: 0px; + cursor: pointer; + background: transparent; + color: transparent; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + padding: 0; + border: none; + outline: none; + &:hover, &:focus { + outline: none; + background: transparent; + color: transparent; + &:before { + opacity: $slick-opacity-on-hover; + } + } + &.slick-disabled:before { + opacity: $slick-opacity-not-active; + } + &:before { + font-family: $slick-font-family; + font-size: 60px; + line-height: 1; + color: $slick-arrow-color; + opacity: $slick-opacity-default; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} + +.slick-prev { + z-index: 1; + left: 25px; + [dir="rtl"] & { + left: auto; + right: 25px; + } + &:before { + content: $slick-prev-character; + [dir="rtl"] & { + content: $slick-next-character; + } + } +} + +.slick-next { + right: 25px; + [dir="rtl"] & { + left: 25px; + right: auto; + } + &:before { + content: $slick-next-character; + [dir="rtl"] & { + content: $slick-prev-character; + } + } +} + + + +/* Dots */ + +.slick-dotted.slick-slider { + margin-bottom: 30px; +} + +html.js body.node-type-actualite.node-id-88.path-node.page-node-type-actualite div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.region.region-content div#block-contenudelapageprincipale.block.block-system.block-system-main-block div.layout.layout--threecol-25-50-25 div.layout__region.layout__region--top div.block-region-top div.block.block-ctools-block.block-entity-fieldnodefield-images div.field.field--name-field-images.field--type-image.field--label-hidden.field__items.slick-initialized.slick-slider.slick-dotted ul.slick-dots{ + width: 600px; +} + +.slick-dots { + position: absolute; + bottom: -25px; + list-style: none; + display: block; + text-align: center; + padding: 0; + margin: 0; + width: 100%; + li { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + margin: 0 5px; + padding: 0; + cursor: pointer; + button { + border: 0; + background: transparent; + display: block; + height: 20px; + width: 20px; + outline: none; + line-height: 0px; + font-size: 0px; + color: transparent; + padding: 5px; + cursor: pointer; + &:hover, &:focus { + outline: none; + &:before { + opacity: $slick-opacity-on-hover; + } + } + &:before { + position: absolute; + top: 0; + left: 0; + content: $slick-dot-character; + width: 20px; + height: 20px; + font-family: $slick-font-family; + font-size: $slick-dot-size; + line-height: 20px; + text-align: center; + color: $slick-dot-color; + opacity: $slick-opacity-not-active; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + &.slick-active button:before { + color: $slick-dot-color-active; + opacity: $slick-opacity-default; + } + } +} diff --git a/web/themes/custom/eql/scss/partials/_slick.scss b/web/themes/custom/eql/scss/partials/_slick.scss new file mode 100644 index 0000000..8d1fc9f --- /dev/null +++ b/web/themes/custom/eql/scss/partials/_slick.scss @@ -0,0 +1,100 @@ +/* Slider */ + +.slick-slider { + position: relative; + display: block; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} +.slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + + &:focus { + outline: none; + } + + &.dragging { + cursor: pointer; + cursor: hand; + } +} +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track { + position: relative; + left: 0; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; + + &:before, + &:after { + content: ""; + display: table; + } + + &:after { + clear: both; + } + + .slick-loading & { + visibility: hidden; + } +} +.slick-slide { + float: left; + height: 100%; + min-height: 1px; + [dir="rtl"] & { + float: right; + } + img { + display: block; + } + &.slick-loading img { + display: none; + } + + display: none; + + &.dragging img { + pointer-events: none; + } + + .slick-initialized & { + display: block; + } + + .slick-loading & { + visibility: hidden; + } + + .slick-vertical & { + display: block; + height: auto; + border: 1px solid transparent; + } +} +.slick-arrow.slick-hidden { + display: none; +} diff --git a/web/themes/custom/eql/scss/partials/_slick_carousel_custom.scss b/web/themes/custom/eql/scss/partials/_slick_carousel_custom.scss deleted file mode 100644 index e69de29..0000000 diff --git a/web/themes/custom/eql/scss/partials/_slick_custom.scss b/web/themes/custom/eql/scss/partials/_slick_custom.scss new file mode 100644 index 0000000..d78fa60 --- /dev/null +++ b/web/themes/custom/eql/scss/partials/_slick_custom.scss @@ -0,0 +1,5 @@ +.slick-prev { + color: $blue-light; + left: 25px; +} + diff --git a/web/themes/custom/eql/scss/styles.scss b/web/themes/custom/eql/scss/styles.scss index e774ed5..66ad5d2 100644 --- a/web/themes/custom/eql/scss/styles.scss +++ b/web/themes/custom/eql/scss/styles.scss @@ -58,7 +58,7 @@ /*partials*/ @import "partials/_header"; @import "partials/_footer"; -@import "partials/_slick_carousel_custom"; -// @import "partials/_slick-slider.scss"; -// @import "partials/_slick-theme.scss"; +// @import "partials/_slick_custom.scss"; +@import "partials/_slick"; +@import "partials/_slick-theme"; // @import "partials/_nodetyperessource.scss";