UX improvements - Githubissues

ECMWFCode4Earth / vAirify

code repository for 2024 Code for Earth project #16

http://136.156.139.13

MIT License

4 stars 1 forks source link

UX improvements #268

Open tjohnson-scottlogic opened 4 months ago

tjohnson-scottlogic commented 4 months ago

Various UI improvements as shown below:

Note that the combination of the date picker and the time range is covered by a separate ticket, #292

Acceptance Criteria

Summary page - Column width has been reduced (to make the table a bit tighter)
City view - The "City" breadcrumb link is not underlined on hover
City view - The "City" breadcrumb link has a fixed width so the city name is not shoved across when hovered
Graphs - plot points smaller and line thicker to make them sleeker and easier on the eyes. E.g both to 2px.
Update the date picker button to say 'Update'
On select make the date window dropdown appear in the same colours as the date picker (i.e. dark mode)

Test Checklist:

[x] Test Analysis & discussion with developer
[x] Write Test Cases / Charters
[x] Test Cases & Charters Reviewed
[x] Test Cases Executed
[x] Test Charters Executed
[ ] Regression tests executed
~~[ ] Automation Tests added to project~~

lincent commented 3 months ago

Graph plot points - PR-321

mwalker-scottlogic commented 2 months ago

Test Analysis:

As the coding phase is complete, the testing of this is limited in scope to manual testing and to passing regression testing

Manual testing required:

check the below points on the page on chrome on a 1920 x 1200 monitor
- Summary Page:
- Verify all columns of table fit on the screen in full on a 1920 x 1200 monitor ✅
- City Page:
- Verify on hover the "City" breadcrumb link is not underlined ✅
- Verify on hover the "City" breadcrumb link does not move the the city name across ✅
- Check each graph - plot points smaller and line thicker to make them sleeker and easier on the eyes ✅ (see pr for evidence
- Check the date picker confirm button says 'Update' ✅
- Verify the forecast window dropdown is the same colour as the date dropdown ✅
Charter 31: Explore the UI with different screen sizes browsers to discover UX surprises ✅

mnyamunda-scottlogic commented 2 months ago

Finding The grid column is set to have less width so the user doesn't have to scroll to see the rest of the pollutants. In a rare case sometimes the grid opens like so: Meaning the user would have to manually resize the columns to fully see the contents.

mwalker-scottlogic commented 2 months ago

Finding

AC 'City view - The "City" breadcrumb link has a fixed width so the city name is not shoved across when hovered'

This seems to be working however I have found a small issue with it if the city name is pushed over two lines (eg, go to city page for Rio de Janiro and make the window small until the name splits), then on breadcrumb hover it does get pushed.

mwalker-scottlogic commented 2 months ago

The grid column is set to have less width so the user doesn't have to scroll to see the rest of the pollutants. In a rare case sometimes the grid opens like so:

Raised ticket: https://github.com/orgs/ECMWFCode4Earth/projects/12/views/6?pane=issue&itemId=79693758

mwalker-scottlogic commented 2 months ago

AC 'City view - The "City" breadcrumb link has a fixed width so the city name is not shoved across when hovered'

This seems to be working however I have found a small issue with it if the city name is pushed over two lines (eg, go to city page for Rio de Janiro and make the window small until the name splits), then on breadcrumb hover it does get pushed.

Raised ticket: https://github.com/orgs/ECMWFCode4Earth/projects/12/views/6?pane=issue&itemId=79694252

mwalker-scottlogic commented 2 months ago

Closing ticket as a result