Skip to content

Commit

Permalink
report: celebrate your all 100's with fireworks (#5455)
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulirish
paulirish committed Jan 11, 2019
1 parent b06f284 commit 931eafe
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 6 deletions.
9 changes: 9 additions & 0 deletions lighthouse-core/report/html/renderer/report-renderer.js
View file
Expand Up @@ -206,6 +206,15 @@ class ReportRenderer {
categories.appendChild(renderer.render(category, report.categoryGroups));
}

// Fireworks
const scoresAll100 = report.reportCategories.every(cat => cat.score === 1);
if (scoresAll100) {
headerContainer.classList.add('score100');
this._dom.find('.lh-header', headerContainer).addEventListener('click', _ => {
headerContainer.classList.toggle('fireworks-paused');
});
}

if (scoreHeader) {
const defaultGauges = [];
const customGauges = [];
Expand Down
10 changes: 6 additions & 4 deletions lighthouse-core/report/html/renderer/report-ui-features.js
View file
Expand Up @@ -241,10 +241,12 @@ class ReportUIFeatures {
scoreShadow.style.transform = `scaleY(${1 - scrollPct * 0.2})`;

// Fade & move the scorescale
const scoreScalePositionDelta = 32;
const scoreScale = this._dom.find('.lh-scorescale', scoresContainer);
scoreScale.style.opacity = `${1 - scrollPct}`;
scoreScale.style.transform = `translateY(${scrollPct * -scoreScalePositionDelta}px)`;
try {
const scoreScalePositionDelta = 32;
const scoreScale = this._dom.find('.lh-scorescale', scoresContainer);
scoreScale.style.opacity = `${1 - scrollPct}`;
scoreScale.style.transform = `translateY(${scrollPct * -scoreScalePositionDelta}px)`;
} catch (e) {}

// Move the toolbar & export
this.toolbar.style.transform = `translateY(${heightDiff * scrollPct}px)`;
Expand Down
90 changes: 88 additions & 2 deletions lighthouse-core/report/html/templates.html
View file
Expand Up @@ -177,6 +177,7 @@
top: 0;
width: 100%;
will-change: transform;
contain: strict;
}
.lh-lighthouse {
position: absolute;
Expand Down Expand Up @@ -366,8 +367,91 @@
77.0001% { transform: translateX(195px); }
100% { transform: translateX(0px); }
} */

.score100 .lh-header-bg {
background-color: hsl(234, 64%, 19%);
}
.score100 .lh-metadata, .score100 .lh-toolbar__metadata, .score100 .lh-product-info {
color: #fff;
}
.score100 .lh-config {
color: #eee;
}

/* CSS Fireworks. Originally by Eddie Lin
https://codepen.io/paulirish/pen/yEVMbP
*/
.pyro {
display: none;
}
.score100 .pyro {
display: block;
}
.score100 .lh-lighthouse stop:first-child {
stop-color: hsla(200, 12%, 95%, 0);
}
.score100 .lh-lighthouse stop:last-child {
stop-color: hsla(65, 81%, 76%, 1);
}

.pyro > .before, .pyro > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 2.5px;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
animation-delay: 1s, 1s, 1s;
}

.pyro > .after {
animation-delay: 2.25s, 2.25s, 2.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}
.fireworks-paused .pyro > div {
animation-play-state: paused;
}

@keyframes bang {
to {
box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47;
}
}
@keyframes gravity {
to {
transform: translateY(80px);
opacity: 0;
}
}
@keyframes position {
0%, 19.9% {
margin-top: 4%;
margin-left: 47%;
}
20%, 39.9% {
margin-top: 7%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 6%;
margin-left: 70%;
}
60%, 79.9% {
margin-top: 3%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 3%;
margin-left: 80%;
}
}
</style>
<div class="lh-header-bg"></div>
<div class="lh-header-bg">
<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
</div>


<div class="lh-header-container">
Expand All @@ -384,12 +468,14 @@
</linearGradient>
</defs>
<g mask="url(#a)">
<!-- lighthouse building elements -->
<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"/>
<!-- lighthouse beam elements -->
<path d="M98 49h18v11H98z" fill="#fbc21b"/>
<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>
Expand Down
19 changes: 19 additions & 0 deletions lighthouse-core/test/report/html/renderer/report-renderer-test.js
View file
Expand Up @@ -81,6 +81,8 @@ describe('ReportRenderer', () => {
assert.ok(output.querySelector('.lh-report'), 'has report body');
assert.equal(output.querySelectorAll('.lh-gauge__wrapper, .lh-gauge--pwa__wrapper').length,
sampleResults.reportCategories.length * 2, 'renders category gauges');
// no fireworks
assert.ok(output.querySelector('.score100') === null, 'has no fireworks treatment');
});

it('renders additional reports by replacing the existing one', () => {
Expand Down Expand Up @@ -180,6 +182,23 @@ describe('ReportRenderer', () => {
assert.equal(renderer._templateContext, otherDocument);
});

it('should render an all 100 report with fireworks', () => {
const container = renderer._dom._document.body;

sampleResults.reportCategories.forEach(element => {
element.score = 1;
});

const output = renderer.renderReport(sampleResults, container);
// standard checks
assert.ok(output.querySelector('.lh-header-sticky'), 'has a header');
assert.ok(output.querySelector('.lh-report'), 'has report body');
assert.equal(output.querySelectorAll('.lh-gauge__wrapper, .lh-gauge--pwa__wrapper').length,
sampleResults.reportCategories.length * 2, 'renders category gauges');
// fireworks!
assert.ok(output.querySelector('.score100'), 'has fireworks treatment');
});

it('renders `not_applicable` audits as `notApplicable`', () => {
const clonedSampleResult = JSON.parse(JSON.stringify(sampleResultsOrig));

Expand Down

0 comments on commit 931eafe

Please sign in to comment.