MWPW-140345-Fix issues in media QR block variant #1658

Ruchika4 · 2023-12-14T22:02:28Z

Fixes issue of QR code being visible on mobile and tablet in media large
Sets the dimension of QR code to 140 x 140 as requested
Also set the spacing between the QR code image and text to 24px
Added unit tests to test it in different viewports

Test URLs:

aem-code-sync · 2023-12-14T22:02:48Z

Page	Scores	Audits	Google
/fragments/consonant/media/media-qrcode?martech=off

Ruchika4 · 2023-12-16T00:07:01Z

Worked with Kyungwha Lee, and got it verified on feature branch.
This has also been verified by our QE in feature branch hence added verified label. Details in the jira ticket.

test/blocks/media/media.test.js

overmyheadandbody · 2024-01-04T16:47:35Z

libs/blocks/media/media.css

@@ -341,8 +342,9 @@ div[class*="-up"] .media .foreground > .media-row {

  .media.qr-code img.qr-code-img {


Is the added tag specificity actually needed? Would .media.qr-code .qr-code-img not achieve the same result?

I believe it will. However as it was not required to update for the changes requested in the ticket, I didn't touched it. I can follow up with original contributor to check the reason and may be address this in a separate PR.

test/blocks/media/media.test.js

* MWPW-137938 - Inline video image fallback (#1542) * Summarize changes in 50 characters or less More detailed explanatory text. Wrap at 72 characters. Resolves: MWPW-xxxx See also: MWPW-xxxx, MWPW-xxxx * Adding unit test. Addressing PR feedback. --------- Co-authored-by: Ryan Clayton <[email protected]> Co-authored-by: Blaine Gunn <[email protected]> * MWPW-137523 - Allow dark quiet marquees (#1654) * apply style updates * do not add dark to quiet marquee by default * additional :is usage * MWPW-140321 - how-to block - Heading area without Image has gap (#1670) Added style for .has-class to set logical grid display * MWPW-140273 Highlight replace fragment (#1672) * MWPW-140273 highlight replace fragment * getFileName function * permissions test * remove test comment * make manifestId consistent * fix unit tests * add to unit test * streamline addHighlightData --------- Co-authored-by: vivgoodrich <[email protected]> * MWPW-140470: allow OST to overwrite landscape (#1668) allow OST to overwrite landscape * MWPW-131662: consistent global navigation padding on mobile (#1679) * fixed global navigation padding on mobile * hotfix * hotfix * hotfix * hotfix * MWPW-131195: gnav cloud links section (#1586) * ui: gnav cloud links * hotfix * hotfix * hotfix * hotfix * hotfix * hotfix * hotfixes * hotfixes * hotfix * hotfixes * optimizing * hotfix * optimizing * hotfix * updated test mocks for cross cloud menu * hotfix * hotfix * hotfix * optimizing * optimizing * config - target file for testing * Revert "MWPW-137523 - Allow dark quiet marquees" (#1693) Revert "MWPW-137523 - Allow dark quiet marquees (#1654)" This reverts commit 921efe5. * MWPW-140052-Word break css for korean (#1675) * Update styles.css * update css to support language based korean sites too * [MWPW-140706] Quiz options should use Adobe Clean and [MWPW-140499] fix multiple merch card width issue on result page (#1694) * MWPW-140499: fix multiple merch card width issue on result page (#1660) fix multiple merch card width issue on result page Co-authored-by: xiasun <[email protected]> * MWPW-140706: Quiz options should use Adobe Clean (#1682) --------- Co-authored-by: xiasun <[email protected]> Co-authored-by: Erich Champion <[email protected]> * [MWPW-140788] Ensure correct Gnav Promo element order (#1691) * [MWPW-140788] Ensure correct Gnav Promo element order * [MWPW-140788] Unit tests for Gnav Promo elem order * Fix broken gnav test (#1699) * Fix broken gnav test * Cleanup * MWPW-140877 - Quiz Marquee style updates (#1701) * fixed quiz-marquee styles - aside.notification to inline on mobile, cards alignment on center * no margin on nested aside body-m * width update * added same card width style to quiz-results * [#1641] add parent option to createTag (#1698) - add options parameter to createTag signature, with only one parent option for now, as discussed in https://github.com/orgs/adobecom/discussions/1641, - add unit test for create Tag * MWPW-140345-Fix issues in media QR block variant (#1658) * MWPW-140345 * MWPW-140345 * MWPW-140345 * Update media.js * Update media.css * Update unit test * Update qr block css * Update media.css * Update media.test.js * Update media.test.js * document OST overrides (#1692) * document OST overrides * fix typo * Create merch block README.md (#1707) * Create merch block README.md * fix code styling * MWPW-140623 - Auto-merge main to stage (#1671) add workflow to auto-merge main into stage * MWPW-140780 - Remove :has() selector from Aside (#1687) remove :has selector altogether * MWPW-140660 Fix Marketo Destination Url (#1702) * MWPW-140862: Updated twitter logo (#1700) [MWPW-140862] Updated twitter logo * MWPW-140538 - Icon Block inline margin (#1688) Unset margin auto on section up nested inline iconblocks * Update magma codeowners (#1709) * MWPW-137523 - Allow dark quiet marquees (redux) (#1696) * achieve goals with lowest impact possible * move dark exclusions to a variable * revert min-height changes * quiet:not(.dark) * MWPW-140191: Fixes Merch Card custom <hr> color, inline heading variant (#1710) MWPW-140191: Fixes Merch Card custom <hr> color * faas-env default qa (#1716) * faas-env default qa * unit test * remove colsole log * console.error -> window.lana.log * altering faasCurrentJS instead faasHostUrl that being exported. * Added missed part. * MWPW-140964 Marquee static links should not be blue on hover (#1705) Co-authored-by: vivgoodrich <[email protected]> * MWPW-140738 - Add foreground gap on large marquees (#1718) remove gap: 0 on large marquees * MWPW-139379 Improve Tab Scrolling for Mobile (#1624) * MWPW-139379 Improve Mobile Tab Scrolling * MWPW-140403 | Aside promo block button and block size (#1680) For aside promo block following minor bugs are fixed in this PR Setting default button height for all promo to be 40px (button-l). Setting popup promo default width in desktop to be 85 % and max upto 1600px Resolves: MWPW-140403 Test URLs: Before: https://main--milo--adobecom.hlx.page/docs/library/kitchen-sink/aside-promo?martech=off After: https://mwpw-140403--milo--aishwaryamathuria.hlx.page/docs/library/kitchen-sink/aside-promo?martech=off * MWPW-140836: fix Commerce for several geo's (#1708) * fix WCS commerce for umbrella regions * MWPW-139915: Delivery of Spectrum Web Components (#1663) (#1721) * MWPW-139915: Delivery of Spectrum Web Components (#1663) * MWPW-139915: Spectrum Web Components delivery for commerce * add README * muted eslint errors for src/dist folders * Update merch.js * Update merch.js * exclude swc from codecov * PR feedbacks incorporated. * MWPW-140267 Update MEP PZN tags (#1724) * MWPW-140267 Update PZN tags * update mobile definition * add windows and mac * base phone vs tablet on screen size * switch to OR * alert to debug on iphone * tyring to test version * remove comment now that I see update * trying to differentiate between safari and chrome * reverting changes for Chrome Safari differentiating * adding feedback to debug safari on ipad * fix false positive on logged out * remove debug line * changing msedge to edge * update device type tags to all be singular * update reference for mobile --------- Co-authored-by: vivgoodrich <[email protected]> * MWPW-140467 Integrate round-corners for brick block (#1664) * Update blocks.js * rounded-corner-brick block * rounded-corner-brick block * rounded-corner-brick block * minor change * review suggestion --------- Co-authored-by: Suhani Jain <[email protected]> Co-authored-by: Suhani Jain <[email protected]> * MWPW-140953: Updated twitter logo (#1732) ui: updated twitter logo * MWPW-140836: Switch Milo Commerce to own country/language mapping (#1728) * bring mapping for all wcs locales * Revert "MWPW-139379 Improve Tab Scrolling for Mobile" (#1733) * [MWPW-140624] Footer layout with few columns (#1730) * MWPW-140916, MWPW-141124: Adding result to quiz analytics; update merch card width (#1717) * MWPW-140499: fix multiple merch card width issue on result page (#1660) fix multiple merch card width issue on result page Co-authored-by: xiasun <[email protected]> * MWPW-140706: Quiz options should use Adobe Clean (#1682) * MWPW-140916: Adding result to analytics (#1715) * MWPW-140916: Adding result to analytics * MWPW-140916: Fixing lint errors * MWPW-141124: match widths used by standard merch cards (#1725) Co-authored-by: xiasun <[email protected]> * Incorporating comments from Rares * Updating handleResultFlow test --------- Co-authored-by: Jacky Sun <[email protected]> Co-authored-by: xiasun <[email protected]> Co-authored-by: xiasun <[email protected]> * MWPW-140268 Icon duplicates if nested in multiple sections (#1731) * MWPW-140268 Icon duplicates if nested in multiple sections * Update libs/features/icons/icons.js Co-authored-by: Okan Sahin <[email protected]> * Update unit test to check for duplicates --------- Co-authored-by: vivgoodrich <[email protected]> Co-authored-by: Okan Sahin <[email protected]> * MWPW-141139 Parameter PZN tags don't match if user uses uppercase characters (#1726) * MWPW-141139 Parameter PZN tags don't match if user uses upercase characters * conditional chaining and param name not case sensitive * Update libs/features/personalization/personalization.js Co-authored-by: Chris Peyer <[email protected]> --------- Co-authored-by: vivgoodrich <[email protected]> Co-authored-by: Chris Peyer <[email protected]> * MWPW-136866: merch-cards block (#1729) * MWPW-136866: merch-cards block (#1676) * MWPW-136866: merch-cards block * update code owners * fix failing tests * rename main to init * removed TODO comment. * MWPW-141140 MEP throws error if page filter uses single asterisks (#1740) Co-authored-by: vivgoodrich <[email protected]> * [MILOLIBS RUN : MWPW-141223] Provide support to run nala tests on a given milo libs (#1742) nala-milo-libs Co-authored-by: nateekar <[email protected]> --------- Co-authored-by: Ryan Clayton <[email protected]> Co-authored-by: Ryan Clayton <[email protected]> Co-authored-by: Blaine Gunn <[email protected]> Co-authored-by: Elan Bartholomew <[email protected]> Co-authored-by: Ryan Parrish <[email protected]> Co-authored-by: Vivian A Goodrich <[email protected]> Co-authored-by: vivgoodrich <[email protected]> Co-authored-by: Mariia Lukianets <[email protected]> Co-authored-by: Ruchika Sinha <[email protected]> Co-authored-by: Jacky Sun <[email protected]> Co-authored-by: xiasun <[email protected]> Co-authored-by: Erich Champion <[email protected]> Co-authored-by: Rares Munteanu <[email protected]> Co-authored-by: Okan Sahin <[email protected]> Co-authored-by: Nicolas Peltier <[email protected]> Co-authored-by: Megan Thomas <[email protected]> Co-authored-by: Sean Archibeque <[email protected]> Co-authored-by: Axel Cureno Basurto <[email protected]> Co-authored-by: Sean Choi <[email protected]> Co-authored-by: Brandon Marshall <[email protected]> Co-authored-by: Aishwarya Mathuria <[email protected]> Co-authored-by: ilyas Stéphane Türkben <[email protected]> Co-authored-by: Suhani Jain <[email protected]> Co-authored-by: Suhani Jain <[email protected]> Co-authored-by: Suhani Jain <[email protected]> Co-authored-by: xiasun <[email protected]> Co-authored-by: Chris Peyer <[email protected]> Co-authored-by: Santoshkumar Nateekar <[email protected]> Co-authored-by: nateekar <[email protected]>

* MWPW-140345 * MWPW-140345 * MWPW-140345 * Update media.js * Update media.css * Update unit test * Update qr block css * Update media.css * Update media.test.js * Update media.test.js

Ruchika4 added 8 commits December 13, 2023 13:12

MWPW-140345

a04a6f2

MWPW-140345

9d02874

MWPW-140345

03c55f2

Update media.js

62188e5

Update media.css

2827d1b

Update unit test

13ced1a

Update qr block css

3f8b403

Update media.css

faca2a4

Ruchika4 requested a review from ryanmparrish as a code owner December 14, 2023 22:02

Ruchika4 added the needs-verification PR requires E2E testing by a reviewer label Dec 14, 2023

Merge branch 'main' into media-qr

0c98e88

Ruchika4 requested review from rgclayton, chrischrischris and sukamat December 14, 2023 22:05

Ruchika4 added bug Something isn't working run-nala Run Nala Test Automation against PR verified PR has been E2E tested by a reviewer and removed needs-verification PR requires E2E testing by a reviewer labels Dec 14, 2023

ryanmparrish approved these changes Dec 16, 2023

View reviewed changes

Ruchika4 requested review from Axelcureno, honstar, JasonHowellSlavin and vgoodric December 16, 2023 00:27

overmyheadandbody reviewed Dec 18, 2023

View reviewed changes

test/blocks/media/media.test.js Outdated Show resolved Hide resolved

Ruchika4 added 2 commits January 2, 2024 09:13

Update media.test.js

b070d98

Merge branch 'main' into media-qr

c3295cf

Ruchika4 assigned spadmasa Jan 2, 2024

Ruchika4 added the @media label Jan 2, 2024

overmyheadandbody approved these changes Jan 4, 2024

View reviewed changes

JasonHowellSlavin approved these changes Jan 4, 2024

View reviewed changes

test/blocks/media/media.test.js Outdated Show resolved Hide resolved

Ruchika4 added 2 commits January 5, 2024 13:26

Merge branch 'main' into media-qr

4d1c4f0

Update media.test.js

132c6e9

Ruchika4 merged commit 66f6042 into adobecom:main Jan 5, 2024
8 of 9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MWPW-140345-Fix issues in media QR block variant #1658

MWPW-140345-Fix issues in media QR block variant #1658

Ruchika4 commented Dec 14, 2023

aem-code-sync bot commented Dec 14, 2023 •

edited

Loading

Ruchika4 commented Dec 16, 2023 •

edited

Loading

overmyheadandbody Jan 4, 2024

Ruchika4 Jan 4, 2024

		@@ -341,8 +342,9 @@ div[class*="-up"] .media .foreground > .media-row {

		.media.qr-code img.qr-code-img {

MWPW-140345-Fix issues in media QR block variant #1658

MWPW-140345-Fix issues in media QR block variant #1658

Conversation

Ruchika4 commented Dec 14, 2023

aem-code-sync bot commented Dec 14, 2023 • edited Loading

Ruchika4 commented Dec 16, 2023 • edited Loading

overmyheadandbody Jan 4, 2024

Choose a reason for hiding this comment

Ruchika4 Jan 4, 2024

Choose a reason for hiding this comment

aem-code-sync bot commented Dec 14, 2023 •

edited

Loading

Ruchika4 commented Dec 16, 2023 •

edited

Loading