Improving look and feel of documentation

Author: erundle

Gruntfile.js

@@ -104,8 +104,9 @@ module.exports = function (grunt) {
       },
       ngdocs: {
         options: {
-          title: 'Angular-Patternfly Documentation',
+          title: 'Angular Patternfly Documentation',
           dest: 'dist/docs',
+          image: 'misc/logo-alt.svg',
           scripts: ['lib/patternfly/components/jquery/dist/jquery.js',
             'lib/patternfly/components/bootstrap/dist/js/bootstrap.js',
             'lib/patternfly/components/bootstrap-combobox/js/bootstrap-combobox.js',

dist/angular-patternfly.js

@@ -1550,7 +1550,7 @@ angular.module('patternfly.charts').directive('pfUtilizationChart',
 );
 ;/**
  * @ngdoc directive
- * @name patternfly.fitlers.directive:pfSimpleFilter
+ * @name patternfly.filters.directive:pfSimpleFilter
  *
  * @description
  *   Directive for a simple filter bar

grunt-ngdocs-index.tmpl

@@ -92,7 +92,7 @@
   <header class="header">
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
-        <div class="container navbar-default">
+        <div class="container-fluid navbar-inverse">
           <% if (image) { %>
             <% if (imageLink) { %>
               <a href="<%= imageLink %>">
@@ -103,6 +103,9 @@
             <% } %>
           <% } %>
           <% if (title) {%>
+            <% if (imageLink) { %>
+              <img class="pull-left" src="<%= imageLink %>">
+            <% } %>
             <a <% if (titleLink) { %> href="<%= titleLink %>" <% } %> class="navbar-brand"><%= title %></a>
           <% } %>
           <%= navContent %>
@@ -111,7 +114,7 @@
     </div>
   </header>
 
-  <div role="main" class="container">
+  <div role="main" class="container-fluid">
     <div class="row clear-navbar"></div>
 
     <div class="row">
@@ -139,8 +142,9 @@
       <div class="col-md-3">
         <form class="form-search" ng-submit="submitForm()">
           <% if (bestMatch) { %>
-          <div class="dropdown search"
+          <div class="dropdown search docs-search"
                ng-class="{open: focused && bestMatch.rank > 0 && bestMatch.page != currentPage}">
+            <span class="fa fa-search search-icon"></span>
             <input type="text" ng-model="search" placeholder="search the docs"
                    tabindex="1" accesskey="s" class="search-query" focused="focused">
             <ul class="dropdown-menu">
@@ -150,8 +154,11 @@
             </ul>
           </div>
           <% } else { %>
-          <input type="text" ng-model="search" placeholder="search the docs"
+          <div class="docs-search">
+            <span class="fa fa-search search-icon"></span>
+            <input type="text" ng-model="search" placeholder="search the docs"
                  tabindex="1" accesskey="s" class="search-query">
+          </div>
           <% } %>
           <div class="spacer"></div>
 
@@ -221,13 +228,12 @@
       </div>
       <div class="col-md-9">
 
-        <ul class="breadcrumb">
-          <li ng-repeat="crumb in breadcrumb">
+        <ol class="breadcrumb">
+          <li ng-repeat="crumb in breadcrumb" ng-class="{'active': !crumb.url}">
             <span ng-hide="crumb.url">{{crumb.name}}</span>
             <a ng-show="crumb.url" href="{{crumb.url}}">{{crumb.name}}</a>
-            <span ng-show="crumb.url" class="divider">/</span>
           </li>
-        </ul>
+        </ol>
 
         <div id="loading" ng-show="loading">Loading...</div>
 

misc/demo.css

@@ -1,3 +1,55 @@
+/* Docs overrides */
+.navbar img {
+  height: 35px;
+  width: 57px;
+  margin-top: 8px;
+  margin-right: 0px;
+}
+
+.navbar-inverse .navbar-brand {
+  color: #fff;
+  padding: 15px 20px 15px 0;
+  text-transform: uppercase;
+}
+
+.breadcrumb li > * {
+  float: none;
+  margin: 0;
+}
+
+.form-search .module .guide {
+  padding-top: 6px;
+}
+
+.form-search > ul.nav > li.section {
+  min-height: 23px;
+}
+
+.docs-search {
+  margin: 10px 0;
+  padding: 4px 0 4px 20px;
+  background: #fff;
+  border: 1px solid #bbb;
+  vertical-align: middle;
+}
+
+.docs-search > .search-query {
+  font-size: 14px;
+  border: 0;
+  width: 80%;
+  color: #555;
+}
+
+.docs-search > .search-icon {
+  font-size: 15px;
+  margin-right: 10px;
+}
+
+.docs-search > .search-query:focus {
+  outline:0;
+}
+
+/* Demo CSS */
 .pf-transclude-example div {
   border: 1px solid #337ab7;
   margin-bottom: 20px;

misc/logo-alt.svg

@@ -1,6 +1,6 @@
 /**
  * @ngdoc directive
- * @name patternfly.fitlers.directive:pfSimpleFilter
+ * @name patternfly.filters.directive:pfSimpleFilter
  *
  * @description
  *   Directive for a simple filter bar