To apply the latest changes to your templates install or update to web-template-release@latest.
🟢 New
Tag - New component #1346 #1268 #1258
Details: The tags have 6 colour variations and scale to match the size of the immediate parent element, e.g. inside headings.
What was changed: HTML, CSS
Documentation: Tags and Card with tags
Internal ticket reference: QOLDEV-637
Table - New searchable and sortable table with pagination #1154 #1168 #1194 #1221 #1326
Details: Was previously only available on qld.gov.au via the CMS. Have transferred and is now baked into the SWE codebase.
What was changed: CSS, JS
Documentation: Tables
Internal ticket reference: QOLDEV-569
🔵 Improvements
Topic index page template #1317 #1337
Details: 7 improvements were made, as listed below.
Documentation: Topic index page
What was changed: HTML, CSS
Internal ticket reference: QOLDEV-668
Improvement 1: Section navigation - updated the style of the active item to prevent dead-end clicks on the item.
| Before | After |
|---|---|
 |
 |
Improvement 2: Asides - Updated colour of headings to be the same as paragraphs, and not links. Changed heading size to H3 for improved hierarchy.
| Before | After |
|---|---|
 |
 |
Improvement 3: Increased the width of the main content columns to improve scan/readability of the content. With an aside the main content column is now one column, without an aside it is two columns (992px and above).
Improvement 4: Thumbnail images are optional (applied at a page level). If used they should be a clear visual signal that facilitates quick, intuitive navigation and helps users find what they're looking for effortlessly. We heard from the community, it’s not always easy or applicable to find an image that does this effectively and an image may instead be an unnecessary and distracting decoration.
| Before | After |
|---|---|
 |
 |
| Before | After |
|---|---|
 |
 |
Improvement 5: Under index items, publishers now have an option to display short descriptions only (applied at a page level). By default, a list of links to child pages is displayed, along with a short description for pages without child pages. Only deviate from the default if it improves the user experience of your page/content.
| Short description only | A mix of short descriptions and links list |
|---|---|
 |
 |
Improvement 6: Removed 'share this page' icons and CC copyright. On mobile we found that their placement was inadvertently suggesting to users that they had reached the end of the page, causing the content below to be missed. There was also next to no engagement with them.
Improvement 7: On mobile, index items now use the card component. We found the previous alternating and repetitive contrast/pattern caused some visual discomfort and strain.
| Before | After |
|---|---|
 |
 |
Franchise landing page template
Details: Due to having similar UI patterns as the topic index page, improvements 2, 3, 6 and 7 above were also applied to the Franchise landing page template. The only difference being improvement 3 where the main content area has changed from 3 columns to 2 columns (at 992px and above), to improve scan/readability.
Documentation: Franchise landing page
What was changed: HTML, CSS
Social media icon - Twitter is now 'X' #1280 #1315 #1324
Detail: The icon has been replaced with new 'X' logo in 'share this page', the footer and asides.
What was changed: HTML, CSS
Internal ticket reference: QOLDEV-546
Quick exit - Help text now mentions the option of using the 'ESC' key #1257
What was changed: HTML, CSS
Documentation: Quick exit
Internal ticket reference: QOLDEV-635
| Before | After |
|---|---|
 |
 |
Forms - Radio and Checkbox - Added styles for disabled state #1220
What was changed: CSS
Internal ticket reference: QOLDEV-622
🟡 Fixes
Accordion - Removed unnecessary space #1143
Details: Was occurring at ~485px and below, on accordions with multi-line heading text.
What was changed: CSS
Documentation: Accordion
Internal ticket reference: QOLDEV-533
| Before | After |
|---|---|
 |
 |
Global search - Fix to alignment of icons and button in the suggestion dropdown #1142 #1195 #1239
What was changed: CSS
Internal ticket reference: QOLDEV-580
| Before | After |
|---|---|
 |
 |
Quick exit - Fixed z-index conflict with accordions #1155
What was changed: CSS
Internal ticket reference: QOLDEV-591
| Before | After |
|---|---|
 |
 |
Quick exit - Was disappearing from the viewport when scrolling a long page #1169
What was changed: JS
Internal ticket reference: QOLDEV-602
Table - Fix to top border of striped table #1144 #1150
What was changed: CSS
Internal ticket reference: QOLDEV-592
| Before | After |
|---|---|
 |
 |
Table - Bootstrap class 'table-sm' is now compatible with SWE #1218
What was changed: CSS
Internal ticket reference: QOLDEV-620
Search results - Fix to focus border of the clear button #1156
What was changed: CSS
Internal ticket reference: QOLDEV-596
| Before | After |
|---|---|
 |
 |
Forms - Fix to active border on custom radio tabs #1160
What was changed: CSS
Internal ticket reference: QOLDEV-600