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

[WIP] Visual improvements #999

Draft
wants to merge 6 commits into
base: cwvtech-category-dashboard
Choose a base branch
from
Draft

[WIP] Visual improvements #999

wants to merge 6 commits into from

Conversation

sarahfossheim
Copy link
Collaborator

@sarahfossheim sarahfossheim commented Jan 16, 2025 •
edited
Loading

Should be a rather small PR, focused on styling improvements to the existing features. Based on the category dashboard PR.

Added

  • Images next to the technologies in the summary/comparison tables
  • Less distance between the checkboxes and tech names in the category summary table
  • Tech descriptions in the tech drilldown view
  • Good CWV visualization (progress bar) in the summary/comparison tables
  • Improved Lighthouse progress circles
  • More obvious client dropdown (Tech Report: Minor Visual Recommendations #990)

In progress

  • Lighthouse progress circles in the comparison tables

Still left to add

  • Add images next to the tech name in the drilldown view
  • Improved color combinations in the line chart in the multi-tech view

Screenshots

Comparison view

4 technologies selected (React, Angular, jquery, Bootstrap), with a client selector on top of the page, and a summary table underneath. The summary shows the tech name + icon, # origins, % good cwvs as a number + progress bar, Lighthouse performance and lighthouse accessibility as a number + lighthouse color coded donut progress bar, and selected client.

Drilldown view

Drilldown view of Angular, showing the summary cards with a client selector on top of the page

This was linked to issues Jan 16, 2025
Tech Report: Overall good CWV vs Origins mismatch #991
Open
Tech Report: Minor Visual Recommendations #990
Open
@sarahfossheim sarahfossheim changed the title Visual improvements Visual improvements [WIP] Jan 20, 2025
@sarahfossheim sarahfossheim added enhancement Tech Report HTTP Archive Technology Report labels Jan 20, 2025
@sarahfossheim sarahfossheim changed the title Visual improvements [WIP] [WIP] Visual improvements Jan 20, 2025
@sarahfossheim sarahfossheim self-assigned this Jan 20, 2025
@sarahfossheim sarahfossheim marked this pull request as draft January 20, 2025 00:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rviscomi rviscomi Awaiting requested review from rviscomi

Assignees

@sarahfossheim sarahfossheim

Labels
enhancement Tech Report HTTP Archive Technology Report
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Tech Report: Overall good CWV vs Origins mismatch Tech Report: Minor Visual Recommendations
1 participant
@sarahfossheim