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

[UI] Improve layout of forms #835

Open
helfi92 opened this issue Jun 4, 2019 · 11 comments
Labels

Comments

@helfi92
Copy link
Member

@helfi92 helfi92 commented Jun 4, 2019

The UI of our forms tends to be quite compact. We should make it more "breathable" by adding more spaces between sections and perhaps using sub headers if it makes sense.

  • ui/src/components/SecretForm/index.jsx
  • ui/src/components/HookForm/index.jsx - #1410
  • ui/src/components/ClientForm/index.jsx
  • ui/src/components/RoleForm/index.jsx
  • ui/src/views/Quickstart/index.jsx - #1412
  • Worker pool form - #1470
@djmitche

This comment has been minimized.

Copy link
Contributor

@djmitche djmitche commented Jun 4, 2019

Just as a user datapoint, I feel the opposite -- I think the forms are really sparse and use a lot of screen-space per piece of information, making me scroll or zoom out to fit a useful amount of data onscreen. And I don't have a small screen :)

@helfi92

This comment has been minimized.

Copy link
Member Author

@helfi92 helfi92 commented Jun 4, 2019

Could you share a screenshot of a form that uses a lot of screen-space for you, please?

@djmitche

This comment has been minimized.

Copy link
Contributor

@djmitche djmitche commented Jun 4, 2019

Screenshot_2019-06-04 Hook - Taskcluster
Screenshot_2019-06-04 Provisioners - Taskcluster

There's a lot of background space there, especially horizontally, and labels, text-entry areas, and help text are all stacked vertically.

I don't mind it -- I've sort of resigned myself to Material Design taking over the web until someone popularizes a new gestalt -- but I don't think we should take steps to make it more sparse.

@djmitche

This comment has been minimized.

Copy link
Contributor

@djmitche djmitche commented Jun 4, 2019

BTW, this is not a criticism of tc-ui -- I think tc-ui is better-designed and easier to use than a lot of google sites that also employ MD. It's a criticism of MD itself :)

@owlishDeveloper

This comment has been minimized.

Copy link
Member

@owlishDeveloper owlishDeveloper commented Jun 4, 2019

I wonder if we can make changes to make the forms both more breathable/organized and compact (I also sometimes feel some forms could take less space) - for example, we could do double column layout on larger screens, adjust some components' sizes etc.

@djmitche

This comment has been minimized.

Copy link
Contributor

@djmitche djmitche commented Jun 5, 2019

That sounds wonderful :)

@helfi92 helfi92 referenced this issue Sep 9, 2019
@helfi92 helfi92 changed the title [UI] Make forms more "breathable" [UI] Improve layout of forms Sep 30, 2019
@chefoce

This comment has been minimized.

Copy link
Collaborator

@chefoce chefoce commented Oct 4, 2019

Hi, I would like to contribute to this issue for outreachy project. Could you please assign it to me?

@djmitche

This comment has been minimized.

Copy link
Contributor

@djmitche djmitche commented Oct 4, 2019

Sure! There is a bit of web design to do here, too, to think of a way to achieve both "breathable" and "compact" at the same time. Try a few things, decide what you like best, and make a PR -- then @helfi92 and @owlishDeveloper can comment next week.

@chefoce

This comment has been minimized.

Copy link
Collaborator

@chefoce chefoce commented Oct 4, 2019

Great!! i will start work in this right now, thanks

@chefoce

This comment has been minimized.

Copy link
Collaborator

@chefoce chefoce commented Oct 8, 2019

Hi i tried to start working with [UI] Improve layout of forms #835, but i don’t have clear in what file should i do the improvement, could someone help me with that? thanks

@helfi92

This comment has been minimized.

Copy link
Member Author

@helfi92 helfi92 commented Oct 8, 2019

It turns out the two remaining forms are already assigned to other folks (see #835 (comment)). I filed #1539 and assigned it to you. Hope that's okay. Let me know if you had questions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.