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.

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

Jump to bottom

Wide screen onboarding: center text, limit width #4697

Merged
merged 2 commits into from
Oct 4, 2024
Merged

Wide screen onboarding: center text, limit width #4697

merged 2 commits into from
Oct 4, 2024

Conversation

jpelgrom
Copy link
Member

@jpelgrom jpelgrom commented Oct 4, 2024 •
edited
Loading

Summary

Quick improvements to the onboarding for wide screens:

  • Center align text on the initial screen to prevent odd alignment of a single line
  • Limit the content width on onboarding screens to 600dp centered, like other step flows/bottom sheets (still wide-ish but let's stay consistent)
  • Update padding values on initial onboarding screen to match 8dp grid used in all other places

Screenshots

Before After
Very wide initial screen with text on the left Less wide initial screen with centered text wrapping onto a second line
Very wide discovery screen with server name left and an arrow for that row all the way to the right Less wide discovery screen where the server name and arrow are actually somewhat next to each other
Quite wide manual address entry screen (there is not a lot of text to stretch here) Less wide manual address entry screen
(not taken but you get the idea) Less wide integration setup screen with a nice block of text about location tracking spanning multiple lines with a normal line length instead of very long single line or two
(also not taken but you get the idea) Less wide notification permission screen

Link to pull request in Documentation repository

n/a

Any other notes

@jpelgrom
Wide screen onboarding: center text, limit width
94b34d3 
 - Improvements to the onboarding for wide screens
   - Center width on initial screen to prevent odd alignment of a single line
   - Limit the content width on onboarding screens to 600dp centered, like other step flows/bottom sheets
   - Update padding values on initial onboarding screen to match 8dp grid used in all other places
@jpelgrom jpelgrom marked this pull request as draft October 4, 2024 19:41
@jpelgrom jpelgrom marked this pull request as ready for review October 4, 2024 19:57
@dshokouhi dshokouhi merged commit 03c624a into home-assistant:master Oct 4, 2024
4 checks passed
@jpelgrom jpelgrom deleted the onboarding-width branch October 5, 2024 06:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dshokouhi dshokouhi dshokouhi approved these changes

Assignees
No one assigned
Labels
cla-signed Hacktoberfest
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jpelgrom @dshokouhi