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

new design timelien

This commit is contained in:
ouidade 2024-07-07 14:01:45 +02:00
parent c89c63835b
commit e489a10c5b
8 changed files with 174 additions and 66 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

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

@ -965,36 +965,61 @@ footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-left: 2rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
width: fit-content; width: fit-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto; margin: auto;
align-items: center; align-items: flex-start;
padding-right: 1rem; padding-right: 1rem;
margin-bottom: 2rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .moi-annee { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
display: inline-flex; font-size: 2rem;
font-size: 0.6rem; line-height: 0.3rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .moi-annee .field_field_date_de_moi { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
padding-right: 0.2rem; padding-right: 0.2rem;
text-transform: uppercase; text-transform: uppercase;
font-size: 3rem;
display: inline-flex;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .field_field_date_de_jour { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi::after {
font-size: 5rem; content: ".";
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.mois .moi-annee { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee {
display: flex; display: flex;
align-items: center;
font-size: 0.6rem; font-size: 0.6rem;
flex-direction: column; position: relative;
top: -10px;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee {
display: inline-flex;
align-items: center; align-items: center;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.mois .moi-annee .field_field_date_de_moi { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee::after {
content: url("../img/noun-arrow-to-right-black.svg");
display: flex;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only {
display: inline-flex;
align-items: center;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee.only::after {
content: "";
display: flex;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 {
display: inline-flex;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_jour {
padding-right: 0.2rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .date2 .field_field_date_a_moi {
padding-right: 0.2rem; padding-right: 0.2rem;
text-transform: uppercase;
font-size: 4rem;
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text {
border: solid rgb(7, 50, 194) 1px; border: solid rgb(7, 50, 194) 1px;
@ -1357,6 +1382,7 @@ footer {
flex: 1 15%; flex: 1 15%;
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
padding: 0.5rem; padding: 0.5rem;
margin-top: 0;
} }
#consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before { #consultation .layout-content .content_container .node-type-static #paragraph-id--10 .colone-picto p:not(:last-of-type)::before {
content: ""; content: "";

48
web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right-black.svg vendored Normal file
View File

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="7mm"
height="7mm"
viewBox="0 0 10.531931 10.531931"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="noun-arrow-to-right.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.86234568"
inkscape:cx="20.293486"
inkscape:cy="19.713672"
inkscape:window-width="1920"
inkscape:window-height="1172"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-99.747912,-143.13958)">
<path
d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z"
id="path2-2"
style="fill:#000;stroke-width:0.0601533" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

7
web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.svg vendored
View File

@ -39,12 +39,7 @@
inkscape:groupmode="layer" inkscape:groupmode="layer"
id="layer1" id="layer1"
transform="translate(-99.747912,-143.13958)"> transform="translate(-99.747912,-143.13958)">
<circle
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
id="path3-3"
cx="105.01388"
cy="148.40555"
r="5.0013819" />
<path <path
d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z" d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z"
id="path2-2" id="path2-2"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

41
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,7 +35,7 @@
}); // });
//////// header //////////// //////// header ////////////
@ -94,6 +94,12 @@
slideOut(); // Slide in on mouse leave if not scrolled down slideOut(); // Slide in on mouse leave if not scrolled down
} }
}); });
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
slideIn();
} else {
slideOut();
}
}); });
@ -117,7 +123,7 @@
}); });
//////////////////////////////////////////// smooth apparition des textes //////////////////////// smooth apparition des textes
function scrollReaveal(){ function scrollReaveal(){
@ -196,19 +202,11 @@ document.addEventListener('DOMContentLoaded', function() {
// Check and replace empty day fields // Check and replace empty day fields
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const dateElement = paragraph.querySelector('.date'); 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)'); const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
const monthText = monthField.textContent.trim();
if (dayField && dayField.textContent.trim()) { if (monthText.length >= 3) {
dateElement.classList.add('jour'); monthField.textContent = monthText.slice(0, 3);
} else { console.log(monthField)
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)
}
} }
}); });
@ -216,6 +214,19 @@ document.addEventListener('DOMContentLoaded', function() {
showSlides(currentSlide); 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');
}
});
});

1
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss
View File

@ -56,6 +56,7 @@
flex: 1 15%; flex: 1 15%;
color: $blue_QDD; color: $blue_QDD;
padding: 0.5rem; padding: 0.5rem;
margin-top: 0;
&::before{ &::before{
content:""; content:"";
display: block; display: block;

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

@ -80,43 +80,69 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-left: 2rem;
.date{ .date{
width: fit-content; width: fit-content;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto; margin: auto;
align-items: center; align-items: flex-start;
padding-right: 1rem; padding-right: 1rem;
margin-bottom: 2rem;
&.jour{ .field_field_date_de_jour{
.moi-annee{ font-size: 2rem;
line-height: 0.3rem;
}
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
font-size: 3rem;
display: inline-flex;
&::after{
content: '.';
}
}
.annee{
display: flex;
align-items: center;
font-size: 0.6rem;
position: relative;
top: -10px;
.field_field_date_de_annee{
display: inline-flex; 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;
}
}
&.mois{
.moi-annee{
display: flex;
font-size: 0.6rem;
flex-direction: column;
align-items: center; align-items: center;
.field_field_date_de_moi{ &::after{
content: url('../img/noun-arrow-to-right-black.svg');
display: flex;
}
}
.field_field_date_de_annee.only{
display: inline-flex;
align-items: center;
&::after{
content: '';
display: flex;
}
}
.date2{
display: inline-flex;
.field_field_date_a_jour{
padding-right: 0.2rem; padding-right: 0.2rem;
text-transform: uppercase; }
font-size: 4rem; .field_field_date_a_moi{
padding-right: 0.2rem;
} }
} }
} }
} }
.text{ .text{

17
web/themes/custom/quartiers_de_demain/templates/paragraph--phase-deroulement.html.twig
View File

@ -55,15 +55,16 @@
{# {{ content }} #} {# {{ content }} #}
<div class="date"> <div class="date">
{{ content.field_date_de_jour}} {{ content.field_date_de_jour}}
<div class="moi-annee">
{{ content.field_date_de_moi}} {{ content.field_date_de_moi}}
{{ content.field_date_de_annee}} <div class="annee">
</div> {{ content.field_date_de_annee}}
{{ content.field_date_a_jour}} <div class="date2">
<div class="moi-annee"> {{ content.field_date_a_jour}}
{{ content.field_date_a_moi}} {{ content.field_date_a_moi}}
{{ content.field_date_a_annee}} {{ content.field_date_a_annee}}
</div> </div>
</div>
</div> </div>
<div class="text"> <div class="text">