mirror
/
sitespeed.io
mirror of https://github.com/sitespeedio/sitespeed.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make it possible to link to specific tabs on page/run pages - Fixes #1087 

Merge pull request #1208 from moos/master
This commit is contained in:
Peter Hedenskog 2016-09-19 20:06:56 +02:00 committed by GitHub
parent a901def73c 4906581fde
commit cf7d960084
6 changed files with 84 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
lib/plugins/html/assets/css/index.css
View File

@ -1370,48 +1370,52 @@ section {
padding: 20px 0 0;
border-top: 1px solid #ddd; }
input {
display: none; }
label {
a[data-name=tabs] {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 22px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent; }
border: 1px solid transparent;
text-decoration: none; }
label:before {
a[data-name=tabs]:before {
font-weight: normal; }
label:hover {
:target:before {
display: none; }
a[data-name=tabs]:hover {
color: #888;
cursor: pointer; }
input:checked + label {
a[data-name=tabs]:target:focus {
outline: none; }
a[selected] {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid #0095d2;
border-bottom: 1px solid #fff; }
#tab1:checked ~ #summary,
#tab2:checked ~ #coach,
#tab3:checked ~ #browsertime,
#tab4:checked ~ #pagexray,
#tab5:checked ~ #webpagetest,
#tab6:checked ~ #gpsi {
#summary[selected] ~ #summary-panel,
#coach[selected] ~ #coach-panel,
#browsertime[selected] ~ #browsertime-panel,
#pagexray[selected] ~ #pagexray-panel,
#webpagetest[selected] ~ #webpagetest-panel,
#gpsi[selected] ~ #gpsi-panel {
display: block; }
@media screen and (max-width: 650px) {
label {
a[data-name=tabs] {
font-size: 0; }
label:before {
a[data-name=tabs]:before {
margin: 0;
font-size: 18px; } }
@media screen and (max-width: 400px) {
label {
a[data-name=tabs] {
padding: 13px; } }
.group-item {

2
lib/plugins/html/assets/css/index.min.css vendored
View File

File diff suppressed because one or more lines are too long

39
lib/plugins/html/src/sass/components/tabs.scss
View File

@ -15,11 +15,7 @@ section {
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
a[data-name=tabs] {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 22px;
@ -27,47 +23,56 @@ label {
text-align: center;
color: #bbb;
border: 1px solid transparent;
text-decoration: none;
}
label:before {
a[data-name=tabs]:before {
//font-family: fontawesome;
font-weight: normal;
// margin-right: 10px;
}
label:hover {
:target:before {
display: none;
}
a[data-name=tabs]:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
a[data-name=tabs]:target:focus {
outline: none;
}
a[selected] {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid $color--blue;
border-bottom: 1px solid #fff;
}
#tab1:checked ~ #summary,
#tab2:checked ~ #coach,
#tab3:checked ~ #browsertime,
#tab4:checked ~ #pagexray,
#tab5:checked ~ #webpagetest,
#tab6:checked ~ #gpsi {
#summary[selected] ~ #summary-panel,
#coach[selected] ~ #coach-panel,
#browsertime[selected] ~ #browsertime-panel,
#pagexray[selected] ~ #pagexray-panel,
#webpagetest[selected] ~ #webpagetest-panel,
#gpsi[selected] ~ #gpsi-panel {
display: block;
}
@media screen and (max-width: 650px) {
label {
a[data-name=tabs] {
font-size: 0;
}
label:before {
a[data-name=tabs]:before {
margin: 0;
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
label {
a[data-name=tabs] {
padding: 13px;
}
}

12
lib/plugins/html/templates/url/index.pug
View File

@ -23,7 +23,7 @@ block content
else
include ./tabs.pug
section#summary
section#summary-panel
h2 Summary
p.small Summary of some of the most important metrics.
.row
@ -69,21 +69,21 @@ block content
include ./waterfall/index.pug
if d.coach && d.coach.pageSummary
section#coach
section#coach-panel
include ./coach/index.pug
if d.browsertime && d.browsertime.pageSummary
section#browsertime
section#browsertime-panel
include ./browsertime/index.pug
if d.pagexray && d.pagexray.pageSummary
section#pagexray
section#pagexray-panel
include ./pagexray/index.pug
if d.webpagetest
section#webpagetest
section#webpagetest-panel
include ./webpagetest/index.pug
if d.gpsi
section#gpsi
section#gpsi-panel
include ./gpsi/index.pug

12
lib/plugins/html/templates/url/run.pug
View File

@ -24,7 +24,7 @@ block content
else
include ./tabs.pug
section#summary
section#summary-panel
h2 Summary
p.small Summary of some of the most important metrics.
.row
@ -65,21 +65,21 @@ block content
a(href=screenshotName)
img.screenshot(src=screenshotName, width=width, alt='Screenshot')
if d.browsertime && d.browsertime.run && d.browsertime.run.har
if d.browsertime && d.browsertime.run && d.browsertime.run.har
include ./waterfall/index.pug
if d.coach && d.coach.run
section#coach
section#coach-panel
include ./coach/index.pug
if d.browsertime && d.browsertime.run
section#browsertime
section#browsertime-panel
include ./browsertime/index.pug
if d.pagexray && d.pagexray.run
section#pagexray
section#pagexray-panel
include ./pagexray/index.pug
if d.webpagetest && d.webpagetest.run
section#webpagetest
section#webpagetest-panel
include ./webpagetest/run.pug

40
lib/plugins/html/templates/url/tabs.pug
View File

@ -1,29 +1,45 @@
input#tab1(type='radio', name='tabs', checked='')
label(for='tab1')
a#summary(href='#summary', data-name='tabs', onclick='return selectTab(this)', if-not-selected)
img(src= rootPath + '/img/summary64.png', height=32, alt='Summary')
| Summary
if d.coach && (d.coach.pageSummary || d.coach.run)
input#tab2(type='radio', name='tabs')
label(for='tab2')
a#coach(href='#coach', data-name='tabs', onclick='return selectTab(this)')
img(src= rootPath + '/img/coach64.png', height=32, alt='Coach')
| Coach
if d.browsertime && (d.browsertime.pageSummary || d.browsertime.run)
input#tab3(type='radio', name='tabs')
label(for='tab3')
a#browsertime(href='#browsertime', data-name='tabs', onclick='return selectTab(this)')
img(src= rootPath + '/img/browsertime64.png', height=32, alt='Browsertime')
| Browsertime
if d.pagexray && (d.pagexray.pageSummary || d.pagexray.run)
input#tab4(type='radio', name='tabs')
label(for='tab4')
a#pagexray(href='#pagexray', data-name='tabs', onclick='return selectTab(this)')
img(src= rootPath + '/img/xray64.png', height=32, alt='PageXray')
| PageXray
if d.webpagetest || (d.webpagetest && d.webpagetest.run)
input#tab5(type='radio', name='tabs')
label(for='tab5')
a#webpagetest(href='#webpagetest', data-name='tabs', onclick='return selectTab(this)')
img(src= rootPath + '/img/webpagetest64.png', height=32, alt='WebPageTest')
| WebPageTest
if d.gpsi
input#tab6(type='radio', name='tabs')
label(for='tab6')
a#gpsi(href='#gpsi', data-name='tabs', onclick='return selectTab(this)')
img(src= rootPath + '/img/gpsi64.png', height=32, alt='Google Page Speed Insights')
| GPSI
script(type='text/javascript').
function select(el) { el && el.setAttribute('selected', '') }
[].forEach.call(document.querySelectorAll('[data-name=tabs]'), function(el) {
if (location.hash === '#' + el.id) select(el);
});
if (!document.querySelectorAll('[data-name=tabs][selected]').length) {
select(document.querySelector('[if-not-selected]'));
}
function selectTab(el) {
var sel = document.querySelector('[data-name=tabs][selected]');
if (sel) sel.removeAttribute('selected');
select(el);
if (history.replaceState) {
history.replaceState(null, null, el.href);
return false;
}
// IE9 fallback
}