Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve display of information in dashboard #57

Merged
merged 6 commits into from
Sep 24, 2024
Merged

Improve display of information in dashboard #57

merged 6 commits into from
Sep 24, 2024

Conversation

danlivings-dxw
Copy link
Contributor

This introduces various graphical improvements to the display of information within the Towtruck dashboard:

  • The up/down arrow icons in the sortable column headers are now more predictably positioned.
  • The headers for the table of repositories will now stick to the top of the screen during scrolling.
  • Repository tags are now displayed in small capsules, similar to how they display on GitHub.
  • Languages are now displayed in a colour-coded emblem next to the repository name.
  • Dependabot alert counts are now displayed next to the language emblem/repository name.
  • The <h2> tag intended to display the organisation name at the top of the dashboard has been fixed.
  • The contents of cells in sortable columns will stick near the top of the screen during scrolling so that this information is still visible when large dependency lists are expanded.
  • Table columns have been changed to a fixed width to make the layout more visually predictable when the content changes.

Example:
image

@danlivings-dxw
Make sorting icons more predictably positioned
20c5ddc 
When sorting tables by a particular column, the up/down arrow icons
would often change positions relative to the text, making the column
width and header height unpredictable. This ensures that they stay in a
predictable position, making the width and height more consistent.
@danlivings-dxw
Increase the z-index on tooltips
668b515 
This will allow them to display over the table header.
@danlivings-dxw
Introduce a Tailwind colour for each programming language
5a02f56 
This can be used to present colour-coded labels to visually distinguish
programming languages at a glance.
@danlivings-dxw
Rearrange table contents
8cf5b53 
This places the information that's not sortable in one column, now with
the heading 'Repository'. The programming language is displayed as a
colour-coded badge next to the repository name, and tags are presented
as small capsules.
@danlivings-dxw
Fix missing organisation name in h2 tag
959ae51
@danlivings-dxw
Make information in sortable columns sticky within their row
9fe9150 
Each row in the table can become quite tall when the list of
dependencies is expanded. This allows information in the sortable
columns to not scroll off the top of the view until the row itself is
leaving the view, so that the information is visible most of the time.
@danlivings-dxw danlivings-dxw linked an issue Sep 23, 2024 that may be closed by this pull request
Coalesce some repo information into a single table column #56
Closed
adamhughes86
adamhughes86 approved these changes Sep 24, 2024
View reviewed changes
Copy link
Contributor

@adamhughes86 adamhughes86 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Works well and the improvements to the UI reflow changes are really helpful

@danlivings-dxw danlivings-dxw merged commit 92e1e2a into main Sep 24, 2024
3 checks passed
@danlivings-dxw danlivings-dxw deleted the feature/display-improvements branch September 24, 2024 11:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@adamhughes86 adamhughes86 adamhughes86 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Coalesce some repo information into a single table column
2 participants
@danlivings-dxw @adamhughes86