chore(docs-app): update the header style

Also adds a new fixed strip / bar about the AngularJS version

Closes #14963
Closes #15670

Author: Narretz

docs/app/assets/css/angular-topnav.css

@@ -53,13 +53,13 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .header .brand {
-  padding-top: 6px;
   padding-bottom: 0px;
 }
 
 .header .brand img {
-  margin-top: 5px;
-  height: 30px;
+  margin-top: 0;
+  height: auto;
+  vertical-align: top;
 }
 
 .docs-search {
@@ -82,6 +82,11 @@ h1,h2,h3,h4,h5,h6 {
   margin-right: 10px;
 }
 
+.navbar .navbar-search i {
+  top: 13px;
+  font-size: 12px;
+}
+
 .docs-search > .search-query:focus {
   outline: 0;
 }
@@ -297,6 +302,7 @@ iframe.example {
 }
 
 .search-results-container {
+  position: relative;
   padding-bottom: 1em;
   border-top: 1px solid #111;
   background: #181818;
@@ -435,15 +441,17 @@ iframe.example {
   background: #f1f1f1;
 }
 
-.sup-header {
+#navbar-sub {
   padding-top: 10px;
   padding-bottom: 5px;
   background: rgba(245,245,245,0.88);
   box-shadow: 0 0 2px #999;
+  z-index: 1028;
+  top: 83px;
 }
 
 .main-body-grid {
-  margin-top: 120px;
+  margin-top: 144px;
   position: relative;
 }
 
@@ -454,7 +462,7 @@ iframe.example {
 
 .main-body-grid > .grid-left {
   position: fixed;
-  top: 120px;
+  top: 144px;
   bottom: 0;
   overflow: auto;
 }
@@ -827,3 +835,86 @@ ul.events > li {
 iframe[name="example-anchoringExample"] {
   height: 400px;
 }
+
+/*
+  angular-topnav.css and bootstrap overrides
+ */
+
+.navbar .navbar-inner .container {
+  padding: 0 16px;
+  width: auto;
+  height: auto;
+}
+
+.navbar .nav > li {
+  float: left;
+}
+
+.navbar-nav .open .dropdown-menu {
+  position: absolute;
+  float: left;
+}
+
+.navbar-nav .open .dropdown-menu > li > a {
+  line-height: 48px;
+}
+
+#navbar-main .navbar-inner, #navbar-notice .navbar-inner {
+  box-shadow: none;
+}
+
+#navbar-sub .container {
+  max-width: 970px;
+}
+
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+  background-color: inherit;
+}
+
+@media handheld and (max-width:800px), screen and (max-device-width:800px), screen and (max-width:800px) {
+  .navbar {
+    min-height: auto;
+  }
+
+  .search-results-container {
+    top: 32px;
+    overflow: auto;
+    max-height: 85vh;
+    padding-bottom: 0;
+    position: static;
+  }
+
+  .search-close {
+    right: 1px;
+    margin-left: 0;
+    top: 41px;
+    padding: 5px 10px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    box-shadow: none;
+    width: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+  .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
+    padding: 0 8px;
+  }
+
+  .homepage #navbar-notice {
+    top: 72px;
+  }
+
+  #navbar-notice .navbar-inner {
+    box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 3px 3px rgba(0, 0, 0, .24)
+  }
+
+  #navbar-sub {
+    position: relative;
+    top: 17px;
+    margin-top: 80px;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+}

docs/app/assets/css/docs.css

@@ -18,8 +18,8 @@ describe('doc.angularjs.org', function() {
       var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
       ngBindLink.click();
 
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('ngClick');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('ngClick');
     });
 
 

docs/app/e2e/api-docs/api-pages.scenario.js

@@ -44,30 +44,31 @@ describe('docs.angularjs.org', function() {
       var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
       ngBindLink.click();
 
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('ngClick');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('ngClick');
     });
 
 
 
     it('should be resilient to trailing slashes', function() {
       browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
     });
 
 
     it('should be resilient to trailing "index"', function() {
       browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/index');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
     });
 
 
     it('should be resilient to trailing "index/"', function() {
       browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/index/');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
     });
 
 
@@ -78,7 +79,8 @@ describe('docs.angularjs.org', function() {
 
     it('should display an error if the page does not exist', function() {
       browser.get('build/docs/index-production.html#!/api/does/not/exist');
-      expect(element(by.css('h1')).getText()).toBe('Oops!');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('Oops!');
     });
 
   });

docs/app/e2e/app.scenario.js

@@ -32,6 +32,7 @@ module.exports = function debugDeployment(getVersion) {
       'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.css',
       'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
       'css/prettify-theme.css',
+      'css/angular-topnav.css',
       'css/docs.css',
       'css/animations.css'
     ]

docs/config/services/deployments/debug.js

@@ -32,6 +32,7 @@ module.exports = function defaultDeployment(getVersion) {
       'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
       'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
       'css/prettify-theme.css',
+      'css/angular-topnav.css',
       'css/docs.css',
       'css/animations.css'
     ]

docs/config/services/deployments/default.js

@@ -36,6 +36,7 @@ module.exports = function jqueryDeployment(getVersion) {
       'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
       'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
       'css/prettify-theme.css',
+      'css/angular-topnav.css',
       'css/docs.css',
       'css/animations.css'
     ]

docs/config/services/deployments/jquery.js

@@ -49,6 +49,7 @@ module.exports = function productionDeployment(getVersion) {
       'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
       'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
       'css/prettify-theme.css',
+      'css/angular-topnav.css',
       'css/docs.css',
       'css/animations.css'
     ]