From 9992f102129645a0c0cce95d27af5dd0eb189bab Mon Sep 17 00:00:00 2001 From: Antoine M Date: Wed, 4 Oct 2023 14:34:06 +0200 Subject: [PATCH] developping chapitrage thematique --- css/app.css | 57 +++++++++++++++++-- js/app.js | 46 ++++++++++++++- resources/css/app.css | 1 + .../css/blocks/chapitrage-thematique.css | 24 ++++++++ .../editor-content/color-taxonomy-scheme.css | 3 +- resources/css/editor-content/gutenberg.css | 8 +-- resources/js/app.js | 3 +- resources/js/schema-bullet-points.js | 31 ++++++++++ resources/js/single-conseil.js | 19 ++++++- 9 files changed, 176 insertions(+), 16 deletions(-) create mode 100644 resources/css/blocks/chapitrage-thematique.css create mode 100644 resources/js/schema-bullet-points.js diff --git a/css/app.css b/css/app.css index a2bc101..be75e7a 100644 --- a/css/app.css +++ b/css/app.css @@ -3162,48 +3162,56 @@ body.petites-coproprietes h2, body.petites-coproprietes h5, body.petites-coproprietes h6, body.petites-coproprietes ul li::marker, + body.petites-coproprietes ol li::marker, .entry-content--petites-coproprietes h2, .entry-content--petites-coproprietes h3, .entry-content--petites-coproprietes h4, .entry-content--petites-coproprietes h5, .entry-content--petites-coproprietes h6, .entry-content--petites-coproprietes ul li::marker, + .entry-content--petites-coproprietes ol li::marker, .post-conseil-page--petites-coproprietes h2, .post-conseil-page--petites-coproprietes h3, .post-conseil-page--petites-coproprietes h4, .post-conseil-page--petites-coproprietes h5, .post-conseil-page--petites-coproprietes h6, .post-conseil-page--petites-coproprietes ul li::marker, + .post-conseil-page--petites-coproprietes ol li::marker, .post-question-page--petites-coproprietes h2, .post-question-page--petites-coproprietes h3, .post-question-page--petites-coproprietes h4, .post-question-page--petites-coproprietes h5, .post-question-page--petites-coproprietes h6, .post-question-page--petites-coproprietes ul li::marker, + .post-question-page--petites-coproprietes ol li::marker, body.acoustique h2, body.acoustique h3, body.acoustique h4, body.acoustique h5, body.acoustique h6, body.acoustique ul li::marker, + body.acoustique ol li::marker, .entry-content--acoustique h2, .entry-content--acoustique h3, .entry-content--acoustique h4, .entry-content--acoustique h5, .entry-content--acoustique h6, .entry-content--acoustique ul li::marker, + .entry-content--acoustique ol li::marker, .post-conseil-page--acoustique h2, .post-conseil-page--acoustique h3, .post-conseil-page--acoustique h4, .post-conseil-page--acoustique h5, .post-conseil-page--acoustique h6, .post-conseil-page--acoustique ul li::marker, + .post-conseil-page--acoustique ol li::marker, .post-question-page--acoustique h2, .post-question-page--acoustique h3, .post-question-page--acoustique h4, .post-question-page--acoustique h5, .post-question-page--acoustique h6, - .post-question-page--acoustique ul li::marker { + .post-question-page--acoustique ul li::marker, + .post-question-page--acoustique ol li::marker { --tw-text-opacity: 1; color: rgb(36 94 242 / var(--tw-text-opacity)); } @@ -3939,9 +3947,12 @@ article > *:not(.entry-content, .chapter-header-block), margin-bottom: 2rem; } +.entry-content ol { + list-style-position: inside; + list-style-type: decimal; +} + .entry-content ul li { - /* @apply my-1 grid gap-2; - grid-template-columns: 10px 1fr; */ position: relative; padding-left: 1.25rem; } @@ -3949,7 +3960,6 @@ article > *:not(.entry-content, .chapter-header-block), .entry-content ul li:before { position: absolute; left: 0px; - list-style-type: none; content: ''; display: inline-block; height: 8px; @@ -4754,6 +4764,45 @@ article > *:not(.entry-content, .chapter-header-block), background-image: url('../resources/img/pictogrammes/icon_chain_dark.svg'); } +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique { + margin-bottom: 3rem; + gap: 2rem; + padding: 0px; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique h3 { + margin-top: 0px; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cover { + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + width: 100%; + border-radius: 1.5rem; + aspect-ratio: 1/1; + background-color: red; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cover img { + max-width: 86%; + max-height: 86%; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-lien-chapitre { + margin-top: 3rem; + margin-bottom: 3rem; + border-radius: 1rem; + padding: 3rem; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-lien-chapitre__title { + padding-bottom: 0.75rem; + font-size: 1.25rem; + font-weight: 700; +} + /* ########### PAGE ############ */ .demo-components .title { diff --git a/js/app.js b/js/app.js index 07a2616..d518463 100644 --- a/js/app.js +++ b/js/app.js @@ -281,17 +281,57 @@ }, { rootMargin: "-10% 0px -70% 0px" }); - const questionsContainerBlocks = document.querySelectorAll(".questions-container-block"); - const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary"); - const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock]; + function buildAllBlocksToObserve() { + const questionsContainerBlocks = document.querySelectorAll(".questions-container-block"); + const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary"); + const plusLoinBlock = document.querySelector("#aller-plus-loin"); + let allBlocks2 = []; + if (questionsContainerBlocks) + allBlocks2 = [...questionsContainerBlocks]; + if (vocabulaireSummaryBlock) + allBlocks2.push(vocabulaireSummaryBlock); + if (plusLoinBlock) + allBlocks2.push(plusLoinBlock); + return allBlocks2; + } + allBlocks = buildAllBlocksToObserve(); allBlocks.forEach((el) => { + console.log(el); io.observe(el); }); } + // resources/js/schema-bullet-points.js + function SchemaBulletPointsInit() { + const focusBulletPoints = document.querySelectorAll(".homegrade-blocks-focus-point-bullet"); + if (!focusBulletPoints) + return; + focusBulletPoints.forEach((focusPoint) => { + const focusPointsContainer = focusPoint.parentElement; + focusPoint.addEventListener("mouseover", (event) => { + const aleradyHoveredFocusPoint = document.querySelector("[data-hovered]"); + console.log(aleradyHoveredFocusPoint); + const focusTitle = focusPoint.getAttribute("data-focus-bullet-title"); + const focusPointPopupContainer = document.createElement("div"); + focusPointPopupContainer.className = "focus-point-popup-container"; + const focusPointPopupTitle = document.createElement("h4"); + focusPointPopupTitle.textContent = focusTitle; + focusPointPopupTitle.className = "focus-point-popup-container__title"; + focusPointPopupContainer.appendChild(focusPointPopupTitle); + focusPoint.appendChild(focusPointPopupContainer); + focusPoint.setAttribute("data-hovered", ""); + }); + focusPoint.addEventListener("mouseout", function() { + const focusPointPopupContainer = focusPoint.querySelector(".focus-point-popup-container"); + focusPointPopupContainer.remove(); + }); + }); + } + // resources/js/app.js window.addEventListener("DOMContentLoaded", (event) => { menuInit(); + SchemaBulletPointsInit(); singleConseil(); editorInit(); }); diff --git a/resources/css/app.css b/resources/css/app.css index f11dad0..c5552e0 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -64,6 +64,7 @@ @import './blocks/focused-schema.css'; @import './blocks/plus-loin.css'; @import './blocks/content-heading.css'; +@import './blocks/chapitrage-thematique.css'; /* ########### PAGE ############ */ @import './pages/demo-components.css'; diff --git a/resources/css/blocks/chapitrage-thematique.css b/resources/css/blocks/chapitrage-thematique.css new file mode 100644 index 0000000..2402643 --- /dev/null +++ b/resources/css/blocks/chapitrage-thematique.css @@ -0,0 +1,24 @@ +.homegrade-blocks-chapitrage-thematique { + .homegrade-blocks-chapitre-thematique { + @apply p-0 gap-8 mb-12; + h3 { + @apply mt-0; + } + &__cover { + @apply rounded-3xl w-full h-fit; + aspect-ratio: 1/1; + background-color: red; + img { + max-width: 86%; + max-height: 86%; + } + } + } + + .homegrade-blocks-lien-chapitre { + @apply my-12 shadowed rounded-2xl p-12; + &__title { + @apply text-xl font-bold pb-3; + } + } +} diff --git a/resources/css/editor-content/color-taxonomy-scheme.css b/resources/css/editor-content/color-taxonomy-scheme.css index f8446fc..bce9f99 100644 --- a/resources/css/editor-content/color-taxonomy-scheme.css +++ b/resources/css/editor-content/color-taxonomy-scheme.css @@ -14,7 +14,8 @@ body.acoustique, h4, h5, h6, - ul li::marker { + ul li::marker, + ol li::marker { @apply text-acoustique-coproprietes; } diff --git a/resources/css/editor-content/gutenberg.css b/resources/css/editor-content/gutenberg.css index 221a8b0..acbc4b4 100644 --- a/resources/css/editor-content/gutenberg.css +++ b/resources/css/editor-content/gutenberg.css @@ -32,14 +32,14 @@ article > *:not(.entry-content, .chapter-header-block), @apply mb-8; } - + ol { + @apply list-decimal list-inside; + } ul li { - /* @apply my-1 grid gap-2; - grid-template-columns: 10px 1fr; */ @apply relative pl-5; } ul li:before { - @apply list-none absolute left-0; + @apply absolute left-0; content: ''; display: inline-block; height: 8px; diff --git a/resources/js/app.js b/resources/js/app.js index be91ea1..b95f359 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,11 +1,12 @@ import editorInit from './editor'; import menuInit from './menus'; import singleConseil from './single-conseil'; - +import SchemaBulletPointsInit from './schema-bullet-points'; // window.addEventListener('load', function () {}); window.addEventListener('DOMContentLoaded', (event) => { menuInit(); + SchemaBulletPointsInit(); singleConseil(); editorInit(); }); diff --git a/resources/js/schema-bullet-points.js b/resources/js/schema-bullet-points.js new file mode 100644 index 0000000..86736d7 --- /dev/null +++ b/resources/js/schema-bullet-points.js @@ -0,0 +1,31 @@ +export default function SchemaBulletPointsInit() { + const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet'); + if (!focusBulletPoints) return; + + focusBulletPoints.forEach((focusPoint) => { + const focusPointsContainer = focusPoint.parentElement; + + focusPoint.addEventListener('mouseover', (event) => { + const aleradyHoveredFocusPoint = document.querySelector('[data-hovered]'); + console.log(aleradyHoveredFocusPoint); + + const focusTitle = focusPoint.getAttribute('data-focus-bullet-title'); + + const focusPointPopupContainer = document.createElement('div'); + focusPointPopupContainer.className = 'focus-point-popup-container'; + + const focusPointPopupTitle = document.createElement('h4'); + focusPointPopupTitle.textContent = focusTitle; + focusPointPopupTitle.className = 'focus-point-popup-container__title'; + + focusPointPopupContainer.appendChild(focusPointPopupTitle); + focusPoint.appendChild(focusPointPopupContainer); + focusPoint.setAttribute('data-hovered', ''); + }); + + focusPoint.addEventListener('mouseout', function () { + const focusPointPopupContainer = focusPoint.querySelector('.focus-point-popup-container'); + focusPointPopupContainer.remove(); + }); + }); +} diff --git a/resources/js/single-conseil.js b/resources/js/single-conseil.js index a372575..1c97455 100644 --- a/resources/js/single-conseil.js +++ b/resources/js/single-conseil.js @@ -50,11 +50,24 @@ export default function singleConseil() { rootMargin: '-10% 0px -70% 0px', } ); - const questionsContainerBlocks = document.querySelectorAll('.questions-container-block'); - const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary'); - const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock]; + + function buildAllBlocksToObserve() { + const questionsContainerBlocks = document.querySelectorAll('.questions-container-block'); + const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary'); + const plusLoinBlock = document.querySelector('#aller-plus-loin'); + let allBlocks = []; + + if (questionsContainerBlocks) allBlocks = [...questionsContainerBlocks]; + if (vocabulaireSummaryBlock) allBlocks.push(vocabulaireSummaryBlock); + if (plusLoinBlock) allBlocks.push(plusLoinBlock); + + return allBlocks; + } + + allBlocks = buildAllBlocksToObserve(); allBlocks.forEach((el) => { + console.log(el); io.observe(el); }); }