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

Jump to bottom

report(redesign): runtime settings footer #8229

Merged
merged 27 commits into from
Apr 17, 2019
Merged

report(redesign): runtime settings footer #8229

Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
46db5b6
renderer: update gauges
connorjclark Apr 10, 2019
2fe84d6
unsticky for now
connorjclark Apr 10, 2019
dfbd61d
score scale
connorjclark Apr 10, 2019
1ce15d2
tweak score scale
connorjclark Apr 10, 2019
a57c935
tweak gauge outline
connorjclark Apr 10, 2019
05bcf12
font size and line height for doc
connorjclark Apr 10, 2019
12b1012
narrow header width
connorjclark Apr 10, 2019
86a7e4a
add wrapper to category so that line sep spans width of page
connorjclark Apr 10, 2019
1e8689c
better cat wrapper. meow
connorjclark Apr 10, 2019
91b53b8
fix paddinng in header
connorjclark Apr 10, 2019
b34018e
Section header text
connorjclark Apr 10, 2019
76a437b
section header margin
connorjclark Apr 10, 2019
5fc7876
make score scale round
connorjclark Apr 10, 2019
d957071
fix gauge width
connorjclark Apr 10, 2019
ade931b
fix gauge size and arc
connorjclark Apr 10, 2019
55cb95b
report: row style for runtime settings
connorjclark Apr 11, 2019
48a346d
tests(smokehouse): support artifacts assertions in smoke tests (#8044)
mattzeunert Apr 11, 2019
545ae1e
misc: fix bad auto-merge (#8201)
brendankenny Apr 11, 2019
c727c19
core(stack-packs): adjustments to comments and types (#8169)
brendankenny Apr 12, 2019
41065f1
misc(ci): build report and deploy to now.sh on every commit (#8194)
paulirish Apr 12, 2019
e2397ef
break word
connorjclark Apr 12, 2019
fc2cbac
pr feedback
connorjclark Apr 13, 2019
3e4df12
Merge branch 'master' into report-ui-runtime-settings
connorjclark Apr 13, 2019
65b27e8
fix bad rebase
connorjclark Apr 13, 2019
5412203
fix
connorjclark Apr 13, 2019
316077f
env-item
connorjclark Apr 13, 2019
f2599a3
remove dupe
connorjclark Apr 13, 2019
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
2 changes: 1 addition & 1 deletion lighthouse-core/report/html/renderer/report-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ class ReportRenderer {
if (!runtime.description) return;

const item = this._dom.cloneTemplate('#tmpl-lh-env__items', env);
this._dom.find('.lh-env__name', item).textContent = `${runtime.name}:`;
this._dom.find('.lh-env__name', item).textContent = runtime.name;
this._dom.find('.lh-env__description', item).textContent = runtime.description;
env.appendChild(item);
});
Expand Down
16 changes: 13 additions & 3 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 @@ -83,6 +83,9 @@
--circle-size: calc(3 * var(--header-font-size));

/* TODO(cjamcl) clean up unused variables. */
--audits-margin-bottom: 40px;
--circle-size-big: 120px;
--circle-size: 96px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what are these doing here/should we remove the circle-size above it?

oh looks like they're just alphabetized now :) still remove the one duplicate above it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

--color-black-100: #F5F5F5;
--color-black-200: #E0E0E0;
--color-black-400: #BDBDBD;
Expand All @@ -98,13 +101,14 @@
--color-red-700: #EB0F00;
--color-red: #FF4E42;
--color-white: #FFFFFF;
--env-name-min-width: 220px;
--header-padding: 20px 0 20px 0;
--item-bg: var(--color-black-100);
--item-padding: 10px 0px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i presume item isn't specific to the env stuff?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just checked, it's only uses for the env table. renamed.

--score-container-padding: 12px;
--score-container-width: 160px;
--score-number-font-size-big: 42px;
--score-number-font-size: 34px;
--circle-size-big: 120px;
--circle-size: 96px;
--score-title-font-size-big: 28px;
--score-title-font-size: 20px;
--score-title-line-height-big: 36px;
Expand Down Expand Up @@ -138,10 +142,12 @@

@media only screen and (max-width: 480px) {
.lh-vars {
--audits-margin-bottom: 20px;
--body-font-size: 14px;
--body-line-height: 20px;
--circle-size-big: 96px;
--circle-size: 72px;
--env-name-min-width: 120px;
--header-padding: 16px 0 16px 0;
--score-container-padding: 8px;
--score-container-width: 112px;
Expand All @@ -160,7 +166,7 @@
--text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
--monospace-font-family: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
--body-font-size: 12px;
--body-line-height: 16px;
--body-line-height: 20px;
--subheader-font-size: 14px;
--subheader-line-height: 18px;
--header-font-size: 16px;
Expand Down Expand Up @@ -217,6 +223,10 @@
cursor: pointer;
}

.lh-container {
word-break: break-word;
}

.lh-audit-group a,
.lh-category-header__description a {
color: #0c50c7;
Expand Down
30 changes: 22 additions & 8 deletions lighthouse-core/report/html/templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,36 +504,50 @@
<template id="tmpl-lh-footer">
<style>
.lh-footer {
background-color: var(--header-bg-color);
padding: var(--section-indent) calc(var(--default-padding) * 2);
max-width: var(--report-width);
margin: 0 auto;
}
.lh-footer .lh-generated {
text-align: center;
border-top: 1px solid var(--report-border-color);
padding-top: var(--default-padding);
}
.lh-env__title {
font-size: var(--score-title-font-size-big);
line-height: var(--score-title-line-height-big);
text-align: center;
padding: var(--score-container-padding);
}
.lh-env {
padding: var(--default-padding) 0;
}
.lh-env__items {
padding-left: 16px;
margin: 0 0 var(--audits-margin-bottom);
padding: 0;
}
.lh-env__items .lh-env__item:nth-child(2n) {
background: var(--item-bg);
}
.lh-env__item {
display: flex;
padding: var(--item-padding);
position: relative;
}
span.lh-env__name {
font-weight: bold;
color: var(--secondary-text-color);
min-width: var(--env-name-min-width);
flex: 0.5;
padding: 0 8px;
}
span.lh-env__description {
font-family: var(--monospace-font-family);
font-size: var(--caption-font-size);
padding-left: 5px;
text-align: left;
flex: 1;
}
</style>
<footer class="lh-footer">
<!-- TODO(i18n): localize runtime settings -->
<div class="lh-env">
<div class="lh-env__title">Runtime settings</div>
<div class="lh-env__title">Runtime Settings</div>
<ul class="lh-env__items">
<template id="tmpl-lh-env__items">
<li class="lh-env__item">
Expand Down