html: Fix tab on mobile, fix tables that aren't responsive/too large. (…

…#2511)
sitespeedio · Jun 19, 2019 · 9d6fada · 9d6fada
1 parent 726b877
commit 9d6fada
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 33 deletions.
diff --git a/lib/plugins/html/assets/css/index.min.css b/lib/plugins/html/assets/css/index.min.css
diff --git a/lib/plugins/html/src/sass/components/tabs.scss b/lib/plugins/html/src/sass/components/tabs.scss
@@ -55,9 +55,6 @@ section {
 
 @media screen and (max-width: 650px) {
  #tabs {
-  a {
-   font-size: 0;
-  }
   a:before {
    margin: 0;
    font-size: 18px;

diff --git a/lib/plugins/html/templates/url/metrics/index.pug b/lib/plugins/html/templates/url/metrics/index.pug
@@ -189,7 +189,7 @@ if  browsertime
       each value, name in browsertime.cdp.performance
         tr
           td #{name}
-          td #{value}
+          td #{value.toFixed(0)}
 
   if options.browsertime.visualElements
    a#visual-elements

diff --git a/lib/plugins/html/templates/url/thirdparty/firstParty.pug b/lib/plugins/html/templates/url/thirdparty/firstParty.pug
@@ -4,37 +4,37 @@ p Calculated using #{pagexray.firstPartyRegEx} (use
     code --firstParty 
     | to configure).
 .responsive
-table(data-sortable, id='contentSizeFirstParty')
-    +rowHeading(['Content', 'Header Size', 'Transfer Size', 'Content Size', 'Requests'])
-    each data, type in pagexray.firstParty.contentTypes
+    table(data-sortable, id='contentSizeFirstParty')
+        +rowHeading(['Content', 'Header Size', 'Transfer Size', 'Content Size', 'Requests'])
+        each data, type in pagexray.firstParty.contentTypes
+            tr
+                td(data-title='Content Type') #{type}
+                +sizeCell('headerSize', data.headerSize)
+                +sizeCell('transferSize', data.transferSize)
+                +sizeCell('contentSize', data.contentSize)
+                +numberCell('requests', data.requests)
         tr
-            td(data-title='Content Type') #{type}
-            +sizeCell('headerSize', data.headerSize)
-            +sizeCell('transferSize', data.transferSize)
-            +sizeCell('contentSize', data.contentSize)
-            +numberCell('requests', data.requests)
-    tr
-        td(data-title='Total') Total
-        +sizeCell('headerSize', pagexray.firstParty.headerSize)
-        +sizeCell('transferSize', pagexray.firstParty.transferSize)
-        +sizeCell('contentSize', pagexray.firstParty.contentSize)
-        +numberCell('requests', pagexray.firstParty.requests)
+            td(data-title='Total') Total
+            +sizeCell('headerSize', pagexray.firstParty.headerSize)
+            +sizeCell('transferSize', pagexray.firstParty.transferSize)
+            +sizeCell('contentSize', pagexray.firstParty.contentSize)
+            +numberCell('requests', pagexray.firstParty.requests)
 
 a#third-party
 h3 Third party requests and sizes per content type
 .responsive
-table(data-sortable, id='contentSizeThirdParty')
-    +rowHeading(['Content', 'Header Size', 'Transfer Size', 'Content Size', 'Requests'])
-    each data, type in pagexray.thirdParty.contentTypes
+    table(data-sortable, id='contentSizeThirdParty')
+        +rowHeading(['Content', 'Header Size', 'Transfer Size', 'Content Size', 'Requests'])
+        each data, type in pagexray.thirdParty.contentTypes
+            tr
+                td(data-title='Content Type') #{type}
+                +sizeCell('headerSize', data.headerSize)
+                +sizeCell('transferSize', data.transferSize)
+                +sizeCell('contentSize', data.contentSize)
+                +numberCell('requests', data.requests)
         tr
-            td(data-title='Content Type') #{type}
-            +sizeCell('headerSize', data.headerSize)
-            +sizeCell('transferSize', data.transferSize)
-            +sizeCell('contentSize', data.contentSize)
-            +numberCell('requests', data.requests)
-    tr
-        td(data-title='Total') Total
-        +sizeCell('headerSize', pagexray.thirdParty.headerSize)
-        +sizeCell('transferSize', pagexray.thirdParty.transferSize)
-        +sizeCell('contentSize', pagexray.thirdParty.contentSize)
-        +numberCell('requests', pagexray.thirdParty.requests)
+            td(data-title='Total') Total
+            +sizeCell('headerSize', pagexray.thirdParty.headerSize)
+            +sizeCell('transferSize', pagexray.thirdParty.transferSize)
+            +sizeCell('contentSize', pagexray.thirdParty.contentSize)
+            +numberCell('requests', pagexray.thirdParty.requests)