Merge pull request #1134 from GoogleChrome/mobile

Report: mobile friendly, responsive goodness. Fixes #1107
GoogleChrome · Dec 10, 2016 · 11e41a3 · 11e41a3
2 parents cfe647d + 4318eb9
commit 11e41a3
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 12 deletions.
diff --git a/lighthouse-core/report/styles/report.css b/lighthouse-core/report/styles/report.css
@@ -298,10 +298,13 @@ body {
 
 .report-body__metadata {
   flex: 1 1 0;
-  margin-right: 40px;
   white-space: nowrap;
 }
 
+.report-body__buttons {
+  flex-shrink: 0;
+}
+
 .report-body__url {
   font-family: var(--text-font-family);
   white-space: nowrap;
@@ -338,7 +341,7 @@ body {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   padding: 0 var(--heading-line-height);
   position: fixed;
   will-change: transform;
@@ -757,6 +760,40 @@ body {
   }
 }
 
+
+@media screen and (max-width: 400px) {
+  .report-body__metadata {
+    margin-right: 8px;
+    max-width: 65%;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  :root {
+    --subitem-indent: 8px;
+    --gutter-width: 16px;
+  }
+  .aggregations {
+    padding-right: 8px;
+  }
+  .report-body__menu-container {
+    display: none;
+  }
+  .report-body__content,
+  .report-body__header {
+    margin-left: 0;
+  }
+  .report-body__header {
+    width: 100%;
+    padding: 8px;
+  }
+  .footer {
+    margin-top: 0;
+    margin-left: 0;
+    height: auto;
+  }
+}
+
 :root[data-report-context="devtools"] .report {
   margin: 0;
   box-shadow: none;

diff --git a/lighthouse-core/report/templates/report-template.html b/lighthouse-core/report/templates/report-template.html
@@ -20,7 +20,7 @@
 <html data-report-context="{{reportContext}}">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <title>Lighthouse report: {{ url }}</title>
   <style>{{{ css }}}</style>
   <script>{{{ script }}}</script>
@@ -39,9 +39,11 @@
         <div class="report-body__url">Results for: <a href="{{ url }}" target="_blank">{{ url }}</a></div>
         <div class="report-body__url">Generated on: {{generatedTime}}</div>
       </div>
-      <button class="report-body__icon share js-share"></button>
-      <button class="report-body__icon copy js-copy"></button>
-      <button class="report-body__icon print js-print"></button>
+      <div class="report-body__buttons">
+        <button class="report-body__icon share js-share"></button>
+        <button class="report-body__icon copy js-copy"></button>
+        <button class="report-body__icon print js-print"></button>
+      </div>
     </div>
     <div class="report-body__content">
       <div class="report-body__menu-container">

diff --git a/lighthouse-viewer/app/index.html b/lighthouse-viewer/app/index.html
@@ -18,7 +18,7 @@
 <html data-report-context="viewer">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <title>Lighthouse Report Viewer</title>
   <link rel="shortcut icon" href="images/lh_logo_icon_16.png">
   <link rel="stylesheet" href="styles/report.css">
@@ -32,9 +32,13 @@
 
 <div class="viewer-placeholder">
   <div class="viewer-placeholder-inner">
-    <img src="images/lh_logo_bg.png" class="viewer-placeholder-logo"
-         alt="Lighthouse logo" height="150" width="150">
-    <h1>Drop Lighthouse results here</h1>
+    <div>
+      <img src="images/lh_logo_bg.png" class="viewer-placeholder-logo" alt="Lighthouse logo">
+    </div>
+    <div>
+      <h1 class="viewer-placeholder__heading">Lighthouse Report Viewer</h1>
+      <div class="viewer-placeholder__help">Click here or drag and drop a json report</div>
+    </div>
   </div>
 </div>
 

diff --git a/lighthouse-viewer/app/styles/viewer.css b/lighthouse-viewer/app/styles/viewer.css
@@ -57,24 +57,31 @@
   align-items: center;
   justify-content: center;
   color: #555;
+  font-weight: 300;
 }
 .viewer-placeholder-inner {
   display: flex;
   align-items: center;
   border-radius: 5px;
   padding: 40px 32px;
+  max-width: 80vw;
   border: 2px dashed rgba(0,0,0,0.2);
   cursor: pointer;
   background-color: #fff;
 }
 .viewer-placeholder-inner.dropping {
   border-color: currentColor;
 }
-.viewer-placeholder h1 {
+.viewer-placeholder__heading {
   font-weight: 300;
+  margin: 0;
+}
+.viewer-placeholder__help {
+  margin-top: 12px;
 }
 .viewer-placeholder-logo {
-  margin-right: 16px;
+  width: 100px;
+  height: 100px;
 }
 .log-wrapper {
   position: fixed;
@@ -105,6 +112,26 @@
   cursor: default;
 }
 
+@media screen and (max-width: 635px) {
+  .viewer-placeholder-inner {
+    display: block;
+    text-align: center;
+  }
+  .viewer-placeholder-logo {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@media screen and (min-width: 636px) {
+  .viewer-placeholder__help::before {
+    content: 'Instructions: ';
+  }
+  .viewer-placeholder-logo {
+    margin-right: 16px;
+  }
+}
+
 
 /* app z-indexes */
 .drop_zone {