From 561dfbb3151b847b976576a09569130c66a5580d Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 8 Jul 2024 14:06:57 +0200 Subject: [PATCH] mobile --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 108 +++++++++++------- .../dist/assets/img/date-actu.svg | 33 ++++++ .../dist/assets/img/next.svg | 4 +- .../dist/assets/img/prev.svg | 4 +- .../dist/assets/img/type-actu.svg | 33 ++++++ .../src/assets/js/quartiers_de_demain.js | 6 +- .../src/assets/scss/global/_layout.scss | 4 +- .../src/assets/scss/pages/home.scss | 12 +- .../scss/partials/actu-caroussel-home.scss | 51 ++++++--- .../src/assets/scss/partials/header.scss | 6 +- .../src/assets/scss/partials/slick-theme.scss | 32 ++++-- .../src/assets/scss/partials/timeline.scss | 10 +- 13 files changed, 215 insertions(+), 90 deletions(-) create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg 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 15f17a8..7b4d010 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 //////// header ////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n const headerNavContainer = document.querySelector('.header_nav_container');\n const headerLeftContainer = document.querySelector('header');\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 function handleTouchAndMouseEnter() {\n if (isHidden) {\n slideIn();\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n slideOut();\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n \n // Mouse events for desktop\n headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n slideIn();\n } else {\n slideOut();\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\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 2; // Show 2 slides on medium screens\n } else {\n return 3; // Show 3 slides on large screens\n }\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(1, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -70 / 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 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 // Initialize the first view of the slides\n showSlides(currentSlide);\n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n }\n }\n });\n\n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n// });\n\n\n // Initialize\n showSlides(currentSlide);\n});\n\ndocument.addEventListener('DOMContentLoaded', function() {\n // Iterate over each .date element\n document.querySelectorAll('.date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n // Check if the .date2 element is empty\n if (date2Element && !date2Element.textContent.trim()) {\n // Add the .only class to the year element\n yearElement.classList.add('only');\n }\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: true,\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\n document.addEventListener('DOMContentLoaded', function() {\n const headerNavContainer = document.querySelector('.header_nav_container');\n const headerLeftContainer = document.querySelector('header');\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 function handleTouchAndMouseEnter() {\n if (isHidden) {\n slideIn();\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n slideOut();\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n \n // Mouse events for desktop\n headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n slideIn();\n } else {\n slideOut();\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\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 2; // Show 2 slides on medium screens\n } else {\n return 3; // Show 3 slides on large screens\n }\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides + 1;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0.6, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -70 / 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 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 // Initialize the first view of the slides\n showSlides(currentSlide);\n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n }\n }\n });\n\n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n// });\n\n\n // Initialize\n showSlides(currentSlide);\n});\n\ndocument.addEventListener('DOMContentLoaded', function() {\n // Iterate over each .date element\n document.querySelectorAll('.date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n // Check if the .date2 element is empty\n if (date2Element && !date2Element.textContent.trim()) {\n // Add the .only class to the year element\n yearElement.classList.add('only');\n }\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: false,\n arrows: true,\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 16c1f29..889d5ff 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 @@ -181,9 +181,9 @@ h3 { width: 100%; padding-top: 320px; } -@media (max-width: 500px) { +@media (max-width: 810px) { .layout-container main { - padding-top: 110px; + padding-top: 180px; } } @@ -232,9 +232,9 @@ header { transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ /* Classes for scroll effect */ } -@media (max-width: 500px) { +@media (max-width: 810px) { header { - height: 110px; + height: 170px; } } header .contextual-region { @@ -363,7 +363,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul { padding-right: 1rem; margin: 0; } -@media (max-width: 500px) { +@media (max-width: 810px) { header .header_nav_container #block-quartiers-de-demain-entete ul { top: 27.5px; } @@ -700,15 +700,24 @@ footer { cursor: pointer; background: transparent; color: transparent; - top: -20px; - -webkit-transform: translate(0, -20px); - -ms-transform: translate(0, -20px); - transform: translate(0, -20px); + top: -1rem; + -webkit-transform: translate(0, -1rem); + -ms-transform: translate(0, -1rem); + transform: translate(0, -1rem); padding: 0; padding-bottom: 2rem; border: none; outline: none; } +@media (max-width: 810px) { + .slick-prev, + .slick-next { + top: -30px; + -webkit-transform: translate(0, -30px); + -ms-transform: translate(0, -30px); + transform: translate(0, -30px); + } +} .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { @@ -737,31 +746,41 @@ footer { } .slick-prev { - left: 45%; + left: 46%; +} +@media (max-width: 810px) { + .slick-prev { + left: 36%; + } } [dir=rtl] .slick-prev { left: auto; right: -25px; } .slick-prev:before { - content: "←"; + content: url("../img/prev.svg "); } [dir=rtl] .slick-prev:before { - content: "→"; + content: url("../img/next.svg "); } .slick-next { - right: 45%; + right: 48%; +} +@media (max-width: 810px) { + .slick-next { + right: 42%; + } } [dir=rtl] .slick-next { left: -25px; right: auto; } .slick-next:before { - content: "→"; + content: url("../img/next.svg "); } [dir=rtl] .slick-next:before { - content: "←"; + content: url("../img/prev.svg "); } /* Dots */ @@ -1064,7 +1083,7 @@ footer { position: relative; top: -10px; } -@media (max-width: 550px) { +@media (max-width: 1090px) { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { font-size: 1.2rem; } @@ -1098,12 +1117,12 @@ footer { border: solid rgb(7, 50, 194) 1px; border-radius: 5%; padding: 0.6rem 0.6rem; - min-width: 50%; + min-width: 65%; } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { - font-size: 0.6rem; + font-size: 0.5rem; } -@media (max-width: 700px) { +@media (max-width: 10900px) { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre { font-size: 1rem; } @@ -1112,7 +1131,7 @@ footer { font-size: 0.5rem !important; margin: 0; } -@media (max-width: 700px) { +@media (max-width: 1090px) { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p { font-size: 1rem !important; } @@ -1126,23 +1145,13 @@ footer { flex-direction: column; align-items: center; } -#actus-caroussel .__timeline-arrows { - width: fit-content; - margin: auto; -} -#actus-caroussel .__timeline-arrows button { - background-color: transparent; - border: none; -} -#actus-caroussel .__timeline-arrows button:hover { - opacity: 0.5; -} -#actus-caroussel .__timeline-arrows button svg { - padding: 0.5rem; -} #actus-caroussel h2 { width: fit-content; - padding-bottom: 2rem; + padding-bottom: 1rem; + margin-top: 3rem; + margin-bottom: 3rem; + font-size: 1.7rem; + font-weight: bold; } #actus-caroussel .content-actus .view { display: flex; @@ -1164,7 +1173,6 @@ footer { -khtml-border-radius: 9px; /* pour Safari et Chrome */ -webkit-border-radius: 9px; /* pour Safari sur Mac */ border-radius: 9px; /* CSS3 */ - background-color: red; height: 250px; margin-bottom: 0.6rem; } @@ -1178,6 +1186,10 @@ footer { height: fit-content; max-height: 250px; object-fit: cover; + -moz-border-radius: 9px; /* pour Mozilla */ + -khtml-border-radius: 9px; /* pour Safari et Chrome */ + -webkit-border-radius: 9px; /* pour Safari sur Mac */ + border-radius: 9px; /* CSS3 */ } @media (max-width: 550px) { #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img { @@ -1189,9 +1201,21 @@ footer { color: red; font-size: 0.6rem; font-weight: 600; + display: inline-flex; + align-items: center; +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite::before { + content: url("../img/type-actu.svg"); + padding-right: 0.4rem; } #actus-caroussel .content-actus .views-row .node-type-actualite .field_field_date { color: red; + display: inline-flex; + align-items: center; +} +#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_date::before { + content: url("../img/date-actu.svg"); + padding-right: 0.4rem; } #actus-caroussel .content-actus .views-row .node-type-actualite .field_title h2 { margin: 0; @@ -1228,7 +1252,7 @@ footer { flex: 1 100%; font-size: 1.5rem; } -@media (max-width: 500px) { +@media (max-width: 1090px) { #home article.node-type-static .field_body > p:nth-child(1) { font-size: 1.3rem; } @@ -1238,16 +1262,17 @@ footer { flex: 1; padding: 1rem; } -@media (max-width: 500px) { +@media (max-width: 1090px) { #home article.node-type-static .field_body > p:nth-child(2), #home article.node-type-static .field_body p:nth-child(3) { padding-left: 0; + font-size: 1rem; } } #home article.node-type-static .field_body > p:nth-child(2) { padding-left: 15rem; } -@media (max-width: 500px) { +@media (max-width: 1090px) { #home article.node-type-static .field_body > p:nth-child(2) { padding-left: 0; } @@ -1269,7 +1294,7 @@ footer { width: 50%; margin: auto; } -@media (max-width: 500px) { +@media (max-width: 1090px) { #home article.node-type-static #paragraph-id--1 .field_field_texte { width: 80%; } @@ -1298,11 +1323,12 @@ footer { display: flex; flex-direction: column; } -@media (max-width: 500px) { +@media (max-width: 1090px) { #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p { padding-right: 1rem; flex: 1 30%; max-width: 50%; + font-size: 0.9rem; } } #home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p:nth-of-type(1)::before { diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg new file mode 100644 index 0000000..96794d5 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/date-actu.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg index a6c15ee..c6f4d2b 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/next.svg @@ -4,8 +4,8 @@ diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg index 9dbe20e..c930ac7 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg @@ -4,8 +4,8 @@ diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg new file mode 100644 index 0000000..fc34e20 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/type-actu.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + 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 bb2366e..f96dae6 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 @@ -190,10 +190,10 @@ document.addEventListener('DOMContentLoaded', function() { const slides = document.querySelectorAll('.paragraph--type--phase-deroulement'); const totalSlides = slides.length; const visibleSlides = getVisibleSlides(); - const maxSlide = totalSlides - visibleSlides; + const maxSlide = totalSlides - visibleSlides + 1; // Adjust the index to ensure it stays within bounds - currentSlide = Math.max(1, Math.min(index, maxSlide)); + currentSlide = Math.max(0.6, Math.min(index, maxSlide)); // Calculate the offset for the transform const offset = currentSlide * -70 / visibleSlides; @@ -273,7 +273,7 @@ document.addEventListener('DOMContentLoaded', function() { breakpoint: 810, settings: { slidesToShow: 1, - adaptiveHeight: true, + adaptiveHeight: false, arrows: true, draggable: true, centerMode: true, diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss index ba1ac91..71dbe0d 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss @@ -38,8 +38,8 @@ $width-menu-slidedown : 550px; padding-top: $header-height; // display: grid; // grid-template-columns: repeat(12, 1fr); - @media(max-width: 500px){ - padding-top: $header-height-pad; + @media(max-width: 810px){ + padding-top: 180px; } } // .content_container{ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index 89828b1..72d10f0 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -19,7 +19,7 @@ margin-bottom: 0; flex: 1 100%; font-size: 1.5rem; - @media(max-width: 500px){ + @media(max-width: 1090px){ font-size: 1.3rem; } } @@ -27,13 +27,14 @@ p:nth-child(3){ flex: 1 ; padding: 1rem; - @media(max-width: 500px){ + @media(max-width: 1090px){ padding-left: 0 ; + font-size: 1rem; } } > p:nth-child(2){ padding-left: 15rem; - @media(max-width: 500px){ + @media(max-width: 1090px){ padding-left: 0 ; } } @@ -53,7 +54,7 @@ .field_field_texte{ width: 50%; margin: auto; - @media(max-width: 500px){ + @media(max-width: 1090px){ width: 80%; } .colone-picto{ @@ -82,10 +83,11 @@ max-width: 30%; display: flex; flex-direction: column; - @media(max-width: 500px){ + @media(max-width: 1090px){ padding-right: 1rem; flex: 1 30%; max-width: 50%; + font-size: 0.9rem; } &:nth-of-type(1)::before{ background-image: url("../img/fanion.svg"); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss index fa01484..e888c2b 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss @@ -2,25 +2,29 @@ display: flex; flex-direction: column; align-items: center; - .__timeline-arrows{ - width: fit-content; - margin: auto; + // .__timeline-arrows{ + // width: fit-content; + // margin: auto; - button{ - background-color: transparent; - border: none; - &:hover{ - opacity: 0.5; - } - svg{ - padding: 0.5rem; + // button{ + // background-color: transparent; + // border: none; + // &:hover{ + // opacity: 0.5; + // } + // svg{ + // padding: 0.5rem; - } - } - } + // } + // } + // } h2{ width: fit-content; - padding-bottom: 2rem; + padding-bottom: 1rem; + margin-top: 3rem; + margin-bottom: 3rem; + font-size: 1.7rem; + font-weight: bold; } .content-actus{ .view{ @@ -42,7 +46,6 @@ -khtml-border-radius: 9px; /* pour Safari et Chrome */ -webkit-border-radius: 9px; /* pour Safari sur Mac */ border-radius: 9px; /* CSS3 */ - background-color: red; height: 250px; margin-bottom: 0.6rem; @media(max-width: 550px){ @@ -53,6 +56,10 @@ height: fit-content; max-height: 250px; object-fit: cover; + -moz-border-radius: 9px; /* pour Mozilla */ + -khtml-border-radius: 9px; /* pour Safari et Chrome */ + -webkit-border-radius: 9px; /* pour Safari sur Mac */ + border-radius: 9px; /* CSS3 */ @media(max-width: 550px){ max-height: 170px; } @@ -63,9 +70,21 @@ color: red; font-size: 0.6rem; font-weight: 600; + display: inline-flex; + align-items: center; + &::before{ + content: url('../img/type-actu.svg'); + padding-right: 0.4rem; + } } .field_field_date{ color: red; + display: inline-flex; + align-items: center; + &::before{ + content: url('../img/date-actu.svg'); + padding-right: 0.4rem; + } } .field_title{ h2{ 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 dac16b0..0a523ab 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 @@ -9,8 +9,8 @@ header{ position: fixed; top: 0; transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ - @media(max-width: 500px){ - height: $header-height-pad; + @media(max-width: 810px){ + height: 170px; } .contextual-region{ @@ -123,7 +123,7 @@ header{ padding-left: 1rem; padding-right: 1rem; margin: 0; - @media(max-width: 500px){ + @media(max-width: 810px){ top: calc($header-height-pad / 4 ); } li{ 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 32e1f8c..75b26fb 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 @@ -13,11 +13,11 @@ $slick-loader-path: "./" !default; $slick-arrow-color: black !default; $slick-dot-color: black !default; $slick-dot-color-active: $slick-dot-color !default; -$slick-prev-character: "\2190" !default; -$slick-next-character: "\2192" !default; - -// $slick-prev-character: url('../../img/prev.svg ') !default; +// $slick-prev-character: "\2190" !default; +// $slick-next-character: "\2192" !default; +$slick-prev-character: url('../img/prev.svg ') !default; +$slick-next-character: url('../img/next.svg ') !default; $slick-dot-character: "\2022" !default; $slick-dot-size: 6px !default; @@ -76,14 +76,20 @@ $slick-opacity-not-active: 0.25 !default; cursor: pointer; background: transparent; color: transparent; - top: -20px; - -webkit-transform: translate(0, -20px); - -ms-transform: translate(0, -20px); - transform: translate(0, -20px); + top: -1rem; + -webkit-transform: translate(0, -1rem); + -ms-transform: translate(0, -1rem); + transform: translate(0, -1rem); padding: 0; padding-bottom: 2rem; border: none; outline: none; + @media(max-width:810px){ + top: -30px; + -webkit-transform: translate(0, -30px); + -ms-transform: translate(0, -30px); + transform: translate(0, -30px); + } &:hover, &:focus { outline: none; background: transparent; @@ -107,7 +113,10 @@ $slick-opacity-not-active: 0.25 !default; } .slick-prev { - left: 45%; + left: 46%; + @media(max-width:810px){ + left: 36%; + } [dir="rtl"] & { left: auto; right: -25px; @@ -121,7 +130,10 @@ $slick-opacity-not-active: 0.25 !default; } .slick-next { - right: 45%; + right: 48%; + @media(max-width:810px){ + right: 42%; + } [dir="rtl"] & { left: -25px; right: auto; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss index 14990b8..6ba8a6b 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss @@ -131,7 +131,7 @@ font-size: 0.6rem; position: relative; top: -10px; - @media(max-width:550px){ + @media(max-width:1090px){ font-size: 1.2rem; } .field_field_date_de_annee{ @@ -176,10 +176,10 @@ border-radius: 5%; padding: 0.6rem 0.6rem; // width: fit-content; - min-width: 50%; + min-width: 65%; .field_field_titre{ - font-size: 0.6rem; - @media(max-width:700px){ + font-size: 0.5rem; + @media(max-width:10900px){ font-size: 1rem; } } @@ -187,7 +187,7 @@ p{ font-size: 0.5rem !important; margin: 0; - @media(max-width:700px){ + @media(max-width:1090px){ font-size: 1rem !important; } }