misc(treemap): tweak styles for mobile (#12493)

GoogleChrome · May 17, 2021 · 1624e30 · 1624e30
1 parent 0ba2abd
commit 1624e30
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/lighthouse-treemap/app/index.html b/lighthouse-treemap/app/index.html
@@ -22,7 +22,7 @@
     <div class="lh-settings">
       <header>
         <div class="lh-header--section">
-          <span>
+          <span class="lh-logotitle">
             <!-- Lighthouse logo. Stolen from templates.html -->
             <svg class="lh-topbar__logo" viewBox="0 0 24 24">
               <defs>

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
@@ -85,6 +85,7 @@ class TreemapViewer {
     /*  eslint-enable no-unused-expressions */
 
     this.createHeader();
+    this.toggleTable(window.innerWidth >= 600);
     this.initListeners();
     this.setSelector({type: 'group', value: 'scripts'});
     this.render();
@@ -542,11 +543,14 @@ class TreemapViewer {
     });
   }
 
-  toggleTable() {
+  /**
+   * @param {boolean=} show
+   */
+  toggleTable(show) {
     const mainEl = TreemapUtil.find('main');
-    mainEl.classList.toggle('lh-main--show-table');
+    mainEl.classList.toggle('lh-main--show-table', show);
     const buttonEl = TreemapUtil.find('.lh-button--toggle-table');
-    buttonEl.classList.toggle('lh-button--active');
+    buttonEl.classList.toggle('lh-button--active', show);
   }
 
   resize() {

diff --git a/lighthouse-treemap/app/styles/treemap.css b/lighthouse-treemap/app/styles/treemap.css
@@ -56,6 +56,7 @@ body {
 /* TODO: BEM is backwards here and many other places */
 .lh-header--section {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
 }
@@ -74,9 +75,15 @@ body {
   justify-content: flex-end;
 }
 
+.lh-logotitle {
+  display: flex;
+  align-items: center;
+}
+
 .bundle-selector {
-  width: 50%;
+  flex: 1;
   padding: 2px;
+  margin: 2px;
 }
 
 .bundle-selector {