From d1d9778fc447c2e5ca1e291ffd00e47663ea69fb Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 11 Jul 2024 14:31:51 +0200 Subject: [PATCH] =?UTF-8?q?formes=20g=C3=A9ometriques?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../quartiers_de_demain/dist/assets/bundle.js | 12 +-- .../dist/assets/css/bundle.css | 52 ++++++--- .../dist/assets/img/formes-animees-1.svg | 6 +- .../src/assets/js/animated_formes.js | 11 ++ .../src/assets/scss/pages/home.scss | 38 ++++--- .../src/assets/scss/partials/timeline.scss | 6 ++ .../config-pages--diaporama-home.html.twig | 22 ++++ .../field--node--body--static.html.twig | 101 ++++++++++++++++++ .../quartiers_de_demain/webpack.config.js | 3 +- 9 files changed, 213 insertions(+), 38 deletions(-) create mode 100644 web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js create mode 100644 web/themes/custom/quartiers_de_demain/templates/config-pages--diaporama-home.html.twig create mode 100644 web/themes/custom/quartiers_de_demain/templates/field--node--body--static.html.twig 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 e6dc5aa..ed848af 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -20,13 +20,13 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), -/***/ "./src/assets/js/animated_logo.js": -/*!****************************************!*\ - !*** ./src/assets/js/animated_logo.js ***! - \****************************************/ +/***/ "./src/assets/js/animated_formes.js": +/*!******************************************!*\ + !*** ./src/assets/js/animated_formes.js ***! + \******************************************/ /***/ (() => { -eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.querySelector('#logo-animated');\n let svgElement = document.querySelector('#logo-animated svg');\n svgContainer.style.height = `${svgElement.clientHeight}px`;\n }\n setLogoContainerSize();\n window.addEventListener('resize', setLogoContainerSize);\n console.log('animated');\n\n let chemins = document.querySelectorAll('#logo-animated svg path');\n for (let chemin of chemins) {\n let length = chemin.getTotalLength();\n chemin.style.strokeDasharray = length;\n chemin.style.strokeDashoffset = length;\n }\n\n \n let consultationCouleur = document.querySelector('#consultation-couleur');\n let consultationNoir = document.querySelector('#consultation-noir');\n \n let quartierCouleur = document.querySelector('#quartier-couleur');\n let quartierNoir = document.querySelector('#quartier-noir');\n \n let consultationTranslate = 200;\n let quartierTranslate = -200;\n\n function startCountdown() {\n let startTime;\n let animationTime = 1800;\n\n function animate(timestamp) {\n if (!startTime) startTime = timestamp;\n const elapsedTime = timestamp - startTime;\n\n if (elapsedTime <= animationTime) {\n const animationPercent = elapsedTime / animationTime;\n animateLogo(animationPercent);\n requestAnimationFrame(animate);\n } else {\n animateLogo(1);\n }\n\n }\n requestAnimationFrame(animate);\n }\n\n // function animateLogo(animationPercent) {\n // for (let i = 0; i < chemins.length; i++) {\n // let draw = chemins[i].getTotalLength() * animationPercent;\n // chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n // chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);\n // }\n // let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);\n // let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);\n\n // consultationCouleur.style.opacity = animationPercentCouleur;\n // consultationNoir.style.opacity = animationPercentNoir;\n // quartierCouleur.style.opacity = animationPercentCouleur;\n // quartierNoir.style.opacity = animationPercentNoir;\n\n // consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;\n\n // quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;\n // }\n\n function animateLogo(animationPercent) {\n // Calcul du pourcentage de l'animation principale\n let mainAnimationPercent = animationPercent;\n\n // Décalage pour l'animation des éléments noir\n let noirDelay = 0.7; // Exemple de décalage de 30% de l'animation principale\n let noirQuartierDelay = 0.1; // Exemple de décalage de 30% de l'animation principale\n\n // Calcul du pourcentage de l'animation pour les éléments noir avec décalage\n let animationPercentNoir = Math.max((mainAnimationPercent - noirDelay) / (1 - noirDelay), 0);\n\n for (let i = 0; i < chemins.length; i++) {\n let draw = chemins[i].getTotalLength() * mainAnimationPercent;\n chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);\n }\n let animationPercentCouleur = Math.min(mainAnimationPercent / 0.5, 1);\n\n let animationPercentNoirQuartier = Math.max((mainAnimationPercent - noirQuartierDelay) / (1 - noirQuartierDelay), 0);\n\n for (let i = 0; i < chemins.length; i++) {\n let draw = chemins[i].getTotalLength() * mainAnimationPercent;\n chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);\n }\n consultationCouleur.style.opacity = animationPercentCouleur;\n consultationNoir.style.opacity = animationPercentNoir;\n quartierCouleur.style.opacity = animationPercentCouleur;\n quartierNoir.style.opacity = animationPercentNoirQuartier;\n\n // Décalage des éléments noir dans le temps\n consultationNoir.style.transform = `translate(${consultationTranslate * (mainAnimationPercent - 1)}px, ${consultationTranslate * (mainAnimationPercent - 1)}px)`;\n quartierNoir.style.transform = `translate(${quartierTranslate * (mainAnimationPercent - 1)}px, ${quartierTranslate * (mainAnimationPercent - 1)}px)`;\n}\n\n\n\n window.addEventListener('load', startCountdown);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_logo.js?"); +eval("// document.addEventListener(\"DOMContentLoaded\", function() {\n// const pathToRotate = document.getElementById('path257');\n// let rotationAngle = 0;\n\n// // function rotatePath() {\n// // rotationAngle += 1; // Augmente l'angle de rotation\n// // pathToRotate.setAttribute('transform', `translate(1460.9323, 1201.6543) rotate(${rotationAngle}, 5, -10)`); // Applique la transformation de rotation\n// // }\n\n// // setInterval(rotatePath, 10); // Appelle la fonction rotatePath toutes les 10 millisecondes (ajustez selon vos besoins)\n// });\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?"); /***/ }), @@ -115,7 +115,7 @@ eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) /******/ // Load entry module and return exports /******/ // This entry module can't be inlined because the eval devtool is used. /******/ __webpack_modules__["./src/assets/js/quartiers_de_demain.js"](0, {}, __webpack_require__); -/******/ __webpack_modules__["./src/assets/js/animated_logo.js"](0, {}, __webpack_require__); +/******/ __webpack_modules__["./src/assets/js/animated_formes.js"](0, {}, __webpack_require__); /******/ var __webpack_exports__ = {}; /******/ __webpack_modules__["./src/assets/scss/quartiers_de_demain.scss"](0, __webpack_exports__, __webpack_require__); /******/ 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 babd8aa..a349cb9 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 @@ -1061,6 +1061,11 @@ footer { right: 20%; top: 2rem; } +@media (max-width: 810px) { + #home .__container-deroulement::before { + display: none; + } +} #home .__container-deroulement::after { content: url("../img/formes-animees-7.svg"); display: block; @@ -1069,6 +1074,11 @@ footer { right: 26%; bottom: -9rem; } +@media (max-width: 810px) { + #home .__container-deroulement::after { + display: none; + } +} #home .__container-deroulement h2 { width: fit-content; margin: auto; @@ -1447,23 +1457,16 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home .config_pages--type--diaporama-home { position: relative; } -#home .config_pages--type--diaporama-home::after { - content: url("../img/formes-animees-1.svg"); - display: block; - width: 50%; +#home .config_pages--type--diaporama-home #svg1 { position: absolute; z-index: 5; right: 11rem; - bottom: -6rem; + bottom: -8rem; + width: 50%; } @media (max-width: 810px) { - #home .config_pages--type--diaporama-home::after { - bottom: -5rem; - } -} -@media (max-width: 810px) { - #home .config_pages--type--diaporama-home::after { - bottom: -5rem; + #home .config_pages--type--diaporama-home #svg1 { + display: none; } } #home .config_pages--type--diaporama-home .field_field_images img { @@ -1480,6 +1483,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home article.node-type-static { padding-top: 6rem; } +@media (max-width: 810px) { + #home article.node-type-static { + padding-top: 4rem; + } +} #home article.node-type-static .field_title { display: none; } @@ -1499,6 +1507,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h left: 1rem; bottom: 0; } +@media (max-width: 810px) { + #home article.node-type-static .field_body::after { + display: none; + } +} @media (max-width: 1090px) { #home article.node-type-static .field_body { flex-direction: column; @@ -1560,6 +1573,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h right: 15%; bottom: 45%; } +@media (max-width: 810px) { + #home article.node-type-static #paragraph-id--1::after { + display: none; + } +} #home article.node-type-static #paragraph-id--1 .field_field_title { font-family: "gilroy-bold"; } @@ -1800,6 +1818,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h left: 10%; top: -6rem; } +@media (max-width: 810px) { + #home article.node-type-static #paragraph-id--6::before { + display: none; + } +} #home article.node-type-static #paragraph-id--6::after { content: url("../img/formes-animees-5.svg"); display: block; @@ -1808,6 +1831,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h right: 15%; top: 3rem; } +@media (max-width: 810px) { + #home article.node-type-static #paragraph-id--6::after { + display: none; + } +} @media (max-width: 500px) { #home article.node-type-static #paragraph-id--6 { width: 90%; diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg index c609c06..1860871 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg @@ -4,11 +4,9 @@ + {{ content }} + {% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %} + diff --git a/web/themes/custom/quartiers_de_demain/templates/field--node--body--static.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--node--body--static.html.twig new file mode 100644 index 0000000..73cbc9a --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/templates/field--node--body--static.html.twig @@ -0,0 +1,101 @@ +{# +/** + * @file + * Default theme implementation for a field. + * + * To override output, copy the "field.html.twig" from the templates directory + * to your theme's directory and customize it, just like customizing other + * Drupal templates such as page.html.twig or node.html.twig. + * + * Instead of overriding the theming for all fields, you can also just override + * theming for a subset of fields using + * @link themeable Theme hook suggestions. @endlink For example, + * here are some theme hook suggestions that can be used for a field_foo field + * on an article node type: + * - field--node--field-foo--article.html.twig + * - field--node--field-foo.html.twig + * - field--node--article.html.twig + * - field--field-foo.html.twig + * - field--text-with-summary.html.twig + * - field.html.twig + * + * Available variables: + * - attributes: HTML attributes for the containing element. + * - label_hidden: Whether to show the field label or not. + * - title_attributes: HTML attributes for the title. + * - label: The label for the field. + * - multiple: TRUE if a field can contain multiple items. + * - items: List of all the field items. Each item contains: + * - attributes: List of HTML attributes for each item. + * - content: The field item's content. + * - entity_type: The entity type to which the field belongs. + * - field_name: The name of the field. + * - field_type: The type of the field. + * - label_display: The display settings for the label. + * + * @see template_preprocess_field() + * + * @ingroup themeable + */ +#} +{% + set title_classes = [ + 'field', + 'field--name-' ~ field_name|clean_class, + 'field--type-' ~ field_type|clean_class, + 'field--label-' ~ label_display, + label_display == 'visually_hidden' ? 'visually-hidden', + ] +%} +{% + set ancre_href = '#paragraph-id--' ~ paragraph.id() +%} +{# {% set svg_icon %} + + + + + + #} +{# {% endset %} #} +{% if label_hidden %} + {% if multiple %} + + {% for item in items %} + {{ item.content }} + {% endfor %} + + {% else %} + {% for item in items %} + {{ item.content }} + {% endfor %} + {% endif %} +{% else %} + + {{ label }} + {% if multiple %} +
+ {% endif %} + {% for item in items %} + {{ item.content }}
+ {# {{ svg_icon|raw }} #} + {% endfor %} + {% if multiple %} + + {% endif %} + +{% endif %} diff --git a/web/themes/custom/quartiers_de_demain/webpack.config.js b/web/themes/custom/quartiers_de_demain/webpack.config.js index 711d590..019731a 100644 --- a/web/themes/custom/quartiers_de_demain/webpack.config.js +++ b/web/themes/custom/quartiers_de_demain/webpack.config.js @@ -5,7 +5,8 @@ let config = { mode: 'development', entry: [ "./src/assets/js/quartiers_de_demain.js", - "./src/assets/js/animated_logo.js", + // "./src/assets/js/animated_logo.js", + "./src/assets/js/animated_formes.js", "./src/assets/scss/quartiers_de_demain.scss", // "./src/assets/fonts/*", // "./src/assets/css/animated_logo.css",