From 72c2c9ff59e9a67b39811fc3b8480648a0ee1b35 Mon Sep 17 00:00:00 2001 From: ouidade Date: Sat, 6 Jul 2024 21:37:58 +0200 Subject: [PATCH] fix bug slide actu --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 25 ++-- .../dist/assets/css/fonts/slick.eot | Bin 0 -> 2048 bytes .../dist/assets/css/fonts/slick.svg | 14 ++ .../dist/assets/css/fonts/slick.ttf | Bin 0 -> 1892 bytes .../dist/assets/css/fonts/slick.woff | Bin 0 -> 1380 bytes .../src/assets/js/quartiers_de_demain.js | 68 +++++++--- .../src/assets/scss/partials/_header.scss | 123 ++++-------------- .../src/assets/scss/partials/slick-theme.scss | 2 +- 9 files changed, 107 insertions(+), 127 deletions(-) create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.eot create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.svg create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.ttf create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.woff diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js index baca342..effbb3d 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -36,7 +36,7 @@ eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.query \**********************************************/ /***/ (() => { -eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n // jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\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 = $('.sidebar_first_container'),\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//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.view');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.content-actus').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n}\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n \n // Check and replace empty day fields\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const dateElement = paragraph.querySelector('.date');\n const dayField = paragraph.querySelector('.field_field_date_de_jour');\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n\n if (dayField && dayField.textContent.trim()) {\n dateElement.classList.add('jour');\n } else {\n dateElement.classList.add('mois');\n const monthText = monthField.textContent.trim();\n // console.log(monthText)\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n console.log(monthField)\n }\n }\n });\n\n // Initialize\n showSlides(currentSlide);\n});\n\n\n\n\n// slideshow home \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\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})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); +eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\n\n\n\n });\n\n //////// header ////////////\n document.addEventListener('DOMContentLoaded', function() {\n const headerNavContainer = document.querySelector('.header_nav_container');\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n \n if (scrollTop > threshold && !isHidden) {\n slideOut();\n } else if (scrollTop <= threshold && isHidden) {\n slideIn();\n }\n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n window.addEventListener('scroll', function() {\n handleScroll();\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 = $('.sidebar_first_container'),\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//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n \n // Check and replace empty day fields\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const dateElement = paragraph.querySelector('.date');\n const dayField = paragraph.querySelector('.field_field_date_de_jour');\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n\n if (dayField && dayField.textContent.trim()) {\n dateElement.classList.add('jour');\n } else {\n dateElement.classList.add('mois');\n const monthText = monthField.textContent.trim();\n // console.log(monthText)\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n console.log(monthField)\n }\n }\n });\n\n // Initialize\n showSlides(currentSlide);\n});\n\n\n\n\n// slideshow home \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\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})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); /***/ }) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 7720efa..2baae63 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -226,12 +226,12 @@ header { display: flex; flex-direction: row; height: 320px; - background-color: rgb(255, 255, 255); z-index: 99; - width: 38vw; max-width: 100vw; position: fixed; top: 0; + transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ + /* Classes for scroll effect */ } header .contextual-region { width: max-content; @@ -240,9 +240,8 @@ header .header_left_container { flex: 0 0 60%; display: flex; flex-direction: row; - border-bottom: 1px solid #808080; - padding-left: 2%; - padding-right: 2%; + transition: transform 0.3s, height 0.3s; /* Add transition for smooth sliding and resizing */ + background-color: rgb(255, 255, 255); } @media (max-width: 660px) { header .header_left_container { @@ -275,6 +274,7 @@ header .header_left_container img { margin: auto; height: calc(320px - 5rem); padding: 2rem; + transition: height 0.3s; /* Add transition for smooth resizing */ } @media (max-width: 891px) { header .header_left_container img { @@ -334,12 +334,12 @@ header .header_right_container .language-switcher-language-url ul .is-active { } header .header_nav_container { flex: 0 0 30%; - top: 100%; width: 100%; background: rgb(7, 50, 194); - border-bottom: 1px solid #808080; - border-top: 1px solid #808080; text-align: center; + transform: translateX(0); + transition: transform 0.3s ease-in-out; + z-index: -1; } header .header_nav_container #block-quartiers-de-demain-entete h2 { display: none; @@ -365,6 +365,13 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-o border-bottom: solid white 1px; padding-bottom: 0.3rem; } +header .header_nav_container.hidden { + transform: translateX(30%); +} +header .header_nav_container.visible { + transform: translateX(0); +} + footer { z-index: 100; } @@ -710,7 +717,7 @@ footer span.totop #toTop .arrow-up::before { font-family: "slick"; font-size: 20px; line-height: 1; - color: red; + color: black; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.eot b/web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.eot new file mode 100644 index 0000000000000000000000000000000000000000..2cbab9ca97723bc24c50315a0a9bd155db4e0aa5 GIT binary patch literal 2048 zcmcgtO>7%Q6n^9V^B-}NZk*EEVeMi&O%prb7zafaL6A786eTJs%>e;R;y4y|oY<}i z5)vjt;=&>7feV}}ai#*PAS5oRLOp@#1tg{ z_p`I}$V;?l5Ha!)A0EnC8 zkxFz4m_v0SVOj=KhgO+tv`H3aDNU1*9JB<$9X&!VQfR4Acvv~GM)n(S(uwI zP>yu)qu{N@7c=(ay}v($(F*wG)vB`<56yoK{s!jjC8x2~>0l=^EXcj3%3JHRA6a>A<{O0ZEn>X&CKUE{OdnKJ}+`Zes`|-FTNT&dzS)k{lDMd zc?WV5Yl0H2&DvnS^7UXV{5g_#^+EG0^$t}a2F=}nrQC{ZJuTIkhu9uz68^}NcC@rUzlL3$*kyLRbDPqv-Qlsw2;7Lcy_kqz{J1gl7BeDsUk1mm zBBY9_f+9l|h-1ZLd$G%SSA6tvolk!G^;YxNcGsJbS^LQ5 z?5U$!?eFs}j@Xc?pJ6ECEH5!HsG*xEBz{viuj-VI1c!vTQ=-HKh*wf){! zK-YYuV>8i6WY7!-0zq>y5{bq~tYbP;m6YO%ojIM$B*#yjGzSLElPAWLnX%OAXu=x| zurFF(e<0vXrCh5ScZ*P8M1i5=QB$Vrn!MuLhXx`EuPP6AkUo^(3B$b*l(dHoic4Cd z7%pq~TT-F(v7|K$&{vYyf#2j`w(0}oM}1w|gElZIX@#DlF-fb?*^{(}#&AW_I`D6M z+eo8QUPU)K)JiTCOP4ARdP+ewlBQVeXf{Q%$QDh-q8ZTp4aw!R=o}Mb+GsqSqe5-7 zS*X=ZMaxc4S~HgLh&7v=$W7RjS*YyqLNcC*G_vJly-}`hTG=$Z+EJ^+H`LMl3H=!L z^Dqxn=zW^=JN0_)&3d`C(ew$jQe1CBg=^uS#AObu5A!&O1h1eoGTg0QU&6 + + +Generated by Fontastic.me + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.ttf b/web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.ttf new file mode 100644 index 0000000000000000000000000000000000000000..9d03461b653373f7cda3b4af104c6bca07f9892b GIT binary patch literal 1892 zcmcgtO>7%Q7=7dYvttuC>BcFo9o8<6(=@T2jd4&^kqQzA6;LWbX$}ZjQpdJ%;>2-9 zkdO!w5*H3p4_x3>i8B>Q1tD=k2=xS_7m$ofCB&7VLwiBUyq#S)NmC98iCxXk_rBjZ z-_FiL0C)h~P;kCfdj6T!@2-CY7*A3gpP!v8p#YtDgxFemE@v;?`RijqEDIs?@EmH#S?j zPi)rLf1rI1?%Fth|LVxXOVKm85e`rRe7mvr=G{4sv}lVqaS)za#z;-pQ&4s@?Y~s1 zF)-`LxQ;^V&iZa50I>@VLGiR$p>E!vZ{tC{&2B&od7j&{9xM+5=U3(~;w+rxWpS%> z3t7?bxa@oeU5f6^LH6=?gSl=w;=b<-L~c|ZD)Rvmxk8naW2KV2$;*6K?zInfKK$wD zo2{E0-D=X#hu|LQwtx$hrMosccZ~;>{}Qmqf4;bv{)elCcX3t3_yW4S=NPy{XGF1( z6T>G{QK1i*4+%p)W0Q8#G;~8xWrj1ug{k6H(H@Kq{;{L$JDL&H61sljg03gDpz&K` z$j-l!w}%p4VPi+{rJFXS86kCPNevkkZya!OeYxg)xTL3wkC2S_^eBNCzWf@#%K3CmarCGG5fQmm=C5R~V=S)Qo9* zAuoFI(Y|;(sQMc_g7^H7Nbp>U_;LUSQogJpi8WtV>GOdvYY5|WU)HI=;eOd_h?*Yu z*OLS2MZYgAcpRg?tkP%Kmo>z2#g}#Jzs4r&s9_ne0-N>PGN)%zMg^CschDp(S1#2Z z3MDkittICsJ<70PBa1xeX^y>29-iQzV_XiKJ}yG3vDPXznw7F;XYNfv0h$j(Z%)RImyGEQZL6bS0%B+KcnE;+N~vPeDmw~?!W86Kjv>PckT%Q literal 0 HcmV?d00001 diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.woff b/web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.woff new file mode 100644 index 0000000000000000000000000000000000000000..8ee99721bb81b59a5e1ceee1d3256b15f907d96b GIT binary patch literal 1380 zcmZWoc~H_>9DiItQdGPuZL>_xgDjCHpv=4wk37&Nx3m(F$RqMd4ZI>#sTnIvS4$mr zYIRq0kV)NX%VjCA6!RLbG&S?cF0*sBT4Nv8fBW8i=FR8xz30vMSTKtf%;5wBfD-@$ zfCs-1ptSG*j~9z&2>@yZ0O&0cW$QnM8L(KKKmafd=)DGFt!Us*gAdc21vQSALs$X| zzy|;1M1fiYDb!#MKm#b}&(TnX8WVDD zJ{!y|8WSx_7DJ5-xq%i~f8a0TiD5phwg&PQI5s%K6CH#a^aW$E#u1#|iQ5VBN0Z^a z+Wrh7ECB|f#O1CR`r?f}Ogj%bMA#Kog;~-(rbgn@>1o4d$4nYiRyuAWwB_b_E;YM} zZ@NV6aV$`k?$I^#Wy?FR9QXZfCw>r^*1y-k$0lC+Q7Ne`X`$=sB1Wy`n;#2J7g5fr zwyHxDSEMClZ`L6n$e70#EAWLIl3&MaoK(k+l#St%Y&(Sx=VqDv(*x+{1v@swNPOd5 z_D&(udjRFH?3%?ol%y>x6(M%zP2C#?oZgpRVvQB6J2<-s z1XZ2vz<(2aNi{4LTCF&BxGP@+$wvm5GG@1!A5n$t7wEd@)dWbK1t7 zAI3J92@9!?&4dSMUJZ6VPu@Y5=2}-+pk@x!aH)vCoky=Cjr>DnYdb;5B3lEE)C=baaLJ_-dKR1 zWr9+1d0o&|%I}m3VT=Au5?NY}TCUN7+x*?X<*rIq)!7En?lfx*iHingK58Bf7Yt(K z_X`Li%+9B6@V=(#SWT`XQx%ekcKa;n!7{j@jA|tbPOhjX{3cs;}XV-aNF@z-Qg~t z^N?v#oy+p0z}5Q)3S^P$>6P=;iqWo=dqdtaskSzCVSy7fDSNx#E>`??q5MPtvepFdF46=ngEMs$@2`LCj^yh_!*S07+8;<}0 literal 0 HcmV?d00001 diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js index f2dc1c7..d644046 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js +++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js @@ -14,7 +14,7 @@ } (Drupal)); - // jQuery(document).ready(function($){ + jQuery(document).ready(function($){ // $('.open-block').click(function(){ // $(this).toggleClass('opened'); @@ -35,8 +35,55 @@ - // }); + }); + //////// header //////////// + document.addEventListener('DOMContentLoaded', function() { + const headerNavContainer = document.querySelector('.header_nav_container'); + let lastScrollTop = 0; + let threshold = 100; // Change this value as needed + let isHidden = false; + + function slideOut() { + headerNavContainer.animate([ + { transform: 'translateX(0)' }, + { transform: 'translateX(-100%)' } + ], { + duration: 300, + fill: 'forwards' + }); + isHidden = true; + } + + function slideIn() { + headerNavContainer.animate([ + { transform: 'translateX(-100%)' }, + { transform: 'translateX(0)' } + ], { + duration: 300, + fill: 'forwards' + }); + isHidden = false; + } + + function handleScroll() { + let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + + if (scrollTop > threshold && !isHidden) { + slideOut(); + } else if (scrollTop <= threshold && isHidden) { + slideIn(); + } + + lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling + } + + window.addEventListener('scroll', function() { + handleScroll(); + }); + }); + + // ///////////////// //// ancre dans texte au click parragraphe correspondant arrive en dessous du header @@ -118,23 +165,6 @@ document.addEventListener('DOMContentLoaded', function() { document.getElementById('arrowNext').disabled = currentSlide === maxSlide; } - function showSlides(index) { - const slides = document.querySelectorAll('.view'); - const totalSlides = slides.length; - const visibleSlides = 3; // Number of slides to show at a time - const maxSlide = totalSlides - visibleSlides; - - // Adjust the index to ensure it stays within bounds - currentSlide = Math.max(0, Math.min(index, maxSlide)); - - // Calculate the offset for the transform - const offset = currentSlide * -100 / visibleSlides; - document.querySelector('.content-actus').style.transform = `translateX(${offset}%)`; - - // Enable/disable arrows based on the current slide - document.getElementById('arrowPrev').disabled = currentSlide === 0; - document.getElementById('arrowNext').disabled = currentSlide === maxSlide; -} function prevSlide() { showSlides(currentSlide - 1); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss index 3ba0c6c..d500658 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss @@ -1,46 +1,29 @@ header{ - // display: grid; - // grid-template-columns: 2.5fr 1fr; - // // grid-gap: 10px; - // grid-template-rows: repeat(3, 1fr); display: flex; flex-direction: row; height: $header-height; - background-color: $white-header; + // background-color: $white-header; z-index: 99; - width: 38vw; + // width: 38vw; max-width: 100vw; position: fixed; top: 0; - // border: 1px solid #808080; - // @media (max-width:810px) { - // // width: 800px; - // height: $header-height-pad; - // } - // @media(max-width: 660px){ - // height: $header-height-small; - // } - // @media(max-width: 450px){ - // display: flex; - // height: $header-height-ultrasmall; - // } + transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ + + .contextual-region{ width: max-content; } .header_left_container{ - // grid-column: 1 ; - // grid-row: 1 /span 3; flex: 0 0 60%; display: flex; flex-direction: row; - border-bottom: 1px solid #808080; - padding-left: 2%; - padding-right: 2%; + transition: transform 0.3s, height 0.3s; /* Add transition for smooth sliding and resizing */ + background-color: $white-header; @media(max-width: 660px){ height: inherit; } - #block-quartiers-de-demain-logorepu-2{ display: none; @media(max-width: 891px){ @@ -56,16 +39,15 @@ header{ } #block-quartiers-de-demain-logoquartiersdedemain{ - // margin-left: auto; padding-right: 5%; margin: auto; - } img{ width: auto; margin: auto; height: calc($header-height - 5rem); padding: 2rem; + transition: height 0.3s; /* Add transition for smooth resizing */ @media(max-width: 891px){ height: $header-height-pad; } @@ -107,36 +89,23 @@ header{ } } } - .is-active{ font-weight: 600; - } - } - } - } .header_nav_container{ - // display: none; - // grid-row: 3; - // grid-column: 1 /span 2; - // position: absolute; flex: 0 0 30%; - top: 100%; width: 100%; background: $blue_QDD; - border-bottom: 1px solid #808080; - border-top: 1px solid #808080; - // font-size: $font-big; text-align: center; + transform: translateX(0); + transition: transform 0.3s ease-in-out; + z-index: -1 ; + #block-quartiers-de-demain-entete{ - // grid-column: 1 /span 11; - - // order: 2; - // margin: auto; h2{ display: none; } @@ -166,7 +135,6 @@ header{ } } - } @media(max-width: 660px){ @@ -174,61 +142,22 @@ header{ } } - // .display-nav-opened{ - // display: grid; - // grid-template-columns: repeat(12, 1fr); - // grid-gap: 10px; - // } + /* Classes for scroll effect */ - - // .open-block, .open-block.opened{ - // cursor:pointer; - // span{ - // display: block; - // width: 58px; - // height: 2px; - // position: relative; - // background: black; - // border-radius: 3px; - // z-index: 1; - // @media(max-width: 660px){ - // width: 25px; - // } - // } - // } - // .open-block{ - // height: 100%; - // display: grid; - // align-items: center; - // margin: auto; - // @media(max-width: 450px){ - // height: $header-height-ultrasmall; - // } - // span{ - // margin-bottom: 13px; - // transform-origin: 4px 0px; - // @media(max-width: 660px){ - // margin-bottom: 5px; - // } - // } +// &.shrink { +// height: var(--header-height-small); +// } - // } - // .open-block.opened { - // margin: auto; - // span { - // transform-origin: center; - // margin-bottom: 0; - // } - // &>div>span:first-child { - // transform: translateY(57%) rotate(45deg); - // } - // &>div>span:nth-child(2) { - // transform: rotate(-45deg); - // } - // &>div>span:nth-child(3) { - // display: none; - // } +// .header_left_container.shrink { +// transform: scale(0.8); +// } - // } + .header_nav_container.hidden { + transform: translateX(30%); + } + + .header_nav_container.visible { + transform: translateX(0); + } } \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss index 51f0894..947cbcd 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss @@ -10,7 +10,7 @@ $slick-font-path: "./fonts/" !default; $slick-font-family: "slick" !default; $slick-loader-path: "./" !default; -$slick-arrow-color: red !default; +$slick-arrow-color: black !default; $slick-dot-color: black !default; $slick-dot-color-active: $slick-dot-color !default; $slick-prev-character: "\2190" !default;