MTTL UI Improvements : 5

Problem to solve

As a user of the MTTL webpage, I want the ability to have a user interface that follows modern web standards and practices, so I can provide a more accessible and consistent web platform.

Intended users

All users of the MTTL webpage

User experience

The user should be able to quickly and accurately identify multiple sources and destinations of data and links.

Proposal

• Change the layout of the progress bar, filter drop downs, search bar, and buttons on top of the KSAT table
• Remove animation on progress bar
• Create an alternate blue/yellow/green color scheme in line with Google Material Design
• Highlight only the ID column as opposed to the entire row
• Change page to full width and increase viewable table area
• Move description column next to ID
• Vertical align table text to top
• Add a line break after each item
• Fix all column's width
• Create link to gitlab repo
• Alter "Study" navbar item to be a dropdown to CCD MQF and PO MQF
• Display icons for links to external (non-MTTL) resources
• Remove "View Source" flag

Further details

Material Design Color Usage: https://material.io/design/color/the-color-system.html#color-usage-and-palettes

External Link Icon: https://fontawesome.com/icons/external-link-alt

Acceptance Criteria

• New colors are correctly displayed and consistent on progress bar, key, and table entries
• Progress bar no longer shows animation
• Only first column background is shaded in MTTL table
• Page contents fills entire browser width
• "Description" column shows next to "ID" in the MTTL table
• All table contents appears at the top of the corresponding table row
• All table contents are displayed with one item per line
• Column width remains static regardless of actual content width
• Dropdown list with links to the CCD MQF and PO MQF display when the "Study" navbar item is clicked
• External link icons are shown for non-MTTL resources
• "View Source" flag is no longer shown