bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix bug slide actu

This commit is contained in:
ouidade 2024-07-06 21:37:58 +02:00
parent 350a0bc5fc
commit 72c2c9ff59
9 changed files with 107 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

25
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -226,12 +226,12 @@ header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 320px; height: 320px;
background-color: rgb(255, 255, 255);
z-index: 99; z-index: 99;
width: 38vw;
max-width: 100vw; max-width: 100vw;
position: fixed; position: fixed;
top: 0; top: 0;
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
/* Classes for scroll effect */
} }
header .contextual-region { header .contextual-region {
width: max-content; width: max-content;
@ -240,9 +240,8 @@ header .header_left_container {
flex: 0 0 60%; flex: 0 0 60%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-bottom: 1px solid #808080; transition: transform 0.3s, height 0.3s; /* Add transition for smooth sliding and resizing */
padding-left: 2%; background-color: rgb(255, 255, 255);
padding-right: 2%;
} }
@media (max-width: 660px) { @media (max-width: 660px) {
header .header_left_container { header .header_left_container {
@ -275,6 +274,7 @@ header .header_left_container img {
margin: auto; margin: auto;
height: calc(320px - 5rem); height: calc(320px - 5rem);
padding: 2rem; padding: 2rem;
transition: height 0.3s; /* Add transition for smooth resizing */
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container img { header .header_left_container img {
@ -334,12 +334,12 @@ header .header_right_container .language-switcher-language-url ul .is-active {
} }
header .header_nav_container { header .header_nav_container {
flex: 0 0 30%; flex: 0 0 30%;
top: 100%;
width: 100%; width: 100%;
background: rgb(7, 50, 194); background: rgb(7, 50, 194);
border-bottom: 1px solid #808080;
border-top: 1px solid #808080;
text-align: center; 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 { header .header_nav_container #block-quartiers-de-demain-entete h2 {
display: none; 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; border-bottom: solid white 1px;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
} }
header .header_nav_container.hidden {
transform: translateX(30%);
}
header .header_nav_container.visible {
transform: translateX(0);
}
footer { footer {
z-index: 100; z-index: 100;
} }
@ -710,7 +717,7 @@ footer span.totop #toTop .arrow-up::before {
font-family: "slick"; font-family: "slick";
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
color: red; color: black;
opacity: 0.75; opacity: 0.75;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;

BIN
web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.eot vendored Normal file
View File

Binary file not shown.

14
web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.svg vendored Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="slick" horiz-adv-x="512">
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.ttf vendored Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/dist/assets/css/fonts/slick.woff vendored Normal file
View File

Binary file not shown.

68
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -14,7 +14,7 @@
} (Drupal)); } (Drupal));
// jQuery(document).ready(function($){ jQuery(document).ready(function($){
// $('.open-block').click(function(){ // $('.open-block').click(function(){
// $(this).toggleClass('opened'); // $(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 //// 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; 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() { function prevSlide() {
showSlides(currentSlide - 1); showSlides(currentSlide - 1);

123
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss
View File

@ -1,46 +1,29 @@
header{ header{
// display: grid;
// grid-template-columns: 2.5fr 1fr;
// // grid-gap: 10px;
// grid-template-rows: repeat(3, 1fr);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: $header-height; height: $header-height;
background-color: $white-header; // background-color: $white-header;
z-index: 99; z-index: 99;
width: 38vw; // width: 38vw;
max-width: 100vw; max-width: 100vw;
position: fixed; position: fixed;
top: 0; top: 0;
// border: 1px solid #808080; transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
// @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;
// }
.contextual-region{ .contextual-region{
width: max-content; width: max-content;
} }
.header_left_container{ .header_left_container{
// grid-column: 1 ;
// grid-row: 1 /span 3;
flex: 0 0 60%; flex: 0 0 60%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-bottom: 1px solid #808080; transition: transform 0.3s, height 0.3s; /* Add transition for smooth sliding and resizing */
padding-left: 2%; background-color: $white-header;
padding-right: 2%;
@media(max-width: 660px){ @media(max-width: 660px){
height: inherit; height: inherit;
} }
#block-quartiers-de-demain-logorepu-2{ #block-quartiers-de-demain-logorepu-2{
display: none; display: none;
@media(max-width: 891px){ @media(max-width: 891px){
@ -56,16 +39,15 @@ header{
} }
#block-quartiers-de-demain-logoquartiersdedemain{ #block-quartiers-de-demain-logoquartiersdedemain{
// margin-left: auto;
padding-right: 5%; padding-right: 5%;
margin: auto; margin: auto;
} }
img{ img{
width: auto; width: auto;
margin: auto; margin: auto;
height: calc($header-height - 5rem); height: calc($header-height - 5rem);
padding: 2rem; padding: 2rem;
transition: height 0.3s; /* Add transition for smooth resizing */
@media(max-width: 891px){ @media(max-width: 891px){
height: $header-height-pad; height: $header-height-pad;
} }
@ -107,36 +89,23 @@ header{
} }
} }
} }
.is-active{ .is-active{
font-weight: 600; font-weight: 600;
} }
} }
} }
} }
.header_nav_container{ .header_nav_container{
// display: none;
// grid-row: 3;
// grid-column: 1 /span 2;
// position: absolute;
flex: 0 0 30%; flex: 0 0 30%;
top: 100%;
width: 100%; width: 100%;
background: $blue_QDD; background: $blue_QDD;
border-bottom: 1px solid #808080;
border-top: 1px solid #808080;
// font-size: $font-big;
text-align: center; text-align: center;
transform: translateX(0);
transition: transform 0.3s ease-in-out;
z-index: -1 ;
#block-quartiers-de-demain-entete{ #block-quartiers-de-demain-entete{
// grid-column: 1 /span 11;
// order: 2;
// margin: auto;
h2{ h2{
display: none; display: none;
} }
@ -166,7 +135,6 @@ header{
} }
} }
} }
@media(max-width: 660px){ @media(max-width: 660px){
@ -174,61 +142,22 @@ header{
} }
} }
// .display-nav-opened{ /* Classes for scroll effect */
// display: grid;
// grid-template-columns: repeat(12, 1fr);
// grid-gap: 10px;
// }
// &.shrink {
// .open-block, .open-block.opened{ // height: var(--header-height-small);
// 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;
// }
// }
// } // .header_left_container.shrink {
// .open-block.opened { // transform: scale(0.8);
// 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_nav_container.hidden {
transform: translateX(30%);
}
.header_nav_container.visible {
transform: translateX(0);
}
} }

2
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@ -10,7 +10,7 @@
$slick-font-path: "./fonts/" !default; $slick-font-path: "./fonts/" !default;
$slick-font-family: "slick" !default; $slick-font-family: "slick" !default;
$slick-loader-path: "./" !default; $slick-loader-path: "./" !default;
$slick-arrow-color: red !default; $slick-arrow-color: black !default;
$slick-dot-color: black !default; $slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default; $slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\2190" !default; $slick-prev-character: "\2190" !default;