refining bug on content css property for arrays

This commit is contained in:
Antoine M 2023-10-02 16:02:15 +02:00
parent 4ff6398e32
commit 1d643420e8
7 changed files with 28 additions and 35 deletions

View File

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

View File

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

View File

@ -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 = `<span class="table-cell-icon table-cell-icon--checked" aria-label="${textTranslationsMainAppJS.yes}"></span>`;
cell.innerHTML = `<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
alt="${mainAppJsDynamicDatas.yes}"/></div>`;
});
crossedCells.forEach((cell) => {
cell.innerHTML = `<span class="table-cell-icon table-cell-icon--crossed " aria-label="${textTranslationsMainAppJS.no}"></span>`;
cell.innerHTML = `<img class="table-cell-icon table-cell-icon--crossed" src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
alt="${mainAppJsDynamicDatas.no}"/>`;
});
}

View File

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

View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.111" height="10.886" viewBox="0 0 15.111 10.886">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="15.111" height="10.886" viewBox="0 0 15.111 10.886">
<path id="Tracé_3608" data-name="Tracé 3608" d="M-4090.82,6199.981l3.81,3.811,8.472-8.473" transform="translate(4092.234 -6193.905)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>

Before

Width:  |  Height:  |  Size: 336 B

After

Width:  |  Height:  |  Size: 355 B

View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.673" height="11.647" viewBox="0 0 11.673 11.647">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="11.673" height="11.647" viewBox="0 0 11.673 11.647">
<g id="Groupe_5848" data-name="Groupe 5848" transform="translate(-960.782 -6194.834)">
<path id="Tracé_3611" data-name="Tracé 3611" d="M-3940.772,6207.214l8.845-8.819" transform="translate(4902.969 -2.146)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
<path id="Tracé_3612" data-name="Tracé 3612" d="M-3932.928,6207.214l-7.845-8.819" transform="translate(4902.969 -2.146)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>

Before

Width:  |  Height:  |  Size: 592 B

After

Width:  |  Height:  |  Size: 611 B

View File

@ -3,17 +3,16 @@ export default function editorInit() {
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 = `<span class="table-cell-icon table-cell-icon--checked" aria-label="${textTranslationsMainAppJS.yes}"></span>`;
cell.innerHTML = `<div class="table-cell-icon table-cell-icon--checked"><img src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--check.svg"
alt="${mainAppJsDynamicDatas.yes}"/></div>`;
});
crossedCells.forEach((cell) => {
cell.innerHTML = `<span class="table-cell-icon table-cell-icon--crossed " aria-label="${textTranslationsMainAppJS.no}"></span>`;
cell.innerHTML = `<img class="table-cell-icon table-cell-icon--crossed" src="${mainAppJsDynamicDatas.template_directory_uri}/resources/img/graphic-assets/table-cell--cross.svg"
alt="${mainAppJsDynamicDatas.no}"/>`;
});
// tables.forEach((table) => {