From d67138a83388f8fe1b348a8826ee95635a7a536b Mon Sep 17 00:00:00 2001
From: Thomas Burleson <ThomasBurleson@Gmail.com>
Date: Mon, 18 May 2015 19:48:26 -0500
Subject: [PATCH] update(html): fix use of toolbars and shadows.

---
 app/assets/app.css |  2 +-
 app/index.html     | 59 ++++++++++++++++++++++++++--------------------
 2 files changed, 35 insertions(+), 26 deletions(-)
diff --git a/app/assets/app.css b/app/assets/app.css
index 4c12d4e19..1450965e3 100644
--- a/app/assets/app.css
+++ b/app/assets/app.css
@@ -57,7 +57,7 @@ md-list .md-button {
   margin: 8px auto 16px 0;
   position: absolute;
   top: 10px;
-  right: 25px;
+  right: 40px;
 }
 
 #content md-icon.avatar {
diff --git a/app/index.html b/app/index.html
index ab6fac47b..709d44e19 100644
--- a/app/index.html
+++ b/app/index.html
@@ -13,7 +13,29 @@
     <link rel="stylesheet" href="assets/app.css"/>
   </head>
 
-  <body ng-app="starterApp" layout="column" ng-controller="UserController as ul">
+  <body ng-app="starterApp" layout="row" ng-controller="UserController as ul">
+
+  <md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
+                md-component-id="left"
+                md-is-locked-open="$mdMedia('gt-sm')">
+
+    <md-toolbar class="md-whiteframe-z1">
+      <h1>Users</h1>
+    </md-toolbar>
+
+    <md-list>
+      <md-list-item ng-repeat="it in ul.users">
+          <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
+            <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
+            {{it.name}}
+          </md-button>
+      </md-list-item>
+    </md-list>
+
+  </md-sidenav>
+
+
+  <div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">
 
     <md-toolbar layout="row" class="md-whiteframe-z1">
       <md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
@@ -22,31 +44,18 @@
       <h1>Angular Material - Starter App</h1>
     </md-toolbar>
 
-    <div flex layout="row">
-
-        <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-z2" md-component-id="left">
-          <md-list>
-            <md-list-item ng-repeat="it in ul.users">
-                <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
-                  <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
-                  {{it.name}}
-                </md-button>
-            </md-list-item>
-          </md-list>
-        </md-sidenav>
-
-        <md-content flex id="content">
-          <md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
-          <h2>{{ul.selected.name}}</h2>
-          <p>{{ul.selected.content}}</p>
-
-          <md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
-            <md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
-            <md-icon md-svg-icon="share"></md-icon>
-          </md-button>
-        </md-content>
+    <md-content flex id="content">
+        <md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
+        <h2>{{ul.selected.name}}</h2>
+        <p>{{ul.selected.content}}</p>
+
+        <md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
+          <md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
+          <md-icon md-svg-icon="share"></md-icon>
+        </md-button>
+      </md-content>
 
-    </div>
+  </div>
 
     <script src="./bower_components/angular/angular.js"></script>
     <script src="./bower_components/angular-animate/angular-animate.js"></script>
