diff --git a/css/app.css b/css/app.css index 40977b1..1cadcf5 100644 --- a/css/app.css +++ b/css/app.css @@ -652,6 +652,10 @@ video { display: flex; } +.table { + display: table; +} + .h-1 { height: 0.25rem; } @@ -3955,6 +3959,95 @@ article > *:not(.entry-content, .chapter-header-block), margin-top: 9px; } +.wp-block-table thead { + border-radius: 0.75rem; + border-bottom-width: 0px; + background-color: rgb(239, 239, 239, 0.6); +} + +.wp-block-table thead th { + border-style: none !important; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.wp-block-table thead th:first-child { + border-top-left-radius: 0.75rem; + border-bottom-left-radius: 0.75rem; +} + +.wp-block-table thead th:last-child { + border-top-right-radius: 0.75rem; + border-bottom-right-radius: 0.75rem; +} + +.wp-block-table tr { + margin-top: 2rem; +} + +.wp-block-table tr td:first-child { + border-left-width: 0px; +} + +.wp-block-table tr td:last-child { + border-right-width: 0px; +} + +.wp-block-table tr:first-child td { + border-top-width: 0px; +} + +.wp-block-table tr:last-child td { + border-bottom-width: 0px; +} + +.wp-block-table td { + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 229 229 / var(--tw-border-opacity)); + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.wp-block-table .table-cell-icon { + margin-left: auto; + margin-right: auto; + display: flex; + height: 2rem; + width: 2rem; + align-items: center; + justify-content: center; + border-radius: 9999px; + padding: 0.5rem; +} + +.wp-block-table .table-cell-icon:before { + display: flex; + align-items: center; + justify-content: center; +} + +.wp-block-table .table-cell-icon--checked { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); +} + +.wp-block-table .table-cell-icon--checked:before { + content: url('../resources/img/graphic-assets/table-cell--check.svg'); +} + +.wp-block-table .table-cell-icon--crossed { + border-width: 2px; + --tw-border-opacity: 1; + border-color: rgb(38 38 38 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.wp-block-table .table-cell-icon--crossed:before { + content: url('../resources/img/graphic-assets/table-cell--cross.svg'); +} + .tooltip-word { -webkit-text-decoration-line: underline; text-decoration-line: underline; @@ -4602,9 +4695,11 @@ article > *:not(.entry-content, .chapter-header-block), margin-top: 0px !important; font-size: 2.25rem !important; line-height: 2.5rem !important; + font-weight: 700 !important; } .homegrade-blocks-plus-loin p, + .homegrade-blocks-plus-loin h2, .homegrade-blocks-plus-loin h3, .homegrade-blocks-plus-loin h4, .homegrade-blocks-plus-loin h5, diff --git a/css/editor-style.css b/css/editor-style.css index c122934..95327e8 100644 --- a/css/editor-style.css +++ b/css/editor-style.css @@ -99,6 +99,10 @@ display: flex } +.table { + display: table +} + .h-1 { height: 0.25rem } diff --git a/includes/init.php b/includes/init.php index ba0138c..0709a55 100644 --- a/includes/init.php +++ b/includes/init.php @@ -7,6 +7,7 @@ function tailpress_setup() { + // ##### Setup 🡒 Navigation register_nav_menus( @@ -57,9 +58,23 @@ function tailpress_enqueue_scripts() wp_enqueue_script('gsap', get_template_directory_uri() . '/assets/gsap/gsap.min.js', array(), $theme->get('Version')); wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version')); wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version')); - wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version')); + // wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version')); // wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version')); + // #PASSING TRANSLATIONS + wp_register_script('main-app-js', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version')); + + $translations_main_app_js = array( + 'yes' => __('Oui', 'homegrade-theme__texte-fonctionnel'), + 'no' => __('Non', 'homegrade-theme__texte-fonctionnel'), + ); + wp_localize_script('main-app-js', 'textTranslationsMainAppJS', $translations_main_app_js); + + wp_enqueue_script('main-app-js'); + + + + // SHOW THEMATIQUE wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version')); diff --git a/js/app.js b/js/app.js index 7ed53e0..5882a6d 100644 --- a/js/app.js +++ b/js/app.js @@ -1,4 +1,21 @@ (() => { + // resources/js/editor.js + function editorInit() { + const tablesCells = document.querySelectorAll(".wp-block-table td"); + function filterCells(element, stringToParse) { + return element.textContent.trim() === stringToParse; + } + const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, "((v))")); + const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, "((x))")); + checkedCells.forEach((cell) => { + console.log(textTranslationsMainAppJS); + cell.innerHTML = ``; + }); + crossedCells.forEach((cell) => { + cell.innerHTML = ``; + }); + } + // resources/js/menus.js function menuInit() { const header = document.querySelector("#main-header"); @@ -279,7 +296,6 @@ const questionsContainerBlocks = document.querySelectorAll(".questions-container-block"); const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary"); const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock]; - console.log(vocabulaireSummaryBlock); allBlocks.forEach((el) => { io.observe(el); }); @@ -289,5 +305,6 @@ window.addEventListener("DOMContentLoaded", (event) => { menuInit(); singleConseil(); + editorInit(); }); })(); diff --git a/resources/css/blocks/plus-loin.css b/resources/css/blocks/plus-loin.css index c8f81e8..9d25deb 100644 --- a/resources/css/blocks/plus-loin.css +++ b/resources/css/blocks/plus-loin.css @@ -1,9 +1,10 @@ .homegrade-blocks-plus-loin { @apply bg-primary p-12 rounding-radius my-8; &__block-title { - @apply !mt-0 !text-4xl; + @apply !mt-0 !text-4xl !font-bold; } p, + h2, h3, h4, h5, diff --git a/resources/css/editor-content/gutenberg.css b/resources/css/editor-content/gutenberg.css index 35305f4..016881f 100644 --- a/resources/css/editor-content/gutenberg.css +++ b/resources/css/editor-content/gutenberg.css @@ -49,3 +49,58 @@ article > *:not(.entry-content, .chapter-header-block), margin-top: 9px; } } + +.wp-block-table { + thead { + @apply bg-gray rounded-xl border-b-0; + th { + @apply !border-none py-8; + } + th:first-child { + @apply rounded-tl-xl rounded-bl-xl; + } + th:last-child { + @apply rounded-tr-xl rounded-br-xl; + } + } + tr { + @apply mt-8; + td:first-child { + @apply border-l-0; + } + td:last-child { + @apply border-r-0; + } + } + tr:first-child { + td { + @apply border-t-0; + } + } + tr:last-child { + td { + @apply border-b-0; + } + } + td { + @apply border border-neutral-200 py-3; + } + .table-cell-icon { + @apply mx-auto w-8 h-8 p-2 rounded-full flex items-center justify-center; + &:before { + @apply flex justify-center items-center; + } + } + .table-cell-icon--checked { + @apply bg-green-600; + &:before { + content: url('../resources/img/graphic-assets/table-cell--check.svg'); + } + } + .table-cell-icon--crossed { + @apply bg-white border-2 border-neutral-800; + &:before { + content: url('../resources/img/graphic-assets/table-cell--cross.svg'); + } + } +} diff --git a/resources/img/graphic-assets/table-cell--check.svg b/resources/img/graphic-assets/table-cell--check.svg new file mode 100644 index 0000000..3daecbc --- /dev/null +++ b/resources/img/graphic-assets/table-cell--check.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/img/graphic-assets/table-cell--cross.svg b/resources/img/graphic-assets/table-cell--cross.svg new file mode 100644 index 0000000..add5e93 --- /dev/null +++ b/resources/img/graphic-assets/table-cell--cross.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/js/app.js b/resources/js/app.js index d03f4c4..be91ea1 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,3 +1,4 @@ +import editorInit from './editor'; import menuInit from './menus'; import singleConseil from './single-conseil'; @@ -6,4 +7,5 @@ import singleConseil from './single-conseil'; window.addEventListener('DOMContentLoaded', (event) => { menuInit(); singleConseil(); + editorInit(); }); diff --git a/resources/js/editor.js b/resources/js/editor.js new file mode 100644 index 0000000..cde15e2 --- /dev/null +++ b/resources/js/editor.js @@ -0,0 +1,26 @@ +export default function editorInit() { + const tablesCells = document.querySelectorAll('.wp-block-table td'); + function filterCells(element, stringToParse) { + return element.textContent.trim() === stringToParse; + } + + const checkedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((v))')); + const crossedCells = Array.from(tablesCells).filter((element) => filterCells(element, '((x))')); + + checkedCells.forEach((cell) => { + console.log(textTranslationsMainAppJS); + + cell.innerHTML = ``; + }); + crossedCells.forEach((cell) => { + cell.innerHTML = ``; + }); + + // tables.forEach((table) => { + // const tableCells = contains('td', '((v))'); + // console.log(tableRows); + // tableRows.forEach((row) => { + // console.log(row); + // }); + // }); +} diff --git a/resources/js/single-conseil.js b/resources/js/single-conseil.js index 681e23e..a593bb4 100644 --- a/resources/js/single-conseil.js +++ b/resources/js/single-conseil.js @@ -69,7 +69,6 @@ export default function singleConseil() { const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary'); const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock]; - console.log(vocabulaireSummaryBlock); allBlocks.forEach((el) => { io.observe(el); });