diff --git a/blocks/avm-report/avm-report-delayed.js b/blocks/avm-report/avm-report-delayed.js deleted file mode 100644 index 19a7d9a1..00000000 --- a/blocks/avm-report/avm-report-delayed.js +++ /dev/null @@ -1,23 +0,0 @@ -import { fetchPlaceholders } from '../../scripts/aem.js'; - -async function initGooglePlacesAPI() { - const placeholders = await fetchPlaceholders(); - const CALLBACK_FN = 'initAvmPlaces'; - const { mapsApiKey } = placeholders; - const script = document.createElement('script'); - script.type = 'text/javascript'; - script.async = true; - script.defer = true; - script.innerHTML = ` - window.${CALLBACK_FN} = function(){ - const input = document.querySelector('form input[name="avmaddress"]'); - const autocomplete = new google.maps.places.Autocomplete(input, {fields:['formatted_address'], types: ['address']}); - } - const script = document.createElement('script'); - script.src = "https://maps.googleapis.com/maps/api/js?key=${mapsApiKey}&libraries=places&callback=${CALLBACK_FN}"; - document.head.append(script); - `; - document.head.append(script); -} - -initGooglePlacesAPI(); diff --git a/blocks/avm-report/avm-report.css b/blocks/avm-report/avm-report.css index 4f463616..08ad8820 100644 --- a/blocks/avm-report/avm-report.css +++ b/blocks/avm-report/avm-report.css @@ -43,6 +43,9 @@ width: 67px; } +.avm-report.block form button[type="submit"] { + transition: all .3s ease-in; +} @media screen and (min-width: 600px) { .avm-report.block { diff --git a/blocks/avm-report/avm-report.js b/blocks/avm-report/avm-report.js index dc2a0e77..c6a7f5fc 100644 --- a/blocks/avm-report/avm-report.js +++ b/blocks/avm-report/avm-report.js @@ -1,23 +1,8 @@ -import { - showModal, -} from '../../scripts/util.js'; - -let alreadyDeferred = false; -function initGooglePlacesAPI() { - if (alreadyDeferred) { - return; - } - alreadyDeferred = true; - const script = document.createElement('script'); - script.type = 'text/partytown'; - script.innerHTML = ` - const script = document.createElement('script'); - script.type = 'module'; - script.src = '${window.hlx.codeBasePath}/blocks/avm-report/avm-report-delayed.js'; - document.head.append(script); - `; - document.head.append(script); -} +import { showModal } from '../../scripts/util.js'; + +import loadMaps from '../../scripts/google-maps/index.js'; + +let autocompleteAttached = false; export default async function decorate(block) { const form = document.createElement('form'); @@ -32,6 +17,19 @@ export default async function decorate(block) { const addressField = form.querySelector('input[name="avmaddress"]'); + addressField.addEventListener('focus', async () => { + if (!autocompleteAttached) { + loadMaps(); + await window.google.maps.importLibrary('places'); + // eslint-disable-next-line no-unused-vars + const autocomplete = new window.google.maps.places.Autocomplete(addressField, { + fields: ['formatted_address'], + types: ['address'], + }); + autocompleteAttached = true; + } + }); + form.addEventListener('submit', (e) => { e.preventDefault(); const address = addressField.value; @@ -49,5 +47,4 @@ export default async function decorate(block) { window.location = redirect; }); block.append(form); - initGooglePlacesAPI(); } diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index c8ea6721..44381b8a 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -87,7 +87,7 @@ footer { margin-right: 10px; } -.icon-facebook svg, .icon-linkedin svg, .icon-instagram svg, .icon-youtube svg { +.icon-facebook img, .icon-linkedin img, .icon-instagram img, .icon-youtube img { height: 20px; width: 20px; margin-right: 5px; @@ -95,7 +95,7 @@ footer { } -.footer-container-flex > div:nth-child(1) svg { +.footer-container-flex > div:nth-child(1) img { position: relative; height: 68px; width: 68px; diff --git a/blocks/header/header.css b/blocks/header/header.css index c2264db7..398a5dd1 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -97,7 +97,7 @@ body.light-nav { font-family: var(--font-family-proxima); font-weight: var(--font-weight-normal); font-size: var(--body-font-size-s); - letter-spacing:var(--letter-spacing-reg); + letter-spacing: var(--letter-spacing-reg); line-height: var(--body-font-size-s); text-decoration: none; cursor: pointer; @@ -197,6 +197,7 @@ body.light-nav { } .header.block nav .nav-hamburger .nav-hamburger-icon { + position: relative; height: 24px; width: 24px; } @@ -208,9 +209,19 @@ body.light-nav { .header.block nav .nav-hamburger .close { display: none; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; } .header.block nav .nav-hamburger .open { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; filter: var(--hamburger-filter); } @@ -239,7 +250,7 @@ body.light-nav { height: var(--nav-height); background: transparent; } - + body.light-nav .header.block nav[aria-expanded="true"] { --logo-filter: invert(1); } diff --git a/blocks/header/header.js b/blocks/header/header.js index a59f69bc..d369cc32 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -2,7 +2,7 @@ import { BREAKPOINTS } from '../../scripts/scripts.js'; import { getMetadata, decorateIcons, decorateSections } from '../../scripts/aem.js'; // media query match that indicates mobile/tablet width -const isDesktop = BREAKPOINTS.medium; +const isDesktop = BREAKPOINTS.large; function closeOnEscape(e) { if (e.code === 'Escape') { @@ -230,7 +230,9 @@ export default async function decorate(block) { nav.setAttribute('aria-expanded', 'false'); // prevent mobile nav behavior on window resize toggleMenu(nav, navSections, isDesktop.matches); - isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches)); + isDesktop.addEventListener('change', () => { + toggleMenu(nav, navSections, isDesktop.matches); + }); decorateIcons(nav); const navWrapper = document.createElement('div'); diff --git a/blocks/hero/search/home.css b/blocks/hero/search/home.css index 59117177..7dbedee2 100644 --- a/blocks/hero/search/home.css +++ b/blocks/hero/search/home.css @@ -18,6 +18,11 @@ display: none; } +.hero.block .content .homes .search-bar .search-country-select-parent { + position: relative; + width: 80px; +} + .hero.block .content .homes .search-bar .suggester-input { flex: 1; } @@ -45,7 +50,7 @@ justify-content: center; } -.hero.block .content .homes .search-bar .filter span.icon svg { +.hero.block .content .homes .search-bar .filter span.icon img { height: 22px; width: 22px; color: var(--black); diff --git a/blocks/hero/search/home.js b/blocks/hero/search/home.js index c73af908..069079cc 100644 --- a/blocks/hero/search/home.js +++ b/blocks/hero/search/home.js @@ -1,11 +1,10 @@ -import { decorateIcons } from '../../../scripts/aem.js'; import { build as buildCountrySelect, } from '../../shared/search-countries/search-countries.js'; function observeForm() { const script = document.createElement('script'); - script.type = 'text/partytown'; + script.type = 'module'; script.innerHTML = ` const script = document.createElement('script'); script.type = 'module'; @@ -76,6 +75,7 @@ async function buildForm() {