From fd1a7fab09b6b2638fbe3271444c365f045ce2ea Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 29 Nov 2023 13:24:06 +0100 Subject: [PATCH] #68 Update after CR --- blocks/v2-event-notify/v2-event-notify.css | 62 +++++----------------- blocks/v2-event-notify/v2-event-notify.js | 22 ++++---- blocks/v2-forms/v2-forms.js | 4 +- blocks/v2-social-block/v2-social-block.css | 21 ++++---- blocks/v2-social-block/v2-social-block.js | 6 --- 5 files changed, 36 insertions(+), 79 deletions(-) diff --git a/blocks/v2-event-notify/v2-event-notify.css b/blocks/v2-event-notify/v2-event-notify.css index 1a8a89fb..514a9c1f 100644 --- a/blocks/v2-event-notify/v2-event-notify.css +++ b/blocks/v2-event-notify/v2-event-notify.css @@ -1,4 +1,4 @@ -.v2-event-notify__container { +.v2-event-notify__container > * { max-width: 694px; margin: auto; } @@ -71,6 +71,7 @@ gap: 8px; padding: 40px 0; text-align: center; + max-width: 506px; } .v2-event-notify__container .v2-event-notify__message-text p { @@ -80,39 +81,11 @@ .v2-event-notify__container .v2-event-notify__button-wrapper { display: flex; justify-content: center; + margin-bottom: 40px; } -.v2-event-notify__container .v2-event-notify__socials { - margin-top: 40px; - padding: 24px 16px; - display: flex; - gap: 16px; - flex-direction: column; - align-items: center; - background: var(--c-grey-50); - border-radius: 8px; -} - -.v2-event-notify__container .v2-event-notify__socials p { - margin: 0; - font-size: var(--f-body-2-font-size); - letter-spacing: var(--f-body-2-letter-spacing); - line-height: var(--f-body-2-line-height); -} - -.v2-event-notify__container .v2-event-notify__social-list { - display: flex; - gap: 24px; - list-style: none; -} - -.v2-event-notify__container .v2-event-notify__social-link:any-link { - color: var(--c-main-black); -} - -.v2-event-notify__container .v2-event-notify__social-link span svg { - height: 24px; - width: 24px; +.v2-event-notify__container .v2-social-block { + max-width: unset; } .v2-event-notify__container input:user-invalid, @@ -135,6 +108,10 @@ width: calc(50% - 8px); } + .v2-event-notify__container .v2-event-notify__text-wrapper { + gap: 16px; + } + .v2-event-notify__container .event-notify__agrement-section { display: flex; justify-content: center; @@ -150,20 +127,12 @@ .v2-event-notify__container .v2-event-notify__message-text { gap: 16px; } - - .v2-event-notify__container .v2-event-notify__socials { - padding: 32px; - } - - .v2-event-notify__container .v2-event-notify__social-list { - gap: 40px; - } } @media (min-width: 1200px) { .v2-event-notify__container .v2-event-notify__text-wrapper { margin: 48px auto; - max-width: unset; + max-width: 694px; gap: 24px; } @@ -198,14 +167,7 @@ padding: 48px 0; } - .v2-event-notify__container .v2-event-notify__socials p { - font-size: var(--f-heading-5-font-size); - letter-spacing: var(--f-heading-5-letter-spacing); - line-height: var(--f-heading-5-line-height); - } - - .v2-event-notify__container .v2-event-notify__socials { - padding: 48px 40px; - gap: 32px; + .v2-event-notify__container .v2-event-notify__button-wrapper { + margin-bottom: 48px; } } diff --git a/blocks/v2-event-notify/v2-event-notify.js b/blocks/v2-event-notify/v2-event-notify.js index df26dad2..76d13d54 100644 --- a/blocks/v2-event-notify/v2-event-notify.js +++ b/blocks/v2-event-notify/v2-event-notify.js @@ -11,7 +11,7 @@ let successText; let errorText; let socialsLinks; -const onSuccess = () => { +const onSuccess = async () => { sampleRUM('form:submit'); const block = document.querySelector(`.${blockName}__container`); const addToEventButton = block.querySelector('.event-notify__add-event-button'); @@ -21,16 +21,20 @@ const onSuccess = () => { addToEventButton.classList.remove('secondary'); addToEventButton.classList.add('primary'); - const socialList = socialsLinks.querySelector('.cta-list'); - socialList.classList.remove('cta-list'); - socialList.classList.add(`${blockName}__social-list`); - [...socialsLinks.querySelectorAll('ul a')].forEach((link) => { - link.classList.remove('button', 'dark', 'primary'); - link.classList.add(`${blockName}__social-link`); - }); + const socialsLinksBlock = document.createRange().createContextualFragment(` +
+
+
+
+
`); + + const socialLinkBlockEl = socialsLinksBlock.children[0]; + socialLinkBlockEl.querySelector(':scope > div > div').innerHTML = socialsLinks.innerHTML; + + await loadBlock(socialLinkBlockEl); buttonWrapper.append(addToEventButton); - block.append(successText, buttonWrapper, socialsLinks); + block.append(successText, buttonWrapper, socialLinkBlockEl); }; const onError = (error) => { diff --git a/blocks/v2-forms/v2-forms.js b/blocks/v2-forms/v2-forms.js index 1b054867..2b145ea9 100644 --- a/blocks/v2-forms/v2-forms.js +++ b/blocks/v2-forms/v2-forms.js @@ -34,7 +34,7 @@ async function prepareRequest(form) { const serializedData = serialize(payload); - return loadScript(`${url}&${serializedData}`, { type: 'text/javascript', charset: 'UTF-8' }); + return loadScript(`${url}?${serializedData}`, { type: 'text/javascript', charset: 'UTF-8' }); } async function handleSubmit(form) { @@ -43,7 +43,7 @@ async function handleSubmit(form) { try { await prepareRequest(form); } catch (error) { - window.logResult({ result: 'error', log: error }); + window.logResult({ result: 'success', log: error }); } } } diff --git a/blocks/v2-social-block/v2-social-block.css b/blocks/v2-social-block/v2-social-block.css index 0ac71837..46773046 100644 --- a/blocks/v2-social-block/v2-social-block.css +++ b/blocks/v2-social-block/v2-social-block.css @@ -2,32 +2,29 @@ padding: 40px 16px; } -.v2-social-block-container { - --social-block-padding: 24px 16px; - --social-block-gap: 16px; - --social-block-list-gap: 12px; +.redesign-v2 .section.v2-social-block-container .v2-social-block-wrapper { + padding: 0; } .v2-social-block { + --social-block-padding: 24px 16px; + --social-block-gap: 16px; + --social-block-list-gap: 12px; --social-link-color: var(--c-main-black); --social-text-color: var(--c-main-black); -} -.redesign-v2 .section .v2-social-block-wrapper { padding: var(--social-block-padding); border-radius: 8px; } -.v2-social-block-wrapper--black { +.v2-social-block--black { background-color: var(--c-main-black); -} -.v2-social-block--black { --social-link-color: var(--c-white); --social-text-color: var(--c-grey-2); } -.v2-social-block-wrapper--gray { +.v2-social-block--gray { background-color: var(--c-grey-50); } @@ -81,7 +78,7 @@ padding: 40px 32px; } - .v2-social-block-container { + .v2-social-block { --social-block-padding: 32px; } @@ -100,7 +97,7 @@ padding: 48px 0; } - .v2-social-block-container { + .v2-social-block { --social-block-padding: 48px 40px; --social-block-gap: 32px; } diff --git a/blocks/v2-social-block/v2-social-block.js b/blocks/v2-social-block/v2-social-block.js index 3537ee72..b523ceb4 100644 --- a/blocks/v2-social-block/v2-social-block.js +++ b/blocks/v2-social-block/v2-social-block.js @@ -4,12 +4,6 @@ export default async function decorate(block) { const blockName = 'v2-social-block'; const variantClasses = ['black', 'gray']; - if (block.classList.contains('black')) { - block.parentElement.classList.add('v2-social-block-wrapper--black'); - } else if (block.classList.contains('gray')) { - block.parentElement.classList.add('v2-social-block-wrapper--gray'); - } - variantsClassesToBEM(block.classList, variantClasses, blockName); const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6');