From b32487c2694cb8a9e68c4b5f278af8738ab59f4a Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 1 Jul 2024 12:00:51 +0200 Subject: [PATCH] css ancre --- web/themes/custom/reha/dist/bundle.js | 2 +- web/themes/custom/reha/dist/css/bundle.css | 30 +++++++++- web/themes/custom/reha/js/reha.js | 59 +++++++++++++++---- .../custom/reha/scss/pages/le-programme.scss | 42 +++++++++++-- 4 files changed, 114 insertions(+), 19 deletions(-) diff --git a/web/themes/custom/reha/dist/bundle.js b/web/themes/custom/reha/dist/bundle.js index be4cec9..aaf4f37 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 ////////////// tiroir fichiers ///////\n\n // $(\".profile--type--collaborateur\").click(function(event) {\n // // Ouvrir .tiroir fichiers\n // $(\".layout-sidebar-second\").animate({translate:'90%'},350);\n // });\n // $(\"#block-reha-views-block-current-user-doc-profile-block-1 > h2\").click(function(event) {\n // // Ouvrir .tiroir fichiers\n // $(\".layout-sidebar-second\").animate({translate:'0%'},350);\n // });\n $(document).ready(function() {\n // Vérifier l'état initial depuis sessionStorage\n if (sessionStorage.getItem('asideOpened') === 'true') {\n $(\".layout-sidebar-second\").addClass('close');\n $(\"h2\").addClass('__close');\n }\n\n $(\".profile--type--collaborateur\").click(function(event) {\n // Ouvrir .tiroir fichiers\n $(\".layout-sidebar-second\").addClass('close');\n $(\"h2\").addClass('__close');\n sessionStorage.setItem('asideOpened', 'true');\n });\n\n $(\"#block-reha-views-block-current-user-doc-profile-block-1 > h2\").click(function(event) {\n // Fermer .tiroir fichiers\n $(\".layout-sidebar-second\").removeClass('close');\n $(\"h2\").removeClass('__close');\n sessionStorage.setItem('asideOpened', 'false');\n });\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 adaptiveHeight: 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 .node-type-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 \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-region-first'),\n// fixedElementHeight = 500;\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\n\n})(jQuery, window);\n\n\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 ////////////// tiroir fichiers ///////\n\n // $(\".profile--type--collaborateur\").click(function(event) {\n // // Ouvrir .tiroir fichiers\n // $(\".layout-sidebar-second\").animate({translate:'90%'},350);\n // });\n // $(\"#block-reha-views-block-current-user-doc-profile-block-1 > h2\").click(function(event) {\n // // Ouvrir .tiroir fichiers\n // $(\".layout-sidebar-second\").animate({translate:'0%'},350);\n // });\n $(document).ready(function() {\n // Vérifier l'état initial depuis sessionStorage\n if (sessionStorage.getItem('asideOpened') === 'true') {\n $(\".layout-sidebar-second\").addClass('close');\n $(\"h2\").addClass('__close');\n }\n\n $(\".profile--type--collaborateur\").click(function(event) {\n // Ouvrir .tiroir fichiers\n $(\".layout-sidebar-second\").addClass('close');\n $(\"h2\").addClass('__close');\n sessionStorage.setItem('asideOpened', 'true');\n });\n\n $(\"#block-reha-views-block-current-user-doc-profile-block-1 > h2\").click(function(event) {\n // Fermer .tiroir fichiers\n $(\".layout-sidebar-second\").removeClass('close');\n $(\"h2\").removeClass('__close');\n sessionStorage.setItem('asideOpened', 'false');\n });\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 adaptiveHeight: 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 .node-type-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 \n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n\n// function adjustAnchor() {\n// var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL\n// var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element\n\n// if ($anchor.length > 0) {\n// $('html, body').stop().animate({\n// scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height\n// }, 0);\n// }\n// }\n\n// // Call the function on page load if there's a hash\n// if (window.location.hash) {\n// adjustAnchor();\n// }\n\n// // Adjust the anchor on hash change\n// $(window).on('hashchange', function() {\n// adjustAnchor();\n// });\n\n\n\n//////////////////////////////////////////\n// menu ancre paragraphe quand actif\n \n jQuery(function($) {\n // Function to set the active class based on the current path\n function setActiveLink() {\n var path = window.location.href;\n console.log(path);\n $(\".layout__region--first .block-region-first li a\").each(function() {\n if (this.href === path) {\n $(this).closest('a').addClass('active');\n }\n });\n }\n\n // Initially set the active link based on the current URL\n setActiveLink();\n\n // Update the active link on click\n $(\".layout__region--first .block-region-first li a\").on('click', function() {\n $(\".layout__region--first .block-region-first li a\").removeClass('active');\n $(this).addClass('active');\n });\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 59cc42f..b4d5287 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/web/themes/custom/reha/dist/css/bundle.css @@ -2584,13 +2584,41 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div position: relative; } .page-programme .layout__region--first .block-region-first { - padding-left: 18%; + padding-left: 20%; display: flex; justify-content: flex-end; position: -webkit-sticky; position: sticky; top: 10rem; } +.page-programme .layout__region--first .block-region-first > .block-block-content { + width: 100%; +} +.page-programme .layout__region--first .block-region-first > .block-block-content ul { + padding-left: 0; + padding-right: 30%; +} +.page-programme .layout__region--first .block-region-first > .block-block-content ul li a { + display: flex; + flex-direction: column; + padding-bottom: 0.6rem; + padding-top: 0.6rem; +} +.page-programme .layout__region--first .block-region-first > .block-block-content ul li a::after { + content: ""; + width: 25%; + margin-top: 0.6rem; + border-bottom: #fdc300 solid 1px; +} +.page-programme .layout__region--first .block-region-first > .block-block-content ul li a:hover, .page-programme .layout__region--first .block-region-first > .block-block-content ul li a.active { + font-weight: 800; +} +.page-programme .layout__region--first .block-region-first > .block-block-content ul li a:hover::after, .page-programme .layout__region--first .block-region-first > .block-block-content ul li a.active::after { + content: ""; + width: 25%; + margin-top: 0.6rem; + border-bottom: #fdc300 solid 2px; +} .page-programme .block-region-second h2 { font-weight: 1000; font-size: 1.8rem; diff --git a/web/themes/custom/reha/js/reha.js b/web/themes/custom/reha/js/reha.js index 791727c..7cc8377 100644 --- a/web/themes/custom/reha/js/reha.js +++ b/web/themes/custom/reha/js/reha.js @@ -194,19 +194,54 @@ jQuery(document).ready(function($){ //// ancre dans texte au click parragraphe correspondant arrive en dessous du header -// (function($, window) { -// var adjustAnchor = function() { -// var $anchor = $('.block-region-first'), -// fixedElementHeight = 500; -// if ($anchor.length > 0) { -// $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0); -// } -// }; -// $(window).on('hashchange', function() { -// adjustAnchor(); -// }); -// }); +// function adjustAnchor() { +// var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL +// var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element + +// if ($anchor.length > 0) { +// $('html, body').stop().animate({ +// scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height +// }, 0); +// } +// } + +// // Call the function on page load if there's a hash +// if (window.location.hash) { +// adjustAnchor(); +// } + +// // Adjust the anchor on hash change +// $(window).on('hashchange', function() { +// adjustAnchor(); +// }); + + + +////////////////////////////////////////// +// menu ancre paragraphe quand actif + + jQuery(function($) { + // Function to set the active class based on the current path + function setActiveLink() { + var path = window.location.href; + console.log(path); + $(".layout__region--first .block-region-first li a").each(function() { + if (this.href === path) { + $(this).closest('a').addClass('active'); + } + }); + } + + // Initially set the active link based on the current URL + setActiveLink(); + + // Update the active link on click + $(".layout__region--first .block-region-first li a").on('click', function() { + $(".layout__region--first .block-region-first li a").removeClass('active'); + $(this).addClass('active'); + }); + }); })(jQuery, window); diff --git a/web/themes/custom/reha/scss/pages/le-programme.scss b/web/themes/custom/reha/scss/pages/le-programme.scss index f3c5c72..9c6c961 100644 --- a/web/themes/custom/reha/scss/pages/le-programme.scss +++ b/web/themes/custom/reha/scss/pages/le-programme.scss @@ -4,13 +4,45 @@ position: relative; .block-region-first{ - padding-left: 18%; + + padding-left: 20%; display: flex; justify-content: flex-end; position: -webkit-sticky; position: sticky; top: 10rem; - + > .block-block-content{ + width: 100%; + ul{ + padding-left: 0; + padding-right: 30%; + li{ + a{ + display: flex; + flex-direction: column; + padding-bottom: 0.6rem; + padding-top: 0.6rem; + &::after{ + content:''; + width: 25%; + margin-top: 0.6rem; + border-bottom: $yellow-puca solid 1px; + } + + &:hover, + &.active{ + font-weight: 800; + &::after{ + content:''; + width: 25%; + margin-top: 0.6rem; + border-bottom: $yellow-puca solid 2px; + } + } + } + } + } + } } } .block-region-second{ @@ -28,7 +60,7 @@ padding-top: 1rem; } - .block-config-pages-block{ + .block-config-pages-block{ margin: 0; width: 80%; padding-top: 1rem; @@ -69,11 +101,11 @@ .field--name-field-lien{ background-color: none; } - + } } - } + } } }