report: support narrow screens (#6857)
This commit is contained in:
Shane Exterkamp
Paul Irish
Родитель
d3b95b2d69
Коммит
d7a344c8bb
|
|
@ -45,6 +45,8 @@ class ReportUIFeatures {
|
|||
/** @type {HTMLElement} */
|
||||
this.headerBackground; // eslint-disable-line no-unused-expressions
|
||||
/** @type {HTMLElement} */
|
||||
this.headerContent; // eslint-disable-line no-unused-expressions
|
||||
/** @type {HTMLElement} */
|
||||
this.lighthouseIcon; // eslint-disable-line no-unused-expressions
|
||||
/** @type {!HTMLElement} */
|
||||
this.scoresWrapperBg; // eslint-disable-line no-unused-expressions
|
||||
|
|
@ -105,7 +107,7 @@ class ReportUIFeatures {
|
|||
}
|
||||
|
||||
_setupMediaQueryListeners() {
|
||||
const mediaQuery = self.matchMedia('(max-width: 600px)');
|
||||
const mediaQuery = self.matchMedia('(max-width: 500px)');
|
||||
mediaQuery.addListener(this.onMediaQueryChange);
|
||||
// Ensure the handler is called on init
|
||||
this.onMediaQueryChange(mediaQuery);
|
||||
|
|
@ -134,6 +136,7 @@ class ReportUIFeatures {
|
|||
this.headerOverlap = parseFloat(computedMarginTop || '0');
|
||||
this.headerSticky = this._dom.find('.lh-header-sticky', this._document);
|
||||
this.headerBackground = this._dom.find('.lh-header-bg', this._document);
|
||||
this.headerContent = this._dom.find('.lh-header', this._document);
|
||||
this.lighthouseIcon = this._dom.find('.lh-lighthouse', this._document);
|
||||
this.scoresWrapperBg = this._dom.find('.lh-scores-wrapper__background', this._document);
|
||||
this.productInfo = this._dom.find('.lh-product-info', this._document);
|
||||
|
|
@ -226,9 +229,9 @@ 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(var(--report-width-half),` +
|
||||
` calc(-100% - ${scrollPct * this.headerOverlap * -1}px), 0) scale(${1 - scrollPct})`;
|
||||
this.lighthouseIcon.style.opacity = (1 - scrollPct).toString();
|
||||
`translate3d(0,` +
|
||||
`-${scrollPct * this.headerOverlap * -1}px, 0) scale(${1 - scrollPct})`;
|
||||
this.headerContent.style.opacity = (1 - scrollPct).toString();
|
||||
|
||||
// Switch up the score background & shadows
|
||||
this.scoresWrapperBg.style.opacity = (1 - scrollPct).toString();
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
--metric-timeline-rule-color: #b3b3b3;
|
||||
--display-value-gray: hsl(216, 5%, 39%);
|
||||
--report-width: calc(60 * var(--body-font-size));
|
||||
--report-min-width: 400px;
|
||||
/* Edge doesn't support calc(var(calc())) */
|
||||
--report-width-half: calc(30 * var(--body-font-size));
|
||||
--report-header-height: 161px;
|
||||
|
|
@ -711,6 +712,7 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
min-width: var(--report-min-width);
|
||||
z-index: 2;
|
||||
will-change: transform;
|
||||
}
|
||||
|
|
@ -728,6 +730,7 @@
|
|||
|
||||
.lh-report {
|
||||
background-color: #fff;
|
||||
min-width: var(--report-min-width);
|
||||
}
|
||||
@media screen {
|
||||
.lh-report {
|
||||
|
|
@ -915,7 +918,6 @@
|
|||
.lh-report {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
min-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -166,9 +166,8 @@ limitations under the License.
|
|||
}
|
||||
.lh-lighthouse {
|
||||
position: absolute;
|
||||
top: var(--report-header-height);
|
||||
right: 50%;
|
||||
transform: translate3d(var(--report-width-half), -100%, 0);
|
||||
bottom: -4px;
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
transform-origin: bottom right;
|
||||
will-change: transform, opacity;
|
||||
|
|
@ -187,6 +186,7 @@ limitations under the License.
|
|||
color: var(--report-header-color);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
max-width: 60%;
|
||||
}
|
||||
.lh-metadata__results {
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -354,35 +354,37 @@ limitations under the License.
|
|||
} */
|
||||
</style>
|
||||
<div class="lh-header-bg"></div>
|
||||
<div class="lh-lighthouse">
|
||||
<svg width="217" height="148" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<mask id="a" x="-56" y="-54" width="284" height="202" maskUnits="userSpaceOnUse">
|
||||
<path d="M-56-54h284v202H-56z" fill="#fff"></path>
|
||||
</mask>
|
||||
<linearGradient id="b" x1="-525.16" y1="560.08" x2="-524.23" y2="560.08" gradientTransform="matrix(91 0 0 -77 47797 43181)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#f1f3f4"/>
|
||||
<stop offset="1" stop-color="#fff"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g mask="url(#a)">
|
||||
<path d="M95 47h24v2H95z" fill="#ec5548"/>
|
||||
<path d="M98 49h18v11H98z" fill="#fbc21b"/>
|
||||
<path d="M95 59h24v7H95z" fill="#ec5548"/>
|
||||
<path d="M97.63 66h19.74l2.63 47H95z" fill="#fff"/>
|
||||
<path d="M107 38a10 10 0 0 1 10 10v1H97v-1a10 10 0 0 1 10-10zM96.77 82.23l21-10.7.63 11.87-22.31 11.87zM95 110.8L119.1 98l.9 14H95z" fill="#ec5548"/>
|
||||
<path d="M0 148a177.58 177.58 0 0 1 217 0z" fill="#e8eaed"/>
|
||||
<path d="M103 49a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5z" fill="#fef0c8"/>
|
||||
<path d="M7 16l91 33.18v10L7 93z" fill="url(#b)"/>
|
||||
</g>
|
||||
<g mask="url(#a)" class="lh-lighthouse__clouds">
|
||||
<path d="M60 .19A9.77 9.77 0 0 1 61.93 0a9.44 9.44 0 0 1 9.24 7.83A7.24 7.24 0 0 1 79 14.45v.73A7.37 7.37 0 0 1 76.2 21h-31a7.44 7.44 0 0 1-1.2-4.09 7.31 7.31 0 0 1 7.26-7.36 6.84 6.84 0 0 1 1.28.1v-.11A9.51 9.51 0 0 1 60 .19m79.78 22.31h-17.9a4.37 4.37 0 0 1-.63-2.25 4.2 4.2 0 0 1 4.16-4.25 4.37 4.37 0 0 1 .72.06V16a5.35 5.35 0 0 1 10.64-1h.33a4.2 4.2 0 0 1 4.15 4.25 4.29 4.29 0 0 1-1.47 3.25zM163 62h-24.15a5.1 5.1 0 0 1-.85-2.81 5.65 5.65 0 0 1 6.59-5.19v-.08a7.07 7.07 0 0 1 7.24-6.92 7.15 7.15 0 0 1 7.17 5.64h.44a5.46 5.46 0 0 1 5.6 5.32A5.19 5.19 0 0 1 163 62z" fill="#fff"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="lh-header-container">
|
||||
<div class="lh-header">
|
||||
<div class="lh-lighthouse">
|
||||
<svg width="217" height="148" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<mask id="a" x="-56" y="-54" width="284" height="202" maskUnits="userSpaceOnUse">
|
||||
<path d="M-56-54h284v202H-56z" fill="#fff"></path>
|
||||
</mask>
|
||||
<linearGradient id="b" x1="-525.16" y1="560.08" x2="-524.23" y2="560.08" gradientTransform="matrix(91 0 0 -77 47797 43181)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#FFFFFF00"/>
|
||||
<stop offset="1" stop-color="#FFFFFF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g mask="url(#a)">
|
||||
<path d="M95 47h24v2H95z" fill="#ec5548"/>
|
||||
<path d="M98 49h18v11H98z" fill="#fbc21b"/>
|
||||
<path d="M95 59h24v7H95z" fill="#ec5548"/>
|
||||
<path d="M97.63 66h19.74l2.63 47H95z" fill="#fff"/>
|
||||
<path d="M107 38a10 10 0 0 1 10 10v1H97v-1a10 10 0 0 1 10-10zM96.77 82.23l21-10.7.63 11.87-22.31 11.87zM95 110.8L119.1 98l.9 14H95z" fill="#ec5548"/>
|
||||
<path d="M0 148a177.58 177.58 0 0 1 217 0z" fill="#e8eaed"/>
|
||||
<path d="M103 49a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5z" fill="#fef0c8"/>
|
||||
<path d="M7 16l91 33.18v10L7 93z" fill="url(#b)"/>
|
||||
</g>
|
||||
<g mask="url(#a)" class="lh-lighthouse__clouds">
|
||||
<path d="M60 .19A9.77 9.77 0 0 1 61.93 0a9.44 9.44 0 0 1 9.24 7.83A7.24 7.24 0 0 1 79 14.45v.73A7.37 7.37 0 0 1 76.2 21h-31a7.44 7.44 0 0 1-1.2-4.09 7.31 7.31 0 0 1 7.26-7.36 6.84 6.84 0 0 1 1.28.1v-.11A9.51 9.51 0 0 1 60 .19m79.78 22.31h-17.9a4.37 4.37 0 0 1-.63-2.25 4.2 4.2 0 0 1 4.16-4.25 4.37 4.37 0 0 1 .72.06V16a5.35 5.35 0 0 1 10.64-1h.33a4.2 4.2 0 0 1 4.15 4.25 4.29 4.29 0 0 1-1.47 3.25zM163 62h-24.15a5.1 5.1 0 0 1-.85-2.81 5.65 5.65 0 0 1 6.59-5.19v-.08a7.07 7.07 0 0 1 7.24-6.92 7.15 7.15 0 0 1 7.17 5.64h.44a5.46 5.46 0 0 1 5.6 5.32A5.19 5.19 0 0 1 163 62z" fill="#fff"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="lh-metadata">
|
||||
<div class="lh-metadata__results"><a href="" class="lh-metadata__url" target="_blank" rel="noopener"></a></div>
|
||||
<div class="lh-config">
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче