ui @john

[Chun-Yang]

pages:

• login (maybe we let user configure by them self?)
• resources
• list of records
• record update
• record view

[JohnGoodman]

General

• Put "Admin CMS" in the top bar. make it link back to the home screen of the cms
• All tables use http://getbootstrap.com/docs/4.0/content/tables/#striped-rows

https://encouragement-solutions-admin.herokuapp.com/

• "All Resources" - change to "Site administration"
• put the list in a table
• Titleize and pluralize the list. so "lifeEventCategory" will be "Life Event Categories"

Category Index Screen

• Change text format from "lifeEventCategory list" to "List of Life Event Categories"
• Move "create" button to float right. align with the page List title. Use primay outline button style ( btn btn-outline-primary )
• Make the list of items use the the striped rows as referenced in the general section of this comment
• Remove the "pre" around the items on screen
• Remove the ID column
• Remove the quotes around the items
• Remove the "view" option
• Make the last column in the table be "update" Use the secondary button class. Make the button say "Edit"

[JohnGoodman]

• Create button - change wording to 'Add New'

• Update screen - make "update lifeEventCategory" formatted like "Update Life Event Category"

• Sorting needs to use 'up' and 'down' chevron icons. Default to the down icon ( desc ). when clicked, change the sort to asc and use the 'up' chevron. Make the icon float right within the element

• Screens with tables ( https://encouragement-solutions-admin.herokuapp.com/lifeEventCategory ) - titleize the table headings

• Pagination links -> give the numbers the "btn btn-outline-secondary" class. Also setup as a button toolbar ( https://getbootstrap.com/docs/4.0/components/button-group#button-toolbar )

• Search bar - use an button group with the "search" word on the right. See the screenshot for an example. Documentation in on the button-toolbar page.

• Alert messages - success messages need to be shown after the user has be redirected to the correct route. Put the alert message in the "alert-success" class ( https://getbootstrap.com/docs/4.0/components/alerts/ )

• capitalize "update" on update

• Screens with tables - move the edit button to the right side and alight to the far right, do not overflow

• Update screen - titleize field labels, remove id at the end. customize in our code or do a PR on the rjsf side?

• constrain input elements width - use ".col-6" and ".col-sm-12"

--- Not required by 10/6

• Error messages need to be more descriptive. The error message needs to say what is wrong for the specific input. Right now, the message says 'instance requires property "content"' which is very generic
• When there is an error on one form field, all form fields get highlighted in red. Only the field with the error should highlight in red

[Chun-Yang]

@JohnGoodman We need to discuss the rest of the ui update

[JohnGoodman]

• lists with sorting - when i change sort direction, the up / down chevron's change position. make sure the icons stay in the same horzontial space.

• change the chevron's to be more like the screenshot

• Search -> can it be a live search ( as I type )?

  • [FEEDBACK] yes it can, but since we are using full text search, if you type in 'r' or 're' nothing will show up, things will show up when you type in 'red'

• Search -> needs to be able to search partial word

  • [FEEDBACK] not possible with full-text search. may be regex search on all fields?

• Search -> need a way to clear the search query. Ask john for the design on this one.

• Search -> when i type in the search box, if i press 'enter', the search needs to execute ( unless we implement search as i type )

• Search -> give the search bar a top and bottom margin of 30px.

• Pagination - default to 15 per page

• Updating an item - put the submit button on the right of the form. On the left, and a link that says 'Cancel'

• Add new screen - needs the same text treatment for the title.

• Create life event -> put "Not To Says" before "To Says"

• Create life event -> change the "To Says" label to "What to say instead"

• Create life event -> change the "Not To Says" label to "Things not to say"

• Chnage Phases to "druation_description" - make it a text field

  • [FEEDBACK] we need wait for Byron on this. Other wise the app will break

• Apply sorting, search and paginiation to all pages

• Long forms have not bottom margin - add 50px or so bottom margin on forms