From cd2050b957ebe9c9eb8493155379aa1262de03d4 Mon Sep 17 00:00:00 2001 From: Joaquin Rivero Date: Thu, 9 Jan 2025 18:16:51 -0300 Subject: [PATCH 1/3] Verb widget mobile version --- acrobat/blocks/verb-widget/icons.js | 1 + acrobat/blocks/verb-widget/verb-widget.css | 50 ++++++++++++++++++++-- acrobat/blocks/verb-widget/verb-widget.js | 15 ++++++- 3 files changed, 60 insertions(+), 6 deletions(-) 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 d9c0c61d..44580e83 100644 --- a/acrobat/blocks/verb-widget/verb-widget.css +++ b/acrobat/blocks/verb-widget/verb-widget.css @@ -292,11 +292,18 @@ /* 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)); } .verb-row { @@ -305,8 +312,8 @@ } .verb-icon { - width: 40px; - height: 40px; + width: 58px; + height: 56px; } .verb-title { @@ -319,9 +326,44 @@ .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; } } diff --git a/acrobat/blocks/verb-widget/verb-widget.js b/acrobat/blocks/verb-widget/verb-widget.js index 94f02a90..c1d4889a 100644 --- a/acrobat/blocks/verb-widget/verb-widget.js +++ b/acrobat/blocks/verb-widget/verb-widget.js @@ -180,11 +180,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() { From 2ee5d63ddad6b8ccecc8b78c176ef7bf6a59ad77 Mon Sep 17 00:00:00 2001 From: Joaquin Rivero Date: Mon, 13 Jan 2025 13:46:58 -0300 Subject: [PATCH 2/3] Flex direction & padding --- acrobat/blocks/verb-widget/verb-widget.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/acrobat/blocks/verb-widget/verb-widget.css b/acrobat/blocks/verb-widget/verb-widget.css index 44580e83..5ab6e132 100644 --- a/acrobat/blocks/verb-widget/verb-widget.css +++ b/acrobat/blocks/verb-widget/verb-widget.css @@ -303,7 +303,8 @@ padding: 24px 29px; border: 3px dashed #d5d5d5; border-radius: 8px; - min-height: calc(100vh - (63px + 32px + 115px + 48px)); + min-height: calc(100vh - (63px + 32px + 115px + 48px + 7px)); + justify-content: flex-start; } .verb-row { From b9434b5cd35576317a5d8de75dca5db2a352ff4f Mon Sep 17 00:00:00 2001 From: Joaquin Rivero Date: Mon, 13 Jan 2025 18:22:05 -0300 Subject: [PATCH 3/3] Verb widget analytics --- acrobat/blocks/verb-widget/verb-widget.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/acrobat/blocks/verb-widget/verb-widget.js b/acrobat/blocks/verb-widget/verb-widget.js index c1d4889a..885bad77 100644 --- a/acrobat/blocks/verb-widget/verb-widget.js +++ b/acrobat/blocks/verb-widget/verb-widget.js @@ -228,6 +228,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); }); @@ -263,6 +267,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(); }, @@ -272,6 +280,9 @@ export default async function init(element) { }, uploading: () => { 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);