small changes, fixing version dependencies, solving encoding issuex

Author: SebastianMetzger

Gruntfile.js

@@ -1,7 +1,7 @@
 module.exports = function(grunt) {
 // Load Grunt tasks declared in the package.json file
     require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
-
+    grunt.loadNpmTasks('grunt-contrib-jshint');
 // Configure Grunt
     grunt.initConfig({
 
@@ -35,13 +35,20 @@ module.exports = function(grunt) {
             all: {
                 path: 'http://localhost:8080/index.html'
             }
-        }
+        },
+         jshint: {
+            all: ['Gruntfile.js', 'controllers/**/*.js']
+          }
     });
 
 // Creates the `server` task
     grunt.registerTask('server', [
+        'jshint',
         'express',
         'open',
         'watch'
     ]);
+    grunt.registerTask('default', [
+        'jshint'
+    ]);
 };

bower.json

@@ -11,6 +11,11 @@
   ],
   "devDependencies": {
     "angular-material": "~0.5.1",
-    "material-design-icons": "~1.0.1"
+    "material-design-icons": "~1.0"
+  },
+  "resolutions": {
+    "angular": "1.3.0-rc.4",
+    "angular-animate": "1.3.0",
+    "angular-aria": "1.3.0"
   }
 }

controllers/controllers.js

@@ -1,5 +1,7 @@
+"use strict";
 // Include app dependency on ngMaterial
 var app = angular.module( 'YourApp', [ 'ngMaterial' ] );
+// Main Controller
 app.controller("YourController", ['$scope', '$mdDialog', '$mdSidenav', function($scope, $mdDialog, $mdSidenav) {
 
     $scope.openDialog = function($event) {
@@ -34,7 +36,7 @@ app.controller("YourController", ['$scope', '$mdDialog', '$mdSidenav', function(
             divider: true
         },
         {
-            title: "Dell’s Life After Wall Street - NYTimes.com",
+            title: "Dell's Life After Wall Street - NYTimes.com",
             description: "Dell is trying to graduate/evolve/pivot from PCs to lots of other products & industries. Still being the backbone of the company, PC sales are financing the transition, but new products are supporting PC/server sales as well. Dell/the article don't give any numbers yet on how well (or not) those new categories are working. Increased risk for increased potential upside.",
             expanded: false,
             content: {
@@ -52,7 +54,7 @@ app.controller("YourController", ['$scope', '$mdDialog', '$mdSidenav', function(
             }
         },
         {
-            title: "Sidechains – AVC",
+            title: "Sidechains - AVC",
             description: "Fred Wilson gives a simple explanation of 'pegged sidechains', and their importantance to the future of the #bitcoin ecosystem. Worth the read.",
             expanded: false,
             content: {
@@ -83,7 +85,7 @@ app.controller("YourController", ['$scope', '$mdDialog', '$mdSidenav', function(
             }
         },
         {
-            title: "“Ethanifier” Lets You Build Your Own Single-Purpose Messaging App Like The Viral Hit “Ethan” | TechCrunch",
+            title: "'Ethanifier' Lets You Build Your Own Single-Purpose Messaging App Like The Viral Hit “Ethan” | TechCrunch",
             description: "Thoughts on NYT's piece on FB trying to get publishers to hand over their content / publish to FB (http://www.nytimes.com/2014/10/27/business/media/facebook-offers-life-raft-but-publishers-are-wary.html). Author fears that if publishers bow, FB could have as big of an impact to news/information discovery as Google (which is already frightening).",
             expanded: false,
             content: {
@@ -172,10 +174,16 @@ app.controller("YourController", ['$scope', '$mdDialog', '$mdSidenav', function(
         $mdBottomSheet.hide(clickedItem);
     };
 }]);
-
+// Dialog Controller
 app.controller('DialogController', function($scope, $mdDialog, name) {
     $scope.userName = name;
     $scope.closeDialog = function() {
         $mdDialog.hide();
     };
 });
+// Left Sidebar Controller
+app.controller('LeftCtrl', function($scope, $timeout, $mdSidenav) {
+  $scope.close = function() {
+    $mdSidenav('left').close();
+  };
+});

index.html

@@ -1,35 +1,44 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
     <link rel="stylesheet" href="/bower_components/angular-material/themes/blue-theme.css">
     <link rel="stylesheet" href="/style.css">
 </head>
 <body layout="vertical" md-theme="blue" layout-fill ng-app="YourApp" ng-controller="YourController">
 <header>
-    <md-toolbar scroll-shrink>
+    <md-toolbar scroll-shrink layout="row">
         <div class="md-toolbar-tools">
             <md-button ng-click="toggleMenu()">Menu</md-button>
             <h3>
-                <span>Angular Material Inbox</span>
+                <span>Angular Inbox</span>
             </h3>
         </div>
     </md-toolbar>
 </header>
 <div layout="vertical" flex>
+    <!-- LEFT SIDEBAR -->
     <md-sidenav class="md-sidenav-left" component-id="left">
         <md-toolbar class="md-theme-indigo">
             <h1 class="md-toolbar-tools">Sidenav Left</h1>
         </md-toolbar>
-        <md-content flex>
-            <p>Stuff</p>
+        <md-content ng-controller="LeftCtrl" class="md-padding" flex layout="vertical">
             <md-button ng-click="close()" class="md-primary">
-                Close Sidenav Right
+                <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>Inbox
             </md-button>
+            <md-button ng-click="close()" class="md-primary">
+                <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>Snoozed
+            </md-button>
+            <md-button ng-click="close()" class="md-primary">
+                <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>Done
+            </md-button>
+            <md-divider></md-divider>
         </md-content>
     </md-sidenav>
-    <md-content layout="horizontal" layout-align="center">
+    <!-- MAIN CONTENT -->
+    <md-content id="main" layout="horizontal" layout-align="center">
         <md-list id="content">
             <div ng-repeat="chunk in ::chunks">
                 <p ng-if="chunk.divider">{{chunk.title}}</p>
@@ -57,7 +66,7 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
                             <img class="round-face" src="http://placekitten.com/g/48/48"/>
                         </div>
                         <div flex>
-                            <img src="example/dell.jpg" />
+                            <img src="http://placekitten.com/g/800/400" />
                             <h2>{{ chunk.title }}</h2>
                             <p>{{ chunk.description }}</p>
                             <div ng-if="chunk.content && chunk.content.type === 'QUOTE'">
@@ -74,6 +83,7 @@ <h2>{{ chunk.title }}</h2>
     </md-content>
 </div>
 
+<!-- FAB POPUP -->
 <div id="fab-popup" layout="vertical" layout-align="space-between" ng-if="showAddButtons" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
     <md-button class="md-fab md-raised" ng-click="openDialog($event);" aria-label="New document">
         <md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
@@ -101,6 +111,7 @@ <h2>{{ chunk.title }}</h2>
     </md-button>
 </div>
 
+<!-- HOVERING FAB -->
 <md-button id="mainFab" class="md-fab md-raised" ng-click="showAddButtons = !showAddButtons;" aria-label="New document">
     <md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
 </md-button>

package.json

@@ -19,6 +19,7 @@
     "matchdep": "~0.3.0",
     "grunt-express": "~1.4.1",
     "grunt-contrib-watch": "~0.6.1",
-    "grunt-open": "~0.2.3"
+    "grunt-open": "~0.2.3",
+    "grunt-contrib-jshint": "~0.10.0"
   }
 }

style.css

@@ -14,7 +14,7 @@ footer {
     padding: 16px;
 }
 
-md-content.md-blue-theme {
+md-content#main.md-blue-theme {
     background-color: #ececec;
 }