docs(tutorial): update tutorial intro + steps 0-3

also contains all kinds of fixes that I had to make in the docs app to
get the tutorial to render correctly

4 files changed, 29 insertions, 8 deletions

diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
index 50de4ed3..bf49697d 100644
--- a/docs/src/templates/doc_widgets.js
+++ b/docs/src/templates/doc_widgets.js
@@ -291,14 +291,14 @@ angular.module('ngdocs.directives', [], function($compileProvider) {
         } else {
           prevStep = 'step_' + pad(step - 1);
           nextStep = 'step_'  + pad(step + 1);
-          codeDiff = 'step-' + step + '...step-' + step;
+          codeDiff = 'step-' + (step-1) + '...step-' + step;
         }
 
         content = angular.element(
-          '<li><a href="#!/tutorial/' + prevStep + '">Previous</a></li>' +
+          '<li><a href="tutorial/' + prevStep + '">Previous</a></li>' +
           '<li><a href="http://angular.github.com/angular-phonecat/step-' + step + '/app">Live Demo</a></li>' +
           '<li><a href="https://github.com/angular/angular-phonecat/compare/' + codeDiff + '">Code Diff</a></li>' +
-          '<li><a href="#!/tutorial/' + nextStep + '">Next</a></li>'
+          '<li><a href="tutorial/' + nextStep + '">Next</a></li>'
         );
 
         element.attr('id', 'tutorial-nav');
diff --git a/docs/src/templates/docs.css b/docs/src/templates/docs.css
index ee8eaaef..adf74ba0 100644
--- a/docs/src/templates/docs.css
+++ b/docs/src/templates/docs.css
@@ -518,3 +518,24 @@ td.empty-corner-lt {
 .even {
   background-color: #d3d3d3;
 }
+
+/* tutorial */
+
+#content .tutorial-start {
+  -moz-border-radius:8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+
+  background-color: #7989D6;
+  padding: 10px;
+  margin-left: 43%;
+  width: 100px;
+  color: #fff;
+  font-weight: bold;
+
+}
+
+#content .tutorial-start:hover {
+  color: #000;
+}
+
diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js
index 9d91c233..b82ba660 100644
--- a/docs/src/templates/docs.js
+++ b/docs/src/templates/docs.js
@@ -133,14 +133,14 @@ SyntaxHighlighter['defaults'].gutter = true;
  * @param $cookieStore
  * @constructor
  */
-function TutorialInstructionsCtrl($cookieStore) {
-  this.selected = $cookieStore.get('selEnv') || 'git-mac';
+function TutorialInstructionsCtrl($scope, $cookieStore) {
+  $scope.selected = $cookieStore.get('selEnv') || 'git-mac';
 
-  this.currentCls = function(id, cls) {
+  $scope.currentCls = function(id, cls) {
     return this.selected == id  ? cls || 'current' : '';
   };
 
-  this.select = function(id) {
+  $scope.select = function(id) {
     this.selected = id;
     $cookieStore.put('selEnv', id);
   };
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
index bb8d2f1e..794b3418 100644
--- a/docs/src/templates/index.html
+++ b/docs/src/templates/index.html
@@ -98,7 +98,7 @@
     <ul id="navbar">
       <li><a href="http://angularjs.org/">AngularJS</a></li>
       <li><a href="misc/started" ng:class="selectedSection('misc')">Getting Started</a></li>
-      <!-- <li><a href="tutorial" ng:class="selectedSection('tutorial')">Tutorial</a></li> -->
+      <li><a href="tutorial" ng:class="selectedSection('tutorial')">Tutorial</a></li>
       <li><a href="api" ng:class="selectedSection('api')">API Reference</a></li>
       <li><a href="cookbook" ng:class="selectedSection('cookbook')">Examples</a></li>
       <li><a href="guide" ng:class="selectedSection('guide')">Developer Guide</a></li>