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

feat: layout improvements for small screen #1389

Merged
merged 3 commits into from
Mar 15, 2024
Merged

feat: layout improvements for small screen #1389

merged 3 commits into from
Mar 15, 2024

Conversation

pedrolamas
Copy link
Member

@pedrolamas pedrolamas commented Mar 13, 2024 •
edited
Loading

Improves layout in small screens:

  • dialogs will be shown in full-screen.
  • setting entries will break in 2 lines (title + content)

This will fix the problem with large dialogs (one can now scroll without affecting the background) and dismiss without a button (a close button is now shown on all dialogs).

Settings page

Before After
image image

Add User dialog

Before After
image image

Bed Screws Adjust dialog

Before After
image image

Add Camera dialog

Before After
image image

Spool Selection dialog

Before After
image image
Before After
image image

@pedrolamas pedrolamas added UI - Change All matters related to a significant change in the UI UI - Mobile All matters related to the mobile UI labels Mar 13, 2024
@pedrolamas pedrolamas added this to the 1.28.2 milestone Mar 13, 2024
@pedrolamas pedrolamas requested a review from matmen March 13, 2024 17:08
@pedrolamas pedrolamas force-pushed the pedrolamas/mobile-dialog-improvements branch from acc70a8 to 85a83e9 Compare March 13, 2024 17:17
matmen
matmen reviewed Mar 13, 2024
View reviewed changes
Copy link
Member

@matmen matmen left a comment

Choose a reason for hiding this comment

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

The spool selection and diagnostics card config dialogs both have a button in the bottom left that conflicts with the e-stop button, but I'm not sure what the best option would be to resolve that

Screen Shot 2024-03-13 at 18 22 47
Screen Shot 2024-03-13 at 18 22 55

@pedrolamas
Copy link
Member Author

Good catch... not sure yet how to fix this, but will get this back to draft and we can iterate on this matter.

@pedrolamas pedrolamas marked this pull request as draft March 13, 2024 17:33
@pedrolamas
feat: show full-screen dialogs in small screen
23ab988 
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
@pedrolamas
style: layout fixes
aa2e909 
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
@pedrolamas pedrolamas force-pushed the pedrolamas/mobile-dialog-improvements branch from 85a83e9 to aa2e909 Compare March 14, 2024 17:50
@pedrolamas
Copy link
Member Author

pedrolamas commented Mar 14, 2024 •
edited
Loading

I've now fixed the buttons alignment!

Basically, it will align them to the right on mobile view, and keep left on non-mobile as it is now!

@pedrolamas pedrolamas marked this pull request as ready for review March 14, 2024 17:52
@pedrolamas pedrolamas requested a review from matmen March 14, 2024 17:52
@pedrolamas
style: use 2 lines for AppSetting in mobile
842936e 
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
@pedrolamas pedrolamas changed the title feat: show full-screen dialogs in small screen feat: layout improvements for small screen Mar 15, 2024
@pedrolamas pedrolamas merged commit d9a503a into fluidd-core:develop Mar 15, 2024
6 checks passed
@pedrolamas pedrolamas deleted the pedrolamas/mobile-dialog-improvements branch March 15, 2024 12:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@matmen matmen matmen approved these changes

Assignees
No one assigned
Labels
UI - Change All matters related to a significant change in the UI UI - Mobile All matters related to the mobile UI
Projects
None yet
Milestone
1.29
Development

Successfully merging this pull request may close these issues.
2 participants
@pedrolamas @matmen