diff --git a/css/app.css b/css/app.css index 1cadcf5..dd19554 100644 --- a/css/app.css +++ b/css/app.css @@ -4010,21 +4010,25 @@ article > *:not(.entry-content, .chapter-header-block), } .wp-block-table .table-cell-icon { + position: relative; margin-left: auto; margin-right: auto; display: flex; - height: 2rem; - width: 2rem; + height: auto; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + flex-grow: 0; align-items: center; justify-content: center; border-radius: 9999px; padding: 0.5rem; + aspect-ratio: 1; } -.wp-block-table .table-cell-icon:before { - display: flex; - align-items: center; - justify-content: center; +.wp-block-table .table-cell-icon img { + height: 1rem; + width: 1rem; } .wp-block-table .table-cell-icon--checked { @@ -4032,10 +4036,6 @@ article > *:not(.entry-content, .chapter-header-block), 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; @@ -4044,10 +4044,6 @@ article > *:not(.entry-content, .chapter-header-block), 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; diff --git a/includes/init.php b/includes/init.php index 0709a55..d7f15b5 100644 --- a/includes/init.php +++ b/includes/init.php @@ -64,11 +64,13 @@ function tailpress_enqueue_scripts() // #PASSING TRANSLATIONS wp_register_script('main-app-js', tailpress_asset('js/app.js'), array('gsap', 'jquery'), $theme->get('Version')); - $translations_main_app_js = array( + $main_app_js_dynamic_datas = array( 'yes' => __('Oui', 'homegrade-theme__texte-fonctionnel'), 'no' => __('Non', 'homegrade-theme__texte-fonctionnel'), + 'template_directory_uri' => get_template_directory_uri(), + ); - wp_localize_script('main-app-js', 'textTranslationsMainAppJS', $translations_main_app_js); + wp_localize_script('main-app-js', 'mainAppJsDynamicDatas', $main_app_js_dynamic_datas); wp_enqueue_script('main-app-js'); diff --git a/js/app.js b/js/app.js index 5882a6d..245a299 100644 --- a/js/app.js +++ b/js/app.js @@ -8,11 +8,12 @@ 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 = ``; + cell.innerHTML = `
${mainAppJsDynamicDatas.yes}
`; }); crossedCells.forEach((cell) => { - cell.innerHTML = ``; + cell.innerHTML = `${mainAppJsDynamicDatas.no}`; }); } diff --git a/resources/css/editor-content/gutenberg.css b/resources/css/editor-content/gutenberg.css index 016881f..221a8b0 100644 --- a/resources/css/editor-content/gutenberg.css +++ b/resources/css/editor-content/gutenberg.css @@ -86,21 +86,16 @@ article > *:not(.entry-content, .chapter-header-block), @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; + @apply mx-auto p-2 w-fit h-auto rounded-full flex items-center justify-center relative grow-0; + aspect-ratio: 1; + img { + @apply w-4 h-4; } } .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 index 3daecbc..6fe817f 100644 --- a/resources/img/graphic-assets/table-cell--check.svg +++ b/resources/img/graphic-assets/table-cell--check.svg @@ -1,3 +1,3 @@ - + diff --git a/resources/img/graphic-assets/table-cell--cross.svg b/resources/img/graphic-assets/table-cell--cross.svg index add5e93..dce06b6 100644 --- a/resources/img/graphic-assets/table-cell--cross.svg +++ b/resources/img/graphic-assets/table-cell--cross.svg @@ -1,4 +1,4 @@ - +`; + cell.innerHTML = `
${mainAppJsDynamicDatas.yes}
`; }); crossedCells.forEach((cell) => { - cell.innerHTML = ``; + cell.innerHTML = `${mainAppJsDynamicDatas.no}`; }); // tables.forEach((table) => {