css timeline
This commit is contained in:
ouidade
parent
48942e3e1d
commit
d4172ff07f
|
|
@ -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\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// slideshow home \n\n(function($, window) {\n console.log('hello slick')\n $(document).ready(function(){\n $('.field_field_phase .__deroulement-container .paragraph--type--phase-deroulement').slick({\n slidesToShow: 1,\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: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n});\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\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// let currentSlide = 0;\n\n// function showSlides(index) {\n// const slides = document.querySelectorAll('.__timeline-content');\n// const totalSlides = slides.length;\n// const visibleSlides = 3; // Number of slides to show at a time\n// const maxSlide = totalSlides - visibleSlides;\n \n// // Adjust the index to ensure it stays within bounds\n// currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n// // const offset = currentSlide * -40; // Calculate the offset for the transform\n// document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;\n\n// // Enable/disable arrows based on the current slide\n// document.querySelector('.arrow__prev').disabled = currentSlide === 0;\n// document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;\n// }\n\n// function prevSlide() {\n// showSlides(currentSlide - 1);\n// }\n\n// function nextSlide() {\n// showSlides(currentSlide + 1);\n// }\n\n// // Initialize\n// showSlides(currentSlide);\n\n\n\n\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
|
||||||
|
|
||||||
/***/ })
|
/***/ })
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -948,6 +948,98 @@ footer span.totop #toTop .arrow-up::before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* TIMELINE
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
#home * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#home .timeline {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 10rem;
|
||||||
|
padding-bottom: 10rem;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-arrows {
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
top: -220px;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-arrows button {
|
||||||
|
background-color: white;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-arrows button:hover {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content {
|
||||||
|
width: 100vw;
|
||||||
|
padding: 250px 0;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 500px;
|
||||||
|
height: 1px;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs:first-of-type {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs:last-child {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs:not(:first-child) {
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs:not(:last-child)::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 101%;
|
||||||
|
bottom: 0;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
|
||||||
|
position: absolute;
|
||||||
|
left: 65%;
|
||||||
|
top: -16px;
|
||||||
|
transform: translateY(-100%);
|
||||||
|
width: 400px;
|
||||||
|
height: 300px;
|
||||||
|
font-size: 1rem;
|
||||||
|
white-space: normal;
|
||||||
|
color: black;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee {
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee .field_field_date_de_moi {
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text {
|
||||||
|
border: solid rgb(7, 50, 194) 1px;
|
||||||
|
border-radius: 5%;
|
||||||
|
padding: 0.6rem 0.6rem;
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*pages*/
|
/*pages*/
|
||||||
#home .content_container #block-quartiers-de-demain-titredepage {
|
#home .content_container #block-quartiers-de-demain-titredepage {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -1012,7 +1104,7 @@ footer span.totop #toTop .arrow-up::before {
|
||||||
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
|
#home article.node-type-static #paragraph-id--1 .field_field_texte .colone-picto p {
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
width: 25%;
|
width: 30%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
@ -1163,42 +1255,10 @@ footer span.totop #toTop .arrow-up::before {
|
||||||
grid-row: 3;
|
grid-row: 3;
|
||||||
grid-column: 5;
|
grid-column: 5;
|
||||||
}
|
}
|
||||||
#home article.node-type-static #paragraph-id--9 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
|
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement {
|
|
||||||
width: 30%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto auto;
|
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
}
|
|
||||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_jour {
|
|
||||||
grid-row: 1/span 3;
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_moi {
|
|
||||||
grid-row: 2/span 3;
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_date_de_annee {
|
|
||||||
grid-row: 3;
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_titre {
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 1;
|
|
||||||
}
|
|
||||||
#home .config_pages--type--deroulement .field_field_phase .__deroulement-container .paragraph--type--phase-deroulement .field_field_description {
|
|
||||||
grid-row: 2/span 3;
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
#consultation {
|
#consultation {
|
||||||
background-color: #f6f7f3;
|
background-color: #f6f7f3;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
22
web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_next.svg
vendored
Normal file
22
web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_next.svg
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="17.028627mm"
|
||||||
|
height="34.876175mm"
|
||||||
|
viewBox="0 0 17.028627 34.876175"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-137.03258,-135.34556)">
|
||||||
|
<path
|
||||||
|
style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
|
||||||
|
d="m 137.65113,135.34577 a 0.48896116,0.48896116 0 0 0 -0.34953,0.13274 0.48896116,0.48896116 0 0 0 -0.02,0.69142 l 15.61906,16.54541 -15.73557,16.68294 a 0.48896116,0.48896116 0 0 0 0.021,0.69046 0.48896116,0.48896116 0 0 0 0.69046,-0.02 l 16.05168,-17.01814 a 0.48901006,0.48901006 0 0 0 0,-0.67042 l -15.93517,-16.88156 a 0.48896116,0.48896116 0 0 0 -0.34189,-0.15281 z"
|
||||||
|
id="path1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 969 B |
22
web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_prev.svg
vendored
Normal file
22
web/themes/custom/quartiers_de_demain/dist/assets/img/grandes_fleches_prev.svg
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="17.028627mm"
|
||||||
|
height="34.876175mm"
|
||||||
|
viewBox="0 0 17.028627 34.876175"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-137.03258,-135.34556)">
|
||||||
|
<path
|
||||||
|
style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
|
||||||
|
d="m 153.44264,135.34577 a 0.48896116,0.48896116 0 0 1 0.34953,0.13274 0.48896116,0.48896116 0 0 1 0.02,0.69142 l -15.61906,16.54541 15.73557,16.68294 a 0.48896116,0.48896116 0 0 1 -0.021,0.69046 0.48896116,0.48896116 0 0 1 -0.69046,-0.02 L 137.16554,153.0506 a 0.48901006,0.48901006 0 0 1 0,-0.67042 l 15.93517,-16.88156 a 0.48896116,0.48896116 0 0 1 0.34189,-0.15281 z"
|
||||||
|
id="path1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 967 B |
|
|
@ -0,0 +1,41 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="90.491943"
|
||||||
|
height="90.492188"
|
||||||
|
viewBox="0 0 90.491943 90.492186"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="clipPath390">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||||
|
transform="translate(-1010.0718,-2163.9844)"
|
||||||
|
id="path390" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g1"
|
||||||
|
transform="translate(-1301.517,-9024.7618)">
|
||||||
|
<g
|
||||||
|
id="g697">
|
||||||
|
<path
|
||||||
|
id="path389"
|
||||||
|
d="M 0,0 C 18.507,0 33.51,15.003 33.51,33.51 33.51,52.016 18.507,67.019 0,67.019 -18.507,67.019 -33.509,52.016 -33.509,33.51 -33.509,15.003 -18.507,0 0,0 Z"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1346.7623,9114.6875)"
|
||||||
|
clip-path="url(#clipPath390)" />
|
||||||
|
<path
|
||||||
|
id="path391"
|
||||||
|
d="M 0,0 9.997,-8.944 0,-17.887"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1342.4113,9058.0833)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,41 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="90.490723"
|
||||||
|
height="90.492188"
|
||||||
|
viewBox="0 0 90.490723 90.492186"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="clipPath393">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||||
|
transform="translate(-918.03445,-2163.9844)"
|
||||||
|
id="path393" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g1"
|
||||||
|
transform="translate(-1178.8005,-9024.7618)">
|
||||||
|
<g
|
||||||
|
id="g696">
|
||||||
|
<path
|
||||||
|
id="path392"
|
||||||
|
d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
|
||||||
|
clip-path="url(#clipPath393)" />
|
||||||
|
<path
|
||||||
|
id="path394"
|
||||||
|
d="M 0,0 -9.997,-8.944 0,-17.887"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -31,6 +31,7 @@
|
||||||
"async-done": "^2.0.0",
|
"async-done": "^2.0.0",
|
||||||
"async-settle": "^2.0.0",
|
"async-settle": "^2.0.0",
|
||||||
"atob": "^2.1.2",
|
"atob": "^2.1.2",
|
||||||
|
"babel": "^6.23.0",
|
||||||
"bach": "^2.0.1",
|
"bach": "^2.0.1",
|
||||||
"balanced-match": "^1.0.2",
|
"balanced-match": "^1.0.2",
|
||||||
"bare-events": "^2.2.2",
|
"bare-events": "^2.2.2",
|
||||||
|
|
@ -1180,6 +1181,18 @@
|
||||||
"node": ">= 4.5.0"
|
"node": ">= 4.5.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/babel": {
|
||||||
|
"version": "6.23.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/babel/-/babel-6.23.0.tgz",
|
||||||
|
"integrity": "sha512-ZDcCaI8Vlct8PJ3DvmyqUz+5X2Ylz3ZuuItBe/74yXosk2dwyVo/aN7MCJ8HJzhnnJ+6yP4o+lDgG9MBe91DLA==",
|
||||||
|
"deprecated": "In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers",
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"babel": "lib/cli.js",
|
||||||
|
"babel-external-helpers": "lib/cli.js",
|
||||||
|
"babel-node": "lib/cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/bach": {
|
"node_modules/bach": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@
|
||||||
"async-done": "^2.0.0",
|
"async-done": "^2.0.0",
|
||||||
"async-settle": "^2.0.0",
|
"async-settle": "^2.0.0",
|
||||||
"atob": "^2.1.2",
|
"atob": "^2.1.2",
|
||||||
|
"babel": "^6.23.0",
|
||||||
"bach": "^2.0.1",
|
"bach": "^2.0.1",
|
||||||
"balanced-match": "^1.0.2",
|
"balanced-match": "^1.0.2",
|
||||||
"bare-events": "^2.2.2",
|
"bare-events": "^2.2.2",
|
||||||
|
|
@ -439,6 +440,7 @@
|
||||||
"sass-loader": "^14.2.1",
|
"sass-loader": "^14.2.1",
|
||||||
"webpack": "^5.91.0",
|
"webpack": "^5.91.0",
|
||||||
"webpack-cli": "^5.1.4"
|
"webpack-cli": "^5.1.4"
|
||||||
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="17.028627mm"
|
||||||
|
height="34.876175mm"
|
||||||
|
viewBox="0 0 17.028627 34.876175"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-137.03258,-135.34556)">
|
||||||
|
<path
|
||||||
|
style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
|
||||||
|
d="m 137.65113,135.34577 a 0.48896116,0.48896116 0 0 0 -0.34953,0.13274 0.48896116,0.48896116 0 0 0 -0.02,0.69142 l 15.61906,16.54541 -15.73557,16.68294 a 0.48896116,0.48896116 0 0 0 0.021,0.69046 0.48896116,0.48896116 0 0 0 0.69046,-0.02 l 16.05168,-17.01814 a 0.48901006,0.48901006 0 0 0 0,-0.67042 l -15.93517,-16.88156 a 0.48896116,0.48896116 0 0 0 -0.34189,-0.15281 z"
|
||||||
|
id="path1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 969 B |
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="17.028627mm"
|
||||||
|
height="34.876175mm"
|
||||||
|
viewBox="0 0 17.028627 34.876175"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-137.03258,-135.34556)">
|
||||||
|
<path
|
||||||
|
style="color:#000000;fill:#000000;stroke-width:0.488961;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
|
||||||
|
d="m 153.44264,135.34577 a 0.48896116,0.48896116 0 0 1 0.34953,0.13274 0.48896116,0.48896116 0 0 1 0.02,0.69142 l -15.61906,16.54541 15.73557,16.68294 a 0.48896116,0.48896116 0 0 1 -0.021,0.69046 0.48896116,0.48896116 0 0 1 -0.69046,-0.02 L 137.16554,153.0506 a 0.48901006,0.48901006 0 0 1 0,-0.67042 l 15.93517,-16.88156 a 0.48896116,0.48896116 0 0 1 0.34189,-0.15281 z"
|
||||||
|
id="path1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 967 B |
|
|
@ -0,0 +1,41 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="90.491943"
|
||||||
|
height="90.492188"
|
||||||
|
viewBox="0 0 90.491943 90.492186"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="clipPath390">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||||
|
transform="translate(-1010.0718,-2163.9844)"
|
||||||
|
id="path390" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g1"
|
||||||
|
transform="translate(-1301.517,-9024.7618)">
|
||||||
|
<g
|
||||||
|
id="g697">
|
||||||
|
<path
|
||||||
|
id="path389"
|
||||||
|
d="M 0,0 C 18.507,0 33.51,15.003 33.51,33.51 33.51,52.016 18.507,67.019 0,67.019 -18.507,67.019 -33.509,52.016 -33.509,33.51 -33.509,15.003 -18.507,0 0,0 Z"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1346.7623,9114.6875)"
|
||||||
|
clip-path="url(#clipPath390)" />
|
||||||
|
<path
|
||||||
|
id="path391"
|
||||||
|
d="M 0,0 9.997,-8.944 0,-17.887"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1342.4113,9058.0833)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,41 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="90.490723"
|
||||||
|
height="90.492188"
|
||||||
|
viewBox="0 0 90.490723 90.492186"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="clipPath393">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||||
|
transform="translate(-918.03445,-2163.9844)"
|
||||||
|
id="path393" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g1"
|
||||||
|
transform="translate(-1178.8005,-9024.7618)">
|
||||||
|
<g
|
||||||
|
id="g696">
|
||||||
|
<path
|
||||||
|
id="path392"
|
||||||
|
d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
|
||||||
|
clip-path="url(#clipPath393)" />
|
||||||
|
<path
|
||||||
|
id="path394"
|
||||||
|
d="M 0,0 -9.997,-8.944 0,-17.887"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -95,36 +95,39 @@ $( document ).ready(function() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// slideshow home
|
////////////////// Timeline ///////////////////////
|
||||||
|
|
||||||
(function($, window) {
|
// let currentSlide = 0;
|
||||||
console.log('hello slick')
|
|
||||||
$(document).ready(function(){
|
// function showSlides(index) {
|
||||||
$('.field_field_phase .__deroulement-container .paragraph--type--phase-deroulement').slick({
|
// const slides = document.querySelectorAll('.__timeline-content');
|
||||||
slidesToShow: 1,
|
// const totalSlides = slides.length;
|
||||||
// slidesToScroll: 1,
|
// const visibleSlides = 3; // Number of slides to show at a time
|
||||||
dots: false,
|
// const maxSlide = totalSlides - visibleSlides;
|
||||||
arrows: true,
|
|
||||||
centerMode: true,
|
// // Adjust the index to ensure it stays within bounds
|
||||||
adaptiveHeight: true,
|
// currentSlide = Math.max(0, Math.min(index, maxSlide));
|
||||||
// centerPadding: '100px',
|
|
||||||
responsive: [
|
// // const offset = currentSlide * -40; // Calculate the offset for the transform
|
||||||
{
|
// document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;
|
||||||
breakpoint: 810,
|
|
||||||
settings: {
|
// // Enable/disable arrows based on the current slide
|
||||||
slidesToShow: 1,
|
// document.querySelector('.arrow__prev').disabled = currentSlide === 0;
|
||||||
adaptiveHeight: true,
|
// document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;
|
||||||
arrows: false,
|
// }
|
||||||
draggable: true,
|
|
||||||
centerMode: true,
|
// function prevSlide() {
|
||||||
}
|
// showSlides(currentSlide - 1);
|
||||||
}]
|
// }
|
||||||
});
|
|
||||||
console.log('salut slick home');
|
// function nextSlide() {
|
||||||
|
// showSlides(currentSlide + 1);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Initialize
|
||||||
|
// showSlides(currentSlide);
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
p{
|
p{
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
width: 25%;
|
width: 30%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
&:nth-of-type(1)::before{
|
&:nth-of-type(1)::before{
|
||||||
|
|
@ -114,7 +114,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#paragraph-id--6{
|
#paragraph-id--6{ /////// quartier 2030
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
@ -221,7 +221,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#paragraph-id--9{display: none;}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.paragraph--type--static-parts:not(#paragraph-id--7){
|
.paragraph--type--static-parts:not(#paragraph-id--7){
|
||||||
|
|
@ -230,44 +229,44 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.config_pages--type--deroulement{
|
// .config_pages--type--deroulement{
|
||||||
.field_field_phase{
|
// .field_field_phase{
|
||||||
.__deroulement-container{
|
// .__timeline{
|
||||||
display: flex;
|
// display: flex;
|
||||||
flex-direction: row;
|
// flex-direction: row;
|
||||||
.paragraph--type--phase-deroulement{
|
// .paragraph--type--phase-deroulement{
|
||||||
width: 30%;
|
// width: 30%;
|
||||||
display: grid;
|
// display: grid;
|
||||||
grid-template-columns: auto auto;
|
// grid-template-columns: auto auto;
|
||||||
grid-template-rows: auto auto auto;
|
// grid-template-rows: auto auto auto;
|
||||||
.field_field_date_de_jour{
|
// .field_field_date_de_jour{
|
||||||
grid-row: 1 /span 3;
|
// grid-row: 1 /span 3;
|
||||||
grid-column: 1;
|
// grid-column: 1;
|
||||||
}
|
// }
|
||||||
.field_field_date_de_moi{
|
// .field_field_date_de_moi{
|
||||||
grid-row: 2 /span 3;
|
// grid-row: 2 /span 3;
|
||||||
grid-column: 1;
|
// grid-column: 1;
|
||||||
|
|
||||||
}
|
// }
|
||||||
.field_field_date_de_annee{
|
// .field_field_date_de_annee{
|
||||||
grid-row: 3;
|
// grid-row: 3;
|
||||||
grid-column: 1;
|
// grid-column: 1;
|
||||||
}
|
// }
|
||||||
.field_field_titre{
|
// .field_field_titre{
|
||||||
grid-column: 2;
|
// grid-column: 2;
|
||||||
grid-row: 1;
|
// grid-row: 1;
|
||||||
}
|
// }
|
||||||
.field_field_description{
|
// .field_field_description{
|
||||||
grid-row: 2 /span 3;
|
// grid-row: 2 /span 3;
|
||||||
grid-column: 2;
|
// grid-column: 2;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
#paragraph-id--16{
|
// #paragraph-id--16{
|
||||||
|
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
|
||||||
|
/* TIMELINE
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||||
|
#home{
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
.timeline {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 10rem;
|
||||||
|
padding-bottom: 10rem;
|
||||||
|
.__timeline-arrows{
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
top: -220px;
|
||||||
|
button{
|
||||||
|
background-color: white;
|
||||||
|
border: none;
|
||||||
|
&:hover{
|
||||||
|
opacity: 0.5;
|
||||||
|
} }
|
||||||
|
}
|
||||||
|
.__timeline-content{
|
||||||
|
// font-size: 0;
|
||||||
|
width: 100vw;
|
||||||
|
padding: 250px 0;
|
||||||
|
transition: all 1s;
|
||||||
|
.__paragraphs{
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 500px;
|
||||||
|
height: 1px;
|
||||||
|
background: black;
|
||||||
|
&:first-of-type{
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
&:not(:last-child)::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 101%;
|
||||||
|
bottom: 0;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
.paragraph--type--phase-deroulement{
|
||||||
|
position: absolute;
|
||||||
|
left: 65%;
|
||||||
|
top: -16px;
|
||||||
|
transform: translateY(-100%);
|
||||||
|
width: 400px;
|
||||||
|
height: 300px;
|
||||||
|
font-size: 1rem;
|
||||||
|
white-space: normal;
|
||||||
|
color: black;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
.date{
|
||||||
|
width: 50%;
|
||||||
|
.moi-annee{
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
.field_field_date_de_moi{
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text{
|
||||||
|
border: solid $blue_QDD 1px;
|
||||||
|
border-radius: 5%;
|
||||||
|
padding: 0.6rem 0.6rem;
|
||||||
|
width: 45%;
|
||||||
|
|
||||||
|
.field_field_description{
|
||||||
|
.field--label-above{display: none;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -27,6 +27,8 @@
|
||||||
@import "partials/animation-logo";
|
@import "partials/animation-logo";
|
||||||
@import "partials/slick-theme";
|
@import "partials/slick-theme";
|
||||||
@import "partials/slick";
|
@import "partials/slick";
|
||||||
|
@import "partials/timeline";
|
||||||
|
|
||||||
// @import "partials/slick_custom";
|
// @import "partials/slick_custom";
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -51,6 +51,7 @@
|
||||||
set ancre_href = '#paragraph-id--' ~ paragraph.id()
|
set ancre_href = '#paragraph-id--' ~ paragraph.id()
|
||||||
%}
|
%}
|
||||||
{% if label_hidden %}
|
{% if label_hidden %}
|
||||||
|
|
||||||
{% if multiple %}
|
{% if multiple %}
|
||||||
<div{{ attributes }}>
|
<div{{ attributes }}>
|
||||||
{% for item in items %}
|
{% for item in items %}
|
||||||
|
|
@ -65,14 +66,24 @@
|
||||||
{% else %}
|
{% else %}
|
||||||
<div{{ attributes }}>
|
<div{{ attributes }}>
|
||||||
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
|
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
|
||||||
{% if multiple %}
|
<div class='timeline'>
|
||||||
<div class='__deroulement-container'>
|
<div class="__timeline-arrows">
|
||||||
{% endif %}
|
<button class="arrow arrow__prev">
|
||||||
{% for item in items %}
|
{% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
|
||||||
<div{{ item.attributes }}>{{ item.content }}</div>
|
</button>
|
||||||
{% endfor %}
|
<button class="arrow arrow__next">
|
||||||
{% if multiple %}
|
{% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
<div class="__timeline-content">
|
||||||
</div>
|
{% if multiple %}
|
||||||
|
{% endif %}
|
||||||
|
{% for item in items %}
|
||||||
|
<div class="__paragraphs"{{ item.attributes }}>{{ item.content }}</div>
|
||||||
|
{% endfor %}
|
||||||
|
{% if multiple %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation to display a paragraph.
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - paragraph: Full paragraph entity.
|
||||||
|
* Only method names starting with "get", "has", or "is" and a few common
|
||||||
|
* methods such as "id", "label", and "bundle" are available. For example:
|
||||||
|
* - paragraph.getCreatedTime() will return the paragraph creation timestamp.
|
||||||
|
* - paragraph.id(): The paragraph ID.
|
||||||
|
* - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
|
||||||
|
* - paragraph.getOwnerId(): The user ID of the paragraph author.
|
||||||
|
* See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
|
||||||
|
* and methods for the paragraph object.
|
||||||
|
* - content: All paragraph items. Use {{ content }} to print them all,
|
||||||
|
* or print a subset such as {{ content.field_example }}. Use
|
||||||
|
* {{ content|without('field_example') }} to temporarily suppress the printing
|
||||||
|
* of a given child element.
|
||||||
|
* - attributes: HTML attributes for the containing element.
|
||||||
|
* The attributes.class element may contain one or more of the following
|
||||||
|
* classes:
|
||||||
|
* - paragraphs: The current template type (also known as a "theming hook").
|
||||||
|
* - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
|
||||||
|
* "Image" it would result in "paragraphs--type--image". Note that the machine
|
||||||
|
* name will often be in a short form of the human readable label.
|
||||||
|
* - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
|
||||||
|
* preview would result in: "paragraphs--view-mode--preview", and
|
||||||
|
* default: "paragraphs--view-mode--default".
|
||||||
|
* - view_mode: View mode; for example, "preview" or "full".
|
||||||
|
* - logged_in: Flag for authenticated user status. Will be true when the
|
||||||
|
* current user is a logged-in member.
|
||||||
|
* - is_admin: Flag for admin user status. Will be true when the current user
|
||||||
|
* is an administrator.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_paragraph()
|
||||||
|
*
|
||||||
|
* @ingroup themeable
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
{%
|
||||||
|
set classes = [
|
||||||
|
'paragraph',
|
||||||
|
'paragraph--type--' ~ paragraph.bundle|clean_class,
|
||||||
|
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
|
||||||
|
not paragraph.isPublished() ? 'paragraph--unpublished'
|
||||||
|
]
|
||||||
|
%}
|
||||||
|
|
||||||
|
{% block paragraph %}
|
||||||
|
{# <div{{ attributes.addClass(classes) }}> #}
|
||||||
|
<div{{ attributes.addClass(classes).setAttribute('id', 'paragraph-id--' ~ paragraph.id()) }}>
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
{# {{ content }} #}
|
||||||
|
<div class="date">
|
||||||
|
{{ content.field_date_de_jour}}
|
||||||
|
<div class="moi-annee">
|
||||||
|
{{ content.field_date_de_moi}}
|
||||||
|
{{ content.field_date_de_annee}}
|
||||||
|
</div>
|
||||||
|
{{ content.field_date_a_jour}}
|
||||||
|
<div class="moi-annee">
|
||||||
|
{{ content.field_date_a_moi}}
|
||||||
|
{{ content.field_date_a_annee}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text">
|
||||||
|
{{ content.field_description}}
|
||||||
|
{{ content.field_titre}}
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
</div>
|
||||||
|
{% endblock paragraph %}
|
||||||
|
|
@ -47,7 +47,9 @@ let config = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue