The form used on the CreateCommons Page and the Edit Commons page could use some UI tweaks.
Currently the size of the fields scales with the page as it grows and shrinks. But all of the fields are pretty short (numbers); that space is just wasted. It might be more reasonable to set a fixed width in characters or pixels, since the maximum size needed would pretty much fit on even the tiniest screens.
The date field is particularly annoying, since the date picker is all the way at the right, so you have to move the mouse a long way to reach it.
Default values on the create form, and/or suggested values (or advice on picking a value, brief explanation of what the values mean) might also be helpful.
I suggest looking at the various ways of doing layout available in React Bootstrap (such as Row and Col; see links below) and reorganizing the page for convenience:
User Story
Discussion
The form used on the CreateCommons Page and the Edit Commons page could use some UI tweaks.
Currently the size of the fields scales with the page as it grows and shrinks. But all of the fields are pretty short (numbers); that space is just wasted. It might be more reasonable to set a fixed width in characters or pixels, since the maximum size needed would pretty much fit on even the tiniest screens.
The date field is particularly annoying, since the date picker is all the way at the right, so you have to move the mouse a long way to reach it.
Default values on the create form, and/or suggested values (or advice on picking a value, brief explanation of what the values mean) might also be helpful.
I suggest looking at the various ways of doing layout available in React Bootstrap (such as
RowandCol; see links below) and reorganizing the page for convenience:You can also include default values as was done by the s23-6pm-3 team---visit their Create Commons page and see what they did:
https://proj-happycows-s23-6pm-3.dokku-12.cs.ucsb.edu/
This is what it looks like when you first load the form; notice how default values are suggested:
Here's what the code looks like for that; notice the various uses of code such as
defaultValue={10000}One thing that would be nicer is if these default values were all organized, for example, in an object at the top of the file, something like:
And then each default value was something like:
defaultValue={defaultValues.startingBalance}instead ofdefaultValue={10000}defaultValue={defaultValues.cowPrice}instead ofdefaultValue={100}Acceptance Criteria
Optional but helpful: