docs(design): footer and spacing fixes added to the layout

author: Matias Niemelä 2014-02-16 19:33:54 -0500
committer: Matias Niemelä 2014-02-16 19:44:44 -0500
commit: 7c8a1bfbac8ef5aca7c9999745be6d014afabca2 (patch)
tree: 86a3fd05cc15ecd2f8a896e663214242697905de
parent: 713c8e629da3f7323ee8ca9abe72ba825afe9fa4 (diff)
download: angular.js-7c8a1bfbac8ef5aca7c9999745be6d014afabca2.tar.bz2
2 files changed, 183 insertions, 165 deletions
diff --git a/docs/app/assets/css/docs.css b/docs/app/assets/css/docs.css
index 26e6b335..1c38097e 100644
--- a/docs/app/assets/css/docs.css
+++ b/docs/app/assets/css/docs.css
@@ -3,6 +3,26 @@ html, body {
   height:100%;
 }
 
+#wrapper {
+  min-height:100%;
+  position:relative;
+  padding-bottom:120px;
+}
+
+.footer {
+  border-top:20px solid white;
+  position:absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  z-index:100;
+  padding-top: 2em;
+  background-color: #333;
+  color: white;
+  padding-bottom: 2em;
+}
+
+
 .header-fixed {
   position:fixed;
   z-index:1000;
@@ -67,16 +87,6 @@ h1,h2,h3,h4,h5,h6 {
 /* end: Logo */
 
 
-.footer {
-  border-top:20px solid white;
-  position:relative;
-  z-index:100;
-  padding-top: 2em;
-  background-color: #333;
-  color: white;
-  padding-bottom: 2em;
-}
-
 .spacer {
   height: 1em;
 }
@@ -356,14 +366,13 @@ iframe.example {
 .sup-header {
   padding-top:10px;
   padding-bottom:5px;
-  background:rgba(240,240,240,0.88);
-  box-shadow:0 0 5px #999;
+  background:rgba(245,245,245,0.88);
+  box-shadow:0 0 2px #999;
 }
 
 .main-body-grid {
   margin-top:120px;
   position:relative;
-  min-height:800px;
 }
 
 .main-body-grid > .grid-left,
@@ -374,8 +383,8 @@ iframe.example {
 .main-body-grid > .grid-left {
   position:fixed;
   top:120px;
-  padding-bottom:250px;
-  height:100%;
+  bottom:0;
+  padding-bottom:120px;
   overflow:auto;
 }
 
@@ -477,6 +486,11 @@ h2 {
   padding-top:30px;
 }
 
+h4 {
+  margin-top:20px;
+  padding-top:20px;
+}
+
 .improve-docs {
   float:right;
 }
@@ -532,3 +546,8 @@ h2 {
 .return-arguments td:first-child {
   width:100px; 
 }
+
+ul.methods > li,
+ul.events > li {
+  margin-bottom:40px;
+}
diff --git a/docs/config/templates/indexPage.template.html b/docs/config/templates/indexPage.template.html
index 2e8003fd..1bb12605 100644
--- a/docs/config/templates/indexPage.template.html
+++ b/docs/config/templates/indexPage.template.html
@@ -77,169 +77,168 @@
   </script>
 </head>
 <body>
-  <header class="header header-fixed">
-    <section class="navbar navbar-inverse docs-navbar-primary" ng-controller="DocsSearchCtrl">
-      <div class="container">
-        <div class="navbar-header">
-          <a class="brand navbar-brand" href="http://angularjs.org">
-            <img class="logo" src="img/angularjs-for-header-only.svg">
-          </a>
-        </div>
-        <div class="row">
-          <ul class="nav navbar-nav col-md-7">
-            <li class="divider-vertical"></li>
-            <li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
-            <li class="divider-vertical"></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
-                <li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
-                <li><a href="tutorial">Tutorial</a></li>
-                <li><a href="http://builtwith.angularjs.org/">Case Studies</a></li>
-                <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
-                <li><a href="misc/faq">FAQ</a></li>
-              </ul>
-            </li>
-            <li class="divider-vertical"></li>
-            <li class="dropdown active">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="icon-book icon-white"></i> Develop <b class="caret"></b>
-              </a>
-              <ul class="dropdown-menu">
-                <li><a href="tutorial">Tutorial</a></li>
-                <li><a href="guide">Developer Guide</a></li>
-                <li><a href="api">API Reference</a></li>
-                <li><a href="error">Error Reference</a></li>
-                <li><a href="misc/contribute">Contribute</a></li>
-                <li><a href="http://code.angularjs.org/">Download</a></li>
-              </ul>
-            </li>
-            <li class="divider-vertical"></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
-              </a>
-              <ul class="dropdown-menu">
-                <li><a href="http://blog.angularjs.org">Blog</a></li>
-                <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
-                <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
-                <li class="divider"></li>
-                <li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
-                <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
-                <li class="divider"></li>
-                <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
-                <li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
-              </ul>
-            </li>
-            <li class="divider-vertical"></li>
-          </ul>
-          <form ng-class="{focus:focus}" class="navbar-search col-md-3 docs-search" ng-submit="submit()">
-            <span class="glyphicon glyphicon-search search-icon"></span>
-            <input type="text"
-                   name="as_q"
-                   class="search-query"
-                   placeholder="Click or press / to search"
-                   ng-focus="focus=true"
-                   ng-blur="focus=false"
-                   ng-change="search(q)"
-                   ng-model="q"
-                   docs-search-input
-                   autocomplete="off" />
-          </form>
-        </div>
-      </div>
-      <div class="search-results-container" ng-show="hasResults">
+  <div id="wrapper">
+    <header class="header header-fixed">
+      <section class="navbar navbar-inverse docs-navbar-primary" ng-controller="DocsSearchCtrl">
         <div class="container">
-          <a href="" ng-click="hideResults()" class="search-close">
-            <span class="glyphicon glyphicon-remove search-close-icon"></span> Close
-          </a>
-          <div class="search-results-frame">
-            <div ng-repeat="(key, value) in results" class="search-results-group" ng-class="colClassName + ' col-group-' + key">
-              <h4 class="search-results-group-heading">{{ key }}</h4>
-              <div class="search-results">
-                <div ng-repeat="item in value" class="search-result">
-                  - <a ng-click="hideResults()" ng-href="{{ item.path }}">{{ item.name }}</a>
+          <div class="navbar-header">
+            <a class="brand navbar-brand" href="http://angularjs.org">
+              <img class="logo" src="img/angularjs-for-header-only.svg">
+            </a>
+          </div>
+          <div class="row">
+            <ul class="nav navbar-nav col-md-7">
+              <li class="divider-vertical"></li>
+              <li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
+              <li class="divider-vertical"></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  <i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
+                  <li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
+                  <li><a href="tutorial">Tutorial</a></li>
+                  <li><a href="http://builtwith.angularjs.org/">Case Studies</a></li>
+                  <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
+                  <li><a href="misc/faq">FAQ</a></li>
+                </ul>
+              </li>
+              <li class="divider-vertical"></li>
+              <li class="dropdown active">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  <i class="icon-book icon-white"></i> Develop <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li><a href="tutorial">Tutorial</a></li>
+                  <li><a href="guide">Developer Guide</a></li>
+                  <li><a href="api">API Reference</a></li>
+                  <li><a href="error">Error Reference</a></li>
+                  <li><a href="misc/contribute">Contribute</a></li>
+                  <li><a href="http://code.angularjs.org/">Download</a></li>
+                </ul>
+              </li>
+              <li class="divider-vertical"></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                  <i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
+                </a>
+                <ul class="dropdown-menu">
+                  <li><a href="http://blog.angularjs.org">Blog</a></li>
+                  <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
+                  <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
+                  <li class="divider"></li>
+                  <li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
+                  <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
+                  <li class="divider"></li>
+                  <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
+                  <li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
+                </ul>
+              </li>
+              <li class="divider-vertical"></li>
+            </ul>
+            <form ng-class="{focus:focus}" class="navbar-search col-md-3 docs-search" ng-submit="submit()">
+              <span class="glyphicon glyphicon-search search-icon"></span>
+              <input type="text"
+                     name="as_q"
+                     class="search-query"
+                     placeholder="Click or press / to search"
+                     ng-focus="focus=true"
+                     ng-blur="focus=false"
+                     ng-change="search(q)"
+                     ng-model="q"
+                     docs-search-input
+                     autocomplete="off" />
+            </form>
+          </div>
+        </div>
+        <div class="search-results-container" ng-show="hasResults">
+          <div class="container">
+            <a href="" ng-click="hideResults()" class="search-close">
+              <span class="glyphicon glyphicon-remove search-close-icon"></span> Close
+            </a>
+            <div class="search-results-frame">
+              <div ng-repeat="(key, value) in results" class="search-results-group" ng-class="colClassName + ' col-group-' + key">
+                <h4 class="search-results-group-heading">{{ key }}</h4>
+                <div class="search-results">
+                  <div ng-repeat="item in value" class="search-result">
+                    - <a ng-click="hideResults()" ng-href="{{ item.path }}">{{ item.name }}</a>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    <section class="sup-header">
-      <div class="container main-grid main-header-grid">
+      </section>
+      <section class="sup-header">
+        <div class="container main-grid main-header-grid">
+          <div class="grid-left">
+            <div ng-controller="DocsVersionsCtrl" class="picker version-picker">
+              <select ng-options="v as ('v' + v.full) group by (v.isStable?'Stable':'Unstable') for v in docs_versions"
+                      ng-model="docs_version"
+                      ng-change="jumpToDocsVersion(docs_version)"
+                      class="docs-version-jump">
+              </select>
+            </div>
+          </div>
+          <div class="grid-right">
+            <ul class="nav-breadcrumb">
+              <li ng-repeat="crumb in breadcrumb" class="nav-breadcrumb-entry naked-list">
+                <span class="divider"> /</span>
+                <a ng-href="{{crumb.url}}">{{crumb.name}}</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </header>
+
+    <section role="main" class="container main-body">
+      <div class="main-grid main-body-grid">
         <div class="grid-left">
-          <div ng-controller="DocsVersionsCtrl" class="picker version-picker">
-            <select ng-options="v as ('v' + v.full) group by (v.isStable?'Stable':'Unstable') for v in docs_versions"
-                    ng-model="docs_version"
-                    ng-change="jumpToDocsVersion(docs_version)"
-                    class="docs-version-jump">
-            </select>
+          <div class="side-navigation">
+            <ul class="nav-list naked-list">
+              <li ng-repeat="navGroup in currentArea.navGroups track by navGroup.name" class="nav-index-group">
+                <a href="{{ navGroup.href }}" ng-class="navClass(navGroup)" class="nav-index-group-heading">{{ navGroup.name }}</a>
+                <ul class="aside-nav">
+                  <li ng-repeat="navItem in navGroup.navItems" ng-class="navClass(navItem)" class="nav-index-listing">
+                    <a ng-if="navItem.extra.href" ng-class="navClass(navItem.extra)" href="{{navItem.extra.href}}">
+                      {{navItem.extra.text}}<i ng-if="navItem.extra.icon" class="icon-{{navItem.extra.icon}}"></i>
+                    </a>
+                    <a tabindex="2" ng-class="linkClass(navItem)" href="{{navItem.href}}">{{navItem.name}}</a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
           </div>
         </div>
         <div class="grid-right">
-          <ul class="nav-breadcrumb">
-            <li ng-repeat="crumb in breadcrumb" class="nav-breadcrumb-entry naked-list">
-              <span class="divider"> /</span>
-              <a ng-href="{{crumb.url}}">{{crumb.name}}</a>
-            </li>
-          </ul>
+          <div id="loading" ng-show="loading">Loading...</div>
+          <div ng-hide="loading" ng-include="currentPage.outputPath" onload="afterPartialLoaded()"  autoscroll></div>
         </div>
       </div>
     </section>
-  </header>
-
-<div>
-  <section role="main" class="container main-body">
-    <div class="main-grid main-body-grid">
-      <div class="grid-left">
-        <div class="side-navigation">
-          <ul class="nav-list naked-list">
-            <li ng-repeat="navGroup in currentArea.navGroups track by navGroup.name" class="nav-index-group">
-              <a href="{{ navGroup.href }}" ng-class="navClass(navGroup)" class="nav-index-group-heading">{{ navGroup.name }}</a>
-              <ul class="aside-nav">
-                <li ng-repeat="navItem in navGroup.navItems" ng-class="navClass(navItem)" class="nav-index-listing">
-                  <a ng-if="navItem.extra.href" ng-class="navClass(navItem.extra)" href="{{navItem.extra.href}}">
-                    {{navItem.extra.text}}<i ng-if="navItem.extra.icon" class="icon-{{navItem.extra.icon}}"></i>
-                  </a>
-                  <a tabindex="2" ng-class="linkClass(navItem)" href="{{navItem.href}}">{{navItem.name}}</a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="grid-right">
-        <div id="loading" ng-show="loading">Loading...</div>
-        <div ng-hide="loading" ng-include="currentPage.outputPath" onload="afterPartialLoaded()"  autoscroll></div>
-      </div>
-    </div>
-  </section>
-
-  <footer class="footer">
-    <div class="container">
-      <p class="pull-right"><a back-to-top href="#">Back to top</a></p>
-
-      <p>
-        Super-powered by Google  ©2010-2014
-        ( <a id="version"
-             ng-href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}"
-             ng-bind-template="v{{version}}">
-          </a>
-        )
-      </p>
-      <p>
-        Code licensed under the
-        <a href="https://github.com/angular/angular.js/blob/master/LICENSE" target="_blank">The
-          MIT License</a>. Documentation licensed under <a
-            href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
-      </p>
-    </div>
-  </footer>
-</div>
 
+    <footer class="footer">
+      <div class="container">
+        <p class="pull-right"><a back-to-top href="#">Back to top</a></p>
+
+        <p>
+          Super-powered by Google  ©2010-2014
+          ( <a id="version"
+               ng-href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}"
+               ng-bind-template="v{{version}}">
+            </a>
+          )
+        </p>
+        <p>
+          Code licensed under the
+          <a href="https://github.com/angular/angular.js/blob/master/LICENSE" target="_blank">The
+            MIT License</a>. Documentation licensed under <a
+              href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+        </p>
+      </div>
+    </footer>
+  </div>
 </body>
 </html>
author	Matias Niemelä	2014-02-16 19:33:54 -0500
committer	Matias Niemelä	2014-02-16 19:44:44 -0500
commit	7c8a1bfbac8ef5aca7c9999745be6d014afabca2 (patch)
tree	86a3fd05cc15ecd2f8a896e663214242697905de
parent	713c8e629da3f7323ee8ca9abe72ba825afe9fa4 (diff)
download	angular.js-7c8a1bfbac8ef5aca7c9999745be6d014afabca2.tar.bz2