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

Tech Report: Visual improvements #999

Merged
merged 46 commits into from
Feb 14, 2025
Merged

Tech Report: Visual improvements #999

merged 46 commits into from
Feb 14, 2025

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
  • Lighthouse progress circles in the comparison tables
  • Add images next to the tech name in the drilldown view
  • Add category descriptions

Still left to add

  • 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

sarahfossheim and others added 30 commits August 28, 2024 02:03
@sarahfossheim
custom techreport header
d3987bf
@sarahfossheim
add prototype categories page
b21cc6e
@sarahfossheim
add filters in sidebar and change page based on amount of techs
04628eb
@sarahfossheim
add new nav and filter structure (wip
07171f7
@sarahfossheim
responsive filters prototype
c312252
@sarahfossheim
wip: add collapsible filter sidebar
706d6f0
@sarahfossheim
fix bug with double close button
fa8c689
@sarahfossheim
add aria
e58f7ce
@sarahfossheim
merge in master
7f837c1
@sarahfossheim
add checkboxes on category page, update texts, minor bugfixes
6b24d96
@sarahfossheim
select correct technology in comparison view, remove category selecto…
cf7c0e8 
…r, minor bugfixes
@sarahfossheim
fix css linting
bf11a13
@sarahfossheim
fix linting
ce8df02
@sarahfossheim
Merge branch 'main' into cwvtech-category-dashboard
bc5af01
@sarahfossheim
fix linting
b74de3b
@sarahfossheim
Merge remote-tracking branch 'refs/remotes/origin/cwvtech-category-da…
728d42f 
…shboard' into cwvtech-category-dashboard
@sarahfossheim
fix sorting order multi apps
0d062cc
@sarahfossheim
sort table alternative correctly
aea33e1
@sarahfossheim
merge main into branch
7aaf182
@sarahfossheim
close <nav>
fea35f0
@sarahfossheim
merge master into branch
c16fe45
@sarahfossheim
update tests
3987516
@sarahfossheim
format tests
5a45a40
@sarahfossheim @rviscomi
Update src/js/techreport/tableLinked.js
d67c907 
Co-authored-by: Rick Viscomi <[email protected]>
@sarahfossheim
fix geo/rank bug, long category list bug, adoption bug, add category …
7820ed5 
…summary, improve landing page card interaction
@sarahfossheim
add technologies to summary in category page
cd10b24
@sarahfossheim
add timestamp to category page and format large numbers
273d19b
@sarahfossheim
remove console.log
37dbaeb
@sarahfossheim
select correct technology in comparison view filters
d861090
@sarahfossheim
make menu responsive on mobile + track aria-expanded status
3a125ad
This was linked to issues Jan 16, 2025
Tech Report: Overall good CWV vs Origins mismatch #991
Closed
Tech Report: Minor Visual Recommendations #990
Closed
@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
@rviscomi rviscomi marked this pull request as ready for review January 30, 2025 17:31
@rviscomi rviscomi changed the title [WIP] Visual improvements Tech Report: Visual improvements Jan 30, 2025
tunetheweb
tunetheweb approved these changes Feb 13, 2025
View reviewed changes
Copy link
Member

@tunetheweb tunetheweb left a comment

Choose a reason for hiding this comment

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

LGTM

@sarahfossheim
Copy link
Collaborator Author

@tunetheweb added the bug fix for the origin [object object] value to this PR :)

two summary cards, one showing 8M+ origins, the other one 297 technologies

Base automatically changed from cwvtech-category-dashboard to main February 13, 2025 21:06
@tunetheweb
Copy link
Member

Sarah, could you have a look at this? May I did a bad merge as there were some conflicts, but it's saying we have multiple id="client-breakdown" now?

@sarahfossheim
Copy link
Collaborator Author

@tunetheweb the client dropdown was moved in this PR, seems like it ended up twice on every page after merging the previous PR. Fixed it now 👍🏻

@tunetheweb tunetheweb merged commit 12b5896 into main Feb 14, 2025
10 checks passed
@tunetheweb tunetheweb deleted the cwvtech-visuals branch February 14, 2025 13:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tunetheweb tunetheweb tunetheweb approved these changes

@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
2 participants
@sarahfossheim @tunetheweb