refining some more menu stuff
This commit is contained in:
parent
55efd70f34
commit
c048ef2c22
203
css/app.css
203
css/app.css
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
10
header.php
10
header.php
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
19
js/app.js
19
js/app.js
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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; */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
||||
?>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; ?>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user