docs app css/js/html rewrite

docs/src/templates/doc_widgets.css

@@ -84,3 +84,42 @@ div.tabs-content-inner {
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
 }
+
+
+/* Tutorial Nav Bar */
+
+#tutorial-nav {
+  margin: 0.5em 0 1em 0;
+  padding: 0;
+  list-style-type: none;
+  background: #7989D6;
+
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+
+  -moz-box-shadow: 4px 4px 6px #48577D;
+  -webkit-box-shadow: 4px 4px 6px #48577D;
+  box-shadow: 4px 4px 6px #48577D;
+}
+
+
+#tutorial-nav li {
+  display: inline;
+}
+
+
+#tutorial-nav a:link, #tutorial-nav a:visited {
+  font-size: 1.2em;
+  color: #FFF;
+  text-decoration: none;
+  text-align: center;
+  display: inline-block;
+  width: 11em;
+  padding: 0.2em 0;
+}
+
+
+#tutorial-nav a:hover {
+  color: #000;
+}

docs/src/templates/doc_widgets.js

@@ -86,7 +86,7 @@
   };
 
   var HTML_TPL =
-      '<a ng:init="showInstructions = {show}" ng:show="!showInstructions" ng:click="showInstructions = true" href>Show Instructions</a>' +
+      '<p><a ng:init="showInstructions = {show}" ng:show="!showInstructions" ng:click="showInstructions = true" href>Workspace Reset Instructions</a></p>' +
       '<div ng:controller="TutorialInstructionsCtrl" ng:show="showInstructions">' +
         '<div class="tabs-nav">' +
           '<ul>' +
@@ -111,7 +111,7 @@
       '<ol>' +
       '<li><p>Reset the workspace to step {step}.</p>' +
       '<pre><code> git checkout -f step-{step}</code></pre></li>' +
-      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">anglar\'s server</a>.</p></li>' +
+      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
       '</ol>' +
     '</div>' +
 
@@ -135,7 +135,7 @@
       '<ol>' +
       '<li><p>Reset the workspace to step {step}.</p>' +
       '<pre><code> ./goto_step.bat {step}</code></pre></li>' +
-      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">anglar\'s server</a>.</p></li>' +
+      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
       '</ol>' +
     '</div>';
 
@@ -167,4 +167,42 @@
     element.append(tabs);
     element.show();
   });
+
+
+  angular.directive('doc:tutorial-nav', function(step) {    
+    return function(element) {
+      var prevStep, codeDiff, nextStep,
+          content;
+
+      step = parseInt(step, 10);
+
+      if (step === 0) {
+        prevStep = '';
+        nextStep = 'step_01';
+        codeDiff = 'step-0~7...step-0';
+      } else if (step === 11){
+        prevStep = 'step_10';
+        nextStep = 'the_end';
+        codeDiff = 'step-10...step-11';
+      } else {
+        prevStep = 'step_' + pad(step - 1)
+        nextStep = 'step_'  + pad(step + 1);
+        codeDiff = 'step-' + step + '...step-' + step;
+      }
+
+      content = angular.element(
+        '<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>'
+      );
+
+      element.attr('id', 'tutorial-nav');
+      element.append(content);
+    }
+
+    function pad(step) {
+      return (step < 10) ? ('0' + step) : step;
+    }
+  });
 })();

docs/src/templates/docs.css

@@ -8,38 +8,37 @@ body {
 /*----- Layout Generic Styles -----*/
 
 body,td,th {
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 14px;
-    color: #000;
-    margin: 0px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  color: #000;
+  margin: 0px;
 }
 
 a:link, a:visited, a:hover {
-    color: #5d6db6;
-    text-decoration: none;
+  color: #5d6db6;
+  text-decoration: none;
 }
 
 a:active {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 p {
-    font-size: 14px;
-    padding-right: 10px;
-    padding-left: 15px;
+  font-size: 14px;
+  padding: 0.1em 1em;
+  line-height: 1.4em;
 }
 
-.h1 {
-    font-size: 24px;
-    color: #000;
-    text-align: left;
-    font-weight: bold;
+h2 {
+  margin: 1.5em 0 1em 0;
 }
 
-.h2 {
-    font-size: 18px;
-    text-align: left;
-    text-indent: 10px;
+h3 {
+  margin: 1.8em 0 1em 0;
+}
+
+h4 {
+  margin: 2em 0 1em 0;
 }
 
 
@@ -53,6 +52,7 @@ p {
     padding: 5px 0;
 }
 
+
 #oldIePrompt a,
 #oldIePrompt a:visited {
     color: yellow;
@@ -89,10 +89,12 @@ p {
   border-bottom: 4px solid #808080;
 }
 
+
 #navbar li {
   display: inline;
 }
 
+
 #navbar a:link, #navbar a:visited {
   font-size: 1.2em;
   color: #FFF;
@@ -104,21 +106,26 @@ p {
   padding: 0.5em 0;
 }
 
+
 #navbar a:hover {
   color: #000;
 }
 
+
 #navbar a.current {
   font-weight: bold;
   background-color: #333;
+
   border-radius: 10px;
   -webkit-border-radius:10px;
   -moz-border-radius: 10px;
+
   box-shadow: 4px 4px 6px #48577D;
   -webkit-box-shadow: 4px 4px 6px #48577D;
   -moz-box-shadow: 4px 4px 6px #48577D;
 }
 
+
 #navbar a.current:hover {
   color: #fff;
 }
@@ -156,17 +163,17 @@ p {
 
 #content-list {
   background: #fff;
-  padding: 1em 0em 1em 2.5em;
+  padding: 1em 0.4em 1em 2em;
   margin: 0.95em -1em -1em -0.6em;
   line-height: 1.5em;
 }
 
 
 #content-list .level-0 {
-  font-size: 1.8em;
+  font-size: 1.3em;
   list-style: none;
-  margin-left: -0.8em;
-  padding-bottom: 0.7em;
+  margin-left: -1.2em;
+  padding-bottom: 0.2em;
 }
 
 #content-list .level-1 {
@@ -187,6 +194,7 @@ p {
 
 
 /*----- content styles -----*/
+
 #content-panel {
   float: left;
   margin-top: 4em;
@@ -209,7 +217,7 @@ p {
   font-size: 2em;
   font-weight: normal;
   color: #fff;
-  margin: 0;
+  margin: 0 4em 0 0;
   height: 1em;
 }
 
@@ -222,6 +230,16 @@ p {
 }
 
 
+#feedback {
+  float: right;
+  margin-top: -2.3em;
+  margin-right: 0.5em;
+  width: 8em;
+  font-size: 0.8em;
+  color: #fff;
+}
+
+
 #content > h1 {
   display: none;
 }
@@ -237,17 +255,17 @@ p {
   -webkit-box-shadow: 4px 4px 6px #48577D;
   box-shadow: 4px 4px 6px #48577D;
 
-
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
 }
 
-#feedback {
-  float: right;
-  margin-top: -2.3em;
-  margin-right: 0.5em;
-  width: 8em;
-  font-size: 0.8em;
-  color: #fff;
+
+#content > div > pre {
+  padding-left: 1.5em;
+}
+
+
+#content .syntaxhighlighter  {
+  margin: 1.5em 0 1.5em 0 !important;;
 }

docs/src/templates/docs.js

@@ -6,7 +6,7 @@ function DocsController($location, $browser, $window) {
   this.$location = $location;
 
   if (!HAS_HASH.test($location.href)) {
-    $location.hashPath = '!api/angular';
+    $location.hashPath = '!api/';
   }
 
   this.$watch('$location.hashPath', function(hashPath) {
@@ -65,7 +65,7 @@ angular.widget('code', function(element){
 });
 
 SyntaxHighlighter['defaults'].toolbar = false;
-SyntaxHighlighter['defaults'].gutter = false;
+SyntaxHighlighter['defaults'].gutter = true;
 
 /**
  * Controller for tutorial instructions

docs/src/templates/index.html

@@ -54,7 +54,7 @@
       <li><a href="#!guide" ng:class="selectedSection('guide')">Developer Guide</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="#!intro/started" ng:class="selectedSection('intro')">Getting Started</a></li>
+      <li><a href="#!misc/started" ng:class="selectedSection('intro')">Getting Started</a></li>
       <li><a href="#!tutorial" ng:class="selectedSection('tutorial')">Tutorial</a></li>
     </ul>