update(html): fix use of toolbars and shadows.

famouspotatoes1 · May 19, 2015 · d67138a · d67138a
1 parent ea51544
commit d67138a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git 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
@@ -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>