refining some more menu stuff

This commit is contained in:
Antoine M 2023-07-12 14:33:33 +02:00
parent 55efd70f34
commit c048ef2c22
17 changed files with 280 additions and 77 deletions

View File

@ -715,11 +715,6 @@ video {
background-color: rgb(47 1 84 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgb(223 30 30 / var(--tw-bg-opacity));
@ -1141,13 +1136,20 @@ body:not(.wp-admin) {
font-weight: 400;
}
body {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-webkit-font-smoothing: antialiased;
-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;
/* border-radius: 10px; */
}
.filter-acoustique-coproprietes {
@ -1826,6 +1828,38 @@ header#main-header {
}
}
.skiplinks {
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity));
padding-left: 2rem;
}
.skiplinks__link {
transition: margin 0.25s ease-in-out;
display: block;
max-height: 0px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
overflow: hidden;
border-radius: 0.375rem;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity));
padding-left: 1rem;
padding-right: 1rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.skiplinks__link:focus {
margin-top: 1rem;
margin-bottom: 1rem;
max-height: 3rem;
border-width: 1px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.sub-menu {
z-index: 10;
}
@ -1867,18 +1901,30 @@ header#main-header {
}
.site-footer__infos-contact {
grid-column: span 1 / span 1;
grid-column: span 4 / span 4;
display: grid;
gap: 1.5rem;
}
@media (min-width: 960px) {
.site-footer__infos-contact {
grid-column: span 1 / span 1;
}
}
.site-footer__infos-contact .external-link {
margin-top: 0.25rem;
padding-top: 0.5rem;
}
.site-footer__navigation-menu {
grid-column: span 3 / span 3;
grid-column: span 4 / span 4;
}
@media (min-width: 960px) {
.site-footer__navigation-menu {
grid-column: span 3 / span 3;
}
}
.site-footer__navigation-menu .footer-menu-renovateur {
@ -1908,15 +1954,28 @@ header#main-header {
}
.site-footer__partenaires {
grid-column: span 2 / span 2;
grid-column: span 4 / span 4;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 3rem;
}
@media (min-width: 782px) {
.site-footer__partenaires {
grid-column: span 2 / span 2;
}
}
.site-footer__metiers-patrimoine {
grid-column: span 2 / span 2;
grid-column: span 4 / span 4;
}
@media (min-width: 782px) {
.site-footer__metiers-patrimoine {
grid-column: span 2 / span 2;
}
}
article > *:not(.entry-content),
@ -1978,13 +2037,27 @@ article > *:not(.entry-content),
justify-content: space-between;
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 4rem;
padding-right: 4rem;
padding-left: 1rem;
padding-right: 1rem;
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 600px) {
.menu-renovateur {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 782px) {
.menu-renovateur {
padding-left: 4rem;
padding-right: 4rem;
}
}
.menu-renovateur .website_logo {
order: 1;
margin-right: 3rem;
@ -2004,8 +2077,6 @@ article > *:not(.entry-content),
.menu-renovateur__navlist {
position: relative;
justify-content: center;
--tw-bg-opacity: 1;
background-color: rgb(240 171 252 / var(--tw-bg-opacity));
}
@media (min-width: 960px) {
@ -2278,7 +2349,19 @@ article > *:not(.entry-content),
.menu-renovateur--footer {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 1rem;
}
@media (min-width: 600px) {
.menu-renovateur--footer {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 960px) {
.menu-renovateur--footer {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.menu-renovateur--footer li .page_icon {
@ -2389,7 +2472,7 @@ article > *:not(.entry-content),
display: block;
}
.menu-homegrade li .sub-menu {
.menu-homegrade .sub-menu {
position: static;
margin-left: auto;
margin-right: auto;
@ -2399,34 +2482,38 @@ article > *:not(.entry-content),
}
@media (min-width: 960px) {
.menu-homegrade li .sub-menu {
.menu-homegrade .sub-menu {
position: absolute;
margin-left: 0px;
margin-right: 0px;
}
}
.menu-homegrade li .sub-menu {
.menu-homegrade .sub-menu {
z-index: 999;
display: none;
}
/* &.sub-menu--open {
display: block;
} */
.menu-homegrade .sub-menu--closed {
display: none;
}
.menu-homegrade li .sub-menu li {
.menu-homegrade .sub-menu--open {
display: block;
}
.menu-homegrade .sub-menu li {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
@media (min-width: 960px) {
.menu-homegrade li .sub-menu li {
.menu-homegrade .sub-menu li {
text-align: left;
}
}
.menu-homegrade li .sub-menu > a::after {
.menu-homegrade .sub-menu > a::after {
transform: translateY(-2px) rotate(-90deg);
content: '';
display: inline-block;
@ -2619,10 +2706,21 @@ article > *:not(.entry-content),
.menu-homegrade--footer {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 2rem;
}
@media (min-width: 600px) {
.menu-homegrade--footer {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 782px) {
.menu-homegrade--footer {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.menu-homegrade--footer li.menu-item a:hover {
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity));
@ -2711,9 +2809,19 @@ article > *:not(.entry-content),
.home-header__title {
padding-bottom: 1.5rem;
padding-top: 4rem;
font-size: 2.25rem;
line-height: 2.5rem;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 500;
}
@media (min-width: 782px) {
.home-header__title {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
.home-header__title {
line-height: 1.2;
}
@ -2811,7 +2919,7 @@ article > *:not(.entry-content),
margin-right: auto;
display: grid;
max-width: 1440px;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 2rem;
padding-left: 2rem;
padding-right: 2rem;
@ -2819,6 +2927,18 @@ article > *:not(.entry-content),
padding-bottom: 4rem;
}
@media (min-width: 600px) {
.section_latest_news .articles_container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.section_latest_news .articles_container {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
#block-aides-financieres .section_titling {
max-width: 782px;
}
@ -3042,7 +3162,19 @@ article > *:not(.entry-content),
}
#block-demarches-administratives .card-large-content__links-container {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 782px) {
#block-demarches-administratives .card-large-content__links-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 960px) {
#block-demarches-administratives .card-large-content__links-container {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
#block-questions-frequentes {
@ -3055,12 +3187,23 @@ article > *:not(.entry-content),
margin-right: auto;
display: grid;
max-width: 1280px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
-moz-column-gap: 2rem;
column-gap: 2rem;
}
@media (min-width: 782px) {
.questions-frequentes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 960px) {
.questions-frequentes-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ########### PAGE ############ */
.demo-components .title {

View File

@ -162,11 +162,6 @@
background-color: rgb(47 1 84 / var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgb(223 30 30 / var(--tw-bg-opacity))

View File

@ -9,8 +9,7 @@
<?php wp_head(); ?>
</head>
<body <?php body_class('bg-white text-gray-900 antialiased'); ?>>
<body>
<?php
do_action('tailpress_site_before');
global $post;
@ -18,6 +17,13 @@
<div id="page-<?php echo $post->post_name ?>" class="min-h-screen flex flex-col">
<div class="skiplinks" aria-label="<?php echo __('Accès rapide', 'homegrade-theme__texte-fonctionnel') ?>">
<a href="#content" class="skiplinks__link"><?php echo __('Aller au contenu', 'homegrade-theme__texte-fonctionnel') ?></a>
</div>
<ul class="skiplinks">
<li></li>
</ul>
<?php do_action('tailpress_header'); ?>
<header id="main-header">

View File

@ -18,7 +18,7 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
}
// #### MENU RENOVATEUR
// #### MENU RENOVATEUR — N'est pas utilisé pour le menu principal
if ($args->theme_location === "renovateur") {
$page_icon = get_field('page_icon', $item->object_id);

View File

@ -8,7 +8,7 @@
const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle");
const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close");
function isSubmenuOpen() {
return header.querySelector("sub-menu-open") !== null;
return header.querySelector(".sub-menu--open") !== null;
}
function openSubmenu(buttonToggle) {
let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
@ -62,14 +62,18 @@
return null;
}
function openSearch() {
searchModuleToggle.setAttribute("aria-expanded", "");
const searchFieldInput = header.querySelector(".search-module__search-form__input");
searchModuleToggle.setAttribute("aria-expanded", "true");
searchModule.setAttribute("mobile-opened", "");
searchModule.removeAttribute("mobile-closed");
searchFieldInput.focus();
setTimeout(() => {
searchModule.removeAttribute("aria-hidden");
}, 400);
}
function closeSearch() {
searchModuleToggle.setAttribute("aria-expanded", "false");
searchModuleToggle.focus();
searchModule.setAttribute("aria-hidden", "");
searchModule.removeAttribute("mobile-opened", "");
searchModule.setAttribute("mobile-closing", "");
@ -77,7 +81,6 @@
searchModule.setAttribute("mobile-closed", "");
searchModule.removeAttribute("mobile-closing", "");
}, { once: true });
searchModuleToggle.toggleAttribute("aria-expanded");
}
searchModuleToggle.addEventListener("click", function(e) {
closeSubmenus();
@ -125,6 +128,16 @@
openMenu(HomegradeNavListContainer);
}
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
if (isSearchOpen() === true) {
closeSearch();
}
if (isSubmenuOpen()) {
closeSubmenus();
}
}
});
}
// resources/js/app.js

View File

@ -1,7 +1,11 @@
body {
@apply bg-white antialiased;
}
a:focus,
button:focus {
outline: red solid 1px;
@apply outline-1 outline-offset-8;
outline-radius: 50px;
border-radius: 10px;
/* border-radius: 10px; */
}

View File

@ -16,13 +16,13 @@
}
&__infos-contact {
@apply col-span-1 grid gap-6;
@apply col-span-4 lg:col-span-1 grid gap-6;
.external-link {
@apply pt-2 mt-1;
}
}
&__navigation-menu {
@apply col-span-3;
@apply col-span-4 lg:col-span-3;
.footer-menu-renovateur {
@apply flex gap-4 bg-secondary w-full justify-center items-end;
.sub-menu {
@ -39,10 +39,10 @@
}
}
&__partenaires {
@apply flex col-span-2 justify-center items-center gap-12;
@apply flex flex-wrap col-span-4 md:col-span-2 justify-center items-center gap-12;
}
&__metiers-patrimoine {
@apply col-span-2;
@apply col-span-4 md:col-span-2;
}
}

View File

@ -4,6 +4,19 @@ header#main-header {
lg:flex-col;
}
.skiplinks {
@apply bg-primary pl-8;
&__link {
transition: margin 0.25s ease-in-out;
@apply text-white block w-fit border-white rounded-md px-4 overflow-hidden
max-h-0
focus:py-2
focus:border
focus:my-4
focus:max-h-12;
}
}
.sub-menu {
@apply z-10;
}

View File

@ -16,7 +16,7 @@
.sub-menu[open] {
display: block;
}
li .sub-menu {
.sub-menu {
@apply bg-primary
p-6
mx-auto
@ -26,9 +26,12 @@
z-index: 999;
display: none;
/* &.sub-menu--open {
display: block;
} */
&--closed {
@apply hidden;
}
&--open {
@apply block;
}
li {
@apply py-2 lg:text-left;
@ -234,7 +237,7 @@
}
.menu-homegrade--footer {
@apply grid grid-cols-4 gap-y-8 mt-8;
@apply grid sm:grid-cols-2 md:grid-cols-4 gap-y-8 mt-8;
li.menu-item a {
@apply hover:text-secondary;

View File

@ -1,6 +1,8 @@
.menu-renovateur {
@apply py-8
px-16
px-4
sm:px-8
md:px-16
relative
shadow-md
flex
@ -19,7 +21,6 @@
&__navlist {
@apply lg:flex
bg-fuchsia-300
justify-center
relative;
@ -177,6 +178,7 @@
.page_icon {
@apply w-[50px] h-[50px];
}
&__submenu-title {
@apply pb-4 mb-4 border-b border-gray-dark;
}
@ -196,7 +198,7 @@
}
.menu-renovateur--footer {
@apply grid grid-cols-4;
@apply grid sm:grid-cols-2 lg:grid-cols-4 gap-y-4;
li {
.page_icon {

View File

@ -16,7 +16,8 @@ export default function menuInit() {
const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close');
function isSubmenuOpen() {
return header.querySelector('sub-menu-open') !== null;
// console.log(header.querySelector('.sub-menu--open') !== null);
return header.querySelector('.sub-menu--open') !== null;
}
function openSubmenu(buttonToggle) {
@ -38,6 +39,7 @@ export default function menuInit() {
function handleSubmenuToggle(buttonToggle) {
let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
if (!isExpanded) {
closeSubmenus();
openSubmenu(buttonToggle);
@ -63,6 +65,7 @@ export default function menuInit() {
if (isSearchOpen() === true) {
closeSearch();
}
handleSubmenuToggle(button);
// closeSearch();
});
@ -97,14 +100,18 @@ export default function menuInit() {
return null;
}
function openSearch() {
searchModuleToggle.setAttribute('aria-expanded', '');
const searchFieldInput = header.querySelector('.search-module__search-form__input');
searchModuleToggle.setAttribute('aria-expanded', 'true');
searchModule.setAttribute('mobile-opened', '');
searchModule.removeAttribute('mobile-closed');
searchFieldInput.focus();
setTimeout(() => {
searchModule.removeAttribute('aria-hidden');
}, 400);
}
function closeSearch() {
searchModuleToggle.setAttribute('aria-expanded', 'false');
searchModuleToggle.focus();
searchModule.setAttribute('aria-hidden', '');
searchModule.removeAttribute('mobile-opened', '');
@ -122,8 +129,6 @@ export default function menuInit() {
// searchModule.setAttribute('mobile-closed', '');
// searchModule.removeAttribute('mobile-opened', '');
// }, 50);
searchModuleToggle.toggleAttribute('aria-expanded');
}
// SEARCH TOGGLE open/close
@ -210,4 +215,19 @@ export default function menuInit() {
openMenu(HomegradeNavListContainer);
}
});
/* -----------------------------------------------------------
HANDLE ESCAPE KEY
-----------------------------------------------------------*/
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
if (isSearchOpen() === true) {
closeSearch();
}
if (isSubmenuOpen()) {
closeSubmenus();
}
}
});
}

View File

@ -10,6 +10,8 @@
transform: translate(-50%, -70%);
}
.card-large-content__links-container {
@apply grid-cols-4;
@apply grid-cols-1
md:grid-cols-2
lg:grid-cols-4;
}
}

View File

@ -2,9 +2,9 @@
$block_titling = get_field('block_titling_description_datas');
$demarches_administratives_links = get_field('demarches_administratives_links');
echo '<pre>';
// echo '<pre>';
// print_r($demarches_administratives_links);
echo '</pre>';
// echo '</pre>';
?>

View File

@ -18,7 +18,7 @@
lg:mb-0;
}
&__title {
@apply text-4xl font-medium pb-6 pt-16;
@apply text-3xl md:text-4xl font-medium pb-6 pt-16;
line-height: 1.2;
}

View File

@ -5,7 +5,9 @@
}
.articles_container {
@apply grid
grid-cols-4
grid-cols-1
sm:grid-cols-2
xl:grid-cols-4
max-w-screen-2xl
px-8
py-16

View File

@ -3,5 +3,5 @@
}
.questions-frequentes-grid {
@apply grid grid-cols-3 gap-8 gap-x-8 max-w-screen-xl mx-auto;
@apply grid md:grid-cols-2 lg:grid-cols-3 gap-8 gap-x-8 max-w-screen-xl mx-auto;
}

View File

@ -3,8 +3,11 @@ $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');
// echo '<pre>';
// print_r($menuitems);
// print_r($image);
// echo '</pre>';
?>
@ -13,26 +16,23 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
<div class="website_logo">
<?php if (has_custom_logo()) { ?>
<?php the_custom_logo(); ?>
<a href="<?php echo home_url() ?>" title="<?php echo __("Accueil Homegrade.brussels", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Accueil Homegrade.brussels", "homegrade-theme__texte-fonctionnel") ?>">
<img src="<?php echo $logoSRC[0] ?>" alt="">
</a>
<!-- <?php the_custom_logo(); ?> -->
<?php } else { ?>
<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
<?php echo get_bloginfo('name'); ?>
</a>
<p class="text-sm font-light text-gray-600">
<?php echo get_bloginfo('description'); ?>
</p>
<?php } ?>
</div>
<div class="menu-renovateur__interaction_toggles">
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="search-module">
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-expanded="false">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
</button>
<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button" data-text-open="<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>" data-text-close="<?php echo __("Fermer", 'homegrade-theme__texte-fonctionnel') ?>" aria-label="<?php echo __("Ouvrir le menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="menu-renovateur-navlist-container">
<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button" data-text-open="<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>" data-text-close="<?php echo __("Fermer", 'homegrade-theme__texte-fonctionnel') ?>" aria-label="<?php echo __("Ouvrir le menu", "homegrade-theme__texte-fonctionnel") ?>">
<span class="text-content">
<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>
</span>
@ -104,16 +104,16 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
<?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") ?>" aria-controls="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">
<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">Découvrez nos conseils par thématique</h5>
<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">Quelles sont les aides financières disponibles pour votre logement ?</h5>
<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; ?>