91 styling for tabs in visit form #93
Conversation
|
@eatyourpeas if you're happy with this then feel free to merge! Otherwise any other design changes lmk and I can implement them |
| @@ -29,7 +29,12 @@ | |||
| {% endfor %} | |||
|
|
|||
| <div role="tablist" class="tabs tabs-bordered"> | |||
| <input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Routine Measurements" checked/> | |||
| <input type="radio" name="my_tabs_1" role="tab" class="tab font-bold | |||
| {% for category in routine_measurements_categories %} | |||
There was a problem hiding this comment.
We could also consider passing an extra variable through context to avoid the iteration here? something like routine_measurements_category_has_errors? Same for annual review below.
If we stick with calculating it in the template please do tab the logic appropriately and use new lines as you would for anything else
There was a problem hiding this comment.
Actioned! Thanks for the suggestion, is much tidier now. Before we merge I'd like to make some changes to the Routine Measurements form so that the errors there can be localised by the user a bit more easily.
|
What do we think of this as error localisation on the form? The idea is to make it 'pop out': 
I'm mindful that we want to keep theme consistent, and we use rcpch_red as our colour for red. As such, I've changed the background colour of 'Measurements' to be 'rcpch_vivid_green' instead of 'rcpch_red' so if an error pops up there, then it is more obvious. |
There was a problem hiding this comment.
This is better thank you @dc2007git. I think there are still too many colours and it is not yet clear I think to users that red means error, pink means complete and blue means unscored. I think possibly we need to think some more about the user journey.
A couple of other things.
- on save the visit date is being lost and therefore shows as None in the table
- you cannot save the form until all the errors are fixed. This is not intuitive if some of the errors are now hidden in fields in an inactive tab - if we are going to force all errors to be fixed before save, we are going to need to signpost to our users more that is what we expect. My feeling is we should allow save but with a warning that some fields still contain errors, maybe with an 'are you sure?' modal.
- I am getting an error with the 'fill with visit date' but that might be my local dev version clashing with the different versions of the model and migrations and so on.
Best probably is that I merge this and raise issues for those items. As @mbarton said earlier, it would be good to get this out early to trusted users to get feedback before it goes too much further.
|
@eatyourpeas it also looks like when editing a User's details, such as their employing organisation, saving does not work either - possibly something wrong with the update logic in both forms then. Will create an issue |
Adds error localisation capabilities to tabs on form as described in #91
If opening a new visit, the tabs will be white. If an error is present on the categories in the form, it will be red. If the contents of the tab have been validated, the tab will be pink.
Also in this PR is a boldening of the tab fonts: