From f0ff5e26bd2ebfc1bb8f2f6019b729c880bd2312 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Thu, 15 Sep 2016 17:18:41 -0700 Subject: [PATCH 1/8] docs(style-guide): attributes aren't comma separated (#2372) A fix necessary for ng2.io --- public/docs/ts/latest/guide/style-guide.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index 31cba7c769..cd5b67f6c7 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -1845,7 +1845,7 @@ a(href="#toc") Back to top **Consider** using [snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) for [Visual Studio Code](https://code.visualstudio.com/) that follow these styles and guidelines. - Use Extension + Use Extension **Consider** using [snippets](https://atom.io/packages/angular-2-typescript-snippets) for [Atom](https://atom.io/) that follow these styles and guidelines. From 9262f7a2343cb2a19665abbffdb1490fc77bc14e Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Thu, 15 Sep 2016 16:15:55 -0700 Subject: [PATCH 2/8] docs(ngmodule): remove hero.service from module (post-RC6 todo) also switched to moduleId --- .../ngmodule/ts/app/contact/contact.component.3.ts | 7 ++++--- .../_examples/ngmodule/ts/app/contact/contact.component.ts | 7 ++++--- .../docs/_examples/ngmodule/ts/app/core/title.component.ts | 3 ++- .../docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts | 5 ----- public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts | 5 ----- public/docs/_examples/ngmodule/ts/app/title.component.ts | 3 ++- 6 files changed, 12 insertions(+), 18 deletions(-) diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts index 019e477e63..392904086a 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts @@ -5,9 +5,10 @@ import { Contact, ContactService } from './contact.service'; import { UserService } from '../user.service'; @Component({ + moduleId: module.id, selector: 'app-contact', - templateUrl: 'app/contact/contact.component.html', - styleUrls: ['app/contact/contact.component.css'] + templateUrl: 'contact.component.html', + styleUrls: ['contact.component.css'] }) export class ContactComponent implements OnInit { contact: Contact; @@ -35,7 +36,7 @@ export class ContactComponent implements OnInit { } onSubmit() { - // TODO: do something like save it + // POST-DEMO TODO: do something like save it this.displayMessage('Saved ' + this.contact.name); } diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts index 2a60cda1f3..bb6f2e3b42 100644 --- a/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts @@ -6,9 +6,10 @@ import { Contact, ContactService } from './contact.service'; import { UserService } from '../core/user.service'; @Component({ + moduleId: module.id, selector: 'app-contact', - templateUrl: 'app/contact/contact.component.html', - styleUrls: ['app/contact/contact.component.css'] + templateUrl: 'contact.component.html', + styleUrls: ['contact.component.css'] }) export class ContactComponent implements OnInit { contact: Contact; @@ -36,7 +37,7 @@ export class ContactComponent implements OnInit { } onSubmit() { - // TODO: do something like save it + // POST-DEMO TODO: do something like save it this.displayMessage('Saved ' + this.contact.name); } diff --git a/public/docs/_examples/ngmodule/ts/app/core/title.component.ts b/public/docs/_examples/ngmodule/ts/app/core/title.component.ts index ca8cffe9d5..be2df3acf1 100644 --- a/public/docs/_examples/ngmodule/ts/app/core/title.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/core/title.component.ts @@ -3,8 +3,9 @@ import { Component, Input } from '@angular/core'; import { UserService } from '../core/user.service'; @Component({ + moduleId: module.id, selector: 'app-title', - templateUrl: 'app/core/title.component.html', + templateUrl: 'title.component.html', }) export class TitleComponent { @Input() subtitle = ''; diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts index 95f58730f5..319af623bb 100644 --- a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts +++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts @@ -8,14 +8,9 @@ import { HeroListComponent } from './hero-list.component'; import { HighlightDirective } from './highlight.directive'; import { routing } from './hero.routing.3'; -// TODO: Remove in RC 6 -import { HeroService } from './hero.service'; - // #docregion class @NgModule({ imports: [ CommonModule, FormsModule, routing ], - // TODO: Remove in RC 6 - providers: [ HeroService ], declarations: [ HeroComponent, HeroDetailComponent, HeroListComponent, HighlightDirective diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts index c3f7d73270..57159ed533 100644 --- a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts +++ b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts @@ -7,13 +7,8 @@ import { HeroDetailComponent } from './hero-detail.component'; import { HeroListComponent } from './hero-list.component'; import { routing } from './hero.routing'; -// TODO: Remove THE HeroService class in RC 6 -import { HeroService } from './hero.service'; - @NgModule({ imports: [ SharedModule, routing ], - // TODO: Remove in RC 6 - providers: [ HeroService ], declarations: [ HeroComponent, HeroDetailComponent, HeroListComponent, ] diff --git a/public/docs/_examples/ngmodule/ts/app/title.component.ts b/public/docs/_examples/ngmodule/ts/app/title.component.ts index 0edfd4b468..cd5a19aad0 100644 --- a/public/docs/_examples/ngmodule/ts/app/title.component.ts +++ b/public/docs/_examples/ngmodule/ts/app/title.component.ts @@ -7,8 +7,9 @@ import { UserService } from './user.service'; // #docregion v1 @Component({ + moduleId: module.id, selector: 'app-title', - templateUrl: 'app/title.component.html', + templateUrl: 'title.component.html', }) export class TitleComponent { @Input() subtitle = ''; From c787fd2ff076c2dd02cc237ea94d32fe8d610d2a Mon Sep 17 00:00:00 2001 From: Pete Bacon Darwin Date: Fri, 16 Sep 2016 22:41:49 +0100 Subject: [PATCH 3/8] docs(testing-guide): fix tiny typo (#2381) --- public/docs/ts/latest/guide/testing.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade index dd8fafa036..d52179b9bd 100644 --- a/public/docs/ts/latest/guide/testing.jade +++ b/public/docs/ts/latest/guide/testing.jade @@ -917,7 +917,7 @@ a#component-with-inputs-outputs at low cost and without resorting to much slower and more complicated end-to-end tests. :marked - The second test verifies click behavior. Clicking the hero should rais a `selected` event that the + The second test verifies click behavior. Clicking the hero should raise a `selected` event that the host component (`DashboardComponent` presumably) can hear: +makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'click-test', 'app/dashboard/dashboard-hero.component.spec.ts (click test)')(format='.') :marked From f4c4aee706c586ca210639996960a8fbcedc3bdb Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Thu, 15 Sep 2016 18:54:07 -0700 Subject: [PATCH 4/8] initial commit for rotating announcement banner --- public/_includes/_hero-home.jade | 11 +++- public/_includes/_scripts-include.jade | 1 + .../css/module/_announcement-bar.scss | 26 +++++++++- public/resources/js/directives/banner.js | 51 +++++++++++++++++++ 4 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 public/resources/js/directives/banner.js diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index e06d94c53a..12c8a989ad 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -5,7 +5,14 @@ header(class="background-sky l-relative") h1.text-headline #{title}
#{subtitle} a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started - .announcement-bar.shadow-2.clearfix + + banner(image="/resources/images/logos/angular2/angular.svg" text="Angular 2.0 Final Release Now Live!" button="Learn More") + .announcement-bar-slide.clearfix img(src="/resources/images/logos/angular2/angular.svg") p Angular 2.0 Final Release Now Live! - a(href="http://angularjs.blogspot.com/2016/09/angular2-final.html" target="_blank" class="button " + "md-button") Learn More \ No newline at end of file + a(href="http://angularjs.blogspot.com/2016/09/angular2-final.html" target="_blank" class="button " + "md-button") Learn More + + .announcement-bar-slide.clearfix + img(src="/resources/images/logos/ng-europe/ng-europe-logo.png") + p Join us for ng-europe in Paris, France this October! + a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade index b9b2266f3e..f75a8f5476 100644 --- a/public/_includes/_scripts-include.jade +++ b/public/_includes/_scripts-include.jade @@ -28,6 +28,7 @@ script(src="/resources/js/directives/cheatsheet.js") script(src="/resources/js/directives/api-list.js") script(src="/resources/js/directives/bio.js") script(src="/resources/js/directives/bold.js") +script(src="/resources/js/directives/banner.js") script(src="/resources/js/directives/code.js") script(src="/resources/js/directives/copy.js") script(src="/resources/js/directives/code-tabs.js") diff --git a/public/resources/css/module/_announcement-bar.scss b/public/resources/css/module/_announcement-bar.scss index 77565fb213..ea0309f28a 100644 --- a/public/resources/css/module/_announcement-bar.scss +++ b/public/resources/css/module/_announcement-bar.scss @@ -10,6 +10,7 @@ * Variables */ +$announcement-bar: '.announcement-bar'; $announcement-bar-height: 104px; $announcement-bar-width: 752px; @@ -18,7 +19,7 @@ $announcement-bar-width: 752px; * Class */ -.announcement-bar { +#{$announcement-bar} { background: $white; bottom: 0; box-sizing: border-box; @@ -67,6 +68,29 @@ $announcement-bar-width: 752px; } } + + #{$announcement-bar}-slide { + bottom: 0; + box-sizing: border-box; + height: $announcement-bar-height; + left: 0; + margin-bottom: -$announcement-bar-height; + opacity: 0; + padding: $unit * 4; + position: absolute; + right: 0; + transition: all .8s; + width: $announcement-bar-width; + z-index: $layer-1; + + &.is-visible { + margin-bottom: 0; + opacity: 1; + z-index: $layer-2; + } + } + + /* * Mobile Styles * diff --git a/public/resources/js/directives/banner.js b/public/resources/js/directives/banner.js new file mode 100644 index 0000000000..e5bd3f2f6e --- /dev/null +++ b/public/resources/js/directives/banner.js @@ -0,0 +1,51 @@ +/*eslint no-unused-vars: "angularIO" */ + +/* +* Announcement Bar Banner Directive +* +* A rotating announcement banners used to display +* important updates and news. +*/ + +angularIO.directive('banner', ['$interval', function($interval) { + return { + restrict: 'E', + transclude: true, + compile: function(tElement, attrs) { + var template = + '
'; + + // UPDATE ELEMENT WITH NEW TEMPLATE + tElement.html(template); + + // RETURN ELEMENT + return function(scope, element, attrs) { + var slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide')); + var slideLenth = slides.length; + var currentSlide = 1; + + // SHOW FIRST SLIDE + angular.element(slides[0]).addClass('is-visible'); + + + // START SLIDESHOW CYCLE + var timeoutId = $interval(function() { + + if((currentSlide + 1) <= slideLenth) { + slides.removeClass('is-visible'); + angular.element(slides[currentSlide]).addClass('is-visible'); + } + else { + // RESET ON LAST SLIDE + currentSlide = 0; + slides.removeClass('is-visible'); + angular.element(slides[currentSlide]).addClass('is-visible'); + } + + // INCREMENT + currentSlide = currentSlide + 1; + }, 5000); + }; + } + }; +}]); From a0dbeee18a6dc70d45186dd0d98926d6ac069b56 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Thu, 15 Sep 2016 18:55:13 -0700 Subject: [PATCH 5/8] banner(scrolling): add scrolling to the banner --- public/_includes/_hero-home.jade | 6 +- public/_includes/_scripts-include.jade | 2 +- .../css/module/_announcement-bar.scss | 159 ++++++++++++------ .../js/directives/announcement-bar.js | 72 ++++++++ public/resources/js/directives/banner.js | 51 ------ 5 files changed, 182 insertions(+), 108 deletions(-) create mode 100644 public/resources/js/directives/announcement-bar.js delete mode 100644 public/resources/js/directives/banner.js diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index 12c8a989ad..bdec8015d3 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -6,13 +6,13 @@ header(class="background-sky l-relative") a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started - banner(image="/resources/images/logos/angular2/angular.svg" text="Angular 2.0 Final Release Now Live!" button="Learn More") + announcement-bar .announcement-bar-slide.clearfix - img(src="/resources/images/logos/angular2/angular.svg") + img(src="/resources/images/logos/angular2/angular.svg" width="40") p Angular 2.0 Final Release Now Live! a(href="http://angularjs.blogspot.com/2016/09/angular2-final.html" target="_blank" class="button " + "md-button") Learn More .announcement-bar-slide.clearfix img(src="/resources/images/logos/ng-europe/ng-europe-logo.png") p Join us for ng-europe in Paris, France this October! - a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now + a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now \ No newline at end of file diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade index f75a8f5476..f02d7cce14 100644 --- a/public/_includes/_scripts-include.jade +++ b/public/_includes/_scripts-include.jade @@ -28,7 +28,7 @@ script(src="/resources/js/directives/cheatsheet.js") script(src="/resources/js/directives/api-list.js") script(src="/resources/js/directives/bio.js") script(src="/resources/js/directives/bold.js") -script(src="/resources/js/directives/banner.js") +script(src="/resources/js/directives/announcement-bar.js") script(src="/resources/js/directives/code.js") script(src="/resources/js/directives/copy.js") script(src="/resources/js/directives/code-tabs.js") diff --git a/public/resources/css/module/_announcement-bar.scss b/public/resources/css/module/_announcement-bar.scss index ea0309f28a..773ce40f02 100644 --- a/public/resources/css/module/_announcement-bar.scss +++ b/public/resources/css/module/_announcement-bar.scss @@ -20,21 +20,73 @@ $announcement-bar-width: 752px; */ #{$announcement-bar} { - background: $white; bottom: 0; - box-sizing: border-box; - color: $blue-grey-500; - height: $announcement-bar-height; left: 50%; margin-bottom: -($announcement-bar-height / 2); margin-left: -($announcement-bar-width / 2); - overflow: hidden; - padding: $unit * 4; position: absolute; width: $announcement-bar-width; + @include respond-to('mobile') { + height: auto; + margin: 0; + position: static; + text-align: center; + width: auto; + } +} + +// SLIDES CONTAINER +#{$announcement-bar}-slides { + background: $white; + box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12); + box-sizing: border-box; + color: $blue-grey-500; + height: $announcement-bar-height; + overflow: hidden; + position: relative; + width: $announcement-bar-width; + + @include respond-to('mobile') { + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + height: 240px; + margin: 0; + padding: ($unit * 4) ($unit * 6); + text-align: center; + width: auto; + } +} + +// INDIVIDUAL SLIDE +#{$announcement-bar}-slide { + bottom: 0; + box-sizing: border-box; + height: $announcement-bar-height; + left: 0; + margin-bottom: -$announcement-bar-height; + opacity: 0; + padding: $unit * 4; + position: absolute; + right: 0; + transition: all .8s; + width: $announcement-bar-width; + z-index: $layer-1; + + @include respond-to('mobile') { + height: auto; + margin: 0; + padding:0; + width: auto; + transition: opacity .8s; + visibility: hidden; + } + img, p { float: left; + + @include respond-to('mobile') { + float: none; + } } img { @@ -66,56 +118,57 @@ $announcement-bar-width: 752px; box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); color: $blue-500; } - } - - #{$announcement-bar}-slide { - bottom: 0; - box-sizing: border-box; - height: $announcement-bar-height; - left: 0; - margin-bottom: -$announcement-bar-height; - opacity: 0; - padding: $unit * 4; - position: absolute; - right: 0; - transition: all .8s; - width: $announcement-bar-width; - z-index: $layer-1; - - &.is-visible { - margin-bottom: 0; - opacity: 1; - z-index: $layer-2; - } - } - - - /* - * Mobile Styles - * - */ - - @include respond-to('mobile') { - height: auto; - margin: 0; - padding: ($unit * 4) ($unit * 6); - position: static; - text-align: center; - width: auto; - - &.shadow-2 { - box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); - } - - img, p { - float: none; - } - - .button { + @include respond-to('mobile') { float: none; display: block; margin-top: $unit * 2; } } -} \ No newline at end of file + + + &.is-visible { + margin-bottom: 0; + opacity: 1; + z-index: $layer-2; + + @include respond-to('mobile') { + position: static; + visibility: visible; + } + } +} + +// NAV BAR +#{$announcement-bar} nav { + bottom: -($unit * 5); + color: $blue-grey-500; + left: 0; + position: absolute; + right: 0; + text-align: center; + z-index: $layer-1; + + button { + background: $blue-grey-50; + border: none; + border-radius: 100px; + height: $unit + 4; + margin: 0 ($unit / 2); + outline: none; + overflow: hidden; + text-indent: -3000px; + width: $unit + 4; + + &.is-selected, + &.selected { + background: $blue-grey-100; + } + } +} + + + + + + diff --git a/public/resources/js/directives/announcement-bar.js b/public/resources/js/directives/announcement-bar.js new file mode 100644 index 0000000000..11b39fe8b4 --- /dev/null +++ b/public/resources/js/directives/announcement-bar.js @@ -0,0 +1,72 @@ +/*eslint no-unused-vars: "angularIO" */ + +/* +* Announcement Bar Banner Directive +* +* A rotating announcement banners used to display +* important updates and news. +*/ + +angularIO.directive('announcementBar', ['$interval', function($interval) { + return { + restrict: 'E', + scope: {}, + transclude: true, + replace: true, + template: + '
' + + '
' + + '' + + '
', + + link: function(scope, element, attrs) { + // REGISTER ELEMENTS + scope.slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide')); + var slideLenth = scope.slides.length; + + // SHOW FIRST SLIDE + scope.currentSlide = 0; + angular.element(scope.slides[0]).addClass('is-visible'); + + + /* + * Change Slide Using Nav + * + */ + + scope.changeSlide = function(event, slideNum) { + // CANCEL TIMEOUT AND CHANGE SLIDE + $interval.cancel(scope.timeoutId) + scope.slides.removeClass('is-visible'); + angular.element(scope.slides[slideNum]).addClass('is-visible'); + scope.currentSlide = slideNum; + }; + + + /* + * Start Slideshow Cyle + * + */ + + scope.timeoutId = $interval(function() { + // INCREMENT + scope.currentSlide = scope.currentSlide + 1; + + // HIDE ALL SLIDES + scope.slides.removeClass('is-visible'); + + // RESET ON LAST SLIDE + if((scope.currentSlide) > (slideLenth - 1)) { + scope.currentSlide = 0; + } + + // SHOW SLIDE + angular.element(scope.slides[scope.currentSlide]).addClass('is-visible'); + }, 5000); + } + }; +}]); + + diff --git a/public/resources/js/directives/banner.js b/public/resources/js/directives/banner.js deleted file mode 100644 index e5bd3f2f6e..0000000000 --- a/public/resources/js/directives/banner.js +++ /dev/null @@ -1,51 +0,0 @@ -/*eslint no-unused-vars: "angularIO" */ - -/* -* Announcement Bar Banner Directive -* -* A rotating announcement banners used to display -* important updates and news. -*/ - -angularIO.directive('banner', ['$interval', function($interval) { - return { - restrict: 'E', - transclude: true, - compile: function(tElement, attrs) { - var template = - '
'; - - // UPDATE ELEMENT WITH NEW TEMPLATE - tElement.html(template); - - // RETURN ELEMENT - return function(scope, element, attrs) { - var slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide')); - var slideLenth = slides.length; - var currentSlide = 1; - - // SHOW FIRST SLIDE - angular.element(slides[0]).addClass('is-visible'); - - - // START SLIDESHOW CYCLE - var timeoutId = $interval(function() { - - if((currentSlide + 1) <= slideLenth) { - slides.removeClass('is-visible'); - angular.element(slides[currentSlide]).addClass('is-visible'); - } - else { - // RESET ON LAST SLIDE - currentSlide = 0; - slides.removeClass('is-visible'); - angular.element(slides[currentSlide]).addClass('is-visible'); - } - - // INCREMENT - currentSlide = currentSlide + 1; - }, 5000); - }; - } - }; -}]); From e2ec60d8ddcecb05d20bd3dc4fbb7a5563e8ecfe Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Fri, 16 Sep 2016 12:45:58 -0700 Subject: [PATCH 6/8] udpate colors and contrast for accessibility improvements --- public/docs/dart/latest/_data.json | 2 +- public/docs/js/latest/_data.json | 2 +- public/docs/ts/latest/_data.json | 2 +- public/resources/css/base/_type.scss | 17 ++--- public/resources/css/module/_banner.scss | 2 + public/resources/css/module/_card.scss | 10 ++- public/resources/css/module/_code-box.scss | 5 +- public/resources/css/module/_code.scss | 20 ++--- public/resources/css/module/_hero.scss | 73 +------------------ public/resources/css/module/_home-promos.scss | 1 - public/resources/css/module/_lists.scss | 2 +- public/resources/css/module/_side-nav.scss | 8 +- public/resources/css/module/_table.scss | 17 ++--- 13 files changed, 44 insertions(+), 117 deletions(-) diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json index 3c702053da..420f3b50f8 100644 --- a/public/docs/dart/latest/_data.json +++ b/public/docs/dart/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "Dart", "menuTitle": "Docs Home", - "banner": "Current release is beta.21. Consult the Change Log about recent enhancements, fixes, and breaking changes." + "banner": "Current release is beta.21. View the change Log to see enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index 26f2a3f3da..22e6851bd4 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "JavaScript", "menuTitle": "Docs Home", - "banner": "The current release is 2.0.0. View the Change Log for enhancements, fixes, and breaking changes." + "banner": "Angular 2 release is 2.0.0. View the change Log to see enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 80be619a43..c893f78305 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "TypeScript", "menuTitle": "Docs Home", - "banner": "Welcome to Angular in TypeScript! The current Angular 2 release is 2.0.0. Please consult the Change Log about recent enhancements, fixes, and breaking changes." + "banner": "Angular 2 release is 2.0.0. View the change Log to see enhancements, fixes, and breaking changes." }, "cli-quickstart": { diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index df84604eb1..543b552dab 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -8,6 +8,7 @@ body { font-family: $brand-font; font-size: 14px; color: $blue-grey-600; + &.ng-cloak { display: none; } @@ -25,7 +26,7 @@ body { } a { - color: $blue-600; + color: $blue-700; text-decoration: none; &:hover { @@ -35,10 +36,10 @@ a { } code { - background: $blue-grey-50; + background: rgba($blue-grey-50, .56); border-radius: 2px; font-family: $mono-font; - color: $teal-500; + color: $teal-700; padding: 0px 4px; font-size: 90%; } @@ -102,7 +103,6 @@ code { margin: 0px 0px ($unit * 2) 0px; font-size: 34px; font-weight: 400; - opacity: .87; line-height: 40px; } @@ -111,7 +111,6 @@ code { margin: 0px 0px ($unit * 2) 0px; font-size: 24px; font-weight: 400; - opacity: .87; line-height: 32px; } @@ -120,7 +119,6 @@ code { margin: 0px 0px ($unit * 2) 0px; font-size: 20px; font-weight: 500; - opacity: .87; line-height: 32px; } @@ -129,7 +127,6 @@ code { font-size: 34px; line-height: 40px; margin: ($unit * 6) 0 ($unit * 3) 0; - opacity: 0.87; &:first-of-type { margin-top: 0; @@ -169,7 +166,6 @@ table th, margin: 0px 0px ($unit * 3) 0px; font-size: 16px; font-weight: 400; - opacity: .87; line-height: 28px; padding: 0; @@ -187,7 +183,6 @@ table th, table td { font-size: 14px; font-weight: 400; - opacity: .87; line-height: 24px; } @@ -195,20 +190,18 @@ table td { margin: 0px 0px ($unit * 2) 0px; font-size: 12px; font-weight: 400; - opacity: .54; line-height: 20px; } .text-aside, .docs-content aside { @extend .text-caption; - box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + background: rgba($blue-grey-50, .24); color: $blue-grey-700; font-weight: 400; font-size: 13px; line-height: 24px; opacity: 1; - background: rgba($blue-grey-50, .56); border-radius: 2px; padding: $unit * 3; margin-bottom: $unit * 2; diff --git a/public/resources/css/module/_banner.scss b/public/resources/css/module/_banner.scss index 45b8bcc6ab..3fd0dd9932 100644 --- a/public/resources/css/module/_banner.scss +++ b/public/resources/css/module/_banner.scss @@ -27,5 +27,7 @@ p, .text-body { color: $blue-grey-500; font-size: 18px; + line-height: 32px; + margin: 0; } } \ No newline at end of file diff --git a/public/resources/css/module/_card.scss b/public/resources/css/module/_card.scss index 1df0b56433..90b3e66edb 100644 --- a/public/resources/css/module/_card.scss +++ b/public/resources/css/module/_card.scss @@ -1,3 +1,11 @@ +/* +* Hover Cards +* +* Hover cards used to display important sections with +* additional information and allow for users to click +* on the entire card to initiate action. +*/ + .card { background: $white; border-radius: 4px; @@ -34,7 +42,7 @@ h2 { - color: $blue-grey-600; + color: $blue-grey-500; font-size: 20px; font-weight: 400; line-height: $unit * 3; diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss index cdabec146c..5244273111 100644 --- a/public/resources/css/module/_code-box.scss +++ b/public/resources/css/module/_code-box.scss @@ -11,7 +11,7 @@ */ $codebox-anti-pattern-color: $red-700; -$codebox-primary-color: $blue-600; +$codebox-primary-color: $blue-700; $codebox-selected: $white; @@ -48,12 +48,13 @@ $codebox-selected: $white; line-height: $unit * 3; margin: 0; outline: none; + opacity: 1; padding: 0 0 $unit $unit; text-transform: none; } nav button { - background: $blue-400; + background: $blue-600; border-radius: 2px 2px 0 0; color: $white; font-size: 13px; diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss index c929211cee..6d531a88a0 100644 --- a/public/resources/css/module/_code.scss +++ b/public/resources/css/module/_code.scss @@ -149,16 +149,16 @@ $prettyprint-color: $blue-grey-700; } .str, .atv { - color: $teal-600; + color: $teal-700; } .atn { - color: $teal-600; + color: $teal-700; } .com { - color: $teal-600; + color: $teal-700; } .lit { - color: $teal-600; + color: $teal-700; } .pun { color: $blue-grey-700; @@ -167,7 +167,7 @@ $prettyprint-color: $blue-grey-700; color: $blue-grey-700; } .dec { - color: $teal-600; + color: $teal-700; } @@ -193,16 +193,16 @@ $prettyprint-color: $blue-grey-700; } .str, .atv { - color: $teal-600; + color: $teal-700; } .atn { - color: $teal-600; + color: $teal-700; } .com { - color: $teal-600; + color: $teal-700; } .lit { - color: $teal-600; + color: $teal-700; } .pun { color: $blue-grey-700; @@ -211,7 +211,7 @@ $prettyprint-color: $blue-grey-700; color: $blue-grey-700; } .dec { - color: $teal-600; + color: $teal-700; } } } diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index 398599042d..cbbeceaee9 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -30,7 +30,6 @@ float: left; line-height: 48px; margin: 0 $unit 0 0; - opacity: .87; text-transform: uppercase; &.is-standard-case { @@ -43,7 +42,6 @@ font-weight: 400; line-height: $unit * 3; margin: 0; - opacity: .87; text-transform: uppercase; } @@ -113,73 +111,4 @@ } } } - - - - - /* - * Badges - */ - - .hero-title-with-badges { - margin-bottom: $unit; - } - .status-circle { - margin-right: 4px; - border-radius: 50%; - width: 10px; - height: 10px; - display: inline-block; - } - // status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade - .status-deprecated { - background: #E53935; - } - .status-stable { - background: #558b2f; - } - .status-experimental { - background: #9575cd; - } - - - .badges { - display: flex; - justify-content: flex-start; - align-content: space-around; - align-items: center; - - margin-top: 4px; - - .status-badge { - color: #0143A3; - margin-left: 4px; - padding-left: 8px; - padding-right: 8px; - background-color: rgba(255,255,255,0.5); - border-radius: 2px; - line-height: 20px; - display: inline-block; - - &:first-child { - margin-left: 0; - } - } - - .security-risk-badge { - background-color: #FFF59D; - } - } - - @media screen and (max-width: 599px) { - /* three items */ - .badges .status-badge:nth-child(3) { - margin-left: 0; - margin-top: 4px; - } - - .hero-title-with-badges { - margin-bottom: $unit * 2; - } - } -} +} \ No newline at end of file diff --git a/public/resources/css/module/_home-promos.scss b/public/resources/css/module/_home-promos.scss index 6034b8fa8a..772769df1c 100644 --- a/public/resources/css/module/_home-promos.scss +++ b/public/resources/css/module/_home-promos.scss @@ -12,7 +12,6 @@ h3.text-headline { font-size: 28px; margin-top: 10px; - color: #37474F; } .promo-image-container, .text-container { diff --git a/public/resources/css/module/_lists.scss b/public/resources/css/module/_lists.scss index 030d699bc1..356ddab4e6 100644 --- a/public/resources/css/module/_lists.scss +++ b/public/resources/css/module/_lists.scss @@ -15,7 +15,7 @@ margin-top: $unit * 6; h4 { - color: $blue-grey-400; + color: $blue-grey-500; font-size: 14px; font-weight: 400; line-height: $unit * 4; diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index 468e5cb101..30b2ee99cc 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -10,10 +10,10 @@ */ $sidenav: '.sidenav'; // Classname -$sidenav-background: $blue-grey-50; +$sidenav-background: rgba($blue-grey-50, .56); $sidenav-background-dark: $blue-grey-200; -$sidenav-color: $blue-grey-400; -$sidenav-color-selected: $blue-600; +$sidenav-color: $blue-grey-500; +$sidenav-color-selected: $blue-700; $sidenav-width: 240px; @@ -191,7 +191,7 @@ $sidenav-width: 240px; position: relative; &.is-selected { - background: rgba($blue-grey-100, .56); + background: rgba($blue-grey-100, .24); color: $sidenav-color-selected; font-weight: 600; } diff --git a/public/resources/css/module/_table.scss b/public/resources/css/module/_table.scss index e39281ec10..6db2c08cde 100644 --- a/public/resources/css/module/_table.scss +++ b/public/resources/css/module/_table.scss @@ -1,6 +1,6 @@ table { margin-bottom: $unit * 4; - box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); + box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); border-radius: 2px; background: $snow; @@ -10,8 +10,8 @@ table { thead { th { - background: $mist; - border-bottom: 1px solid $mist; + background: rgba($blue-grey-50, .24); + border-bottom: 1px solid $blue-grey-50; color: $metal; font-size: 12px; font-weight: 600; @@ -24,21 +24,16 @@ table { tbody { th, td { - border-bottom: 1px solid $mist; - color: $platinum; + border-bottom: 1px solid $blue-grey-50; padding: ($unit * 2) ($unit * 4); text-align: left; } th { - background: rgba($mist, .24); - border-right: 1px solid $mist; + background: rgba($blue-grey-50, .24); + border-right: 1px solid $blue-grey-50; font-weight: 600; max-width: 100px; - - a { - color: $blueberry; - } } tr:last-child td { From 9fc14a95a85dc39f33bcd23fdbb72c2ae3fbe827 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Fri, 16 Sep 2016 16:19:41 -0700 Subject: [PATCH 7/8] some touches to banner and api docs --- public/_includes/_hero-home.jade | 2 +- public/resources/css/module/_api.scss | 3 ++- .../logos/angular2/angular-logo-banner.png | Bin 0 -> 3456 bytes 3 files changed, 3 insertions(+), 2 deletions(-) create mode 100644 public/resources/images/logos/angular2/angular-logo-banner.png diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index bdec8015d3..4aa964bfce 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -8,7 +8,7 @@ header(class="background-sky l-relative") announcement-bar .announcement-bar-slide.clearfix - img(src="/resources/images/logos/angular2/angular.svg" width="40") + img(src="/resources/images/logos/angular2/angular-logo-banner.png") p Angular 2.0 Final Release Now Live! a(href="http://angularjs.blogspot.com/2016/09/angular2-final.html" target="_blank" class="button " + "md-button") Learn More diff --git a/public/resources/css/module/_api.scss b/public/resources/css/module/_api.scss index 3e8df778d0..09de5baa3c 100644 --- a/public/resources/css/module/_api.scss +++ b/public/resources/css/module/_api.scss @@ -63,7 +63,8 @@ } } -.docs-content .h2-api-docs { +.docs-content .h2-api-docs, +.docs-content .h2-api-docs:first-of-type { font-size: 18px; line-height: 24px; margin-top: 0; diff --git a/public/resources/images/logos/angular2/angular-logo-banner.png b/public/resources/images/logos/angular2/angular-logo-banner.png new file mode 100644 index 0000000000000000000000000000000000000000..3fc8febb915c3b301a69692a6b389dd7d3978d5f GIT binary patch literal 3456 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 iYa{B^r-t$j$o~K#rCO1lGQP+F0000 Date: Fri, 16 Sep 2016 16:27:53 -0700 Subject: [PATCH 8/8] fixed weird opacity issue --- public/resources/css/base/_type.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index 543b552dab..dead8d9fbd 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -77,7 +77,6 @@ code { margin: 0px 0px ($unit * 2) 0px; font-size: 112px; font-weight: 300; - opacity: .54; line-height: 118px; } @@ -85,7 +84,6 @@ code { margin: 0px 0px ($unit * 2) 0px; font-size: 56px; font-weight: 400; - opacity: .54; line-height: 118px; } @@ -94,7 +92,6 @@ code { margin: 0px 0px ($unit * 2) 0px; font-size: 45px; font-weight: 400; - opacity: .54; line-height: 48px; }