From 210c2a39b27d7cab2a8bc9f9c7ab91b2c7670858 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Sun, 1 Mar 2015 16:39:17 -0800 Subject: [PATCH] dynamic selecting nav --- public/_includes/_docs-nav.jade | 9 +- public/docs/js/_quickstart.jade | 121 ++++++++++----------- public/docs/js/latest/_data.json | 6 + public/resources/css/module/_side-nav.scss | 22 +++- 4 files changed, 88 insertions(+), 70 deletions(-) diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade index e6e1da15cf..a6e1c0215b 100644 --- a/public/_includes/_docs-nav.jade +++ b/public/_includes/_docs-nav.jade @@ -2,10 +2,9 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav .side-nav-search input(type="search" placeholder="SEARCH DOCS...") - ul.side-nav-primary for page, slug in public.docs[current.path[1]][current.path[2]]._data - if slug == "index" - li Docs Home - else - li #{page.title} + name = page.menuTitle || page.title + selected = current.path[3] == slug ? 'is-selected':'' + + li #{name} diff --git a/public/docs/js/_quickstart.jade b/public/docs/js/_quickstart.jade index cbc7eb102f..3c77962fcf 100644 --- a/public/docs/js/_quickstart.jade +++ b/public/docs/js/_quickstart.jade @@ -1,83 +1,77 @@ - -//- if lang == 'js' -//- h2 I like JavaScript -//- else if lang == 'dart' -//- h2 I like Dart - -// STEP 1 - Install Angular ########################## +// STEP 1 - Install Angular ########################## .content-block.content-number.clearfix i.number.icon-number.large - + .c11 header - + h3#section-install-angular Install Angular - p - b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular. + p + b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular. | The following setup is for those who want to try out Angular while it is in alpha. p - | For the sake of this quickstart we recommend using the + | For the sake of this quickstart we recommend using the a(href="https://github.com/davideast/conscious") es6-shim GitHub repository |. This repository will provide a faster start. es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. - - p + + p | Clone the repository inside of aleady existing project. - + pre - code git clone https://github.com/davideast/concious.git es6-shim - + code git clone https://github.com/davideast/concious.git es6-shim + section.docs-sub-section h4 A word on ES6 p | Angular builds on top of ES6, the new specification of the JavaScript language. Not all ES6 features are available in all browsers. The following es6-shim repository allows you to use ES6 in the browser today. - + p | Angular is available on npm. Configuring Angular to run ES6 in the browser requires a build process, detailed here. - + p - | The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project. - - -// STEP 2 - Import Angular ########################## + | The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project. + + +// STEP 2 - Import Angular ########################## .content-block.content-number.clearfix i.number.icon-number2.large - + .c11 header - + h3#section-transpile Import Angular p - | Create a file named app.es6 at the root of the project. The .es6 extension signifies that the file uses ES6 syntax. - - p Using the ES6 module syntax you can import the required modules from Angular2. + | Create a file named app.es6 at the root of the project. The .es6 extension signifies that the file uses ES6 syntax. + + p Using the ES6 module syntax you can import the required modules from Angular2. pre code | import {Component, Template, bootstrap} from 'angular2/angular2'; p | The above import statement will import the three modules from Angular. These modules load at runtime. - -// STEP 3 - Create a component ########################## + +// STEP 3 - Create a component ########################## .content-block.content-number.clearfix i.number.icon-number3.large - + .c11 header - + h3#section-angular-create-account Create a component p | Components are custom HTML elements. Angular uses components to empower HTML. Components structure and represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app. - + pre code <app></app> - + p A component consists of two parts; the annotation section and the component controller. - + pre code | import {Component, Template, bootstrap} from 'angular2/angular2'; | | // Annotation Section - | @Component({ + | @Component({ | selector: 'app' | }) | @Template({ @@ -91,19 +85,18 @@ | this.name = "Alice"; | } | } - + section.docs-sub-section h4 Component Annotations - + + p A component annotation provides meta-data about the component. An annotation can always identified by its at-sign — @. p - | A component annotation provides meta-data about the component. An annotation can always identified by its at-sign — @. - p - | The @Component annotation defines the HTML tag for the component. The selector property specifies the tag. The selector property is a CSS selector. + | The @Component annotation defines the HTML tag for the component. The selector property specifies the tag. The selector property is a CSS selector. p | The @Template annotation defines the template to apply to the component. This component uses an inline template, but external templates are available as well. To use an external template specify a url property and give it the path to the html file. pre code - | @Component({ + | @Component({ | selector: 'app' | }) | @Template({ @@ -114,7 +107,7 @@ p | The component created above has a HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>. .clear - + section.docs-sub-section h4 Component Controller p @@ -132,38 +125,38 @@ | The template above binds to a name property through the {{ }} syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of {{ name }}. .clear -// STEP 4 - Bootstrap ########################## +// STEP 4 - Bootstrap ########################## .content-block.content-number.clearfix i.number.icon-number4.large - + .c11 header - + h3#section-transpile Bootstrap p - | The last step to load the component on the page. - + | The last step to load the component on the page. + section.docs-sub-section h4 The bootstrap function p | Angular provides a bootstrap function that renders a component to the page. The bootstrap function takes a component as a parameter. Any child components inside of the parent component will render as well. - + code pre bootstrap(AppComponent); .clear - -// STEP 5 - Declare the HTML ########################## + +// STEP 5 - Declare the HTML ########################## .content-block.content-number.clearfix i.number.icon-number5.large .c11 header - + h3#section-angular-create-account Declare the HTML p | Create an index.html file at the root of the project. Include the es6-shim.js file in the head tag. Now, declare the app component the body. The es6-shim must load before any application code. - + code - pre + pre | <html> | <head> | <title>Angular 2 Quickstart</title> @@ -176,13 +169,13 @@ | | </body> | </html> - + section.docs-sub-section h4 Load the component module - p - | The last step is to load the module for the app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers. + p + | The last step is to load the module for the app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers. - p + p | To load the needed modules, System needs to know where to load the files from. The paths property in System specifies the location of the files. p Tell System about three paths: @@ -190,9 +183,9 @@ li Angular - The Angular framework. li Runtime assertions - Optional assertions for runtime type checking. li The app component created above - The component to display on the page. - + code - pre + pre | <html> | <head> | <title>Angular 2 Quickstart</title> @@ -216,17 +209,17 @@ | </script> | </body> | </html> - .clear - + .clear + p | Run the root of your project on a local server. .content-block.content-number.clearfix i.number.icon-number6.large - + .c11 header - + h3#section-transpile Extra-credit p | Learn some template syntax for extra-credit. diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index 6e28d2d519..09e9fd5ccb 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -1,22 +1,28 @@ { "index": { + "icon": "home", "title": "Angular Docs", + "menuTitle": "Docs Home", "banner": "Angular 2 is currently in Alpha Preview. We reccomend using Angular 1.X for production applications." }, "quickstart": { + "icon": "query-builder", "title": "5 Min Quickstart" }, "resources": { + "icon": "play-circle-fill", "title": "Angular Resources" }, "api": { + "icon": "book", "title": "API Proposal" }, "help": { + "icon": "chat", "title": "Help & Support" } } \ No newline at end of file diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss index 38c4aeb6d8..9a7947bd66 100644 --- a/public/resources/css/module/_side-nav.scss +++ b/public/resources/css/module/_side-nav.scss @@ -37,12 +37,32 @@ > a { line-height: $unit * 6; - padding: 0px ($unit * 2); + padding: 0px ($unit * 2) 0px ($unit * 6); color: $metal; font-size: 14px; text-transform: uppercase; text-align: left; font-weight: 400; + position: relative; + + &.is-selected { + background: $fog; + color: $regal; + + .side-nav-icon { + color: $regal; + } + } + } + + .side-nav-icon { + position: absolute; + top: 0px; + left: 16px; + z-index: $layer-1; + font-size: 19px; + color: $cloud; + line-height: 47px; } } }