-
Notifications
You must be signed in to change notification settings - Fork 174
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
MWPW-142798 + MWPW-142872: Made the height-fit-content class to be set automatically #1946
MWPW-142798 + MWPW-142872: Made the height-fit-content class to be set automatically #1946
Conversation
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## stage #1946 +/- ##
==========================================
- Coverage 96.30% 96.28% -0.02%
==========================================
Files 165 166 +1
Lines 42274 42301 +27
==========================================
+ Hits 40712 40730 +18
- Misses 1562 1571 +9 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good.
@mirafedas I checked your examples given for the fix : With class authored page - second one: in list has problem in Devices - Mobile tabelet where the Header and footer of modal -iframe is not sticky. which results in long gap as well below the card Plz take a look, thanks |
Hi @mirafedas , |
4a8083e
to
52665e7
Compare
@Snehayt and @Roycethan I created a sandbox page with different modal variations, just sharing, maybe it will be useful: |
@mirafedas Overall looks good now, issues which i noted fixed, but i would like to test more on stage post merge to test on more real devices. Thank you |
@mirafedas , Without your fix-https://main--cc--adobecom.hlx.live/de/creativecloud/animation/discover#animate With your fix-https://main--cc--adobecom.hlx.live/de/creativecloud/animation/discover?milolibs=mwpw-142798-autoset-height-fit-content--milo--mirafedas I also see this issue in homepage-https://main--homepage--adobecom.hlx.live/homepage/index-loggedout#mini-plans-web-cta-photoshop-card for firefox browser |
@Snehayt I cannot reproduce this in Firefox, could you please clear the page cache and check again? |
e88a162
to
1abb46d
Compare
@mirafedas ,looks like the issue in firefox incognito is due to CORS issue.The iframe is fine in firefox browser( normal mode-without incognito). Verified the fix in windows in the browsers(chrome,firefox,brave,edge) and the devices(android,iphone,ipad). Looks fine from CC side. |
Closes #1911 |
Converted to a draft after the conversation with Ilyas, rewriting the logic. |
b7126cc
to
f533f3d
Compare
libs/blocks/modal/modal.css
Outdated
@@ -203,7 +198,11 @@ | |||
.dialog-modal.upgrade-flow-modal { | |||
border-radius: 0; | |||
} | |||
|
|||
|
|||
.dialog-modal.commerce-frame .fragment, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This rule applies to all the nested fragments. Can you make them more explicit ?
.dialog-modal.commerce-frame > .fragment,
.dialog-modal.commerce-frame > .section {
29d5124
to
acca977
Compare
@mirafedas I see the iframe loading blank again with the fix provided- https://main--cc--adobecom.hlx.live/de/creativecloud/animation/discover?milolibs=mwpw-142798-autoset-height-fit-content--milo--mirafedas |
451dd11
to
ad20aa1
Compare
@Snehayt thanks, fixed, please check again |
…t automatically (adobecom#1946) fixed height auto adjustment and iframe styles in modal Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
…t automatically (adobecom#1946) fixed height auto adjustment and iframe styles in modal Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
* MWPW-143648 - [Action Item] Fix float icon position (#1957) * display main image block and add inline flex to floated icon * revert inline flex rull on floated icon --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-142798 + MWPW-142872: Made the height-fit-content class to be set automatically (#1946) fixed height auto adjustment and iframe styles in modal Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-144575: Fix for commerce modal height (#2014) There's a potential CSO lurking * [MWPW-144516] Handle cross cloud menu block error (#2006) * fix(MWPW-142248): Accessibility for carousels containing focusable elements. (#1901) * MWPW-142248 * fixed linting errors * revert package.json * revert package_lock.json * Accessibility for the show-x variants of carousel * test cases for code coverage --------- Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-144575: Modal-Iframe for apps-whats-included is broken for Desktop resolutions (#2016) fixed CSS selector commerce-frame section and fragment * Sync stage with main (#2025) * [Release] Stage to Main (#2005) MWPW-143673: Load Milo fragment modals from co links #1972 MWPW-142894: fragments can lead to invalid html #1937 High Priority Caas-Marquee: Fixes integration with martech.js issues #2003 MWPW-143591 Fix Contextual Search Duplicates #1990 Zero Impact MWPW-143708 and MWPW-143712 add kodiak auto-ticketing #2002 --------- Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com> * [Release] Stage to Main (#2010) * Update martech.main.standard.min.js (#2008) --------- Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> * fix merge empty line --------- Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com> * remove extra line * MWPW-144575: fix for the modal duplication (#2021) added checking to not create a modal when it is already present in DOM Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> --------- Co-authored-by: Sean Archibeque <sean.archibeque@gmail.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Mira Fedas <30750556+mirafedas@users.noreply.github.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com> Co-authored-by: sharath-kannan <138484653+sharath-kannan@users.noreply.github.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Victor Hargrave <115231412+vhargrave@users.noreply.github.com> Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com>
* MWPW-143648 - [Action Item] Fix float icon position (#1957) * display main image block and add inline flex to floated icon * revert inline flex rull on floated icon --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-142798 + MWPW-142872: Made the height-fit-content class to be set automatically (#1946) fixed height auto adjustment and iframe styles in modal Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-144575: Fix for commerce modal height (#2014) There's a potential CSO lurking * [MWPW-144516] Handle cross cloud menu block error (#2006) * fix(MWPW-142248): Accessibility for carousels containing focusable elements. (#1901) * MWPW-142248 * fixed linting errors * revert package.json * revert package_lock.json * Accessibility for the show-x variants of carousel * test cases for code coverage --------- Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-144575: Modal-Iframe for apps-whats-included is broken for Desktop resolutions (#2016) fixed CSS selector commerce-frame section and fragment * Sync stage with main (#2025) * [Release] Stage to Main (#2005) MWPW-143673: Load Milo fragment modals from co links #1972 MWPW-142894: fragments can lead to invalid html #1937 High Priority Caas-Marquee: Fixes integration with martech.js issues #2003 MWPW-143591 Fix Contextual Search Duplicates #1990 Zero Impact MWPW-143708 and MWPW-143712 add kodiak auto-ticketing #2002 --------- Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com> * [Release] Stage to Main (#2010) * Update martech.main.standard.min.js (#2008) --------- Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> * fix merge empty line --------- Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com> * remove extra line * MWPW-144575: fix for the modal duplication (#2021) added checking to not create a modal when it is already present in DOM Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> * [MWPW-137148] [PERFORMANCE] Load IMS from the same domain (#1996) * Host imslib from milo libs/deps * Fix formatting * Minor script cleanup * wp * Serve ims, launch & launch development locally. Rewrite the workflow * Remove launch dependency for now --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-142003: Mini Compare Chart Mobile styling (#1989) Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-143202 firefox gnav not appearing bug (#1969) * try to catch error * test without breaking things * catch akamai failure * add try catch * attempt 2 to catch jsonp failure * cleanup * fix geo2 source * test using proper fetch * MWPW-143202 remove old jsonp request * MWPW-143202 catch case if resp is not ok * MWPW-143202 prevent caching of geo2 request --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * Excluding modals from Active link check (#1942) * Fix: Excluding modals from Active link check --------- Co-authored-by: Bandana Laishram <blaishram@Bandanas-MacBook-Pro.local> * [MWPW-144602] Ensure DNT functionality in top nav (#2020) * Revert "MWPW-142003: Mini Compare Chart Mobile styling" (#2041) Revert "MWPW-142003: Mini Compare Chart Mobile styling (#1989)" This reverts commit 944ae19. --------- Co-authored-by: Sean Archibeque <sean.archibeque@gmail.com> Co-authored-by: Mira Fedas <30750556+mirafedas@users.noreply.github.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com> Co-authored-by: sharath-kannan <138484653+sharath-kannan@users.noreply.github.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Victor Hargrave <115231412+vhargrave@users.noreply.github.com> Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com> Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com> Co-authored-by: Okan Sahin <39759830+mokimo@users.noreply.github.com> Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com> Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com> Co-authored-by: Bandana Laishram <blaishram@Bandanas-MacBook-Pro.local>
* MWPW-143648 - [Action Item] Fix float icon position (#1957) * display main image block and add inline flex to floated icon * revert inline flex rull on floated icon --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-142798 + MWPW-142872: Made the height-fit-content class to be set automatically (#1946) fixed height auto adjustment and iframe styles in modal Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-144575: Fix for commerce modal height (#2014) There's a potential CSO lurking * [MWPW-144516] Handle cross cloud menu block error (#2006) * fix(MWPW-142248): Accessibility for carousels containing focusable elements. (#1901) * MWPW-142248 * fixed linting errors * revert package.json * revert package_lock.json * Accessibility for the show-x variants of carousel * test cases for code coverage --------- Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-144575: Modal-Iframe for apps-whats-included is broken for Desktop resolutions (#2016) fixed CSS selector commerce-frame section and fragment * Sync stage with main (#2025) * [Release] Stage to Main (#2005) MWPW-143673: Load Milo fragment modals from co links #1972 MWPW-142894: fragments can lead to invalid html #1937 High Priority Caas-Marquee: Fixes integration with martech.js issues #2003 MWPW-143591 Fix Contextual Search Duplicates #1990 Zero Impact MWPW-143708 and MWPW-143712 add kodiak auto-ticketing #2002 --------- Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com> * [Release] Stage to Main (#2010) * Update martech.main.standard.min.js (#2008) --------- Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> * fix merge empty line --------- Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com> * remove extra line * MWPW-144575: fix for the modal duplication (#2021) added checking to not create a modal when it is already present in DOM Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> * [MWPW-137148] [PERFORMANCE] Load IMS from the same domain (#1996) * Host imslib from milo libs/deps * Fix formatting * Minor script cleanup * wp * Serve ims, launch & launch development locally. Rewrite the workflow * Remove launch dependency for now --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-142003: Mini Compare Chart Mobile styling (#1989) Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * MWPW-143202 firefox gnav not appearing bug (#1969) * try to catch error * test without breaking things * catch akamai failure * add try catch * attempt 2 to catch jsonp failure * cleanup * fix geo2 source * test using proper fetch * MWPW-143202 remove old jsonp request * MWPW-143202 catch case if resp is not ok * MWPW-143202 prevent caching of geo2 request --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * Excluding modals from Active link check (#1942) * Fix: Excluding modals from Active link check --------- Co-authored-by: Bandana Laishram <blaishram@Bandanas-MacBook-Pro.local> * [MWPW-144602] Ensure DNT functionality in top nav (#2020) * Revert "MWPW-142003: Mini Compare Chart Mobile styling" (#2041) Revert "MWPW-142003: Mini Compare Chart Mobile styling (#1989)" This reverts commit 944ae19. * MWPW-144026 Update Twitter Icon to X (#2030) * Add support for bold as header if no header (#1997) * Add support for bold as header if no header * Add tracking to modal close button * separate branches * moving if on strong or B --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * [MWPW-144112] send-to-caas: point to prod end-point (#1995) [MWPW-144112] point to prod end-point * [MILO] Allow svg or media files to be located in a fragments folder (#1966) * fix if svg is located in fragments folder * update to handle any file that is not a fragment * unit test * better placement * update existing file reference no idea how this was working with the incorrect reference * add carve out for mp4 Noticed that there is code in this if statement for mp4 in the fragments folder that can't be reached * save match result so I do not have to match twice * update nameSplit to hasExtension per Slack request * update hasExtension to use include instead of length --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * Consolidate MEP PR's for stage (#1975) * stash * start retro support (need to adjust replacefragment) * save progress * progress * stash * solid state * reverse mep preview check * update file for insertScript * organized unit test files * unit tests working * remove file added by override * add coverage to unit test * PR comments * use "section" to mean "section1" * no longer need to pass mep to handleFragmentCommand * Update libs/features/personalization/personalization.js Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> * Update libs/features/personalization/personalization.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * add replace action with fragment selector not on page * moving fragment that's not page unit test * [MILO][MEP] Update Manifest Type and Manifest Ordering v2 (#1980) * new branch to separate my updates from others * export matchGlob * see if removing matchGlob fixes unit test * found unit test issue * stash * unit test repair * increase coverage * stop loading disabled promos * update unit test * only download disabled manifests if needed * [MILO][MEP] MEP parameter spoof breaks if chosen experience has a comma (#1992) * change delimiter to --- * update unit tests * Deconflicting for MWPW-136727 MEP: Support for simplified selectors (#1959) * WIP * Add tests * stash * stash * stash * merge select functions * unit tests fixed * fix for test or promo type * create unit test file * fix unit test error * unit tests * improve merge of duplicate manifests * fix merge of Target with fresh manifest, add unit test * new branch to separate my updates from others * export matchGlob * see if removing matchGlob fixes unit test * found unit test issue * stash * unit test repair * increase coverage * merge conflicts * remove duplicate from merge * remove another duplicate from merge --------- Co-authored-by: ChrisChrisChris <chrischrischris@users.noreply.github.com> * more duplicates * move normalization of manifestPath to before getting variant * Unit test repair * repair utils unit test * only update path if needed * force update sample scripts * trigger try/catch --------- Co-authored-by: vivgoodrich <vivian.goodrich@gmail.com> Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> * UAR integration - Quiz Sync for state in local storage and accessibility (#2032) * MWPW-139939 - Support for quiz state in local storage (#1956) * MWPW-139939 - Support for quiz state in local storage * Renders the quiz at any point as captured in local storage Resolves: [MWPW-139939](https://jira.corp.adobe.com/browse/MWPW-139939) * fix for no stored-quiz-state * remove stored quiz data when advancing to the next quiz step via handleOnNextClick() * stored quiz state unit tests * MWPW-143799 - Quiz Accessibility Refinement (#2004) * Add id to the h1 * set role and aria-labelledby on the option container * swap to role-checkbox and aria-checked for option buttons * use disabled instead of tabindex -1 Resolves: [MWPW-143799](https://jira.corp.adobe.com/browse/MWPW-143799) --------- Co-authored-by: Sean Archibeque <sean.archibeque@gmail.com> Co-authored-by: Mira Fedas <30750556+mirafedas@users.noreply.github.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Rares Munteanu <overmyheadandbody@gmail.com> Co-authored-by: sharath-kannan <138484653+sharath-kannan@users.noreply.github.com> Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com> Co-authored-by: Victor Hargrave <115231412+vhargrave@users.noreply.github.com> Co-authored-by: ilyas Stéphane Türkben <tuerkben@adobe.com> Co-authored-by: J. Casalino <casalino@adobe.com> Co-authored-by: Megan Thomas <methomas@adobe.com> Co-authored-by: cmiqueo <64917520+cmiqueo@users.noreply.github.com> Co-authored-by: Okan Sahin <39759830+mokimo@users.noreply.github.com> Co-authored-by: ilyas Stéphane Türkben <isturkben@gmail.com> Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com> Co-authored-by: Bandana Laishram <blaishram@Bandanas-MacBook-Pro.local> Co-authored-by: Vivian A Goodrich <101133187+vgoodric@users.noreply.github.com> Co-authored-by: jedjedjedM <93785811+jedjedjedM@users.noreply.github.com> Co-authored-by: vivgoodrich <vivian.goodrich@gmail.com> Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com> Co-authored-by: Victor Hargrave <vhargrave@adobe.com>
When Trial with Purchase pages (e.g. https://www.adobe.com/mini-plans/photoshop.html?mid=ft&web=1&pint=Photoshop ) are rendered inside modals, we need to set up an automatic height adjustment to eliminate the blank space on the bottom of the page. For that the 'height-fit-content' class should be set on the modal dialog element. As adding this class manually would require a significant authoring effort, we now set it automatically in the code for all cases when the URL of the page inside iFrame includes the '/mini-plans/' part together with 'mid=ft' and 'web=1' params.
This PR also includes the CSS changes from this PR as they are required for the modal styles to work properly.
Resolves:
MWPW-142798
MWPW-142872
Test URLs:
For testers, please test the following issues:
https://jira.corp.adobe.com/browse/MWPW-142872
https://jira.corp.adobe.com/browse/MWPW-142798
https://jira.corp.adobe.com/browse/MWPW-142399 (check for regression)