UX improvements

[tjohnson-scottlogic]

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]

Graph plot points - PR-321

[mwalker-scottlogic]

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]

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]

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]

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]

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]

Closing ticket as a result