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.

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

report: make metric value more prominent in table #13036

Merged
merged 2 commits into from
Sep 10, 2021

Conversation

connorjclark
Copy link
Collaborator

First pass at tweaking the metrics table to new design. Just making the value bigger here, and shifting some of the grid stuff. Also, I tossed in a tweak to the mobile version.

image

image

image

image

@connorjclark connorjclark requested a review from a team as a code owner September 9, 2021 21:16
@connorjclark connorjclark requested review from patrickhulce and removed request for a team September 9, 2021 21:16
@google-cla google-cla bot added the cla: yes label Sep 9, 2021
@@ -777,7 +791,7 @@
flex: 1;
}

.lh-metric .lh-metric__innerwrap::before,
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

using :before is hard to work with, so I made a new div for the icon

Copy link
Collaborator

@patrickhulce patrickhulce left a comment

Choose a reason for hiding this comment

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

lgtm

@@ -104,8 +104,8 @@
--icon-square-size: calc(var(--score-icon-size) * 0.88);
--image-preview-size: 48px;
--metric-toggle-lines-fill: #7F7F7F;
--metric-value-font-size: 28px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

fwiw the mocks have 20/12 ratio which puts the target for 16px at ~26.6px

this looked fine to me though

report/assets/styles.css Show resolved Hide resolved
report/assets/styles.css Outdated Show resolved Hide resolved
report/assets/styles.css Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants