From c048ef2c221b73015cf08e7e4ea440d49052d998 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Wed, 12 Jul 2023 14:33:33 +0200 Subject: [PATCH] refining some more menu stuff --- css/app.css | 203 +++++++++++++++--- css/editor-style.css | 5 - header.php | 10 +- includes/navwalker.php | 2 +- js/app.js | 19 +- resources/css/base/generalites.css | 6 +- resources/css/layout/footer.css | 8 +- resources/css/layout/header.css | 13 ++ resources/css/layout/menu-homegrade.css | 13 +- resources/css/layout/menu-renovateur.css | 8 +- resources/js/header.js | 28 ++- .../demarches-administratives.css | 4 +- .../demarches-administratives.php | 4 +- .../home/home-header/home-header.css | 2 +- .../home/latest-news/latest-news.css | 4 +- .../questions-frequentes.css | 2 +- .../header/menu-renovateur.php | 26 +-- 17 files changed, 280 insertions(+), 77 deletions(-) diff --git a/css/app.css b/css/app.css index f26395c..08d9180 100644 --- a/css/app.css +++ b/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 { diff --git a/css/editor-style.css b/css/editor-style.css index 96e4f5c..1452ff0 100644 --- a/css/editor-style.css +++ b/css/editor-style.css @@ -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)) diff --git a/header.php b/header.php index 906df8b..8073204 100644 --- a/header.php +++ b/header.php @@ -9,8 +9,7 @@ -> - + post_name ?>" class="min-h-screen flex flex-col"> +
+ +
+ +
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'));
- - menu_item_parent === "168") : ?> -
Découvrez nos conseils par thématique
+
menu_item_parent === "169") : ?> -
Quelles sont les aides financières disponibles pour votre logement ?
+