Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

developping chapitrage thematique

Browse Source
This commit is contained in:
Antoine M 2023-10-04 14:34:06 +02:00
parent a7b4327ee3
commit 9992f10212
9 changed files with 176 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
css/app.css
View File

@ -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 {

46
js/app.js
View File

@ -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();
});

1
resources/css/app.css
View File

@ -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';

24
resources/css/blocks/chapitrage-thematique.css Normal file
View File

@ -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;
}
}
}

3
resources/css/editor-content/color-taxonomy-scheme.css
View File

@ -14,7 +14,8 @@ body.acoustique,
h4,
h5,
h6,
ul li::marker {
ul li::marker,
ol li::marker {
@apply text-acoustique-coproprietes;
}

8
resources/css/editor-content/gutenberg.css
View File

@ -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;

3
resources/js/app.js
View File

@ -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();
});

31
resources/js/schema-bullet-points.js Normal file
View File

@ -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();
});
});
}

19
resources/js/single-conseil.js
View File

@ -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);
});
}