report: animated chevrons (#5137)
This commit is contained in:
Paul Irish
GitHub
Родитель
a99c07b890
Коммит
2bcc4ccdc5
|
|
@ -71,9 +71,10 @@ class CategoryRenderer {
|
|||
elem.classList.add('lh-details');
|
||||
header.appendChild(elem);
|
||||
}
|
||||
|
||||
this.dom.find('.lh-audit__index', auditEl).textContent = `${index + 1}`;
|
||||
|
||||
// Add chevron SVG to the end of the summary
|
||||
this.dom.find('.lh-chevron-container', auditEl).appendChild(this._createChevron());
|
||||
this._setRatingClass(auditEl, audit.result.score, scoreDisplayMode);
|
||||
|
||||
if (audit.result.scoreDisplayMode === 'error') {
|
||||
|
|
@ -91,7 +92,16 @@ class CategoryRenderer {
|
|||
}
|
||||
|
||||
/**
|
||||
* @param {Element} element DOM node to populate with values.
|
||||
* @return {!HTMLElement}
|
||||
*/
|
||||
_createChevron() {
|
||||
const chevronTmpl = this.dom.cloneTemplate('#tmpl-lh-chevron', this.templateContext);
|
||||
const chevronEl = this.dom.find('.lh-chevron', chevronTmpl);
|
||||
return chevronEl;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {!Element} element DOM node to populate with values.
|
||||
* @param {number|null} score
|
||||
* @param {string} scoreDisplayMode
|
||||
* @return {Element}
|
||||
|
|
@ -136,10 +146,10 @@ class CategoryRenderer {
|
|||
const summmaryEl = this.dom.createChildOf(groupEl, 'summary', 'lh-audit-group__summary');
|
||||
const headerEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__header');
|
||||
const itemCountEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__itemcount');
|
||||
this.dom.createChildOf(summmaryEl, 'div',
|
||||
`lh-toggle-arrow ${expandable ? '' : ' lh-toggle-arrow-unexpandable'}`, {
|
||||
title: 'Show audits',
|
||||
});
|
||||
if (expandable) {
|
||||
const chevronEl = summmaryEl.appendChild(this._createChevron());
|
||||
chevronEl.title = 'Show audits';
|
||||
}
|
||||
|
||||
if (group.description) {
|
||||
const auditGroupDescription = this.dom.createElement('div', 'lh-audit-group__description');
|
||||
|
|
|
|||
|
|
@ -65,10 +65,10 @@
|
|||
--lh-audit-hgap: 12px;
|
||||
--lh-audit-group-vpadding: 8px;
|
||||
--lh-section-vpadding: 12px;
|
||||
--chevron-size: 12px;
|
||||
--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>');
|
||||
--chevron-icon-url: url('data:image/svg+xml;utf8,<svg fill="hsl(216, 5%, 39%)" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></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>');
|
||||
--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>');
|
||||
|
|
@ -262,13 +262,13 @@
|
|||
.lh-audit__display-text,
|
||||
.lh-audit__score-icon,
|
||||
.lh-load-opportunity__sparkline,
|
||||
.lh-toggle-arrow {
|
||||
.lh-chevron-container {
|
||||
margin: 0 var(--audit-item-gap);
|
||||
}
|
||||
.lh-audit__index {
|
||||
margin-left: 0;
|
||||
}
|
||||
.lh-toggle-arrow {
|
||||
.lh-chevron-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
|
@ -281,22 +281,6 @@
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.lh-toggle-arrow {
|
||||
background: var(--chevron-icon-url) no-repeat center center / 20px 20px;
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
flex: none;
|
||||
transition: transform 150ms ease-in-out;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transform: rotateZ(90deg);
|
||||
margin-top: calc((var(--body-line-height) - 12px) / 2);
|
||||
}
|
||||
|
||||
.lh-toggle-arrow-unexpandable {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Expandable Details (Audit Groups, Audits) */
|
||||
.lh-audit__header {
|
||||
display: flex;
|
||||
|
|
@ -312,14 +296,6 @@
|
|||
background-color: #F8F9FA;
|
||||
}
|
||||
|
||||
|
||||
.lh-audit-group[open] > .lh-audit-group__summary > .lh-toggle-arrow,
|
||||
.lh-expandable-details[open] > .lh-expandable-details__summary > .lh-toggle-arrow,
|
||||
.lh-expandable-details[open] > .lh-expandable-details__summary > div > .lh-toggle-arrow,
|
||||
.lh-expandable-details[open] > .lh-expandable-details__summary > div > div > .lh-toggle-arrow {
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
|
||||
.lh-audit-group__summary::-webkit-details-marker,
|
||||
.lh-expandable-details__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
|
|
@ -603,10 +579,6 @@
|
|||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.lh-audit-group__summary .lh-toggle-arrow {
|
||||
|
||||
}
|
||||
|
||||
.lh-audit-group__description {
|
||||
font-size: var(--body-font-size);
|
||||
color: var(--medium-75-gray);
|
||||
|
|
@ -742,6 +714,7 @@
|
|||
|
||||
.lh-category:first-of-type {
|
||||
padding-top: calc(2 * var(--section-padding));
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* section hash link jump should preserve fixed header
|
||||
|
|
@ -754,10 +727,6 @@
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.lh-category:first-of-type {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lh-category-header {
|
||||
font-size: var(--header-font-size);
|
||||
min-height: var(--circle-size);
|
||||
|
|
@ -921,6 +890,47 @@ summary.lh-passed-audits-summary {
|
|||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Chevron
|
||||
https://codepen.io/paulirish/pen/LmzEmK
|
||||
*/
|
||||
.lh-chevron {
|
||||
--chevron-angle: 42deg;
|
||||
width: var(--chevron-size);
|
||||
height: var(--chevron-size);
|
||||
margin-top: calc((var(--body-line-height) - 12px) / 2);
|
||||
}
|
||||
|
||||
.lh-chevron__lines {
|
||||
transition: transform 0.4s;
|
||||
transform: translateY(var(--body-line-height));
|
||||
}
|
||||
.lh-chevron__line {
|
||||
stroke: var(--display-value-gray);
|
||||
stroke-width: var(--chevron-size);
|
||||
stroke-linecap: square;
|
||||
transform-origin: 50%;
|
||||
transform: rotate(var(--chevron-angle));
|
||||
transition: transform 300ms, stroke 300ms;
|
||||
}
|
||||
|
||||
.lh-audit-group > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right,
|
||||
.lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-left,
|
||||
.lh-audit > .lh-expandable-details .lh-chevron__line-right,
|
||||
.lh-audit > .lh-expandable-details[open] .lh-chevron__line-left {
|
||||
transform: rotate(calc(var(--chevron-angle) * -1));
|
||||
}
|
||||
|
||||
.lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__line-right,
|
||||
.lh-audit > .lh-expandable-details[open] .lh-chevron__line-right {
|
||||
transform: rotate(var(--chevron-angle));
|
||||
}
|
||||
|
||||
.lh-audit-group[open] > .lh-audit-group__summary > .lh-chevron .lh-chevron__lines,
|
||||
.lh-audit > .lh-expandable-details[open] .lh-chevron__lines {
|
||||
transform: translateY(calc(var(--chevron-size) * -1));
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
.tooltip-boundary {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,16 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Toggle arrow chevron -->
|
||||
<template id="tmpl-lh-chevron">
|
||||
<svg class="lh-chevron" title="See audits" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
|
||||
<g class="lh-chevron__lines">
|
||||
<path class="lh-chevron__line lh-chevron__line-left" d="M10 50h40" stroke="#707173"/>
|
||||
<path class="lh-chevron__line lh-chevron__line-right" d="M90 50H50" stroke="#707173"/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<!-- Lighthouse category header -->
|
||||
<template id="tmpl-lh-category-header">
|
||||
<div class="lh-category-header">
|
||||
|
|
@ -34,7 +44,7 @@
|
|||
<span class="lh-audit__title"></span>
|
||||
<span class="lh-audit__display-text"></span>
|
||||
<div class="lh-audit__score-icon"></div>
|
||||
<div class="lh-toggle-arrow" title="See audits"></div>
|
||||
<div class="lh-chevron-container"></div>
|
||||
</summary>
|
||||
<div class="lh-audit__description"></div>
|
||||
</details>
|
||||
|
|
@ -67,7 +77,7 @@
|
|||
<div class="lh-sparkline"><div class="lh-sparkline__bar"></div></div>
|
||||
</div>
|
||||
<div class="lh-audit__display-text"></div>
|
||||
<div class="lh-toggle-arrow" title="See resources"></div>
|
||||
<div class="lh-chevron-container" title="See resources"></div>
|
||||
</div>
|
||||
</div>
|
||||
</summary>
|
||||
|
|
@ -297,20 +307,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.lh-config__settings-toggle .lh-toggle-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.lh-config__settings-toggle[open] .lh-toggle-arrow {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
.lh-config__settings-toggle summary::-moz-list-bullet {
|
||||
display: none;
|
||||
}
|
||||
.lh-config__settings-toggle summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 964px) {
|
||||
.lh-export__dropdown {
|
||||
right: 0;
|
||||
|
|
@ -340,7 +336,6 @@
|
|||
<details class="lh-config__settings-toggle">
|
||||
<summary>
|
||||
<span>Runtime settings</span>
|
||||
<span class="lh-toggle-arrow" title="See report's runtime settings"></span>
|
||||
</summary>
|
||||
<div class="lh-env">
|
||||
<div class="lh-env__title">Runtime environment</div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче