diff --git a/acrobat/blocks/verb-widget/icons.js b/acrobat/blocks/verb-widget/icons.js index 460dbbb7..9f6a58a4 100644 --- a/acrobat/blocks/verb-widget/icons.js +++ b/acrobat/blocks/verb-widget/icons.js @@ -5,6 +5,7 @@ const ICONS = { WIDGET_ICON: '', fillsign: '', 'compress-pdf': '', + 'compress-pdf-mobile': '', UPLOAD_ICON: '', SECURITY_ICON: '', INFO_ICON: '', diff --git a/acrobat/blocks/verb-widget/verb-widget.css b/acrobat/blocks/verb-widget/verb-widget.css index 165bb135..71023b0f 100644 --- a/acrobat/blocks/verb-widget/verb-widget.css +++ b/acrobat/blocks/verb-widget/verb-widget.css @@ -353,11 +353,19 @@ /* responsive design */ @media screen and (max-width: 768px) { + .verb-widget { + background-image: linear-gradient(180deg, #EB1000 0%, #F79B94 50%, #FFF 70%); + padding: 16px; + } + .verb-wrapper { width: unset; max-width: unset; - padding: 20px; - min-height: calc(100vh - 150px); + padding: 24px 29px; + border: 3px dashed #d5d5d5; + border-radius: 8px; + min-height: calc(100vh - (63px + 32px + 115px + 48px + 7px)); + justify-content: flex-start; } .verb-row { @@ -366,8 +374,8 @@ } .verb-icon { - width: 40px; - height: 40px; + width: 58px; + height: 56px; } .verb-title { @@ -380,10 +388,45 @@ .verb-copy { font-size: 18px; + margin-bottom: 25px; + padding-bottom: 10px; + line-height: 27px; } .verb-cta { cursor: pointer; + font-size: 22px; + padding: 9px 25px; + } + + .verb-cta .upload-icon { + margin-right: 12px; + } + + .verb-image { + width: 135px; + height: 130px; + margin-top: 56px; + margin-bottom: 28px; + } + + .verb-col.right { + flex-direction: column; + align-items: center; + } + + .info-icon { + margin-left: 7px; + margin-right: 15px; + } + + .verb-legal-wrapper { + margin-top: 23px; + } + + .verb-legal { + margin-top: 0; + font-size: 12px; } .verb-upsell { diff --git a/acrobat/blocks/verb-widget/verb-widget.js b/acrobat/blocks/verb-widget/verb-widget.js index 9929be0d..28fe2df9 100644 --- a/acrobat/blocks/verb-widget/verb-widget.js +++ b/acrobat/blocks/verb-widget/verb-widget.js @@ -211,11 +211,22 @@ export default async function init(element) { widgetLeft.append(widgetHeader, widgetHeading, widgetCopy, errorState, widgetButton, button); legalTwo.innerHTML = legalTwo.outerHTML.replace(window.mph['verb-widget-terms-of-use'], ` ${window.mph['verb-widget-terms-of-use']}`); legalTwo.innerHTML = legalTwo.outerHTML.replace(window.mph['verb-widget-privacy-policy'], ` ${window.mph['verb-widget-privacy-policy']}`); - legalWrapper.append(legal, legalTwo); footer.append(iconSecurity, legalWrapper, infoIcon); - element.append(widget, footer); + if (window.browser?.isMobile) { + widgetCopy.after(widgetMobCopy); + widgetCopy.remove(); + const verbMobImageSvg = createSvgElement(`${VERB}-mobile`); + if (verbMobImageSvg) { + verbImageSvg.remove(); + verbMobImageSvg.classList.add('icon-verb-image'); + widgetImage.appendChild(verbMobImageSvg); + } + widgetImage.after(widgetImage); + iconSecurity.remove(iconSecurity); + footer.prepend(infoIcon); + } } function checkSignedInUser() { @@ -256,6 +267,10 @@ export default async function init(element) { }); button.addEventListener('click', () => { + if (VERB === 'compress-pdf') { + verbAnalytics('entry:clicked', VERB); + verbAnalytics('discover:clicked', VERB); + } verbAnalytics('filepicker:shown', VERB); verbAnalytics('dropzone:choose-file-clicked', VERB); }); @@ -292,6 +307,10 @@ export default async function init(element) { }, drop: () => { verbAnalytics('files-dropped', VERB, data); + if (VERB === 'compress-pdf') { + verbAnalytics('entry:clicked', VERB, data); + verbAnalytics('discover:clicked', VERB, data); + } setDraggingClass(widget, false); setUser(); }, @@ -307,6 +326,9 @@ export default async function init(element) { localStorage.setItem(key, count + 1 || 1); } verbAnalytics('job:uploading', VERB, data); + if (VERB === 'compress-pdf') { + verbAnalytics('job:multi-file-uploading', VERB, data); + } setUser(); document.cookie = `UTS_Uploading=${Date.now()};domain=.adobe.com;path=/;expires=${cookieExp}`; window.addEventListener('beforeunload', handleExit);