From fd368d2ef1ef356ecc0381f7b2cd2bf7a4e6499f Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 27 Jun 2017 14:53:33 -0500
Subject: [PATCH 1/6] Style

---
 lab/index.html           | 17 ++++++++--
 lab/static/css/style.css | 71 ++++++++++++++++++++++++++++++++--------
 lab/static/js/lab.js     | 13 ++++++++
 3 files changed, 85 insertions(+), 16 deletions(-)
diff --git a/lab/index.html b/lab/index.html
index a6e8ee13..a81745fa 100644
--- a/lab/index.html
+++ b/lab/index.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <link rel="icon" type="image/png" href="/ionic-lab/static/img/favicon.png" />
     <link rel="stylesheet" href="/ionic-lab/static/css/style.css" />
+    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
   </head>
   <body>
     <div id="app">
@@ -15,6 +16,7 @@
         </div>
 
         <div id="header-right">
+          <a href="/" target="_blank" id="open-fullscreen">Open fullscreen <i class="icon ion-share"></i></a>
           <div class="dropdown">
             <button class="dropdown-toggle" type="button">Platforms <span class="dropdown-caret"></span></button>
             <ul class="dropdown-menu">
@@ -25,8 +27,18 @@
           </div>
         </div>
       </div>
-      <preview>
-      </preview>
+      <div id="main">
+        <div id="sidebar">
+          <ul id="menu">
+            <li><a href="https://ionicframework.com/docs/components">Components</a></li>
+            <li><a href="https://ionicframework.com/docs/api">API Reference</a></li>
+            <li><a href="https://ionicframework.com/docs/native">Ionic Native</a></li>
+            <li><a href="https://ionicframework.com/docs/native">Ionic Native</a></li>
+          </ul>
+        </div>
+        <preview>
+        </preview>
+      </div>
       <div id="footer">
         <div id="footer-left">
           <span id="app-info"></span>
@@ -87,6 +99,7 @@ <h2><div class="phone-icon"></div> <a href="/?ionicplatform=windows" target="_bl
         </div>
       </div>
     </template>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
     <script src="/ionic-lab/static/js/lab.js"></script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/lab/static/css/style.css b/lab/static/css/style.css
index 82569c17..18fe5ca0 100644
--- a/lab/static/css/style.css
+++ b/lab/static/css/style.css
@@ -11,7 +11,7 @@ html, body {
 }
 
 body {
-  background-color: #f8f9fb;
+  background-color: #242A31;
   font-family: 'AvenirNextLTPro-Regular', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
   padding: 0;
   margin: 0;
@@ -102,9 +102,28 @@ h2 a {
 #header {
   width: 100%;
   height: 50px;
-  background-color: white;
+  background-color: #151A21;
   box-shadow: 0px 1px 3px rgba(0,0,0, 0.15);
 }
+#header a {
+  color: #858D9B;
+  font-family: 'AvenirNextLTPro-Medium', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+  font-size: 13px;
+  text-decoration: none;
+  display: inline-block;
+  font-weight: bold;
+}
+#header .icon {
+  display: inline-block;
+  font-size: 22px;
+  vertical-align: middle;
+  margin-bottom: 3px;
+  margin-left: 3px;
+}
+#header .dropdown {
+  display: inline-block;
+}
+
 #header-left {
   float: left;
   line-height: 50px;
@@ -120,7 +139,7 @@ h2 a {
 #footer {
   width: 100%;
   border-top: 1px solid rgba(0,0,0,0.06);
-  background-color: #f8f9fb;
+  background-color: #151A21;
 }
 #footer-left {
   float: left;
@@ -156,9 +175,23 @@ h2 a {
 #logo img {
   max-width: 100%;
 }
+
+preview {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  vertical-align: middle;
+  overflow: auto;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
 .phone {
   display: inline-block;
-  margin: 20px 20px 0 20px;
+  margin: -80px 20px 0 20px;
   vertical-align: middle;
 }
 .phone h2 {
@@ -279,19 +312,29 @@ h2 a {
   position: absolute;
 }
 
-preview {
-  flex: 1;
-  width: 100%;
-  display: block;
-  vertical-align: middle;
-  overflow: auto;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
+#main {
+  display: flex;
   flex-direction: row;
+  flex: 1;
+}
+
+#sidebar {
+  width: 300px;
+  background-color: #141A21;
 }
 
+#menu {
+  padding: 0;
+  margin: 0;
+}
+#menu li {
+  list-style: none;
+  margin: 15px;
+}
+#menu li a {
+  color: #a2a9b4;
+  text-decoration: none;
+}
 
 @media screen and (max-height: 800px) {
   #header {
diff --git a/lab/static/js/lab.js b/lab/static/js/lab.js
index 0deb3ba2..ef694bbd 100644
--- a/lab/static/js/lab.js
+++ b/lab/static/js/lab.js
@@ -1,7 +1,19 @@
+
+
 var $ = document.querySelector.bind(document);
 
 var API_ROOT = '/ionic-lab/api/v1';
 
+function loadSearchIndex() {
+  var index = 'http://ionicframework.com/docs/data/index.json';
+  fetch(index, {
+  }).then((r) => {
+    return r.json();
+  }).then(json => {
+    console.log('Loaded search index', json);
+  })
+}
+
 function tryShowViewPopup() {
   var view = window.localStorage.getItem('ionic_viewpop');
 
@@ -106,6 +118,7 @@ function loadCordova() {
   req.send(null);
 }
 
+loadSearchIndex();
 showLastDevices();
 loadCordova();
 bindToggles();

From 3dd5286e715a5e65b68343cedcda6e44121cc3fa Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 27 Jun 2017 16:29:45 -0500
Subject: [PATCH 2/6] More more more

---
 lab/index.html               |  24 +++++++++++-
 lab/static/css/style.css     |  73 +++++++++++++++++++++++++++++++++--
 lab/static/img/view-logo.jpg | Bin 0 -> 4870 bytes
 lab/static/js/lab.js         |  56 ++++++++++++++++++++++++++-
 4 files changed, 146 insertions(+), 7 deletions(-)
 create mode 100644 lab/static/img/view-logo.jpg

diff --git a/lab/index.html b/lab/index.html
index a81745fa..830f1667 100644
--- a/lab/index.html
+++ b/lab/index.html
@@ -11,6 +11,9 @@
     <div id="app">
       <div id="header">
         <div id="header-left">
+          <a href="#" id="menu-toggle">
+            <i class="icon ion-navicon-round"></i>
+          </a>
           <a target="_blank" href="http://ionicframework.com/" id="logo">
           </a>
         </div>
@@ -29,12 +32,29 @@
       </div>
       <div id="main">
         <div id="sidebar">
+          <div class="title">Quick reference</div>
+          <div class="close"><i class="icon ion-close-circled"></i></div>
           <ul id="menu">
-            <li><a href="https://ionicframework.com/docs/components">Components</a></li>
+            <li><a>Components</a>
+              <ul id="components-menu">
+                <li><a data-href="#overview">Overview</a></li>
+                <li><a data-href="#action-sheets">Action Sheets</a></li>
+                <li><a data-href="#alert">Alerts</a></li>
+              </ul>
+            </li>
             <li><a href="https://ionicframework.com/docs/api">API Reference</a></li>
             <li><a href="https://ionicframework.com/docs/native">Ionic Native</a></li>
-            <li><a href="https://ionicframework.com/docs/native">Ionic Native</a></li>
+            <li><a href="https://ionicframework.com/docs/">All Documentation</a></li>
           </ul>
+          <div id="view-ad" class="ad">
+            <img class="logo" src="/ionic-lab/static/img/view-logo.jpg" style="height: 64px"/>
+            <div class="ad-content">
+              Test and share your app live on iOS and Android
+              with the Ionic View app!
+              <br>
+              <a href="http://view.ionic.io">Download View</a>
+            </div>
+          </div>
         </div>
         <preview>
         </preview>
diff --git a/lab/static/css/style.css b/lab/static/css/style.css
index 18fe5ca0..57656fcd 100644
--- a/lab/static/css/style.css
+++ b/lab/static/css/style.css
@@ -59,7 +59,7 @@ h2 a {
 }
 .dropdown:hover .dropdown-toggle {
   /* increase the hit box when hovering */
-  padding-left: 100px;
+  /*padding-left: 100px;*/
 }
 .dropdown:hover .dropdown-menu {
   display: block;
@@ -128,6 +128,9 @@ h2 a {
   float: left;
   line-height: 50px;
 }
+#header-left #menu-toggle {
+  margin-left: 13px;
+}
 #header a:hover {
   opacity: 1;
 }
@@ -319,21 +322,85 @@ preview {
 }
 
 #sidebar {
-  width: 300px;
+  position: relative;
+  z-index: 1;
   background-color: #141A21;
+  height: 100%;
+  width: 300px;
+  box-sizing: border-box;
+  padding: 15px;
+  overflow: auto;
+}
+
+#sidebar.hidden {
+  display: none;
+}
+#sidebar .close {
+  cursor: pointer;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  color: #a2a9b4;
+  font-size: 24px;
+}
+#sidebar .title {
+  font-size: 20px;
+  margin-top: 5px;
+  color: white;
 }
 
 #menu {
   padding: 0;
   margin: 0;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+   -khtml-user-select: none; /* Konqueror HTML */
+     -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+          user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome and Opera */
 }
 #menu li {
   list-style: none;
-  margin: 15px;
+  margin: 15px 0;
 }
 #menu li a {
   color: #a2a9b4;
   text-decoration: none;
+  cursor: pointer;
+}
+#menu > li > ul {
+  display: none;
+  padding: 0;
+  margin: 0;
+}
+#menu > li > ul li {
+  padding-left: 15px;
+}
+#menu > li.expanded > ul {
+  display: block;
+}
+
+.ad {
+  background-color: #232A31;
+  cursor: pointer;
+  border-radius: 2px;
+  border: 1px solid #3f4650;
+  font-size: 13px;
+  color: white;
+  padding: 10px;
+  display: flex;
+  margin-top: 55px;
+}
+.ad .logo {
+  display: block;
+  margin-right: 15px;
+}
+.ad .content {
+  flex: 1;
+}
+.ad a {
+  color: #308EFD;
 }
 
 @media screen and (max-height: 800px) {
diff --git a/lab/static/img/view-logo.jpg b/lab/static/img/view-logo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9acc7249ddc901cad6365676ab0ca9dcdba4f5a8
GIT binary patch
literal 4870
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

literal 0
HcmV?d00001

diff --git a/lab/static/js/lab.js b/lab/static/js/lab.js
index ef694bbd..810265e9 100644
--- a/lab/static/js/lab.js
+++ b/lab/static/js/lab.js
@@ -14,6 +14,57 @@ function loadSearchIndex() {
   })
 }
 
+function buildMenu() {
+  buildComponentsMenu();
+  const sidebar = $('#sidebar');
+  const topLevels = sidebar.querySelectorAll('#menu > li > a');
+  Array.prototype.map.call(topLevels, a => {
+    if(!a.href) {
+      a.addEventListener('click', e => {
+        if(a.parentNode.classList.contains('expanded')) {
+          a.parentNode.classList.remove('expanded');
+        } else {
+          a.parentNode.classList.add('expanded');
+        }
+        e.preventDefault();
+      });
+    }
+  })
+
+  $('#view-ad').addEventListener('click', (e) => {
+    var win = window.open('http://view.ionic.io/', '_blank');
+    win.focus();
+  })
+
+  const s = $('#sidebar');
+
+  const toggleMenu = e => {
+    if(s.classList.contains('hidden')) {
+      s.classList.remove('hidden');
+    } else {
+      s.classList.add('hidden');
+    }
+  }
+
+  $('#menu-toggle').addEventListener('click', toggleMenu);
+  $('#sidebar .close').addEventListener('click', toggleMenu);
+}
+
+function buildComponentsMenu() {
+  var items = [{"href":"http://ionicframework.com/docs/components/#overview","title":"Overview"},{"href":"http://ionicframework.com/docs/components/#action-sheets","title":"Action Sheets"},{"href":"http://ionicframework.com/docs/components/#alert","title":"Alerts"},{"href":"http://ionicframework.com/docs/components/#badges","title":"Badges"},{"href":"http://ionicframework.com/docs/components/#buttons","title":"Buttons"},{"href":"http://ionicframework.com/docs/components/#cards","title":"Cards"},{"href":"http://ionicframework.com/docs/components/#checkbox","title":"Checkbox"},{"href":"http://ionicframework.com/docs/components/#datetime","title":"DateTime"},{"href":"http://ionicframework.com/docs/components/#fabs","title":"FABs"},{"href":"http://ionicframework.com/docs/components/#gestures","title":"Gestures"},{"href":"http://ionicframework.com/docs/components/#grid","title":"Grid"},{"href":"http://ionicframework.com/docs/components/#icons","title":"Icons"},{"href":"http://ionicframework.com/docs/components/#inputs","title":"Inputs"},{"href":"http://ionicframework.com/docs/components/#lists","title":"Lists"},{"href":"http://ionicframework.com/docs/components/#loading","title":"Loading"},{"href":"http://ionicframework.com/docs/components/#menus","title":"Menus"},{"href":"http://ionicframework.com/docs/components/#modals","title":"Modals"},{"href":"http://ionicframework.com/docs/components/#navigation","title":"Navigation"},{"href":"http://ionicframework.com/docs/components/#popovers","title":"Popover"},{"href":"http://ionicframework.com/docs/components/#radio","title":"Radio"},{"href":"http://ionicframework.com/docs/components/#range","title":"Range"},{"href":"http://ionicframework.com/docs/components/#searchbar","title":"Searchbar"},{"href":"http://ionicframework.com/docs/components/#segment","title":"Segment"},{"href":"http://ionicframework.com/docs/components/#select","title":"Select"},{"href":"http://ionicframework.com/docs/components/#slides","title":"Slides"},{"href":"http://ionicframework.com/docs/components/#tabs","title":"Tabs"},{"href":"http://ionicframework.com/docs/components/#toast","title":"Toast"},{"href":"http://ionicframework.com/docs/components/#toggle","title":"Toggle"},{"href":"http://ionicframework.com/docs/components/#toolbar","title":"Toolbar"}];
+
+  const componentsMenu = $('#components-menu');
+  items.map(i => {
+    const l = document.createElement('li')
+    const a = document.createElement('a')
+    a.href = i.href
+    a.target = "_blank";
+    a.innerText = i.title
+    l.appendChild(a)
+    componentsMenu.appendChild(l)
+  })
+}
+
 function tryShowViewPopup() {
   var view = window.localStorage.getItem('ionic_viewpop');
 
@@ -118,8 +169,9 @@ function loadCordova() {
   req.send(null);
 }
 
-loadSearchIndex();
+//loadSearchIndex();
+buildMenu();
 showLastDevices();
 loadCordova();
 bindToggles();
-tryShowViewPopup();
+//tryShowViewPopup();

From 037aecdabf1919192af3bccfad6b2196c177be13 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 28 Jun 2017 07:49:43 -0500
Subject: [PATCH 3/6] Lab style

---
 lab/static/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lab/static/css/style.css b/lab/static/css/style.css
index 57656fcd..b528ee25 100644
--- a/lab/static/css/style.css
+++ b/lab/static/css/style.css
@@ -194,7 +194,7 @@ preview {
 
 .phone {
   display: inline-block;
-  margin: -80px 20px 0 20px;
+  margin: 0px 20px 0 20px;
   vertical-align: middle;
 }
 .phone h2 {

From 8456950f84dc8f030c247ca11c12aaf8875f1006 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 28 Jun 2017 08:44:01 -0500
Subject: [PATCH 4/6] Store menu status

---
 lab/index.html                | 13 +++++-------
 lab/static/css/style.css      | 27 ++++++++++++++++++------
 lab/static/js/lab.js          | 39 ++++++++++++++++++++++-------------
 src/dev-server/http-server.ts |  3 ++-
 src/dev-server/lab.ts         |  8 +++++++
 5 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/lab/index.html b/lab/index.html
index 830f1667..f807f748 100644
--- a/lab/index.html
+++ b/lab/index.html
@@ -31,20 +31,17 @@
         </div>
       </div>
       <div id="main">
-        <div id="sidebar">
+        <div id="sidebar" class="hidden">
           <div class="title">Quick reference</div>
           <div class="close"><i class="icon ion-close-circled"></i></div>
-          <ul id="menu">
+          <ul id="menu" class="menu">
             <li><a>Components</a>
               <ul id="components-menu">
-                <li><a data-href="#overview">Overview</a></li>
-                <li><a data-href="#action-sheets">Action Sheets</a></li>
-                <li><a data-href="#alert">Alerts</a></li>
               </ul>
             </li>
-            <li><a href="https://ionicframework.com/docs/api">API Reference</a></li>
-            <li><a href="https://ionicframework.com/docs/native">Ionic Native</a></li>
-            <li><a href="https://ionicframework.com/docs/">All Documentation</a></li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/api">API Reference</a></li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/native">Ionic Native</a></li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/">All Documentation</a></li>
           </ul>
           <div id="view-ad" class="ad">
             <img class="logo" src="/ionic-lab/static/img/view-logo.jpg" style="height: 64px"/>
diff --git a/lab/static/css/style.css b/lab/static/css/style.css
index b528ee25..65b40002 100644
--- a/lab/static/css/style.css
+++ b/lab/static/css/style.css
@@ -335,6 +335,7 @@ preview {
 #sidebar.hidden {
   display: none;
 }
+
 #sidebar .close {
   cursor: pointer;
   position: absolute;
@@ -343,13 +344,14 @@ preview {
   color: #a2a9b4;
   font-size: 24px;
 }
+
 #sidebar .title {
   font-size: 20px;
   margin-top: 5px;
   color: white;
 }
 
-#menu {
+.menu {
   padding: 0;
   margin: 0;
   -webkit-touch-callout: none; /* iOS Safari */
@@ -360,26 +362,39 @@ preview {
           user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome and Opera */
 }
-#menu li {
+.menu li {
   list-style: none;
   margin: 15px 0;
 }
-#menu li a {
+.menu li a {
   color: #a2a9b4;
   text-decoration: none;
   cursor: pointer;
 }
-#menu > li > ul {
+.menu > li > ul {
   display: none;
   padding: 0;
   margin: 0;
 }
-#menu > li > ul li {
+.menu > li > ul li {
   padding-left: 15px;
 }
-#menu > li.expanded > ul {
+.menu > li.expanded > ul {
   display: block;
 }
+.menu hr {
+  height: 1px;
+  border: 0;
+  background-color: #2b3642;
+}
+.menu .version {
+  color: #a2a9b4;
+  opacity: 0.5;
+  font-size: 12px;
+}
+
+#menu {
+}
 
 .ad {
   background-color: #232A31;
diff --git a/lab/static/js/lab.js b/lab/static/js/lab.js
index 810265e9..187f1c4a 100644
--- a/lab/static/js/lab.js
+++ b/lab/static/js/lab.js
@@ -1,23 +1,33 @@
-
-
 var $ = document.querySelector.bind(document);
 
 var API_ROOT = '/ionic-lab/api/v1';
 
-function loadSearchIndex() {
-  var index = 'http://ionicframework.com/docs/data/index.json';
-  fetch(index, {
-  }).then((r) => {
-    return r.json();
-  }).then(json => {
-    console.log('Loaded search index', json);
+var APP_CONFIG = {}
+
+function loadAppConfig() {
+  var req = new XMLHttpRequest();
+  req.addEventListener('load', function(e) {
+    setAppConfig(JSON.parse(req.response));
   })
+  req.open('GET', API_ROOT + '/app-config', true)
+  req.send(null);
 }
 
+function setAppConfig(data) {
+  APP_CONFIG = data;
+}
+
+
 function buildMenu() {
   buildComponentsMenu();
   const sidebar = $('#sidebar');
   const topLevels = sidebar.querySelectorAll('#menu > li > a');
+
+  const lastMenuConfig = window.localStorage.getItem('ionic_labmenu');
+  if(lastMenuConfig === 'true' || lastMenuConfig === null) {
+    sidebar.classList.remove('hidden');
+  }
+
   Array.prototype.map.call(topLevels, a => {
     if(!a.href) {
       a.addEventListener('click', e => {
@@ -36,13 +46,13 @@ function buildMenu() {
     win.focus();
   })
 
-  const s = $('#sidebar');
-
   const toggleMenu = e => {
-    if(s.classList.contains('hidden')) {
-      s.classList.remove('hidden');
+    if(sidebar.classList.contains('hidden')) {
+      sidebar.classList.remove('hidden');
+      window.localStorage.setItem('ionic_labmenu', 'true');
     } else {
-      s.classList.add('hidden');
+      sidebar.classList.add('hidden');
+      window.localStorage.setItem('ionic_labmenu', 'false');
     }
   }
 
@@ -170,6 +180,7 @@ function loadCordova() {
 }
 
 //loadSearchIndex();
+loadAppConfig();
 buildMenu();
 showLastDevices();
 loadCordova();
diff --git a/src/dev-server/http-server.ts b/src/dev-server/http-server.ts
index ffd50da8..59a95dd5 100644
--- a/src/dev-server/http-server.ts
+++ b/src/dev-server/http-server.ts
@@ -18,7 +18,7 @@ import * as Constants from '../util/constants';
 import { getBooleanPropertyValue } from '../util/helpers';
 import { getProjectJson, IonicProject } from '../util/ionic-project';
 
-import { LabAppView, ApiCordovaProject } from './lab';
+import { LabAppView, ApiCordovaProject, ApiPackageJson } from './lab';
 
 
 /**
@@ -40,6 +40,7 @@ export function createHttpServer(config: ServeConfig): express.Application {
   app.use(IONIC_LAB_URL + '/static', express.static(path.join(__dirname, '..', '..', 'lab', 'static')));
   app.get(IONIC_LAB_URL, LabAppView);
   app.get(IONIC_LAB_URL + '/api/v1/cordova', ApiCordovaProject );
+  app.get(IONIC_LAB_URL + '/api/v1/app-config', ApiPackageJson);
 
   app.get('/cordova.js', servePlatformResource, serveMockCordovaJS);
   app.get('/cordova_plugins.js', servePlatformResource);
diff --git a/src/dev-server/lab.ts b/src/dev-server/lab.ts
index 0873ff10..91309e5b 100644
--- a/src/dev-server/lab.ts
+++ b/src/dev-server/lab.ts
@@ -16,3 +16,11 @@ export let ApiCordovaProject = (req: any, res: any) => {
     res.json(config);
   });
 };
+
+export let ApiPackageJson = (req: any, res: any) => {
+  res.sendFile(path.join(process.cwd(), 'package.json'), {
+    headers: {
+      'content-type': 'application/json'
+    }
+  })
+};

From 35f4f9b860591722c2fc3b5c0439e5465059d029 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 28 Jun 2017 09:06:26 -0500
Subject: [PATCH 5/6] Lab logo

---
 lab/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lab/index.html b/lab/index.html
index f807f748..7ca00d80 100644
--- a/lab/index.html
+++ b/lab/index.html
@@ -14,8 +14,8 @@
           <a href="#" id="menu-toggle">
             <i class="icon ion-navicon-round"></i>
           </a>
-          <a target="_blank" href="http://ionicframework.com/" id="logo">
-          </a>
+          <div id="logo">
+          </div>
         </div>
 
         <div id="header-right">

From 36ae20ab52ab342c685b9eb4b505e21eeec8b6a5 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 28 Jun 2017 09:20:59 -0500
Subject: [PATCH 6/6] Margin changes

---
 lab/static/css/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lab/static/css/style.css b/lab/static/css/style.css
index 65b40002..d113fc5b 100644
--- a/lab/static/css/style.css
+++ b/lab/static/css/style.css
@@ -200,6 +200,7 @@ preview {
 .phone h2 {
   text-align: left;
   vertical-align: middle;
+  margin-top: 0;
 }
 .phone-icon {
   display: inline-block;
