Fix Crux visual issues (#3539)

This commit is contained in:
Peter Hedenskog 2022-01-20 16:04:43 +01:00 committed by GitHub
parent 8ff9b00612
commit 308cab1c28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 10 deletions

View File

@ -11,7 +11,7 @@ mixin sizeCell(title, size)
td.number(data-title=title, data-value= size)= h.size.format(size)
- const crux = pageInfo.data.crux.pageSummary;
- const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift'};
- const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)'};
- const experiences = ['loadingExperience','originLoadingExperience'];
small
@ -126,11 +126,11 @@ each experience in experiences
th #{metrics['first_input_delay']}
th #{metrics['cumulative_layout_shift']}
tr
td
td(data-title=metrics['first_contentful_paint'])
.ct-chart(id='chartFCP' + experience + formFactor)
td
td(data-title=metrics['largest_contentful_paint'])
.ct-chart(id='chartLCP' + experience + formFactor)
td
td(data-title=metrics['first_input_delay'])
.ct-chart(id='chartFID' + experience + formFactor)
td
td(data-title=metrics['cumulative_layout_shift'])
.ct-chart(id='chartCLS' + experience + formFactor)

File diff suppressed because one or more lines are too long

View File

@ -87,21 +87,20 @@
fill: #EAB839;
}
.ct-chart {
.ct-legend {
position: relative;
z-index: 10;
list-style: none;
text-align: center;
text-align: left;
line-height: 0.8;
font-size: 0.8em;
li {
padding-left: 23px;
margin-right: 10px;
margin-bottom: 3px;
cursor: pointer;
display: inline-block;
&:before {
width: 12px;