fix bug slide actu
This commit is contained in:
parent
350a0bc5fc
commit
72c2c9ff59
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||||
|
|
Binary file not shown.
|
@ -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="→" 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="←" 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="•" 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="a" 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>
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
Binary file not shown.
|
@ -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,7 +35,54 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// });
|
});
|
||||||
|
|
||||||
|
//////// 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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// /////////////////
|
// /////////////////
|
||||||
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
#block-quartiers-de-demain-entete{
|
transform: translateX(0);
|
||||||
// grid-column: 1 /span 11;
|
transition: transform 0.3s ease-in-out;
|
||||||
|
z-index: -1 ;
|
||||||
|
|
||||||
// order: 2;
|
#block-quartiers-de-demain-entete{
|
||||||
// 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 {
|
||||||
|
// height: var(--header-height-small);
|
||||||
|
// }
|
||||||
|
|
||||||
// .open-block, .open-block.opened{
|
// .header_left_container.shrink {
|
||||||
// cursor:pointer;
|
// transform: scale(0.8);
|
||||||
// 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_nav_container.hidden {
|
||||||
// .open-block.opened {
|
transform: translateX(30%);
|
||||||
// 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.visible {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue