actus caroussel overflow....
This commit is contained in:
ouidade
parent
47dba3466b
commit
47792a44c0
File diff suppressed because one or more lines are too long
|
|
@ -732,7 +732,7 @@ footer {
|
|||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: -1rem;
|
||||
top: -2rem;
|
||||
-webkit-transform: translate(0, -1rem);
|
||||
-ms-transform: translate(0, -1rem);
|
||||
transform: translate(0, -1rem);
|
||||
|
|
@ -977,7 +977,7 @@ footer {
|
|||
#home * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#home .config_pages--type--deroulement {
|
||||
#home .__container-deroulement {
|
||||
background-color: #f3f5fc;
|
||||
background-image: url(../../../dist/assets/img/pillier-1.svg);
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -985,14 +985,21 @@ footer {
|
|||
background-position-x: -20%;
|
||||
}
|
||||
@media (max-width: 1090px) {
|
||||
#home .config_pages--type--deroulement {
|
||||
#home .__container-deroulement {
|
||||
cursor: grab;
|
||||
}
|
||||
}
|
||||
#home .__container-deroulement h2 {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
padding-top: 3rem;
|
||||
font-size: 1.7rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
#home .timeline {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-top: 10rem;
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
@media (max-width: 1090px) {
|
||||
|
|
@ -1006,6 +1013,7 @@ footer {
|
|||
margin: auto;
|
||||
position: relative;
|
||||
top: -115px;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
@media (max-width: 1090px) {
|
||||
#home .timeline .__timeline-arrows {
|
||||
|
|
@ -1020,9 +1028,6 @@ footer {
|
|||
#home .timeline .__timeline-arrows button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#home .timeline .__timeline-arrows button svg {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
#home .timeline .__timeline-content {
|
||||
width: 100vw;
|
||||
padding-top: 7rem;
|
||||
|
|
@ -1153,8 +1158,9 @@ footer {
|
|||
}
|
||||
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
|
||||
font-size: 0.5rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
@media (max-width: 10900px) {
|
||||
@media (max-width: 1090px) {
|
||||
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -1176,10 +1182,11 @@ footer {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
#actus-caroussel h2 {
|
||||
width: fit-content;
|
||||
padding-bottom: 0.6rem;
|
||||
padding-bottom: 0.4rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 1.7rem;
|
||||
|
|
@ -1193,7 +1200,7 @@ footer {
|
|||
}
|
||||
#actus-caroussel .content-actus .views-row {
|
||||
width: 500px !important;
|
||||
padding: 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
#actus-caroussel .content-actus .views-row {
|
||||
|
|
@ -1248,6 +1255,7 @@ footer {
|
|||
color: red;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_field_date::before {
|
||||
content: url("../img/date-actu.svg");
|
||||
|
|
@ -1261,6 +1269,10 @@ footer {
|
|||
font-size: 0.8rem;
|
||||
color: rgb(7, 50, 194);
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row article.node-type-actualite .field_body p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,133 +150,149 @@
|
|||
});
|
||||
|
||||
|
||||
//////////////////////// smooth apparition des textes
|
||||
//////////////////////// smooth apparition des textes
|
||||
|
||||
|
||||
function scrollReaveal(){
|
||||
function scrollReaveal(){
|
||||
|
||||
const nodes = {
|
||||
logo : document.querySelectorAll('#logo-animated-container'),
|
||||
chapeau : document.querySelectorAll('.field_body'),
|
||||
paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
|
||||
}
|
||||
|
||||
const showUp = {
|
||||
origin: 'bottom',
|
||||
delay: 100,
|
||||
duration: 1000,
|
||||
distance: '50px',
|
||||
easing: 'cubic-bezier(0.5, 0, 0, 1)'
|
||||
}
|
||||
|
||||
const Show = {
|
||||
delay: 100,
|
||||
duration: 600,
|
||||
easing: 'cubic-bezier(0.5, 0, 0, 1)'
|
||||
}
|
||||
|
||||
console.log(nodes);
|
||||
|
||||
ScrollReveal().reveal(nodes.logo, Show);
|
||||
ScrollReveal().reveal(nodes.chapeau, showUp);
|
||||
ScrollReveal().reveal(nodes.paragraph, showUp);
|
||||
}
|
||||
|
||||
|
||||
$( document ).ready(function() {
|
||||
scrollReaveal();
|
||||
});
|
||||
|
||||
|
||||
|
||||
////////////////// Timeline ///////////////////////
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let currentSlide = 0;
|
||||
|
||||
function getVisibleSlides() {
|
||||
if (window.innerWidth <= 600) {
|
||||
return 1; // Show 1 slide on small screens
|
||||
} else if (window.innerWidth <= 900) {
|
||||
return 2; // Show 2 slides on medium screens
|
||||
} else {
|
||||
return 3; // Show 3 slides on large screens
|
||||
const nodes = {
|
||||
logo : document.querySelectorAll('#logo-animated-container'),
|
||||
chapeau : document.querySelectorAll('.field_body'),
|
||||
paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
|
||||
}
|
||||
|
||||
const showUp = {
|
||||
origin: 'bottom',
|
||||
delay: 100,
|
||||
duration: 1000,
|
||||
distance: '50px',
|
||||
easing: 'cubic-bezier(0.5, 0, 0, 1)'
|
||||
}
|
||||
|
||||
const Show = {
|
||||
delay: 100,
|
||||
duration: 600,
|
||||
easing: 'cubic-bezier(0.5, 0, 0, 1)'
|
||||
}
|
||||
|
||||
console.log(nodes);
|
||||
|
||||
ScrollReveal().reveal(nodes.logo, Show);
|
||||
ScrollReveal().reveal(nodes.chapeau, showUp);
|
||||
ScrollReveal().reveal(nodes.paragraph, showUp);
|
||||
}
|
||||
|
||||
function showSlides(index) {
|
||||
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
|
||||
const totalSlides = slides.length;
|
||||
const visibleSlides = getVisibleSlides();
|
||||
const maxSlide = totalSlides - visibleSlides + 1;
|
||||
|
||||
// Adjust the index to ensure it stays within bounds
|
||||
currentSlide = Math.max(0.6, Math.min(index, maxSlide));
|
||||
$( document ).ready(function() {
|
||||
scrollReaveal();
|
||||
});
|
||||
|
||||
// Calculate the offset for the transform
|
||||
const offset = currentSlide * -70 / visibleSlides;
|
||||
document.querySelector('.__timeline-content').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);
|
||||
}
|
||||
////////////////// Timeline ///////////////////////
|
||||
|
||||
function nextSlide() {
|
||||
showSlides(currentSlide + 1);
|
||||
}
|
||||
|
||||
// Attach event listeners
|
||||
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
|
||||
document.getElementById('arrowNext').addEventListener('click', nextSlide);
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let currentSlide = 0;
|
||||
|
||||
// Initialize the first view of the slides
|
||||
showSlides(currentSlide);
|
||||
|
||||
// Update month field to only show the first 3 letters
|
||||
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
|
||||
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
|
||||
if (monthField) {
|
||||
const monthText = monthField.textContent.trim();
|
||||
if (monthText.length >= 3) {
|
||||
monthField.textContent = monthText.slice(0, 3);
|
||||
function getVisibleSlides() {
|
||||
if (window.innerWidth <= 600) {
|
||||
return 1; // Show 1 slide on small screens
|
||||
} else if (window.innerWidth <= 900) {
|
||||
return 2; // Show 2 slides on medium screens
|
||||
} else {
|
||||
return 3; // Show 3 slides on large screens
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', function() {
|
||||
showSlides(currentSlide); // Recalculate the slides on resize
|
||||
});
|
||||
// });
|
||||
function showSlides(index) {
|
||||
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
|
||||
const totalSlides = slides.length;
|
||||
const visibleSlides = getVisibleSlides();
|
||||
const maxSlide = totalSlides - visibleSlides + 1;
|
||||
|
||||
// Adjust the index to ensure it stays within bounds
|
||||
currentSlide = Math.max(0.6, Math.min(index, maxSlide));
|
||||
|
||||
// Initialize
|
||||
showSlides(currentSlide);
|
||||
});
|
||||
// Calculate the offset for the transform
|
||||
const offset = currentSlide * -70 / visibleSlides;
|
||||
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Iterate over each .date element
|
||||
document.querySelectorAll('.date').forEach(function(dateElement) {
|
||||
const date2Element = dateElement.querySelector('.date2');
|
||||
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
|
||||
|
||||
// Check if the .date2 element is empty
|
||||
if (date2Element && !date2Element.textContent.trim()) {
|
||||
// Add the .only class to the year element
|
||||
yearElement.classList.add('only');
|
||||
// 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);
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
showSlides(currentSlide + 1);
|
||||
}
|
||||
|
||||
// Attach event listeners
|
||||
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
|
||||
document.getElementById('arrowNext').addEventListener('click', nextSlide);
|
||||
|
||||
// Initialize the first view of the slides
|
||||
showSlides(currentSlide);
|
||||
|
||||
// Update month field to only show the first 3 letters
|
||||
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
|
||||
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
|
||||
if (monthField) {
|
||||
const monthText = monthField.textContent.trim();
|
||||
if (monthText.length >= 3) {
|
||||
monthField.textContent = monthText.slice(0, 3);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', function() {
|
||||
showSlides(currentSlide); // Recalculate the slides on resize
|
||||
});
|
||||
// });
|
||||
|
||||
|
||||
// Initialize
|
||||
showSlides(currentSlide);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Iterate over each .date element
|
||||
document.querySelectorAll('.date').forEach(function(dateElement) {
|
||||
const date2Element = dateElement.querySelector('.date2');
|
||||
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
|
||||
|
||||
// Check if the .date2 element is empty
|
||||
if (date2Element && !date2Element.textContent.trim()) {
|
||||
// Add the .only class to the year element
|
||||
yearElement.classList.add('only');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// slideshow home
|
||||
/////////////////// caracteres body actus/////////////////////////
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Maximum number of characters to display
|
||||
const maxChars = 140; // Adjust this value as needed
|
||||
|
||||
document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {
|
||||
let text = paragraph.textContent.trim();
|
||||
if (text.length > maxChars) {
|
||||
let truncatedText = text.slice(0, maxChars) + '...';
|
||||
paragraph.textContent = truncatedText;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//////////// slideshow home //////////////////////////
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.content-actus .view').slick({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
#page-node{
|
||||
// .node-id-11{
|
||||
.content_container{
|
||||
width: 60%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 3rem;
|
||||
h2{
|
||||
width: fit-content;
|
||||
padding-bottom: 0.6rem;
|
||||
padding-bottom: 0.4rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 1.7rem;
|
||||
|
|
@ -20,10 +21,10 @@
|
|||
}
|
||||
.views-row{
|
||||
width: 500px !important;
|
||||
padding: 2rem;
|
||||
@media(max-width: 550px){
|
||||
width: 296px !important;
|
||||
}
|
||||
padding: 1rem;
|
||||
article.node-type-actualite{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -68,6 +69,7 @@
|
|||
color: red;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.6rem;
|
||||
&::before{
|
||||
content: url('../img/date-actu.svg');
|
||||
padding-right: 0.2rem;
|
||||
|
|
@ -86,7 +88,9 @@
|
|||
}
|
||||
}
|
||||
.field_body{
|
||||
|
||||
// visibility: visible;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -99,5 +103,6 @@
|
|||
top: 60px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@ $slick-opacity-not-active: 0.25 !default;
|
|||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: -1rem;
|
||||
top: -2rem;
|
||||
-webkit-transform: translate(0, -1rem);
|
||||
-ms-transform: translate(0, -1rem);
|
||||
transform: translate(0, -1rem);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
#home{
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
.config_pages--type--deroulement{
|
||||
.__container-deroulement{
|
||||
background-color: #f3f5fcff;
|
||||
background-image: url(../../../dist/assets/img/pillier-1.svg);
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -13,12 +13,19 @@
|
|||
@media(max-width:1090px){
|
||||
cursor:grab;
|
||||
}
|
||||
h2{
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
padding-top: 3rem;
|
||||
font-size: 1.7rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
.timeline {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-top: 10rem;
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 4rem;
|
||||
@media(max-width:1090px){
|
||||
padding-top: 18rem;
|
||||
|
|
@ -29,6 +36,7 @@
|
|||
margin: auto;
|
||||
position: relative;
|
||||
top: -115px;
|
||||
padding-bottom: 2rem;
|
||||
@media(max-width:1090px){
|
||||
top: -211px;
|
||||
display: none;
|
||||
|
|
@ -39,10 +47,10 @@
|
|||
&:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
svg{
|
||||
padding: 0.5rem;
|
||||
// svg{
|
||||
// padding: 0.5rem;
|
||||
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
.__timeline-content{
|
||||
|
|
@ -179,7 +187,8 @@
|
|||
min-width: 65%;
|
||||
.field_field_titre{
|
||||
font-size: 0.5rem;
|
||||
@media(max-width:10900px){
|
||||
font-weight: 800;
|
||||
@media(max-width:1090px){
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation to display a block.
|
||||
*
|
||||
* Available variables:
|
||||
* - plugin_id: The ID of the block implementation.
|
||||
* - label: The configured label of the block if visible.
|
||||
* - configuration: A list of the block's configuration values.
|
||||
* - label: The configured label for the block.
|
||||
* - label_display: The display settings for the label.
|
||||
* - provider: The module or other provider that provided this block plugin.
|
||||
* - Block plugin specific settings will also be stored here.
|
||||
* - in_preview: Whether the plugin is being rendered in preview mode.
|
||||
* - content: The content of this block.
|
||||
* - attributes: array of HTML attributes populated by modules, intended to
|
||||
* be added to the main container tag of this template.
|
||||
* - id: A valid HTML ID and guaranteed unique.
|
||||
* - title_attributes: Same as attributes, except applied to the main title
|
||||
* tag that appears in the template.
|
||||
* - title_prefix: Additional output populated by modules, intended to be
|
||||
* displayed in front of the main title tag that appears in the template.
|
||||
* - title_suffix: Additional output populated by modules, intended to be
|
||||
* displayed after the main title tag that appears in the template.
|
||||
*
|
||||
* @see template_preprocess_block()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div class="__container-deroulement"{{ attributes }}>
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
{% endif %}
|
||||
{{ title_suffix }}
|
||||
{% block content %}
|
||||
{{ content }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
Loading…
Reference in New Issue