Skip to content
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

Mobile Fork Button Font Shrink Hotfix #1331

Merged
merged 11 commits into from
Jan 9, 2025
Merged

Mobile Fork Button Font Shrink Hotfix #1331

merged 11 commits into from
Jan 9, 2025

Conversation

echen-adobe
Copy link
Collaborator

@echen-adobe echen-adobe commented Jan 9, 2025

Fixes following issues|Adds following features:

  • Issue/Feature 1
  • Adjusts font size and spacing for mobile fork button + mobile fork frictionless buttons for new languages.
  • Implements logic to reduce font size if the computed width of the text exceeds 70px

Resolves: [MWPW-NUMBER](https://jira.corp.adobe.com/projects/MWPW/issues/MWPW-164763)

Steps to test the before vs. after and expectations:

  • Steps for feature 1
  • Visit pages and open inspector. Set to android device and refresh. Verify text in buttons is shown fully and that the button matches the design.
Screenshot 2025-01-08 at 10 53 37 AM

https://www.figma.com/design/oEKwLBikshx4BgPmhtm7K9/Adobe.com%2Fexpress---SOT-Blocks?node-id=20272-270473&p=f&t=soVZgwzkJdOHuZHn-0

Pages to check for regression and performance:

jsandland and others added 10 commits January 9, 2025 13:29
* how-to-steps-accordion.js

* how-to-steps-accordion.css

* remove $ from js code

* mobile image aspect ratio maintained between screen sizes, max-width set to 400

* wip - mobile and tablet container sizing complete

* all layout / positioning from mobile to desktop complete for image and video

* ensures video is sized and centered for mobile, tablet and desktop

* ensure hover only applies to header and not sub-text

* set background from mobile to desktop

* ensure background image looks consistent

* use vw for top value for background to allow a dynamic position on window re-size - this prevents the bgImage from moving too low into the steps

* rename to how-to-v2

* remove steps from name

* update CSS classes to use new block name

* adds margin-top to header of video container
Copy link

aem-code-sync bot commented Jan 9, 2025

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run PSI checks
  • Re-sync branch
Commits

@echen-adobe echen-adobe changed the title Mfb shrink font 2 Mobile Fork Button Font Shrink Hotfix Jan 9, 2025
@echen-adobe echen-adobe merged commit 70747da into main Jan 9, 2025
8 of 9 checks passed
echen-adobe added a commit that referenced this pull request Jan 13, 2025
* reverted single video variant

* Update columns.css

* Update columns.css

* Update columns.css

* Sync Stage to Main (#1325)

* MWPW-143385 archive puf & premium-plan blocks (#1284)

* Allow Authors To Set Background Image in Banner (#1322)

* allow bgImage to be authored for banner

* CSS for bgImage

* Ensures Carousel Card Edit This Template Button Works On Mobile (#1323)

* ensure edit this template button works

* Update express/blocks/shared/basic-carousel.js

Co-authored-by: Brad Johnson <fullcolorcoder@gmail.com>

---------

Co-authored-by: Brad Johnson <fullcolorcoder@gmail.com>

---------

Co-authored-by: Victor Hargrave <115231412+vhargrave@users.noreply.github.com>
Co-authored-by: jsandland <all48775@adobe.com>

* Mobile Fork Button Font Shrink Hotfix (#1331)

* How To Steps Accordion (#1324)

* how-to-steps-accordion.js

* how-to-steps-accordion.css

* remove $ from js code

* mobile image aspect ratio maintained between screen sizes, max-width set to 400

* wip - mobile and tablet container sizing complete

* all layout / positioning from mobile to desktop complete for image and video

* ensures video is sized and centered for mobile, tablet and desktop

* ensure hover only applies to header and not sub-text

* set background from mobile to desktop

* ensure background image looks consistent

* use vw for top value for background to allow a dynamic position on window re-size - this prevents the bgImage from moving too low into the steps

* rename to how-to-v2

* remove steps from name

* update CSS classes to use new block name

* adds margin-top to header of video container

* Update mobile-fork-button.css

* Update mobile-fork-button.css

* Update mobile-fork-button.css

* Update mobile-fork-button.css

* ...

* ...

* Update mobile-fork-button.js

* Update mobile-fork-button-frictionless.js

* lint

* removed this for now

---------

Co-authored-by: jsandland <all48775@adobe.com>

---------

Co-authored-by: Brad Johnson <fullcolorcoder@gmail.com>
Co-authored-by: Victor Hargrave <115231412+vhargrave@users.noreply.github.com>
Co-authored-by: jsandland <all48775@adobe.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants