diff --git a/includes/navwalker.php b/includes/navwalker.php
index 823e86c..a238e1b 100644
--- a/includes/navwalker.php
+++ b/includes/navwalker.php
@@ -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);
diff --git a/js/app.js b/js/app.js
index bc94801..d959c3c 100644
--- a/js/app.js
+++ b/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
diff --git a/resources/css/base/generalites.css b/resources/css/base/generalites.css
index 8f5336a..a32730c 100644
--- a/resources/css/base/generalites.css
+++ b/resources/css/base/generalites.css
@@ -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; */
}
diff --git a/resources/css/layout/footer.css b/resources/css/layout/footer.css
index 7e8749f..50c6a21 100644
--- a/resources/css/layout/footer.css
+++ b/resources/css/layout/footer.css
@@ -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;
}
}
diff --git a/resources/css/layout/header.css b/resources/css/layout/header.css
index d127f2a..62a2182 100644
--- a/resources/css/layout/header.css
+++ b/resources/css/layout/header.css
@@ -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;
}
diff --git a/resources/css/layout/menu-homegrade.css b/resources/css/layout/menu-homegrade.css
index 2129cb0..44ba736 100644
--- a/resources/css/layout/menu-homegrade.css
+++ b/resources/css/layout/menu-homegrade.css
@@ -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;
diff --git a/resources/css/layout/menu-renovateur.css b/resources/css/layout/menu-renovateur.css
index 49ba5f3..15b3187 100644
--- a/resources/css/layout/menu-renovateur.css
+++ b/resources/css/layout/menu-renovateur.css
@@ -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 {
diff --git a/resources/js/header.js b/resources/js/header.js
index 27cbfc8..be3ddd1 100644
--- a/resources/js/header.js
+++ b/resources/js/header.js
@@ -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();
+ }
+ }
+ });
}
diff --git a/template-blocks/home/demarches-administratives/demarches-administratives.css b/template-blocks/home/demarches-administratives/demarches-administratives.css
index 2a30bd7..7082de6 100755
--- a/template-blocks/home/demarches-administratives/demarches-administratives.css
+++ b/template-blocks/home/demarches-administratives/demarches-administratives.css
@@ -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;
}
}
diff --git a/template-blocks/home/demarches-administratives/demarches-administratives.php b/template-blocks/home/demarches-administratives/demarches-administratives.php
index a83158d..61bc2e0 100755
--- a/template-blocks/home/demarches-administratives/demarches-administratives.php
+++ b/template-blocks/home/demarches-administratives/demarches-administratives.php
@@ -2,9 +2,9 @@
$block_titling = get_field('block_titling_description_datas');
$demarches_administratives_links = get_field('demarches_administratives_links');
-echo '';
+// echo '';
// print_r($demarches_administratives_links);
-echo '
';
+// echo '
';
?>
diff --git a/template-blocks/home/home-header/home-header.css b/template-blocks/home/home-header/home-header.css
index af6a58a..4936d9c 100755
--- a/template-blocks/home/home-header/home-header.css
+++ b/template-blocks/home/home-header/home-header.css
@@ -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;
}
diff --git a/template-blocks/home/latest-news/latest-news.css b/template-blocks/home/latest-news/latest-news.css
index eec9d82..50912eb 100644
--- a/template-blocks/home/latest-news/latest-news.css
+++ b/template-blocks/home/latest-news/latest-news.css
@@ -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
diff --git a/template-blocks/home/questions-frequentes/questions-frequentes.css b/template-blocks/home/questions-frequentes/questions-frequentes.css
index d6c9cc3..5001830 100644
--- a/template-blocks/home/questions-frequentes/questions-frequentes.css
+++ b/template-blocks/home/questions-frequentes/questions-frequentes.css
@@ -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;
}
diff --git a/template-components/header/menu-renovateur.php b/template-components/header/menu-renovateur.php
index ac042ae..25ce600 100644
--- a/template-components/header/menu-renovateur.php
+++ b/template-components/header/menu-renovateur.php
@@ -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 '';
-// print_r($menuitems);
+// print_r($image);
// echo '
';
?>
@@ -13,26 +16,23 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));