docs(design): ui-fixes for examples, layout and API components

4 files changed, 218 insertions, 53 deletions

diff --git a/docs/app/assets/css/docs.css b/docs/app/assets/css/docs.css
index 2d667602..26e6b335 100644
--- a/docs/app/assets/css/docs.css
+++ b/docs/app/assets/css/docs.css
@@ -1,16 +1,21 @@
-body {
+html, body {
   position:relative;
+  height:100%;
 }
-body:before {
-  content:"";
-  position:absolute;
+
+.header-fixed {
+  position:fixed;
+  z-index:1000;
   top:0;
-  background:#eee;
-  height:120px;
   left:0;
   right:0;
 }
 
+.docs-navbar-primary {
+  border-radius:0!important;
+  margin-bottom:0!important;
+}
+
 /* Logo */
 /*.dropdown-menu {
   display:none;
@@ -112,8 +117,8 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .nav-breadcrumb {
-  padding:0 0 20px;
-  margin:4px 0 20px;
+  margin:4px 0;
+  padding:0;
 }
 
 .nav-breadcrumb-entry {
@@ -184,7 +189,8 @@ pre {
 }
 
 .api-profile-description > p:first-child {
-  font-size:20px;
+  margin:15px 0;
+  font-size:18px;
 }
 
 p > code,
@@ -259,13 +265,6 @@ iframe.example {
   border: 1px solid black;
 }
 
-.search-results-container {
-  padding-bottom:1em;
-  border-top:1px solid #111;
-  background:#181818;
-  box-shadow:inset 0 0 10px #111;
-}
-
 .search-results-frame {
   clear:both;
   display:table;
@@ -276,6 +275,13 @@ iframe.example {
   display:none;
 }
 
+.search-results-container {
+  padding-bottom:1em;
+  border-top:1px solid #111;
+  background:#181818;
+  box-shadow:inset 0 0 10px #111;
+}
+
 .search-results-container .search-results-group {
   vertical-align:top;
   padding:10px 10px;
@@ -305,35 +311,29 @@ iframe.example {
 }
 
 .search-close {
-  color:maroon;
-  position:absolute;
-  bottom:-20px;
-  left:50%;
-  margin-left:-25px;
-  height:50px;
-  width:50px;
-  color:white;
-  font-size:1.5em;
-  text-align:center;
-  background:#333;
-  box-shadow:inset 0 0 5px #000;
-  border-radius:50px;
-}
-
-.search-close-icon {
-  margin-top:14px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -100px;
+  color: white;
+  text-align: center;
+  padding: 5px;
+  background: #333;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  width: 200px;
+  box-shadow:0 0 10px #111;
 }
 
 .variables-matrix {
-  border-collapse:separate;
-  border-radius:5px;
   border:1px solid #ddd;
   width:100%;
+  margin:10px 0;
 }
 
 .variables-matrix td,
 .variables-matrix th {
-  padding:0 10px;
+  padding:10px;
 }
 
 .variables-matrix td {
@@ -345,14 +345,25 @@ iframe.example {
   border-left:1px solid #eee;
 }
 
-.main-body-grid {
-  margin-top:50px;
-  position:relative;
-  min-height:100%;
+.variables-matrix tr:nth-child(even) td {
+  background:#f5f5f5;
 }
-.main-body-grid > .grid-right {
-  margin-left:270px;
+
+.variables-matrix th {
+  background:#f1f1f1;
+}
+
+.sup-header {
+  padding-top:10px;
+  padding-bottom:5px;
+  background:rgba(240,240,240,0.88);
+  box-shadow:0 0 5px #999;
+}
+
+.main-body-grid {
+  margin-top:120px;
   position:relative;
+  min-height:800px;
 }
 
 .main-body-grid > .grid-left,
@@ -362,23 +373,26 @@ iframe.example {
 
 .main-body-grid > .grid-left {
   position:fixed;
-  top:50px;
-  width:260px;
+  top:120px;
+  padding-bottom:250px;
   height:100%;
   overflow:auto;
 }
 
-.version-picker {
-  margin-bottom:30px;
+.main-header-grid > .grid-left,
+.main-body-grid > .grid-left {
+  width:260px;
 }
 
-.improve-docs {
-  position:absolute;
-  top:20px;
-  right:20px;
+.main-header-grid > .grid-right,
+.main-body-grid > .grid-right {
+  margin-left:270px;
+  position:relative;
 }
 
-
+.main-header-grid > .grid-left {
+  float:left;
+}
 
 .variables-matrix td {
   vertical-align:top;
@@ -392,16 +406,29 @@ iframe.example {
 .variables-matrix .type-hint {
   text-align:center;
   min-width:60px;
+  margin:1px 5px;
 }
 
 .type-hint + .type-hint {
   margin-top:5px;
 }
 
+.type-hint-expression {
+  background:purple;
+}
+
+.type-hint-date {
+  background:pink;
+}
+
 .type-hint-string {
   background:#3a87ad;
 }
 
+.type-hint-function {
+  background:green;
+}
+
 .type-hint-object {
   background:#999;
 }
@@ -417,3 +444,91 @@ iframe.example {
 .type-hint-number {
   background:rgb(189, 63, 66);
 }
+
+.runnable-example-frame {
+  width:100%;
+  height:300px;
+  border: 1px solid #ddd;
+  border-radius:5px;
+}
+
+.runnable-example-tabs {
+  margin-top:10px;
+  margin-bottom:20px;
+}
+
+.tutorial-nav {
+  display:block;
+}
+
+h1 + ul, h1 + ul > li,
+h2 + ul, h2 + ul > li,
+ul.tutorial-nav, ul.tutorial-nav > li,
+.usage > ul, .usage > ul > li,
+ul.methods, ul.methods > li,
+ul.events, ul.events > li {
+  list-style:none;
+  padding:0;
+}
+
+h2 {
+  border-top:1px solid #eee;
+  margin-top:30px;
+  padding-top:30px;
+}
+
+.improve-docs {
+  float:right;
+}
+
+.btn {
+  color:#428bca;
+  position: relative;
+  width: auto;
+  display: inline-block;
+  margin: 0 0 2px;
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  font-family: "Open Sans";
+  font-weight: 600;
+  height: auto;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
+  background-image: -webkit-linear-gradient(#ffffff, #f2f2f2);
+  background-image: -moz-linear-gradient(#ffffff, #f2f2f2);
+  background-image: -o-linear-gradient(#ffffff, #f2f2f2);
+  background-image: linear-gradient(#ffffff, #f2f2f2);
+}
+
+.btn + .btn {
+  margin-left:10px;
+}
+
+.btn:hover {
+  color:black!important;
+  border: 1px solid #ddd!important;
+  background:white!important;
+}
+
+.view-source {
+  margin-right:10px;
+  padding-right:10px;
+  border-right:1px solid #999;
+}
+
+.return-arguments,
+.return-arguments th,
+.return-arguments th + th,
+.return-arguments td,
+.return-arguments td + td {
+  border-radius:0;
+  border:0;
+}
+
+.return-arguments td:first-child {
+  width:100px; 
+}
diff --git a/docs/app/assets/js/angular-bootstrap/bootstrap.js b/docs/app/assets/js/angular-bootstrap/bootstrap.js
index b9b5e382..643b5a50 100644
--- a/docs/app/assets/js/angular-bootstrap/bootstrap.js
+++ b/docs/app/assets/js/angular-bootstrap/bootstrap.js
@@ -2,6 +2,56 @@
 
 var directive = {};
 
+directive.runnableExample = ['$templateCache', '$document', function($templateCache, $document) {
+  var exampleClassNameSelector = '.runnable-example-file';
+  var doc = $document[0];
+  var tpl =
+    '<nav class="runnable-example-tabs" ng-if="tabs">' +
+    '  <a ng-class="{active:$index==activeTabIndex}"' +
+         'ng-repeat="tab in tabs track by $index" ' +
+         'href="" ' +
+         'class="btn"' +
+         'ng-click="setTab($index)">' + 
+    '    {{ tab }}' +
+    '  </a>' +
+    '</nav>';
+
+  return {
+    restrict: 'C',
+    controller : ['$scope', function($scope) {
+      $scope.setTab = function(index) {
+        var tab = $scope.tabs[index];
+        $scope.activeTabIndex = index;
+        $scope.$broadcast('tabChange', index, tab);
+      };
+    }],
+    compile : function(element) {
+      element.html(tpl + element.html());
+      return function(scope, element) {
+        var tabs = [], now = Date.now();
+        angular.forEach(doc.querySelectorAll(exampleClassNameSelector),
+          function(child, index) {
+
+          tabs.push(child.getAttribute('name'));
+        });
+
+        if(tabs.length > 0) {
+          scope.tabs = tabs;
+          scope.$on('tabChange', function(e, index, title) {
+            var elements = doc.querySelectorAll(exampleClassNameSelector);
+            angular.forEach(elements, function(child) {
+              child.style.display = 'none';
+            });
+            var selected = elements[index];
+            selected.style.display = 'block';
+          });
+          scope.setTab(0);
+        }
+      }
+    }
+  };
+}];
+
 directive.dropdownToggle =
           ['$document', '$location', '$window',
   function ($document,   $location,   $window) {
diff --git a/docs/app/src/examples.js b/docs/app/src/examples.js
index 44dd98f1..0ad981c9 100644
--- a/docs/app/src/examples.js
+++ b/docs/app/src/examples.js
@@ -263,4 +263,4 @@ angular.module('examples', [])
       css: templateMerge(CSS, prop)
     });
   };
-});
\ No newline at end of file
+});
diff --git a/docs/app/src/tutorials.js b/docs/app/src/tutorials.js
index a978daed..2f46494c 100644
--- a/docs/app/src/tutorials.js
+++ b/docs/app/src/tutorials.js
@@ -55,4 +55,4 @@ angular.module('tutorials', [])
         '</div>\n');
     }
   };
-});
\ No newline at end of file
+});