Report: header sticks to top

GoogleChrome · Dec 8, 2016 · 97af7c2 · 97af7c2
1 parent 9465d82
commit 97af7c2
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 29 deletions.
diff --git a/lighthouse-core/report/styles/report.css b/lighthouse-core/report/styles/report.css
@@ -46,6 +46,10 @@ span, div, p, section, header, h1, h2, li, ul {
   --heading-line-height: 32px;
   --subitem-indent: 24px;
   --max-line-length: none;
+
+  --report-width: 1280px;
+  --report-menu-width: 280px;
+  --report-header-height: 58px;
 }
 
 :root[data-report-context="devtools"] {
@@ -78,6 +82,10 @@ html, body {
   height: 100%;
 }
 
+:target.aggregations {
+  padding-top: calc(var(--report-header-height) + var(--heading-line-height)) !important;
+}
+
 a {
   color: #15c;
 }
@@ -108,7 +116,7 @@ body {
 .report {
   width: 100%;
   margin: 0 auto;
-  max-width: 1280px;
+  max-width: var(--report-width);
   background: #FFF;
   box-shadow: 0 0 6px 0 rgba(0,0,0,0.26);
 }
@@ -164,15 +172,19 @@ body {
 }
 
 .report-body__content {
-  margin-left: 22%;
+  margin-left: var(--report-menu-width);
   position: relative;
 }
 
+.report-body__aggregations-container {
+  padding-top: var(--report-header-height);
+}
+
 .report-body__menu-container {
   height: 100%;
   width: 100%;
   min-width: 230px;
-  max-width: 1280px;
+  max-width: var(--report-width);
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
@@ -181,9 +193,9 @@ body {
 }
 
 .menu {
-  width: 22%;
+  width: var(--report-menu-width);
   background: #FFFFFF;
-  min-width: 185px;
+  /*min-width: 185px;*/
   height: 100%;
   top: 0;
   left: 0;
@@ -307,15 +319,20 @@ body {
 }
 
 .report-body__header {
-  height: 58px;
+  height: var(--report-header-height);
   border-bottom: 1px solid #EBEBEB;
   background: #FAFAFA;
-  margin-left: 22%;
+  margin-left: var(--report-menu-width);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   padding: 0 var(--heading-line-height);
+
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  max-width: calc( var(--report-width) - var(--report-menu-width));
 }
 
 .report-section__title {
@@ -449,7 +466,7 @@ body {
 
 .footer {
   margin-top: 40px;
-  margin-left: 22%;
+  margin-left: var(--report-menu-width);
   height: 130px;
   line-height: 90px;
   text-align: center;
@@ -474,14 +491,17 @@ body {
   height: 27px;
 }
 
+.aggregations__header {
+  position: relative;
+}
+
 .aggregations__header > h1 {
   font-size: var(--heading-font-size);
   font-weight: normal;
   line-height: var(--heading-line-height);
 }
 
 .aggregations {
-  position: relative;
   padding: var(--heading-line-height);
   padding-left: calc(var(--heading-line-height) + var(--gutter-width) + var(--gutter-gap));
 }
@@ -498,8 +518,8 @@ body {
 
 .section-result {
   position: absolute;
-  top: var(--heading-line-height);
-  left: var(--heading-line-height);
+  top: 0;
+  left: calc((var(--gutter-width) + var(--gutter-gap)) * -1);
   width: var(--gutter-width);
 
   display: flex;
@@ -516,7 +536,6 @@ body {
   text-align: center;
   padding: 4px 8px;
   border-radius: 2px;
-  margin-top: calc((var(--heading-line-height) - var(--heading-font-size) - 6px) / 2);
 }
 
 .section-result__points {

diff --git a/lighthouse-core/report/templates/report-template.html b/lighthouse-core/report/templates/report-template.html
@@ -61,22 +61,22 @@ <h1 class="menu__header-title">Lighthouse</h1>
         </div>
       </div>
 
-      <div>
+      <div class="report-body__aggregations-container">
       {{#each aggregations}}
-      <section class="js-breakdown aggregations">
-        <header class="aggregations__header" id="{{nameToLink this.name}}">
+      <section class="js-breakdown aggregations" id="{{nameToLink this.name}}">
+        <header class="aggregations__header">
           <h1>{{ this.name }}</h1>
+          <p class="aggregations__desc">{{ this.description }}</p>
+          {{#if this.scored}}
+          <div class="section-result">
+            <span class="section-result__score score-{{ getTotalScoreRating this }}-bg">
+              <span class="section-result__points">{{ getTotalScore this }}</span>
+              <span class="section-result__divider">/</span>
+              <span class="section-result__total">100</span>
+            </span>
+          </div>
+          {{/if}}
         </header>
-        <p class="aggregations__desc">{{ this.description }}</p>
-        {{#if this.scored}}
-        <div class="section-result">
-          <span class="section-result__score score-{{ getTotalScoreRating this }}-bg">
-            <span class="section-result__points">{{ getTotalScore this }}</span>
-            <span class="section-result__divider">/</span>
-            <span class="section-result__total">100</span>
-          </span>
-        </div>
-        {{/if}}
 
         <div class="js-report-by-user-feature">
           {{#each this.score as |aggregation|}}
@@ -85,13 +85,12 @@ <h1>{{ this.name }}</h1>
             {{#if aggregation.name }}
             <header class="aggregation__header">
               <h2>{{ aggregation.name }}</h2>
+              {{#if aggregation.description }}
+                <p class="aggregation__desc">{{{ aggregation.description }}}</p>
+              {{/if}}
             </header>
             {{/if}}
 
-            {{#if aggregation.description }}
-            <p class="aggregation__desc">{{{ aggregation.description }}}</p>
-            {{/if}}
-
             <ul class="subitems">
               {{#each aggregation.subItems as |subItem| }}
                 <li class="subitem {{#if subItem.comingSoon}}--coming-soon{{/if}} {{#if (shouldShowHelpText subItem.score)}}--show-help{{/if}}">