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

refining tooltip and footer accessibility + few css

Browse Source
This commit is contained in:
Antoine M 2023-09-27 17:35:14 +02:00
parent fd09361dc8
commit c0705482c0
21 changed files with 570 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
css/app.css
View File

@ -1136,6 +1136,31 @@ video {
border-radius: 22px; border-radius: 22px;
} }
a:focus,
button:focus {
outline: red solid 1px;
outline-width: 1px;
outline-offset: 8px;
outline-radius: 50px;
/* border-radius: 10px; */
}
.focus-text {
border-radius: 0.125rem;
outline-style: solid;
outline-width: 1px;
outline-offset: 2px;
outline-color: #DF1E1E;
}
p a:focus, ul a:focus, ol a:focus {
border-radius: 0.125rem;
outline-style: solid;
outline-width: 1px;
outline-offset: 2px;
outline-color: #DF1E1E;
}
/* ########### BASE ############ */ /* ########### BASE ############ */
body:not(.wp-admin) { body:not(.wp-admin) {
@ -1150,15 +1175,6 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
a:focus,
button:focus {
outline: red solid 1px;
outline-width: 1px;
outline-offset: 8px;
outline-radius: 50px;
/* border-radius: 10px; */
}
*::marker { *::marker {
display: inline-block; display: inline-block;
color: red; color: red;
@ -2433,9 +2449,6 @@ header#main-header {
} }
.menu-renovateur__navlist > .menu-item { .menu-renovateur__navlist > .menu-item {
display: flex;
align-items: center;
justify-content: center;
font-weight: 700; font-weight: 700;
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity)); color: rgb(0 0 0 / var(--tw-text-opacity));
@ -2526,6 +2539,46 @@ header#main-header {
text-underline-offset: 4px; text-underline-offset: 4px;
} }
.menu-renovateur .menu-item .page_icon {
height: 50px;
width: 50px;
}
.menu-renovateur .menu-item__submenu-title {
margin-bottom: 1rem;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(118 117 117 / var(--tw-border-opacity));
padding-bottom: 1rem;
}
.menu-renovateur .menu-item__submenu-toggle,
.menu-renovateur .menu-item > a {
display: flex;
align-items: center;
justify-content: center;
border-radius: 1.5rem;
padding: 1.5rem;
}
.menu-renovateur .menu-item__submenu-toggle {
text-align: left;
}
.menu-renovateur .menu-item__submenu-close {
position: absolute;
top: 2rem;
right: 2rem;
height: auto;
border-radius: 9999px;
text-align: right;
outline-offset: 4px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 0;
}
.menu-renovateur__navlist-container { .menu-renovateur__navlist-container {
order: 3; order: 3;
width: 100%; width: 100%;
@ -2648,60 +2701,40 @@ header#main-header {
height: fit-content; height: fit-content;
} }
.menu-renovateur .menu-item .page_icon {
height: 50px;
width: 50px;
}
.menu-renovateur .menu-item__submenu-title {
margin-bottom: 1rem;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(118 117 117 / var(--tw-border-opacity));
padding-bottom: 1rem;
}
.menu-renovateur .menu-item__submenu-toggle,
.menu-renovateur .menu-item > a {
border-radius: 1.5rem;
padding: 1.5rem;
}
.menu-renovateur .menu-item__submenu-toggle {
text-align: left;
}
.menu-renovateur .menu-item__submenu-close {
position: absolute;
top: 2rem;
right: 2rem;
height: auto;
border-radius: 9999px;
text-align: right;
outline-offset: 4px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 0;
}
.menu-renovateur--footer { .menu-renovateur--footer {
width: 100%;
padding: 0px;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.menu-renovateur--footer .menu-renovateur__navlist-container {
width: 100%;
}
.menu-renovateur--footer .menu-renovateur__navlist {
position: relative;
display: grid; display: grid;
row-gap: 1rem; row-gap: 1rem;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
.menu-renovateur--footer { .menu-renovateur--footer .menu-renovateur__navlist {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.menu-renovateur--footer { .menu-renovateur--footer .menu-renovateur__navlist {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
} }
} }
.menu-renovateur--footer .menu-renovateur__navlist .menu-item {
justify-content: flex-start;
}
.menu-renovateur--footer li .page_icon { .menu-renovateur--footer li .page_icon {
height: 50px; height: 50px;
width: 50px; width: 50px;
@ -2717,7 +2750,13 @@ header#main-header {
} }
.menu-renovateur--footer li .sub-menu { .menu-renovateur--footer li .sub-menu {
display: none; /* @apply hidden; */
/* @apply absolute top-0 left-0 z-50 w-full h-full bg-white grid grid-cols-2; */
}
.menu-renovateur--footer .menu-item__submenu-toggle,
.menu-renovateur--footer .menu-item > a {
padding: 0.75rem;
} }
/* .primary-menu-container { */ /* .primary-menu-container { */
@ -3139,18 +3178,22 @@ header#main-header {
.entry-content--acoustique-coproprietes .homegrade-blocks-focus-point-bullet, .entry-content--acoustique-coproprietes .homegrade-blocks-focus-point-bullet,
.entry-content--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before, .entry-content--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before,
.entry-content--acoustique-coproprietes .wp-block-button__link, .entry-content--acoustique-coproprietes .wp-block-button__link,
.entry-content--acoustique-coproprietes ul li:before,
body.acoustique-coproprietes .chapter_index__position-indicator, body.acoustique-coproprietes .chapter_index__position-indicator,
body.acoustique-coproprietes .homegrade-blocks-focus-point-bullet, body.acoustique-coproprietes .homegrade-blocks-focus-point-bullet,
body.acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before, body.acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before,
body.acoustique-coproprietes .wp-block-button__link, body.acoustique-coproprietes .wp-block-button__link,
body.acoustique-coproprietes ul li:before,
.post-conseil-page--acoustique-coproprietes .chapter_index__position-indicator, .post-conseil-page--acoustique-coproprietes .chapter_index__position-indicator,
.post-conseil-page--acoustique-coproprietes .homegrade-blocks-focus-point-bullet, .post-conseil-page--acoustique-coproprietes .homegrade-blocks-focus-point-bullet,
.post-conseil-page--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before, .post-conseil-page--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before,
.post-conseil-page--acoustique-coproprietes .wp-block-button__link, .post-conseil-page--acoustique-coproprietes .wp-block-button__link,
.post-conseil-page--acoustique-coproprietes ul li:before,
.post-question-page--acoustique-coproprietes .chapter_index__position-indicator, .post-question-page--acoustique-coproprietes .chapter_index__position-indicator,
.post-question-page--acoustique-coproprietes .homegrade-blocks-focus-point-bullet, .post-question-page--acoustique-coproprietes .homegrade-blocks-focus-point-bullet,
.post-question-page--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before, .post-question-page--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before,
.post-question-page--acoustique-coproprietes .wp-block-button__link { .post-question-page--acoustique-coproprietes .wp-block-button__link,
.post-question-page--acoustique-coproprietes ul li:before {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(36 94 242 / var(--tw-bg-opacity)); background-color: rgb(36 94 242 / var(--tw-bg-opacity));
} }
@ -3557,14 +3600,24 @@ article > *:not(.entry-content, .chapter-header-block),
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.entry-content ul li {
/* @apply my-1 grid gap-2;
grid-template-columns: 10px 1fr; */
position: relative;
padding-left: 1.25rem;
}
.entry-content ul li:before { .entry-content ul li:before {
position: absolute;
left: 0px;
list-style-type: none; list-style-type: none;
content: ''; content: '';
display: inline-block; display: inline-block;
height: 10px; height: 8px;
width: 10px; width: 8px;
border-radius: 50%; border-radius: 50%;
margin-right: 14px; margin-right: 14px;
margin-top: 9px;
} }
.tooltip-word { .tooltip-word {
@ -3575,6 +3628,38 @@ article > *:not(.entry-content, .chapter-header-block),
-webkit-text-decoration-color:; -webkit-text-decoration-color:;
text-decoration-color:; text-decoration-color:;
text-decoration-thickness: 2px !important; text-decoration-thickness: 2px !important;
font-weight: 700;
}
.tooltip-word:focus {
border-radius: 0.125rem;
outline-style: solid;
outline-width: 1px;
outline-offset: 2px;
outline-color: #DF1E1E;
}
.tooltip-popup {
border-radius: 0.75rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding: 1rem;
font-weight: 400;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.tooltip-popup:after {
position: absolute;
z-index: -2;
/* background-color: white; */
}
.brochure-link-format:focus {
border-radius: 0.125rem;
outline-style: solid;
outline-width: 1px;
outline-offset: 2px;
outline-color: #DF1E1E;
} }
/* ########### BLOCKS ############ */ /* ########### BLOCKS ############ */
@ -4120,25 +4205,6 @@ article > *:not(.entry-content, .chapter-header-block),
background-color: rgb(47 1 84 / var(--tw-bg-opacity)); background-color: rgb(47 1 84 / var(--tw-bg-opacity));
} }
.tooltip-word {
font-weight: 700;
}
.tooltip-popup {
border-radius: 0.75rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding: 1rem;
font-weight: 400;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.tooltip-popup:after {
position: absolute;
z-index: -2;
/* background-color: white; */
}
.homegrade-blocks-vocabulaire-summary { .homegrade-blocks-vocabulaire-summary {
border-radius: 1rem; border-radius: 1rem;
background-color: rgb(239, 239, 239, 0.6); background-color: rgb(239, 239, 239, 0.6);

4
css/editor-style.css
View File

@ -127,6 +127,10 @@
flex-grow: 1 flex-grow: 1
} }
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.flex-col { .flex-col {
flex-direction: column flex-direction: column
} }

25
footer.php
View File

@ -37,16 +37,23 @@
<div class="site-footer__navigation-menu"> <div class="site-footer__navigation-menu">
<div class="menu-renovateur--footer menu-renovateur">
<?php
get_template_part('template-components/header/menu-renovateur-footer');
// wp_nav_menu(
// array(
// 'container' => 'false',
// 'theme_location' => 'renovateur',
// 'li_class' => 'menu-navlink',
// 'fallback_cb' => false,
// 'menu_class' => 'menu-renovateur__navlist',
// )
// );
?>
</div>
<?php <?php
wp_nav_menu(
array(
'container' => 'false',
'theme_location' => 'renovateur',
'li_class' => 'menu-navlink',
'fallback_cb' => false,
'menu_class' => 'menu-renovateur--footer',
)
);

76
includes/admin.php
View File

@ -156,7 +156,12 @@ add_filter('manage_conseils_posts_columns', 'add_acf_posts_columns');
add_filter('manage_questions_posts_columns', 'add_acf_posts_columns'); add_filter('manage_questions_posts_columns', 'add_acf_posts_columns');
add_filter('manage_brochures_posts_columns', 'add_acf_posts_columns'); add_filter('manage_brochures_posts_columns', 'add_acf_posts_columns');
// CUSTOMISATION DE LA COLONNE POUR AFFICHER : THEMATIQUE PARENT > THEMATIQUE
/* ----------------------------------------------------------------------
CUSTOMISATION DE LA COLONNE POUR AFFICHER : THEMATIQUE PARENT > THEMATIQUE
------------------------------------------------------------------------*/
function handle_posts_custom_columns($column, $post_id) function handle_posts_custom_columns($column, $post_id)
{ {
if ($column != 'thematiques_taxo') { if ($column != 'thematiques_taxo') {
@ -178,6 +183,69 @@ add_action('manage_questions_posts_custom_column', 'handle_posts_custom_columns'
add_action('manage_brochures_posts_custom_column', 'handle_posts_custom_columns', 10, 2); add_action('manage_brochures_posts_custom_column', 'handle_posts_custom_columns', 10, 2);
/* -------------------------------------------
CREATION DU DROPDOWN SELECT AVEC LES OPTIONS
---------------------------------------------*/
function filter_posts_per_thematique_declare_dropdown()
{
global $pagenow;
$post_type = (isset($_GET['post_type'])) ? $_GET['post_type'] : 'post';
//only add filter to post type you want
if ($post_type == 'questions') {
$all_thematiques = get_terms([
'taxonomy' => 'thematiques',
'hide_empty' => true,
]);
write_log($all_thematiques);
$all_oj_ids = get_posts(array('post_type' => 'oj', 'posts_per_page' => -1, 'orderby' => 'title', 'order' => 'ASC', 'fields' => 'ids'));
$thematiques = get_terms(array('taxonomy' => 'thematiques', 'hide_empty' => true));
?>
<select name="thematiques">
<option value=""><?php _e('Filtrer par Thématique', 'wose45436'); ?></option>
<?php
$current_v = isset($_GET['thematiques']) ? $_GET['thematiques'] : '';
foreach ($all_thematiques as $index => $thematique) {
printf(
'<option value="%s"%s>%s</option>',
$thematique->slug,
$thematique->slug == $current_v ? ' selected="selected"' : '',
$thematique->name
);
}
?>
</select>
<?php
}
}
add_action('restrict_manage_posts', 'filter_posts_per_thematique_declare_dropdown');
/* ------------------------------------------------------
FILTRAGE DES POSTS QUAND LA QUERY DE FILTER EST ENVOYEE
--------------------------------------------------------*/
function filter_post_by_thematiques_query($query)
{
global $pagenow;
$type = 'questions'; // change to custom post name.
if (isset($_GET['post_type'])) {
$type = $_GET['post_type'];
}
if (($type === 'questions') && is_admin() && $pagenow == 'edit.php' && isset($_GET['thematiques']) && $_GET['thematiques'] != '') {
$query->query_vars['meta_key'] = 'thematiques_taxo'; // change to meta key created by acf.
$query->query_vars['meta_value'] = $_GET['thematiques'];
}
}
// add_filter('parse_query', 'filter_post_by_thematiques_query');
/* ---------------------------------------------------------------------- /* ----------------------------------------------------------------------
@ -190,9 +258,9 @@ function wpdocs_admin_classes($classes)
// } // }
global $pagenow; global $pagenow;
global $post; global $post;
echo '<pre>'; // echo '<pre>';
write_log($post); // write_log($post);
echo '</pre>'; // echo '</pre>';
$thematique = get_the_terms(get_the_ID(), 'thematiques')[0] ?? null; $thematique = get_the_terms(get_the_ID(), 'thematiques')[0] ?? null;
$thematiqueParent = getParentThematique($thematique); $thematiqueParent = getParentThematique($thematique);
$thematiqueColorSlug = getThematiqueFamilySlug($thematiqueParent->slug) ?? null; $thematiqueColorSlug = getThematiqueFamilySlug($thematiqueParent->slug) ?? null;

4
includes/navwalker.php
View File

@ -18,12 +18,12 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
} }
// #### MENU RENOVATEUR — N'est pas utilisé pour le menu principal // #### MENU RENOVATEUR — FOOTER — N'est pas utilisé pour le menu principal
if ($args->theme_location === "renovateur") { if ($args->theme_location === "renovateur") {
$page_icon = get_field('page_icon', $item->object_id); $page_icon = get_field('page_icon', $item->object_id);
if (in_array('menu-item-has-children', $item->classes, true)) { if (in_array('menu-item-has-children', $item->classes, true)) {
$output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>'; $output = '<button type="button" class="footer__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
} }
// #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS // #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS

40
js/app.js
View File

@ -1,16 +1,19 @@
(() => { (() => {
// resources/js/header.js // resources/js/menus.js
function menuInit() { function menuInit() {
const header = document.querySelector("#main-header"); const header = document.querySelector("#main-header");
const footer = document.querySelector("footer");
if (!header) if (!header)
return; return;
const searchModule = header.querySelector(".search-module"); const searchModule = header.querySelector(".search-module");
const searchModuleToggle = header.querySelector("#search-module-toggle"); const searchModuleToggle = header.querySelector("#search-module-toggle");
const mobileMenuToggle = header.querySelector("#mobile-menu-toggle"); const mobileMenuToggle = header.querySelector("#mobile-menu-toggle");
const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle"); const headerSubmenuToggles = header.querySelectorAll(".menu-item__submenu-toggle");
const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close"); const headerSubmenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close");
const footerSubmenuToggles = footer.querySelectorAll(".menu-item__submenu-toggle");
const footerSubmenuCloseBtns = footer.querySelectorAll(".menu-item__submenu-close");
function isSubmenuOpen() { function isSubmenuOpen() {
return header.querySelector(".sub-menu--open") !== null; return header.querySelector(".sub-menu--open") !== null || footer.querySelector(".sub-menu--open") !== null;
} }
function openSubmenu(buttonToggle) { function openSubmenu(buttonToggle) {
let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true"; let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
@ -19,8 +22,14 @@
buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--closed"); buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--closed");
} }
function closeSubmenus() { function closeSubmenus() {
const openSubmenus = header.querySelectorAll(".sub-menu--open"); const headerOpenSubmenus = header.querySelectorAll(".sub-menu--open");
openSubmenus.forEach((submenu) => { const footerOpenSubmenus = footer.querySelectorAll(".sub-menu--open");
headerOpenSubmenus.forEach((submenu) => {
submenu.classList.remove("sub-menu--open");
submenu.classList.add("sub-menu--closed");
submenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
});
footerOpenSubmenus.forEach((submenu) => {
submenu.classList.remove("sub-menu--open"); submenu.classList.remove("sub-menu--open");
submenu.classList.add("sub-menu--closed"); submenu.classList.add("sub-menu--closed");
submenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false"); submenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
@ -41,7 +50,7 @@
currentOpenedSubmenu.classList.add("sub-menu--closed"); currentOpenedSubmenu.classList.add("sub-menu--closed");
currentOpenedSubmenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false"); currentOpenedSubmenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
} }
submenuToggles.forEach((button) => { headerSubmenuToggles.forEach((button) => {
button.addEventListener("click", () => { button.addEventListener("click", () => {
if (isSearchOpen() === true) { if (isSearchOpen() === true) {
closeSearch(); closeSearch();
@ -49,7 +58,18 @@
handleSubmenuToggle(button); handleSubmenuToggle(button);
}); });
}); });
submenuCloseBtns.forEach((button) => { headerSubmenuCloseBtns.forEach((button) => {
button.addEventListener("click", () => closeCurrentSubmenu(button));
});
footerSubmenuToggles.forEach((button) => {
button.addEventListener("click", () => {
if (isSearchOpen() === true) {
closeSearch();
}
handleSubmenuToggle(button);
});
});
footerSubmenuCloseBtns.forEach((button) => {
button.addEventListener("click", () => closeCurrentSubmenu(button)); button.addEventListener("click", () => closeCurrentSubmenu(button));
}); });
function isSearchOpen() { function isSearchOpen() {
@ -213,10 +233,10 @@
e.preventDefault(); e.preventDefault();
let target = e.target.getAttribute("href"); let target = e.target.getAttribute("href");
let targetBlock = document.querySelector(target); let targetBlock = document.querySelector(target);
console.log(targetBlock);
targetBlock.scrollIntoView({ targetBlock.scrollIntoView({
behavior: "smooth" behavior: "smooth"
}); });
targetBlock.focus();
}); });
}); });
} }
@ -227,7 +247,7 @@
} }
// resources/js/app.js // resources/js/app.js
window.addEventListener("load", function() { window.addEventListener("DOMContentLoaded", (event) => {
menuInit(); menuInit();
singleConseil(); singleConseil();
}); });

4
resources/css/app.css
View File

@ -6,6 +6,7 @@
@import './utilities/shadows.css'; @import './utilities/shadows.css';
@import './utilities/animation.css'; @import './utilities/animation.css';
@import './utilities/rounding-radius.css'; @import './utilities/rounding-radius.css';
@import './utilities/focus.css';
/* ########### BASE ############ */ /* ########### BASE ############ */
@import './base/typography.css'; @import './base/typography.css';
@ -40,6 +41,8 @@
@import './editor-content/color-taxonomy-scheme.css'; @import './editor-content/color-taxonomy-scheme.css';
@import './editor-content/gutenberg.css'; @import './editor-content/gutenberg.css';
@import './editor-content/format-types.css'; @import './editor-content/format-types.css';
@import './editor-content/text-formats/tooltip.css';
@import './editor-content/text-formats/brochure.css';
/* ########### BLOCKS ############ */ /* ########### BLOCKS ############ */
@ -56,7 +59,6 @@
@import './blocks/questions-container-block.css'; @import './blocks/questions-container-block.css';
@import './blocks/points-cles.css'; @import './blocks/points-cles.css';
@import './blocks/highlight.css'; @import './blocks/highlight.css';
@import './blocks/tooltip.css';
@import './blocks/vocabulaire-summary.css'; @import './blocks/vocabulaire-summary.css';
@import './blocks/aside.css'; @import './blocks/aside.css';
@import './blocks/focused-schema.css'; @import './blocks/focused-schema.css';

7
resources/css/base/generalites.css
View File

@ -1,13 +1,6 @@
body { body {
@apply bg-white antialiased; @apply bg-white antialiased;
} }
a:focus,
button:focus {
outline: red solid 1px;
@apply outline-1 outline-offset-8;
outline-radius: 50px;
/* border-radius: 10px; */
}
*::marker { *::marker {
display: inline-block; display: inline-block;

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

@ -20,7 +20,8 @@ body.acoustique-coproprietes,
.chapter_index__position-indicator, .chapter_index__position-indicator,
.homegrade-blocks-focus-point-bullet, .homegrade-blocks-focus-point-bullet,
.homegrade-blocks-focused-schema ol li:before, .homegrade-blocks-focused-schema ol li:before,
.wp-block-button__link { .wp-block-button__link,
ul li:before {
@apply bg-acoustique-coproprietes; @apply bg-acoustique-coproprietes;
} }
.tooltip-word { .tooltip-word {

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

@ -33,13 +33,19 @@ article > *:not(.entry-content, .chapter-header-block),
@apply mb-8; @apply mb-8;
} }
ul li {
/* @apply my-1 grid gap-2;
grid-template-columns: 10px 1fr; */
@apply relative pl-5;
}
ul li:before { ul li:before {
@apply list-none; @apply list-none absolute left-0;
content: ''; content: '';
display: inline-block; display: inline-block;
height: 10px; height: 8px;
width: 10px; width: 8px;
border-radius: 50%; border-radius: 50%;
margin-right: 14px; margin-right: 14px;
margin-top: 9px;
} }
} }

3
resources/css/editor-content/text-formats/brochure.css Normal file
View File

@ -0,0 +1,3 @@
.brochure-link-format:focus {
@apply focus-text;
}

4
resources/css/blocks/tooltip.css → resources/css/editor-content/text-formats/tooltip.css
View File

@ -1,9 +1,13 @@
.tooltip-word { .tooltip-word {
@apply font-bold; @apply font-bold;
} }
.tooltip-word:focus {
@apply focus-text;
}
.tooltip-popup { .tooltip-popup {
@apply bg-white rounded-xl shadowed p-4 font-normal; @apply bg-white rounded-xl shadowed p-4 font-normal;
} }
.tooltip-popup:after { .tooltip-popup:after {
@apply absolute; @apply absolute;
z-index: -2; z-index: -2;

71
resources/css/layout/menu-renovateur.css
View File

@ -39,10 +39,8 @@
} }
@apply text-black @apply text-black
flex
lg:relative lg:relative
justify-center
items-center
font-bold; font-bold;
} }
/* Generic Submenu Item */ /* Generic Submenu Item */
@ -104,6 +102,30 @@
} }
} }
} }
.menu-item {
.page_icon {
@apply w-[50px] h-[50px];
}
&__submenu-title {
@apply pb-4 mb-4 border-b border-gray-dark;
}
&__submenu-toggle,
> a {
@apply p-6 rounded-3xl
flex
justify-center
items-center;
}
&__submenu-toggle {
@apply text-left;
}
&__submenu-close {
@apply absolute text-right top-8 right-8 w-fit h-auto rounded-full outline-offset-4;
width: fit-content;
padding: 0;
}
}
&__navlist-container { &__navlist-container {
@apply /* bg-white */ @apply /* bg-white */
order-3 order-3
@ -179,33 +201,19 @@
&__search-module-toggle { &__search-module-toggle {
@apply h-fit; @apply h-fit;
} }
.menu-item {
.page_icon {
@apply w-[50px] h-[50px];
}
&__submenu-title {
@apply pb-4 mb-4 border-b border-gray-dark;
}
&__submenu-toggle,
> a {
@apply p-6 rounded-3xl;
}
&__submenu-toggle {
@apply text-left;
}
&__submenu-close {
@apply absolute text-right top-8 right-8 w-fit h-auto rounded-full outline-offset-4;
width: fit-content;
padding: 0;
}
}
} }
.menu-renovateur--footer { .menu-renovateur--footer {
@apply grid sm:grid-cols-2 lg:grid-cols-4 gap-y-4; @apply p-0 shadow-none w-full;
.menu-renovateur__navlist-container {
@apply w-full;
}
.menu-renovateur__navlist {
@apply grid sm:grid-cols-2 lg:grid-cols-4 gap-y-4 relative;
.menu-item {
@apply justify-start;
}
}
li { li {
.page_icon { .page_icon {
@apply w-[50px] h-[50px]; @apply w-[50px] h-[50px];
@ -217,7 +225,14 @@
font-bold; font-bold;
.sub-menu { .sub-menu {
@apply hidden; /* @apply hidden; */
/* @apply absolute top-0 left-0 z-50 w-full h-full bg-white grid grid-cols-2; */
}
}
.menu-item {
&__submenu-toggle,
> a {
@apply p-3;
} }
} }
} }

19
resources/css/utilities/focus.css Normal file
View File

@ -0,0 +1,19 @@
a:focus,
button:focus {
outline: red solid 1px;
@apply outline-1 outline-offset-8;
outline-radius: 50px;
/* border-radius: 10px; */
}
.focus-text {
@apply outline outline-offset-2 outline-1 outline-secondary rounded-sm;
}
p,
ul,
ol {
a:focus {
@apply focus-text;
}
}

6
resources/js/app.js
View File

@ -1,7 +1,9 @@
import menuInit from './header'; import menuInit from './menus';
import singleConseil from './single-conseil'; import singleConseil from './single-conseil';
window.addEventListener('load', function () { // window.addEventListener('load', function () {});
window.addEventListener('DOMContentLoaded', (event) => {
menuInit(); menuInit();
singleConseil(); singleConseil();
}); });

46
resources/js/header.js → resources/js/menus.js
View File

@ -1,5 +1,6 @@
export default function menuInit() { export default function menuInit() {
const header = document.querySelector('#main-header'); const header = document.querySelector('#main-header');
const footer = document.querySelector('footer');
if (!header) return; if (!header) return;
// Search module // Search module
@ -13,12 +14,17 @@ export default function menuInit() {
HANDLE SUBMENUS HANDLE SUBMENUS
-----------------------------------------------------------*/ -----------------------------------------------------------*/
// SubmenusToggles // SubmenusToggles
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle'); const headerSubmenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close'); const headerSubmenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close');
const footerSubmenuToggles = footer.querySelectorAll('.menu-item__submenu-toggle');
const footerSubmenuCloseBtns = footer.querySelectorAll('.menu-item__submenu-close');
function isSubmenuOpen() { function isSubmenuOpen() {
// console.log(header.querySelector('.sub-menu--open') !== null); // console.log(header.querySelector('.sub-menu--open') !== null);
return header.querySelector('.sub-menu--open') !== null; return (
header.querySelector('.sub-menu--open') !== null ||
footer.querySelector('.sub-menu--open') !== null
);
} }
function openSubmenu(buttonToggle) { function openSubmenu(buttonToggle) {
@ -28,8 +34,16 @@ export default function menuInit() {
buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--closed'); buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--closed');
} }
function closeSubmenus() { function closeSubmenus() {
const openSubmenus = header.querySelectorAll('.sub-menu--open'); const headerOpenSubmenus = header.querySelectorAll('.sub-menu--open');
openSubmenus.forEach((submenu) => { const footerOpenSubmenus = footer.querySelectorAll('.sub-menu--open');
headerOpenSubmenus.forEach((submenu) => {
submenu.classList.remove('sub-menu--open');
submenu.classList.add('sub-menu--closed');
submenu.parentElement
.querySelector('.menu-item__submenu-toggle')
.setAttribute('aria-expanded', 'false');
});
footerOpenSubmenus.forEach((submenu) => {
submenu.classList.remove('sub-menu--open'); submenu.classList.remove('sub-menu--open');
submenu.classList.add('sub-menu--closed'); submenu.classList.add('sub-menu--closed');
submenu.parentElement submenu.parentElement
@ -60,8 +74,8 @@ export default function menuInit() {
.querySelector('.menu-item__submenu-toggle') .querySelector('.menu-item__submenu-toggle')
.setAttribute('aria-expanded', 'false'); .setAttribute('aria-expanded', 'false');
} }
// SUBMENU TOGGGLES open/close // ###HEADER — SUBMENU TOGGGLES open/close
submenuToggles.forEach((button) => { headerSubmenuToggles.forEach((button) => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
if (isSearchOpen() === true) { if (isSearchOpen() === true) {
closeSearch(); closeSearch();
@ -72,7 +86,23 @@ export default function menuInit() {
}); });
}); });
submenuCloseBtns.forEach((button) => { headerSubmenuCloseBtns.forEach((button) => {
button.addEventListener('click', () => closeCurrentSubmenu(button));
});
// ###FOOTER — SUBMENU TOGGGLES open/close
footerSubmenuToggles.forEach((button) => {
button.addEventListener('click', () => {
if (isSearchOpen() === true) {
closeSearch();
}
handleSubmenuToggle(button);
// closeSearch();
});
});
footerSubmenuCloseBtns.forEach((button) => {
button.addEventListener('click', () => closeCurrentSubmenu(button)); button.addEventListener('click', () => closeCurrentSubmenu(button));
}); });

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

@ -10,10 +10,11 @@ export default function singleConseil() {
e.preventDefault(); e.preventDefault();
let target = e.target.getAttribute('href'); let target = e.target.getAttribute('href');
let targetBlock = document.querySelector(target); let targetBlock = document.querySelector(target);
console.log(targetBlock);
targetBlock.scrollIntoView({ targetBlock.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
}); });
targetBlock.focus();
}); });
}); });
} }

28
single-conseils.php
View File

@ -2,13 +2,26 @@
get_header(); get_header();
function build_chapter_index($blocks) function build_chapter_index($blocks)
{ {
$chapterIndex = []; $chapterBlockIndex = [];
foreach ($blocks as $key => $block) { foreach ($blocks as $key => $block) {
if ($block['blockName'] == 'homegrade-content-blocks/questions-container') { if ($block['blockName'] == 'homegrade-content-blocks/questions-container') {
array_push($chapterIndex, $block['attrs']['relatedPostId']); // array_push($chapterBlockIndex, $block['attrs']['relatedPostId']);
array_push($chapterBlockIndex, [
'block-type' => $block['blockName'],
'anchor' => '#questions-container-' . $block['attrs']['relatedPostId'],
'title' => get_the_title($block['attrs']['relatedPostId']),
]);
}
if ($block['blockName'] == 'homegrade-content-blocks/vocabulaire-summary') {
array_push($chapterBlockIndex, [
'block-type' => $block['blockName'],
'anchor' => "#vocabulaire-summary",
'title' => "Vocabulaire" . " " . get_the_terms(get_the_ID(), "thematiques")[0]->name,
]);
} }
} }
return $chapterIndex; write_log($chapterBlockIndex);
return $chapterBlockIndex;
} }
?> ?>
@ -23,11 +36,11 @@ function build_chapter_index($blocks)
<div class="post-conseil-page-container <?php echo $thematiqueColorSlug ? "post-conseil-page--" . $thematiqueColorSlug : "" ?>""> <div class="post-conseil-page-container <?php echo $thematiqueColorSlug ? "post-conseil-page--" . $thematiqueColorSlug : "" ?>"">
<?php <?php
$blocks = parse_blocks($post->post_content); $blocks = parse_blocks($post->post_content);
$chapterIndex = build_chapter_index($blocks); $chapterBlockIndex = build_chapter_index($blocks);
?> ?>
<?php get_template_part('template-components/post-conseils/chapter-header'); ?> <?php get_template_part('template-components/post-conseils/chapter-header'); ?>
<div class=" conseils_wrapper"> <div class=" conseils_wrapper">
<?php if ($chapterIndex) : ?> <?php if ($chapterBlockIndex) : ?>
<aside class="chapter_index"> <aside class="chapter_index">
<div class="chapter_index__titling"> <div class="chapter_index__titling">
<div class="icon"></div> <div class="icon"></div>
@ -35,9 +48,8 @@ function build_chapter_index($blocks)
</div> </div>
<ul class="chapter_index__list"> <ul class="chapter_index__list">
<div class="chapter_index__position-indicator"></div> <div class="chapter_index__position-indicator"></div>
<?php foreach ($chapterIndex as $chapterRelatedPostID) : ?> <?php foreach ($chapterBlockIndex as $chapter) : ?>
<?php $chapterTitle = get_the_title($chapterRelatedPostID); ?> <li class="chapter_index__link"><a href="<?php echo $chapter['anchor'] ?>"><?php echo $chapter['title'] ?></a></li>
<li class="chapter_index__link"><a href="#questions-container-<?php echo $chapterRelatedPostID ?>"><?php echo $chapterTitle ?></a></li>
<?php endforeach; ?> <?php endforeach; ?>
</ul> </ul>
</aside> </aside>

1
template-archive-conseils.php
View File

@ -57,7 +57,6 @@ $thematiquesTerms = get_terms(array(
</section> </section>
<section class="homegrade-help card-large-content-container"> <section class="homegrade-help card-large-content-container">
<div class="card-large-content card-large-content--has-illustration"> <div class="card-large-content card-large-content--has-illustration">

143
template-components/header/menu-renovateur-footer.php Normal file
View File

@ -0,0 +1,143 @@
<?php
$menu_name = 'renovateur';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
$logoID = get_theme_mod('custom_logo');
$logoSRC = wp_get_attachment_image_src($logoID, 'full');
?>
<div class="menu-renovateur menu-renovateur--footer">
<div id="menu-renovateur-navlist-container" class="menu-renovateur__navlist-container" closed>
<ul id="menu-menu-renovateur" class="menu-renovateur__navlist mobile-navlist">
<?php
$count = 0;
$submenu = false;
foreach ($menuitems as $key => $item) :
// write_log("item");
// write_log($item);
$link = $item->url;
$title = $item->title;
// $pageIcon = get_field('page_icon', $item->ID);
// echo '<pre>';
// print_r($item);
// print_r($pageIcon);
// echo '</pre>';
// item does not have a parent so menu_item_parent equals 0 (false)
?>
<?php
/* --------------
IF NOT A SUBMENU
----------------*/
if (!$item->menu_item_parent) : ?>
<?php
$parent_id = $item->ID;
$page_icon = get_field('page_icon', $item->object_id) ?? null;
?>
<?php
/* --------------
IF HAS A SUBMENU
----------------*/
?>
<?php if (isset($menuitems[$key + 1]->menu_item_parent) && $menuitems[$key + 1]->menu_item_parent == $item->ID) : ?>
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item menu-item-has-children">
<button type="button" class="menu-item__submenu-toggle" aria-expanded="false">
<?php if ($page_icon) : ?>
<img class="page_icon" src="<?php echo $page_icon['url'] ?>" />
<?php endif; ?>
<?php echo $title; ?>
</button>
<!-- HAS NO SUBMENU -->
<?php else : ?>
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item ">
<a href=" <?php echo $link; ?>" class="title">
<?php if ($page_icon) : ?>
<img class="page_icon" src=" <?php echo $page_icon['url'] ?>" />
<?php endif; ?>
<?php echo $title; ?>
</a>
<?php endif; ?>
<?php endif; ?>
<?php
/*-------------------
IF IS A SUBMENU
------------------*/
if (isset($parent_id) && $parent_id == $item->menu_item_parent) : ?>
<?php if (!$submenu) : $submenu = true; ?>
<div class="sub-menu sub-menu--closed" id="submenu-<?php echo $item->menu_item_parent ?>">
<button class="menu-item__submenu-close" id="submenu-toggle-<?php echo $item->menu_item_parent ?>" aria-label="<?php echo __("Fermer le sous-menu", "homegrade-theme__texte-fonctionnel") ?>">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon.svg' ?>" alt="">
</button>
<?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */
if ($item->menu_item_parent === "168") : ?>
<h5 class="menu-item__submenu-title"><?php echo __('Découvrez nos conseils par thématique', 'homegrade-theme__texte-fonctionnel') ?></h5>
<?php endif; ?>
<?php /* AIDES FINANCIERES SUBMENU TITLE */
if ($item->menu_item_parent === "169") : ?>
<h5 class="menu-item__submenu-title"><?php echo __('Quelles sont les aides financières disponibles pour votre logement ?', 'homegrade-theme__texte-fonctionnel') ?></h5>
<?php endif; ?>
<ul class="sub-menu__navlist">
<?php endif; ?>
<li class="submenu-item sub-menu__navlist__item">
<?php
// #### IF IS TAXONOMY SUB-ITEM
if ($item->type === "taxonomy") :
$term = get_term_by('id', $item->object_id, 'thematiques');
$cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id);
?>
<a href="<?php echo get_term_link($term) ?>">
<img class="sub-menu__navlist__thematique-icon" src="<?php echo $cover['icon']['url'] ?>" alt="">
<div class="details">
<h6><?php echo $title; ?></h6>
<p class="sub-menu__navlist__description"><?php echo $term->description ?></p>
</div>
</a>
<?php else : ?>
<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
<?php endif; ?>
</li>
<?php if ($menuitems[$count + 1]->menu_item_parent != $parent_id && $submenu) : ?>
</ul>
</div>
<?php $submenu = false;
endif; ?>
<?php endif; ?>
<?php if (isset($parent_id) && isset($menuitems[$count + 1]->menu_item_parent) && $menuitems[$count + 1]->menu_item_parent != $parent_id) : ?>
</li>
<?php $submenu = false;
endif; ?>
<?php $count++;
endforeach; ?>
</ul>
</div>
</div>

23
template-components/header/menu-renovateur.php
View File

@ -5,10 +5,6 @@ $menu = wp_get_nav_menu_object($locations[$menu_name]);
$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC')); $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
$logoID = get_theme_mod('custom_logo'); $logoID = get_theme_mod('custom_logo');
$logoSRC = wp_get_attachment_image_src($logoID, 'full'); $logoSRC = wp_get_attachment_image_src($logoID, 'full');
// echo '<pre>';
// print_r($image);
// echo '</pre>';
?> ?>
@ -56,12 +52,22 @@ $logoSRC = wp_get_attachment_image_src($logoID, 'full');
IF NOT A SUBMENU IF NOT A SUBMENU
-----------------------------------------------------------*/ -----------------------------------------------------------*/
if (!$item->menu_item_parent) : ?> if (!$item->menu_item_parent) : ?>
<?php $parent_id = $item->ID; ?> <?php
$parent_id = $item->ID;
$page_icon = get_field('page_icon', $item->object_id) ?? null;
?>
<!-- HAS SUBMENU --> <?php
/* --------------
IF HAS A SUBMENU
----------------*/
?>
<?php if (isset($menuitems[$key + 1]->menu_item_parent) && $menuitems[$key + 1]->menu_item_parent == $item->ID) : ?> <?php if (isset($menuitems[$key + 1]->menu_item_parent) && $menuitems[$key + 1]->menu_item_parent == $item->ID) : ?>
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item menu-item-has-children"> <li id="menu-item-<?php echo $item->ID ?>" class="menu-item menu-item-has-children">
<button type="button" class="menu-item__submenu-toggle" aria-expanded="false"> <button type="button" class="menu-item__submenu-toggle" aria-expanded="false">
<?php if ($page_icon) : ?>
<img class="page_icon" src="<?php echo $page_icon['url'] ?>" />
<?php endif; ?>
<?php echo $title; ?> <?php echo $title; ?>
</button> </button>
@ -70,6 +76,9 @@ $logoSRC = wp_get_attachment_image_src($logoID, 'full');
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item "> <li id="menu-item-<?php echo $item->ID ?>" class="menu-item ">
<a href=" <?php echo $link; ?>" class="title"> <a href=" <?php echo $link; ?>" class="title">
<?php if ($page_icon) : ?>
<img class="page_icon" src=" <?php echo $page_icon['url'] ?>" />
<?php endif; ?>
<?php echo $title; ?> <?php echo $title; ?>
</a> </a>
<?php endif; ?> <?php endif; ?>
@ -85,7 +94,7 @@ $logoSRC = wp_get_attachment_image_src($logoID, 'full');
<?php if (!$submenu) : $submenu = true; ?> <?php if (!$submenu) : $submenu = true; ?>
<div class="sub-menu sub-menu--closed" id="submenu-<?php echo $item->menu_item_parent ?>"> <div class="sub-menu sub-menu--closed" id="submenu-<?php echo $item->menu_item_parent ?>">
<button class="menu-item__submenu-close" id="submenu-toggle-<?php echo $item->menu_item_parent ?>" aria-label="<?php echo __("Fermer le sous-menu", "homegrade-theme__texte-fonctionnel") ?>" aria-expanded="true"> <button class="menu-item__submenu-close" id="submenu-toggle-<?php echo $item->menu_item_parent ?>" aria-label="<?php echo __("Fermer le sous-menu", "homegrade-theme__texte-fonctionnel") ?>">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon.svg' ?>" alt=""> <img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon.svg' ?>" alt="">
</button> </button>
<?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */ <?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */