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

report: responsive styles #5706

Merged
merged 3 commits into from
Aug 9, 2018
Merged

report: responsive styles #5706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d5f092
report: responsive styles
paulirish Jul 23, 2018
4a5edda
'--report-content-width'.replace(/-content/g, '')
paulirish Jul 30, 2018
9b614e7
upstream changes from hwi's review/psirender branch
paulirish Aug 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions lighthouse-core/report/html/renderer/performance-category-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
const keyMetrics = metricAudits.filter(a => a.weight >= 3);
const otherMetrics = metricAudits.filter(a => a.weight < 3);

const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metric-container');
const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-columns');
const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-column');
const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-column');

keyMetrics.forEach(item => {
metricsColumn1El.appendChild(this._renderMetric(item));
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/report/html/renderer/report-ui-features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ class ReportUIFeatures {
this.headerSticky.style.transform = `translateY(${heightDiff * scrollPct * -1}px)`;
this.headerBackground.style.transform = `translateY(${scrollPct * this.headerOverlap}px)`;
this.lighthouseIcon.style.transform =
`translate3d(calc(var(--report-content-width) / 2),` +
`translate3d(calc(var(--report-width) / 2),` +
` calc(-100% - ${scrollPct * this.headerOverlap * -1}px), 0) scale(${1 - scrollPct})`;
this.lighthouseIcon.style.opacity = Math.max(0, 1 - scrollPct).toString();

Expand Down
106 changes: 69 additions & 37 deletions lighthouse-core/report/html/report-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@
--metric-timeline-rule-color: #b3b3b3;
--display-value-gray: hsl(216, 5%, 39%);
--report-width: calc(60 * var(--body-font-size));
--report-content-width: calc(var(--report-width));
--report-header-height: 161px;
--report-header-color: #202124;
--navitem-font-size: var(--body-font-size);
Expand All @@ -80,16 +79,17 @@

/* Voodoo magic here to get narrow columns. 0 doesn't size the column like our friend 1px does */
--bytes-col-width: 1px;

--pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>check</title><path fill="hsl(139, 70%, 30%)" d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/></svg>');
--average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="hsl(31, 100%, 45%)" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>');
--fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>warn</title><path fill="hsl(1, 73%, 45%)" d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>');

--av-timer-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M22 34c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zm0-28v8h4v-3.84c6.78.97 12 6.79 12 13.84 0 7.73-6.27 14-14 14s-14-6.27-14-14c0-3.36 1.18-6.43 3.15-8.85L24 26l2.83-2.83-13.6-13.6-.02.04C8.84 12.89 6 18.11 6 24c0 9.94 8.04 18 17.99 18S42 33.94 42 24 33.94 6 23.99 6H22zm14 18c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-24 0c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z" fill="hsl(216, 5%, 39%)"/></svg>');
--content-paste-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="hsl(216, 5%, 39%)" d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
--av-timer-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="hsl(216, 5%, 39%)"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0 0 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9a8.994 8.994 0 0 0 7.03-14.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>');
--photo-filter-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="none" d="M0 0h48v48H0V0z"/><path d="M38.04 20v18H10V10h18V6H10.04c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4V20h-4zM34 20l1.88-4.12L40 14l-4.12-1.88L34 8l-1.88 4.12L28 14l4.12 1.88zm-7.5 1.5L24 16l-2.5 5.5L16 24l5.5 2.5L24 32l2.5-5.5L32 24z" fill="hsl(216, 5%, 39%)"/></svg>');
--visibility-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z" fill="hsl(216, 5%, 39%)"/></svg>');
--check-circle-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" fill="hsl(216, 5%, 39%)"/></svg>');
--check-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M0 0h48v48H0z" fill="none"/><path d="M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z"/></svg>');

--search-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0a9 9 0 1 1 .001-18.001A9 9 0 0 1 19 28z" fill="hsl(216, 5%, 39%)"/><path d="M0 0h48v48H0z" fill="none" /></svg>');
--remove-circle-icon-url: url('data:image/svg+xml;utf8,<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="hsl(216, 5%, 39%)"/></svg>');
}
Expand Down Expand Up @@ -142,10 +142,10 @@
outline: -webkit-focus-ring-color auto 3px;
}
.lh-root summary:focus {
outline: 1px solid hsl(217, 89%, 61%);
outline: none;
box-shadow: 0 0 0 1px hsl(217, 89%, 61%);
}


.lh-root [hidden] {
display: none !important;
}
Expand All @@ -156,21 +156,21 @@
}


.lh-audit__description,
.lh-load-opportunity__description,
.lh-details {
.lh-audit__description {
--inner-audit-left-padding: calc(var(--text-indent) + var(--lh-audit-index-width) + 2 * var(--audit-item-gap));
--inner-audit-right-padding: calc(var(--text-indent) + 2px);
margin-left: var(--inner-audit-left-padding);
margin-right: var(--inner-audit-right-padding);
padding-left: var(--inner-audit-left-padding);
padding-right: var(--inner-audit-right-padding);
padding-top: 8px;
padding-bottom: 8px;
}

.lh-details {
font-size: var(--body-font-size);
margin-top: var(--default-padding);
margin-bottom: var(--default-padding);
/* whatever the .lh-details side margins are */
width: calc(100% - var(--inner-audit-left-padding) - var(--inner-audit-right-padding));
width: 100%;
}

.lh-details.flex .lh-code {
Expand Down Expand Up @@ -318,17 +318,39 @@

/* Perf Metric */

.lh-metric-container {
.lh-columns {
display: flex;
width: 100%;
}
@media screen and (max-width: 640px) {
.lh-columns {
flex-wrap: wrap;

.lh-metric-column {
}
}

.lh-column {
flex: 1;
}
.lh-metric-column:first-of-type {
margin-right: 20px;
.lh-column:first-of-type {
margin-right: 24px;
}

@media screen and (max-width: 800px) {
.lh-column:first-of-type {
margin-right: 8px;
}
}
@media screen and (max-width: 640px) {
.lh-column {
flex-basis: 100%;
}
.lh-column:first-of-type {
margin-right: 0px;
}
}


.lh-metric {
border-bottom: 1px solid var(--report-secondary-border-color);
}
Expand All @@ -347,6 +369,7 @@
font-size: var(--body-font-size);
line-height: var(--body-line-height);
display: flex;
white-space: nowrap;
}

.lh-metric__name {
Expand Down Expand Up @@ -389,6 +412,7 @@

.lh-metric--average .lh-metric__value {
color: var(--average-color);
padding-left: 16px;
}
.lh-metric--average .lh-metric__value::after {
background: var(--average-icon-url) no-repeat 50% 50%;
Expand Down Expand Up @@ -481,10 +505,10 @@

.lh-filmstrip-container {
padding: 0 var(--expandable-indent);
margin: 0 auto;
/* smaller gap between metrics and filmstrip */
margin: -16px auto 0 auto;
}


.lh-filmstrip {
display: flex;
flex-direction: row;
Expand All @@ -503,29 +527,30 @@
max-width: 60px;
}

@media screen and (max-width: 750px) {
.lh-filmstrip {
flex-wrap: wrap;
justify-content: left;
}
.lh-filmstrip__frame {
margin: calc(var(--default-padding) / 3);
}
}

/* Audit */

.lh-audit {
border-bottom: 1px solid var(--report-secondary-border-color);
}

.lh-audit:last-child {
border-bottom: none;
}

.lh-audit--error .lh-audit__display-text {
color: var(--fail-color);
}

/* Audit Group */

.lh-audit-group {
padding: var(--lh-audit-group-vpadding) 0;
border-bottom: 1px solid var(--report-secondary-border-color);
}

.lh-audit-group:last-child {
border-bottom: none;
margin: var(--lh-audit-group-vpadding) 0;
}

.lh-audit-group__header {
Expand Down Expand Up @@ -560,7 +585,7 @@
background-image: var(--check-icon-url);
}
.lh-audit-group--diagnostics .lh-audit-group__header::before {
background-image: var(--search-icon-url);
background-image: var(--content-paste-icon-url);
}
.lh-audit-group--opportunities .lh-audit-group__header::before {
background-image: var(--photo-filter-icon-url);
Expand All @@ -586,7 +611,10 @@

.lh-audit-group__itemcount {
color: var(--display-value-gray);
margin: 0 10px;
margin: 3px 10px 0;
}
.lh-audit-group__summary .lh-chevron {
margin-top: calc((var(--body-line-height) - 5px) / 2);
}

.lh-audit-group__description {
Expand All @@ -612,7 +640,7 @@

.lh-container {
display: flex;
max-width: var(--report-content-width);
max-width: var(--report-width);
word-wrap: break-word;
margin: 0 auto;
}
Expand All @@ -631,7 +659,7 @@
.lh-header-container {
display: block;
margin: 0 auto;
max-width: var(--report-content-width);
max-width: var(--report-width);
position: relative;
word-wrap: break-word;
}
Expand Down Expand Up @@ -683,7 +711,7 @@

.lh-scores-header {
display: flex;
justify-content: center;
justify-content: left;
overflow-x: hidden;
position: relative;
padding: var(--section-indent) calc(var(--section-indent) / 2) calc(var(--section-indent) * 2);
Expand All @@ -693,6 +721,10 @@
border: 0;
}

.lh-scores-header .lh-gauge__wrapper {
margin: 0 4px;
}

.lh-scorescale {
color: var(--medium-75-gray);
padding: 0 calc(var(--section-indent) * 1.5) 0;
Expand All @@ -703,6 +735,7 @@

.lh-scorescale-range {
margin-left: 10px;
white-space: nowrap;
}

.lh-scorescale-range::before {
Expand Down Expand Up @@ -739,9 +772,7 @@

.lh-category {
--circle-size: calc(2.5 * var(--header-font-size));

padding: var(--section-padding);
border-top: 1px solid var(--report-border-color);
}

.lh-category:first-of-type {
Expand Down Expand Up @@ -778,7 +809,7 @@
float: right;
}

.lh-category .lh-score__gauge {
.lh-category-header .lh-score__gauge {
margin-left: var(--section-indent);
}

Expand Down Expand Up @@ -893,8 +924,9 @@ summary.lh-passed-audits-summary {

/* Keep bytes columns narrow if they follow the URL column */
.lh-table-column--url + th.lh-table-column--bytes,
.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--bytes {
width: var(--bytes-col-width);
.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--bytes,
.lh-table-column--url + .lh-table-column--bytes + th.lh-table-column--timespanMs {
max-width: var(--bytes-col-width);
}

.lh-table-column--code {
Expand Down
5 changes: 3 additions & 2 deletions lighthouse-core/report/html/templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@
position: absolute;
top: var(--report-header-height);
right: 50%;
transform: translate3d(calc(var(--report-content-width) / 2), -100%, 0);
transform: translate3d(calc(var(--report-width) / 2), -100%, 0);
opacity: 1;
transform-origin: bottom right;
will-change: transform, opacity;
Expand Down Expand Up @@ -527,11 +527,12 @@

.lh-gauge__percentage {
--spacer: calc((var(--circle-size) - var(--inset-size)) / 2);
width: var(--inset-size);
width: 100%;
height: var(--inset-size);
position: absolute;
border-radius: inherit;
font-size: var(--header-font-size);
line-height: var(--header-font-size);
text-align: center;
top: calc(var(--circle-size) / 3);
}
Expand Down