diff --git a/docs/app/assets/css/angular-topnav.css b/docs/app/assets/css/angular-topnav.css new file mode 100644 index 000000000000..826e424295aa --- /dev/null +++ b/docs/app/assets/css/angular-topnav.css @@ -0,0 +1 @@ +.visible-phone{display:none}.visible-desktop{display:block}.navbar{display:block}.navbar .container{padding:0 16px;width:auto}.navbar .brand{float:left;margin:8px 80px 0 8px;padding:0}.navbar .brand a{display:block;height:30px;margin:6px 0 5px 0;overflow:hidden;padding:0;width:117px}.navbar .nav{float:right}.navbar .nav .dropdown-toggle{color:rgba(255,255,255,0.87);font-size:16px;font-weight:300;line-height:56px;padding:0 24px;text-transform:uppercase;transition:all .3s}.navbar .nav .dropdown-toggle:hover,.navbar .nav .dropdown-toggle:active,.navbar .nav .dropdown-toggle:focus{background:#37474F;color:#fff}.navbar .nav .dropdown-menu{background:#37474F;border:none;border-radius:0;box-shadow:0 0 16px rgba(0,0,0,0.12),0 16px 16px rgba(0,0,0,0.24);color:#fff;left:auto;margin:0;padding:0;right:0}.navbar .nav .dropdown-menu:after,.navbar .nav .dropdown-menu:before{display:none}.navbar .nav .dropdown-menu li{border-bottom:1px solid rgba(38,50,56,0.56);box-sizing:border-box;line-height:48px}.navbar .nav .dropdown-menu li:last-child{border:none}.navbar .nav .dropdown-menu a{background:#37474F;color:#fff;font-weight:300;line-height:48px;padding:0 16px;transition:all .2s}.navbar .nav .dropdown-menu a:hover,.navbar .nav .dropdown-menu a:focus{background:#455A64}.navbar .navbar-search{left:200px;margin:0;position:absolute;right:440px;top:8px;width:auto}.navbar .navbar-search i{color:#546E7A;font-size:16px;left:12px;position:absolute;top:11px}.navbar .navbar-search .search-query{background:#37474F;border:none;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#546E7A;font-size:14px;height:40px;width:100%;padding:0 16px 0 32px;text-shadow:none;transition:all .3s}.navbar .navbar-search .search-query:-webkit-autofill,.navbar .navbar-search .search-query:-webkit-autofill:hover,.navbar .navbar-search .search-query:-webkit-autofill:focus{background-color:#fff;transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#455A64}.navbar .navbar-search .search-query:hover,.navbar .navbar-search .search-query:active,.navbar .navbar-search .search-query:focus{background:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,0.24);color:#2196F3}.navbar .navbar-search .search-query::-webkit-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query::-moz-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-ms-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-moz-placeholder{color:#546E7A}#navbar-main .navbar-inner{background:#263238;height:56px}#navbar-notice{z-index:1029;top:56px}#navbar-notice .navbar-inner{background:#ECEFF1;box-shadow:0 0 3px rgba(0,0,0,0.12),0 3px 3px rgba(0,0,0,0.24);height:auto}.site-notice{padding:4px 0;text-align:center;font-size:13px;margin:0}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.visible-phone{display:block}.visible-desktop{display:none}}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.homepage .container{padding:16px;width:auto}.homepage .span1{width:auto}.homepage .span2{width:auto}.homepage .span3{width:auto}.homepage .span4{width:auto}.homepage .span5{width:auto}.homepage .span6{width:auto}.homepage .span7{width:auto}.homepage .span8{width:auto}.homepage .span9{width:auto}.homepage .span10{width:auto}.homepage .navbar .container{padding:0 8px}.homepage #navbar-main .navbar-inner{height:40px}.homepage #navbar-main .brand{margin:6px 0 0 0}.homepage #navbar-main .brand a{margin:0}.homepage #navbar-main .nav{margin:0}.homepage #navbar-main .nav .dropdown-toggle{font-size:12px;line-height:40px;padding:0 8px}.homepage #navbar-main .dropdown-menu a{padding:0 8px}.homepage #navbar-main .navbar-search{background:#263238;border-bottom:1px solid #263238;left:0;right:0;top:100%}.homepage #navbar-main .navbar-search i{left:12px;top:7px}.homepage #navbar-main .navbar-search .search-query{border-radius:0;height:32px}.homepage #navbar-notice{top:40px}.homepage #navbar-notice .site-notice{font-size:11px}.homepage .hero{padding:80px 32px 32px 32px}.homepage .hero h2{background-size:230px 60px;height:60px;width:230px}} diff --git a/docs/app/assets/css/docs.css b/docs/app/assets/css/docs.css index c6d77c00ed96..77fcdbd400da 100644 --- a/docs/app/assets/css/docs.css +++ b/docs/app/assets/css/docs.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; + } + +} diff --git a/docs/app/e2e/api-docs/api-pages.scenario.js b/docs/app/e2e/api-docs/api-pages.scenario.js index f6f296fd759a..f8fedb9ee7b5 100644 --- a/docs/app/e2e/api-docs/api-pages.scenario.js +++ b/docs/app/e2e/api-docs/api-pages.scenario.js @@ -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'); }); diff --git a/docs/app/e2e/app.scenario.js b/docs/app/e2e/app.scenario.js index 4bacb00de97a..823f1408c2e4 100644 --- a/docs/app/e2e/app.scenario.js +++ b/docs/app/e2e/app.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!'); }); }); diff --git a/docs/config/services/deployments/debug.js b/docs/config/services/deployments/debug.js index 05cc1518626d..3581184c8e8e 100644 --- a/docs/config/services/deployments/debug.js +++ b/docs/config/services/deployments/debug.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' ] diff --git a/docs/config/services/deployments/default.js b/docs/config/services/deployments/default.js index 71b9c2f880d0..3abd0dd14c06 100644 --- a/docs/config/services/deployments/default.js +++ b/docs/config/services/deployments/default.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' ] diff --git a/docs/config/services/deployments/jquery.js b/docs/config/services/deployments/jquery.js index e285abf7281c..4d4f64f6f416 100644 --- a/docs/config/services/deployments/jquery.js +++ b/docs/config/services/deployments/jquery.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' ] diff --git a/docs/config/services/deployments/production.js b/docs/config/services/deployments/production.js index 5487e86a0fcc..61d64b1f93d4 100644 --- a/docs/config/services/deployments/production.js +++ b/docs/config/services/deployments/production.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' ] diff --git a/docs/config/templates/app/indexPage.template.html b/docs/config/templates/app/indexPage.template.html index 75abb7190280..57eb4f64cd96 100644 --- a/docs/config/templates/app/indexPage.template.html +++ b/docs/config/templates/app/indexPage.template.html @@ -68,101 +68,94 @@ })(); - +
-
-
-
-
-
- - Link to AngularJS Homepage - -
    -
  • -
  • Home
    • -
  • -
  • - - Learn - -
      -
    • Why AngularJS?
      • -
    • Watch
      • -
    • Tutorial
      • -
    • Case Studies
      • -
    • Seed App project template
      • -
    • FAQ
      • -
    -
    • -
  • -
  • - - Develop - -
      -
    • Tutorial
      • -
    • Developer Guide
      • -
    • API Reference
      • -
    • Error Reference
      • -
    • Contribute
      • -
    • Download
      • -
    -
    • -
  • -
  • - - Discuss - -
      -
    • Blog
      • -
    • Mailing List
      • -
    • Chat Room
      • -
    • -
    • Twitter
      • -
    • Google+
      • -
    • -
    • GitHub
      • -
    • Issue Tracker
      • +
      +
      +
      +
      +

      AngularJS

      + +
      + + +
      + +
        +
      • + Learn +
          +
        • Tutorial
          • +
        • FAQ
          • +
        • Videos
          • +
        • Free Course
          • +
        • Case Studies
          • +
        +
        • +
      • + Develop +
          +
        • Developer Guide
          • +
        • API Reference
          • +
        • Error Reference
          • +
        • Contribute
          • +
        • Seed App project template
          • +
        • GitHub
          • +
        • Download
          • +
        +
        • +
      • + Discuss +
          +
        • Blog
          • +
        • Twitter
          • +
        • Google+
          • +
        • Feature & Bug Tracker
          • +
        • Mailing List
          • +
        • IRC
          • +
        • Gitter
          • +
        +
        • +
      + +
      +
      +
      +
      +
      +

      {{ key }}

      +
        +
      • {{ item.name }}
      - -
    • -
    +
+
+ + Close +
-
- - -
-
+ +
+
-
-
-

{{ key }}

-
    - -
  • {{ item.name }}
    • -
-
-
- - Close - +

+ This site refers to AngularJS (v1.x). Go to the latest Angular. +

+

+ This site and all of its contents are referring to AngularJS (version 1.x), + if you are looking for the latest Angular, please visit angular.io. +

- -
+
+
@@ -176,7 +169,7 @@

{{ key }}

- +