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

js timeline

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-05 22:36:05 +02:00
parent cb46670aaf
commit a0e5c1d028
4 changed files with 78 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -130,6 +130,26 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Check and replace empty day fields
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const dateElement = paragraph.querySelector('.date');
const dayField = paragraph.querySelector('.field_field_date_de_jour');
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (dayField && dayField.textContent.trim()) {
dateElement.classList.add('jour');
} else {
dateElement.classList.add('mois');
const monthText = monthField.textContent.trim();
// console.log(monthText)
if (monthText.length >= 3) {
monthField.textContent = monthText.slice(0, 3);
console.log(monthField)
}
}
});
// Initialize
showSlides(currentSlide);
});

52
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@@ -81,38 +81,62 @@
flex-direction: row;
padding-bottom: 1rem;
.date{
width: 50%;
width: fit-content;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
.moi-annee{
display: inline-flex;
font-size: 0.6rem;
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
padding-right: 1rem;
&.jour{
.moi-annee{
display: inline-flex;
font-size: 0.6rem;
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
}
}
.field_field_date_de_jour{
font-size: 5rem;
}
}
.field_field_date_de_jour{
font-size: 5rem;
&.mois{
.moi-annee{
display: flex;
font-size: 0.6rem;
flex-direction: column;
align-items: center;
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
font-size: 4rem;
}
}
}
}
.text{
border: solid $blue_QDD 1px;
border-radius: 5%;
padding: 0.6rem 0.6rem;
width: 45%;
width: fit-content;
min-width: 50%;
.field_field_titre{
font-size: 0.6rem;
}
.field_field_description{
p{font-size: 0.5rem !important;}
.field--label-above{display: none;}
p{
font-size: 0.5rem !important;
margin: 0;
}
.field--label-above{
display: none;
}
}
}