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

Adjust UI for mobile and tablet #128

Closed
sadiqkhoja opened this issue May 31, 2024 · 1 comment
Closed

Adjust UI for mobile and tablet #128

sadiqkhoja opened this issue May 31, 2024 · 1 comment
Assignees
@sadiqkhoja
Labels
UI
Milestone
Next

Comments

@sadiqkhoja
Copy link
Contributor

sadiqkhoja commented May 31, 2024 •
edited by alyblenkin
Loading

Walk few steps towards making the web-forms responsive to different screen sizes, specifically for mobiles and tablets:

  • Remove question card
  • Make the questions container full width
  • Move Form title in the row of print and language controls
  • Show hamburger icon on mobile screens

Figma
Screenshot 2024-06-20 at 12 17 13 PM

Design tweaks:

  • Title should be smaller on mobile (I think we may need to tweak the font sizes in general so it feels responsive. It might be too small on desktop right now)
  • Dialog for changing the language on mobile could wider so it doesn't feel so squished, and we can remove the 'X' because we have cancel at the bottom. Rounded edges might also make it more consistent with the tablet/desktop experience.
  • Sent button needs more spacing on the right
@sadiqkhoja sadiqkhoja added the UI label May 31, 2024
@sadiqkhoja sadiqkhoja self-assigned this May 31, 2024
@sadiqkhoja sadiqkhoja moved this from Todo to In Progress in Web Forms May 31, 2024
@sadiqkhoja sadiqkhoja added this to the v0.2 milestone May 31, 2024
sadiqkhoja added a commit that referenced this issue Jun 10, 2024
@sadiqkhoja
feat #128: first step towards responsive layout
4c8d1ac
sadiqkhoja added a commit that referenced this issue Jun 12, 2024
@sadiqkhoja
feat #128: first step towards responsive layout
280cc5f
@alyblenkin
Copy link
Collaborator

Looking good! I think we can add more spacing between the radio button and text. As well as more spacing within the "Save" button so it's wider and easier to tap on mobile.

Image

I'm going to add a placeholder issue for adjusting the font size and spacing. I think we will need to play around with this after we implementing the outlines to the options.

sadiqkhoja added a commit that referenced this issue Jun 12, 2024
@sadiqkhoja
feat #128: first step towards responsive layout
6f470c5
sadiqkhoja added a commit that referenced this issue Jun 12, 2024
@sadiqkhoja
feat #128: first step towards responsive layout
9e93c81
@eyelidlessness eyelidlessness mentioned this issue Jun 13, 2024
Merged
sadiqkhoja added a commit that referenced this issue Jun 26, 2024
@sadiqkhoja
feat #128: first step towards responsive layout (#132)
bab3924 
* feat #128: first step towards responsive layout

* Incorporated PR feedback:

* Dont show hamburger for mobile view if there is only print button. Show the print button directly.
* Wrap the title instead of truncated it.
* Add space to the right side of the print/menu icon for smaller screens.
* Added css classes to language changer to make it easier to select in e2e test.

* Refactoring:

* Declared different colors as variables.
* Removed show/back buttons from demo, added navigation via history API
* Made FormLanguageDialog and FormLanguageMenu dumb components, state change is handled by parent

* Added changeset

* updated test

* add .md extension to changeset file
@sadiqkhoja sadiqkhoja moved this from In Progress to Done in Web Forms Jun 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sadiqkhoja sadiqkhoja

Labels
UI
Projects
Web Forms
Status: Done
Milestone
Next
Development

No branches or pull requests
3 participants
@sadiqkhoja @lognaturel @alyblenkin