Skip to content

Fix: Overly Large Instruction Image on application password tutorial on iPad #12759

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
May 21, 2024
Merged

Fix: Overly Large Instruction Image on application password tutorial on iPad #12759

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
663358f
Fix: Overly Large Instruction Image on iPad application password Logi…
pmusolino May 16, 2024
1abd4e8
update: release notes 18.7
pmusolino May 16, 2024
b294acd
update: Moved the release notes under v18.8
pmusolino May 17, 2024
ab5f628
fix: multiplied image max width with the scale of the device using Sc…
pmusolino May 17, 2024
9c762cd
fix: spacing
pmusolino May 17, 2024
06edacc
fix: image in application password tutorial is now centered
pmusolino May 20, 2024
26b14e6
Merge branch 'trunk' into issue/12732-iPad-Login-Page-Instruction-Ima…
pmusolino May 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion RELEASE-NOTES.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

18.7
-----

- [*] Resolved an issue where the image on the tutorial of application password on the iPad login page was displayed too large, improving the login experience for iPad users. [https://github.com/woocommerce/woocommerce-ios/pull/12759]

18.6
-----
Expand Down
11 changes: 8 additions & 3 deletions WooCommerce/Classes/Authentication/Application Password/ApplicationPasswordTutorial.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,13 @@ struct ApplicationPasswordTutorial: View {
.frame(maxWidth: .infinity, alignment: .leading)
.padding([.horizontal, .top])

Image(uiImage: .appPasswordTutorialImage)
.resizable()
.aspectRatio(contentMode: .fit)
HStack(spacing: .zero) {
Image(uiImage: .appPasswordTutorialImage)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: Layout.imageMaxWidth)
Spacer()
Copy link
Contributor

@itsmeichigo itsmeichigo May 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm unsure about pushing the image to the left - it does look better on larger screen sizes but on iPhones the image might look better when center-aligned.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a comparison of how they appear pushing the image to the left. They looks good to me. Wdyt? Should I come back to the center alignment, or maybe have a custom rule just for iPad?

iPhone 15 Pro iPhone 15 Pro Max iPad Pro 11-inch
Screenshot 2024-05-17 at 11 48 52 Screenshot 2024-05-17 at 11 59 20 Screenshot 2024-05-17 at 11 49 13

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think keeping the image in the center looks in small screen sizes, while on large screens it's less distracting to be left-aligned. If it's not too complicated, having a separate alignment on large screens would be nice, otherwise I think center-aligned image looks better.

Copy link
Contributor Author

@pmusolino pmusolino May 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applied the change here: 06edacc (centered the image for both iPhone and iPad)

Ready for another check 🙌

}

Text(Localization.tutorial2)
.bodyStyle(opacity: 0.8)
Expand Down Expand Up @@ -142,6 +146,7 @@ private extension ApplicationPasswordTutorial {

enum Layout {
static let bottomButtonsSpacing: CGFloat = 16.0
static let imageMaxWidth: CGFloat = 400
}
}

Expand Down