This commit is contained in:
Paul Irish 2018-05-18 10:36:58 -07:00 коммит произвёл GitHub
Родитель a99c07b890
Коммит 2bcc4ccdc5
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
3 изменённых файлов: 73 добавлений и 58 удалений

Просмотреть файл

@ -71,9 +71,10 @@ class CategoryRenderer {
elem.classList.add('lh-details'); elem.classList.add('lh-details');
header.appendChild(elem); header.appendChild(elem);
} }
this.dom.find('.lh-audit__index', auditEl).textContent = `${index + 1}`; 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); this._setRatingClass(auditEl, audit.result.score, scoreDisplayMode);
if (audit.result.scoreDisplayMode === 'error') { 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 {number|null} score
* @param {string} scoreDisplayMode * @param {string} scoreDisplayMode
* @return {Element} * @return {Element}
@ -136,10 +146,10 @@ class CategoryRenderer {
const summmaryEl = this.dom.createChildOf(groupEl, 'summary', 'lh-audit-group__summary'); const summmaryEl = this.dom.createChildOf(groupEl, 'summary', 'lh-audit-group__summary');
const headerEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__header'); const headerEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__header');
const itemCountEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__itemcount'); const itemCountEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__itemcount');
this.dom.createChildOf(summmaryEl, 'div', if (expandable) {
`lh-toggle-arrow ${expandable ? '' : ' lh-toggle-arrow-unexpandable'}`, { const chevronEl = summmaryEl.appendChild(this._createChevron());
title: 'Show audits', chevronEl.title = 'Show audits';
}); }
if (group.description) { if (group.description) {
const auditGroupDescription = this.dom.createElement('div', 'lh-audit-group__description'); const auditGroupDescription = this.dom.createElement('div', 'lh-audit-group__description');

Просмотреть файл

@ -65,10 +65,10 @@
--lh-audit-hgap: 12px; --lh-audit-hgap: 12px;
--lh-audit-group-vpadding: 8px; --lh-audit-group-vpadding: 8px;
--lh-section-vpadding: 12px; --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>'); --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>'); --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>'); --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>'); --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>'); --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__display-text,
.lh-audit__score-icon, .lh-audit__score-icon,
.lh-load-opportunity__sparkline, .lh-load-opportunity__sparkline,
.lh-toggle-arrow { .lh-chevron-container {
margin: 0 var(--audit-item-gap); margin: 0 var(--audit-item-gap);
} }
.lh-audit__index { .lh-audit__index {
margin-left: 0; margin-left: 0;
} }
.lh-toggle-arrow { .lh-chevron-container {
margin-right: 0; margin-right: 0;
} }
@ -281,22 +281,6 @@
flex: 1; 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) */ /* Expandable Details (Audit Groups, Audits) */
.lh-audit__header { .lh-audit__header {
display: flex; display: flex;
@ -312,14 +296,6 @@
background-color: #F8F9FA; 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-audit-group__summary::-webkit-details-marker,
.lh-expandable-details__summary::-webkit-details-marker { .lh-expandable-details__summary::-webkit-details-marker {
display: none; display: none;
@ -603,10 +579,6 @@
margin: 0 10px; margin: 0 10px;
} }
.lh-audit-group__summary .lh-toggle-arrow {
}
.lh-audit-group__description { .lh-audit-group__description {
font-size: var(--body-font-size); font-size: var(--body-font-size);
color: var(--medium-75-gray); color: var(--medium-75-gray);
@ -742,6 +714,7 @@
.lh-category:first-of-type { .lh-category:first-of-type {
padding-top: calc(2 * var(--section-padding)); padding-top: calc(2 * var(--section-padding));
border: none;
} }
/* section hash link jump should preserve fixed header /* section hash link jump should preserve fixed header
@ -754,10 +727,6 @@
visibility: hidden; visibility: hidden;
} }
.lh-category:first-of-type {
border: none;
}
.lh-category-header { .lh-category-header {
font-size: var(--header-font-size); font-size: var(--header-font-size);
min-height: var(--circle-size); min-height: var(--circle-size);
@ -921,6 +890,47 @@ summary.lh-passed-audits-summary {
object-fit: contain; 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 */
.tooltip-boundary { .tooltip-boundary {

Просмотреть файл

@ -16,6 +16,16 @@
</div> </div>
</template> </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 --> <!-- Lighthouse category header -->
<template id="tmpl-lh-category-header"> <template id="tmpl-lh-category-header">
<div class="lh-category-header"> <div class="lh-category-header">
@ -34,7 +44,7 @@
<span class="lh-audit__title"></span> <span class="lh-audit__title"></span>
<span class="lh-audit__display-text"></span> <span class="lh-audit__display-text"></span>
<div class="lh-audit__score-icon"></div> <div class="lh-audit__score-icon"></div>
<div class="lh-toggle-arrow" title="See audits"></div> <div class="lh-chevron-container"></div>
</summary> </summary>
<div class="lh-audit__description"></div> <div class="lh-audit__description"></div>
</details> </details>
@ -67,7 +77,7 @@
<div class="lh-sparkline"><div class="lh-sparkline__bar"></div></div> <div class="lh-sparkline"><div class="lh-sparkline__bar"></div></div>
</div> </div>
<div class="lh-audit__display-text"></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>
</div> </div>
</summary> </summary>
@ -297,20 +307,6 @@
display: flex; display: flex;
align-items: center; 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) { @media screen and (max-width: 964px) {
.lh-export__dropdown { .lh-export__dropdown {
right: 0; right: 0;
@ -340,7 +336,6 @@
<details class="lh-config__settings-toggle"> <details class="lh-config__settings-toggle">
<summary> <summary>
<span>Runtime settings</span> <span>Runtime settings</span>
<span class="lh-toggle-arrow" title="See report's runtime settings"></span>
</summary> </summary>
<div class="lh-env"> <div class="lh-env">
<div class="lh-env__title">Runtime environment</div> <div class="lh-env__title">Runtime environment</div>