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: use css grid for metrics #9273
Changes from 3 commits
8984f34
2a4bb27
7991c2d
3ceb57e
04dc779
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -97,7 +97,6 @@ | |
--header-line-height: 24px; | ||
--highlighter-background-color: var(--report-text-color); | ||
--icon-square-size: calc(var(--score-icon-size) * 0.88); | ||
--metric-description-padding: 0 0 2px calc(var(--score-icon-margin-left) + var(--score-icon-size) + var(--score-icon-margin-right)); | ||
--metric-toggle-lines-fill: #7F7F7F; | ||
--metrics-toggle-background-color: var(--color-gray-200); | ||
--plugin-badge-background-color: var(--color-white); | ||
|
@@ -428,7 +427,8 @@ | |
.lh-audit--fail .lh-audit__display-text { | ||
color: var(--color-fail-secondary); | ||
} | ||
.lh-audit--fail .lh-audit__score-icon { | ||
.lh-audit--fail .lh-audit__score-icon, | ||
.lh-audit--error .lh-audit__score-icon { | ||
border-left: calc(var(--score-icon-size) / 2) solid transparent; | ||
border-right: calc(var(--score-icon-size) / 2) solid transparent; | ||
border-bottom: var(--score-icon-size) solid var(--color-fail); | ||
|
@@ -444,10 +444,6 @@ | |
background: var(--color-gray-400); | ||
} | ||
|
||
.lh-audit--error .lh-audit__score-icon { | ||
display: none; | ||
} | ||
|
||
.lh-audit--informative .lh-audit__display-text { | ||
color: var(--color-gray-600); | ||
} | ||
|
@@ -570,10 +566,9 @@ | |
} | ||
|
||
.lh-metric__innerwrap { | ||
display: flex; | ||
display: grid; | ||
grid-template-columns: 1fr 80% 20%; | ||
align-items: center; | ||
flex-wrap: wrap; | ||
justify-content: space-between; | ||
padding: 10px 0; | ||
} | ||
|
||
|
@@ -593,8 +588,9 @@ | |
|
||
.lh-metric__description { | ||
display: none; | ||
grid-column-start: 1; | ||
grid-column-end: 3; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. looking at https://yuinchien.com/sandbox/lighthouse/ it seems this is currently misaligned... perhaps: grid-column-start: 2;
grid-column-end: 4; ? i dont really know grid though... can you doublecheck? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ya that did the trick |
||
color: var(--report-text-color-secondary); | ||
padding: var(--metric-description-padding); | ||
} | ||
|
||
.lh-metric__value { | ||
|
@@ -694,7 +690,8 @@ | |
.lh-metric--fail .lh-metric__value { | ||
color: var(--color-fail-secondary); | ||
} | ||
.lh-metric--fail .lh-metric__innerwrap::before { | ||
.lh-metric--fail .lh-metric__innerwrap::before, | ||
.lh-metric--error .lh-metric__innerwrap::before { | ||
border-left: calc(var(--score-icon-size) / 2) solid transparent; | ||
border-right: calc(var(--score-icon-size) / 2) solid transparent; | ||
border-bottom: var(--score-icon-size) solid var(--color-fail); | ||
|
@@ -705,11 +702,6 @@ | |
color: var(--color-fail-secondary); | ||
} | ||
|
||
/* Hide icon if there was an error */ | ||
.lh-metric--error .lh-metric__innerwrap::before { | ||
display: none; | ||
} | ||
|
||
/* Perf load opportunity */ | ||
|
||
.lh-load-opportunity__cols { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wait what's the need for 3 columns, aren't we just using two?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
also what is the value of
1fr
when we've supposedly already used up 100% of the available width...There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the first column is the score icon
1fr is a nice way to say "give this some minimum space" but still assigned the 2nd and 3rd columns with percentages that add up to 100