From 713c8e629da3f7323ee8ca9abe72ba825afe9fa4 Mon Sep 17 00:00:00 2001
From: Matias Niemelä
Date: Sun, 16 Feb 2014 18:54:52 -0500
Subject: docs(design): ui-fixes for examples, layout and API components
---
docs/app/assets/css/docs.css | 217 +++++++++++++++++-----
docs/app/assets/js/angular-bootstrap/bootstrap.js | 50 +++++
docs/app/src/examples.js | 2 +-
docs/app/src/tutorials.js | 2 +-
docs/config/templates/indexPage.template.html | 46 +++--
5 files changed, 245 insertions(+), 72 deletions(-)
(limited to 'docs')
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 =
+ '';
+
+ 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', [])
'\n');
}
};
-});
\ No newline at end of file
+});
diff --git a/docs/config/templates/indexPage.template.html b/docs/config/templates/indexPage.template.html
index 4aa13cb9..2e8003fd 100644
--- a/docs/config/templates/indexPage.template.html
+++ b/docs/config/templates/indexPage.template.html
@@ -77,8 +77,8 @@
-