TWE-44 | Front end fine-tuning

[shyusu4]

Link to Ticket

Description of Changes Made

• Remove all dates from case study pages
• Remove all filter tags from blogs index, blogs listing, and blog detail page
• Increase the speed of the dynamic hero and remove the touch interaction functionality on mobile (it was blocking the user from scrolling down the page)
• Lazy load images on the home page division signpost cards
• Modify navigation styles:
  • Add hover styles to primary navigation to match the design
  • Fix an issue where the arrow icons in the secondary submenu navigation remained visible when closing the menu
• General styling tweaks:
  • Add bottom margin to the header on the icon keypoints block
  • Make the font size smaller for the featured services cards button link
  • Add the primary theme color to textual stats
  • Change the footer cta heading to a motif heading (plain white on the home page)

How to Test

Navigate throughout your local build and view the relevant components.

Screenshots

Expand to see more

MR Checklist

• Add a description of your pull request and instructions for the reviewer to verify your work.
• If your pull request is for a specific ticket, link to it in the description.
• Stay on point and keep it small so the merge request can be easily reviewed.
• Tests and linting passes.

Unit tests

• Added
• Not required

Documentation

• Updated build docs
• Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Not required

Browser testing

• I have tested in the following browsers and environments (edit the list as required)
  • Latest version of Chrome on mac
  • Latest version of Firefox on mac
  • Latest version of Safari on mac
  • Safari on last two versions of iOS
  • Chrome on last two versions of Android
• Not required

Data protection

• Not relevant
• This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

• I have tested the changes in both light and dark mode
• The change is not relevant to dark and light mode

Accessibility

• Automated WCAG 2.1 tests pass
• HTML validation passes
• Manual WCAG 2.1 tests completed
• I have tested in a screen reader
• I have tested in high-contrast mode
• Any animations removed for prefers-reduced-motion
• Not required

Sustainability

• Images are optimised and lazy-loading used where appropriate
• SVGs have been optimised
• Perfomance and transfer of data considered
• If JavaScript is needed alternatives have been considered
• Not required

Pattern library

• The pattern library component for this template displays correctly, and does not break parent templates
• The styleguide is updated if relevant
• Changes are not relevant the pattern library

[SharmaineLim]

Had a poke around:

Post dates

✅ Work pages do not display the post dates
✅ Historic work pages do not display the post dates
✅ Work index pages do not display the post dates on the results

Tags in the blogs

✅ Blog listing page does not display tags as filter options
✅ Blog listing page does not display tags on the results
❓ Blog post page still displays the tags (I checked with Lisa, we want to hide these too)

Others

✅ Margin & styling restored to the keypoints with icons block's heading (looks ok with intro also)
✅ Featured services block heading & intro look consistent
✅ Person page intro aligned with content
✅ Dynamic hero changes faster

Looking good! Thanks, Sherry :)

[shyusu4]

thank you for taking a look at this, @SharmaineLim! I've now removed the tags for the blog post pages too :)

[chris-lawton]

Thanks @shyusu4 - updated changes look good!