From 436ec2621633a5e13871d9615701cee5c856b742 Mon Sep 17 00:00:00 2001 From: ouidade Date: Sun, 23 Jun 2024 23:29:21 +0200 Subject: [PATCH] slide site --- web/themes/custom/reha/dist/bundle.js | 2 +- web/themes/custom/reha/dist/css/bundle.css | 24 +++--- web/themes/custom/reha/js/reha.js | 82 ++++++------------- .../custom/reha/scss/pages/node-site.scss | 4 +- .../reha/scss/partials/_slick-theme.scss | 16 ++-- .../reha/scss/partials/_slick_custom.scss | 3 +- 6 files changed, 46 insertions(+), 85 deletions(-) diff --git a/web/themes/custom/reha/dist/bundle.js b/web/themes/custom/reha/dist/bundle.js index ec337b0..c4baad3 100644 --- a/web/themes/custom/reha/dist/bundle.js +++ b/web/themes/custom/reha/dist/bundle.js @@ -15,7 +15,7 @@ \********************/ /***/ (() => { -eval("/**\n * @file\n * reha behaviors.\n */\n(function (Drupal) {\n\n 'use strict';\n\n Drupal.behaviors.reha = {\n attach: function (context, settings) {\n\n console.log('It works!');\n\n }\n };\n\n \n} (Drupal));\n\njQuery(document).ready(function($){\n\n // menu déroulant\n\n ////////////// contacts ///////\n\n $(\".bouton-contact\").click(function(event) {\n // Fermer .connexion-full s'il est déroulé\n if ($(\".connexion-full\").is(\":visible\")) {\n $(\".connexion-full\").slideUp();\n }\n if ($(\".connected-full\").is(\":visible\")) {\n $(\".connected-full\").slideUp();\n }\n // Ouvrir .contacts-full\n $(\".contacts-full\").slideToggle();\n\n });\n\n////////////// connexion ///////\n\n $(\".bouton-connexion\").click(function(event) {\n // Fermer .contacts-full s'il est déroulé\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n // Ouvrir .connexion-full\n $(\".connexion-full\").slideToggle();\n });\n \n $(\".bouton-connected\").click(function(event) {\n // Fermer .contacts-full s'il est déroulé\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n // Ouvrir .connected-full\n $(\".connected-full\").slideToggle();\n });\n \n $(\".titre\").click(function(event) {\n if ($(\".connected-full\").is(\":visible\")) {\n $(\".connected-full\").slideUp();\n }\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n if ($(\".connexion-full\").is(\":visible\")) {\n $(\".connexion-full\").slideUp();\n }\n // // Ouvrir .connexion-full\n // $(\".connected-full\").slideToggle();\n });\n \n $(\"#edit-field-dossier-de-candidature-0--label\").click(function(event) {\n event.preventDefault();\n // Ouvrir .connexion-full\n $(\"#edit-field-dossier-de-candidature-0--description>ul.main\").slideToggle();\n });\n\n});\n\n\n// slideshow home \n\n(function($, window) {\n console.log('hello slick')\n $(document).ready(function(){\n $('.view-id-sites.view-display-id-block_1').slick({\n slidesToShow: 1,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n $(document).ready(function(){\n $('.view-id-actus.view-display-id-block_1').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('slick actu');\n });\n\n // $(document).ready(function(){\n // $('.field--name-field-image > div:nth-child(2)').slick({\n // slidesToShow: 1,\n // slidesToScroll: 1,\n // dots: true,\n // arrows: false,\n // centerMode: true,\n // // centerPadding: '100px',\n // responsive: [\n // {\n // breakpoint: 810,\n // settings: {\n // slidesToShow: 1,\n // adaptiveHeight: true,\n // arrows: false,\n // draggable: true,\n // centerMode: true,\n // }\n // }]\n // });\n // console.log('slick site'); \n\n// });\n\n\n\n})(jQuery, window);\n\n\n// document.addEventListener('DOMContentLoaded', function() {\n// var nav = document.querySelectorAll('main-nav');\n// var links = nav.querySelectorAll('li > a');\n// console.log(links);\n\n\n// links.forEach(function(link) {\n// if (link.classList.contains('is-active')) {\n// nav.classList.add('has-active');\n// }\n// });\n// });\n\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n// (function($, window) {\n// var adjustAnchor = function() {\n// var $anchor = $('.block-views-blockhome-block-1'),\n// fixedElementHeight = 350;\n// if ($anchor.length > 0) {\n// $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n// }\n// };\n\n// $(window).on('hashchange', function() {\n// adjustAnchor();\n// });\n\n// })(jQuery, window);\n\n//# sourceURL=webpack://dev.reha.fr/./js/reha.js?"); +eval("/**\n * @file\n * reha behaviors.\n */\n(function (Drupal) {\n\n 'use strict';\n\n Drupal.behaviors.reha = {\n attach: function (context, settings) {\n\n console.log('It works!');\n\n }\n };\n\n \n} (Drupal));\n\njQuery(document).ready(function($){\n\n // menu déroulant\n\n ////////////// contacts ///////\n\n $(\".bouton-contact\").click(function(event) {\n // Fermer .connexion-full s'il est déroulé\n if ($(\".connexion-full\").is(\":visible\")) {\n $(\".connexion-full\").slideUp();\n }\n if ($(\".connected-full\").is(\":visible\")) {\n $(\".connected-full\").slideUp();\n }\n // Ouvrir .contacts-full\n $(\".contacts-full\").slideToggle();\n\n });\n\n////////////// connexion ///////\n\n $(\".bouton-connexion\").click(function(event) {\n // Fermer .contacts-full s'il est déroulé\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n // Ouvrir .connexion-full\n $(\".connexion-full\").slideToggle();\n });\n \n $(\".bouton-connected\").click(function(event) {\n // Fermer .contacts-full s'il est déroulé\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n // Ouvrir .connected-full\n $(\".connected-full\").slideToggle();\n });\n \n $(\".titre\").click(function(event) {\n if ($(\".connected-full\").is(\":visible\")) {\n $(\".connected-full\").slideUp();\n }\n if ($(\".contacts-full\").is(\":visible\")) {\n $(\".contacts-full\").slideUp();\n }\n if ($(\".connexion-full\").is(\":visible\")) {\n $(\".connexion-full\").slideUp();\n }\n // // Ouvrir .connexion-full\n // $(\".connected-full\").slideToggle();\n });\n \n $(\"#edit-field-dossier-de-candidature-0--label\").click(function(event) {\n event.preventDefault();\n // Ouvrir .connexion-full\n $(\"#edit-field-dossier-de-candidature-0--description>ul.main\").slideToggle();\n });\n\n});\n\n\n// slideshow home \n\n(function($, window) {\n console.log('hello slick')\n $(document).ready(function(){\n $('.view-id-sites.view-display-id-block_1').slick({\n slidesToShow: 1,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n $(document).ready(function(){\n $('.view-id-actus.view-display-id-block_1').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('slick actu');\n });\n $(document).ready(function(){\n $('.page-node-site .field--name-field-image > div:nth-child(2)').slick({\n slidesToShow: 1,\n slidesToScroll: 1,\n dots: true,\n arrows: false,\n adaptiveHeight: true,\n // centerMode: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('slick actu');\n });\n\n\n})(jQuery, window);\n\n\n\n//# sourceURL=webpack://dev.reha.fr/./js/reha.js?"); /***/ }), diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css index 6328110..7a0ab2a 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/web/themes/custom/reha/dist/css/bundle.css @@ -1011,7 +1011,7 @@ input { .slick-dots { position: absolute; - bottom: -25px; + bottom: -60px; list-style: none; display: block; text-align: center; @@ -1022,8 +1022,8 @@ input { .slick-dots li { position: relative; display: inline-block; - height: 20px; - width: 20px; + height: 50px; + width: 50px; margin: 0 5px; padding: 0; cursor: pointer; @@ -1032,8 +1032,8 @@ input { border: 0; background: transparent; display: block; - height: 20px; - width: 20px; + height: 50px; + width: 50px; outline: none; line-height: 0px; font-size: 0px; @@ -1052,10 +1052,10 @@ input { top: 0; left: 0; content: "•"; - width: 20px; - height: 20px; + width: 50px; + height: 50px; font-family: "slick"; - font-size: 6px; + font-size: 40px; line-height: 20px; text-align: center; color: black; @@ -1161,10 +1161,6 @@ input { display: none; } -.home-page-layout-content .slick-dots { - bottom: -40px !important; -} - .view-actus.slick-slider.slick-next:before { content: ">"; font-weight: 100; @@ -2177,13 +2173,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div .page-node-site .region-content .node-type-site .image-site .field--name-field-image .field__item img { width: 100%; object-fit: cover; - height: fit-content; + height: auto; } .page-node-site .region-content .node-type-site .image-site .field--name-field-image .field__item blockquote { align-self: flex-end; font-style: italic; margin: 0; - width: 10%; + width: 20%; } .page-node-site .region-content .node-type-site .image-site .field--name-field-image .field__item blockquote p { margin: 0; diff --git a/web/themes/custom/reha/js/reha.js b/web/themes/custom/reha/js/reha.js index a222de9..77520d5 100644 --- a/web/themes/custom/reha/js/reha.js +++ b/web/themes/custom/reha/js/reha.js @@ -129,66 +129,30 @@ jQuery(document).ready(function($){ }); console.log('slick actu'); }); - - // $(document).ready(function(){ - // $('.field--name-field-image > div:nth-child(2)').slick({ - // slidesToShow: 1, - // slidesToScroll: 1, - // dots: true, - // arrows: false, - // centerMode: true, - // // centerPadding: '100px', - // responsive: [ - // { - // breakpoint: 810, - // settings: { - // slidesToShow: 1, - // adaptiveHeight: true, - // arrows: false, - // draggable: true, - // centerMode: true, - // } - // }] - // }); - // console.log('slick site'); - -// }); - + $(document).ready(function(){ + $('.page-node-site .field--name-field-image > div:nth-child(2)').slick({ + slidesToShow: 1, + slidesToScroll: 1, + dots: true, + arrows: false, + adaptiveHeight: true, + // centerMode: true, + // centerPadding: '100px', + responsive: [ + { + breakpoint: 810, + settings: { + slidesToShow: 1, + adaptiveHeight: true, + arrows: false, + draggable: true, + centerMode: true, + } + }] + }); + console.log('slick actu'); + }); })(jQuery, window); - -// document.addEventListener('DOMContentLoaded', function() { -// var nav = document.querySelectorAll('main-nav'); -// var links = nav.querySelectorAll('li > a'); -// console.log(links); - - -// links.forEach(function(link) { -// if (link.classList.contains('is-active')) { -// nav.classList.add('has-active'); -// } -// }); -// }); - - - -// ///////////////// -//// ancre dans texte au click parragraphe correspondant arrive en dessous du header - - -// (function($, window) { -// var adjustAnchor = function() { -// var $anchor = $('.block-views-blockhome-block-1'), -// fixedElementHeight = 350; -// if ($anchor.length > 0) { -// $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0); -// } -// }; - -// $(window).on('hashchange', function() { -// adjustAnchor(); -// }); - -// })(jQuery, window); \ No newline at end of file diff --git a/web/themes/custom/reha/scss/pages/node-site.scss b/web/themes/custom/reha/scss/pages/node-site.scss index 6160cb1..1800c74 100644 --- a/web/themes/custom/reha/scss/pages/node-site.scss +++ b/web/themes/custom/reha/scss/pages/node-site.scss @@ -44,13 +44,13 @@ img{ width: 100%; object-fit: cover; - height: fit-content; + height: auto; } blockquote{ align-self: flex-end; font-style: italic; margin: 0; - width: 10%; + width: 20%; p{ margin: 0; diff --git a/web/themes/custom/reha/scss/partials/_slick-theme.scss b/web/themes/custom/reha/scss/partials/_slick-theme.scss index deba2c0..82771bf 100644 --- a/web/themes/custom/reha/scss/partials/_slick-theme.scss +++ b/web/themes/custom/reha/scss/partials/_slick-theme.scss @@ -16,7 +16,7 @@ $slick-dot-color-active: $slick-dot-color !default; $slick-prev-character: "\003C" !default; $slick-next-character: "\003E" !default; $slick-dot-character: "\2022" !default; -$slick-dot-size: 6px !default; +$slick-dot-size: 40px !default; $slick-opacity-default: 0.75 !default; $slick-opacity-on-hover: 1 !default; $slick-opacity-not-active: 0.25 !default; @@ -146,7 +146,7 @@ $slick-opacity-not-active: 0.25 !default; .slick-dots { position: absolute; - bottom: -25px; + bottom: -60px; list-style: none; display: block; text-align: center; @@ -156,8 +156,8 @@ $slick-opacity-not-active: 0.25 !default; li { position: relative; display: inline-block; - height: 20px; - width: 20px; + height: 50px; + width: 50px; margin: 0 5px; padding: 0; cursor: pointer; @@ -165,8 +165,8 @@ $slick-opacity-not-active: 0.25 !default; border: 0; background: transparent; display: block; - height: 20px; - width: 20px; + height: 50px; + width: 50px; outline: none; line-height: 0px; font-size: 0px; @@ -184,8 +184,8 @@ $slick-opacity-not-active: 0.25 !default; top: 0; left: 0; content: $slick-dot-character; - width: 20px; - height: 20px; + width: 50px; + height: 50px; font-family: $slick-font-family; font-size: $slick-dot-size; line-height: 20px; diff --git a/web/themes/custom/reha/scss/partials/_slick_custom.scss b/web/themes/custom/reha/scss/partials/_slick_custom.scss index fafaa6a..bdef070 100644 --- a/web/themes/custom/reha/scss/partials/_slick_custom.scss +++ b/web/themes/custom/reha/scss/partials/_slick_custom.scss @@ -7,7 +7,7 @@ $slick-arrow-color: $yellow-puca !default; .home-page-layout-content{ .slick-dots { - bottom: -40px !important; + // bottom: -40px !important; } } @@ -18,3 +18,4 @@ $slick-arrow-color: $yellow-puca !default; background: rgba(255, 255, 255, 0.1); } } +