iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(tutorial): update css and related fixes

Browse Source 
closes #603
This commit is contained in:
John Papa
2015-12-19 02:35:50 -08:00
committed by Ward Bell
parent 5bec58577f
commit f4c69b6ad0
20 changed files with 281 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/docs/_examples/toh-2/ts/app/app.component.ts
+39 -7
View File
@@ -29,20 +29,52 @@ interface Hero {
`,
// #docregion styles-1
styles:[`
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 10em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0em;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #EEE;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.1em 0.7em;
background-color: #369;
padding: 0.8em 0.7em 0em 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0px 0px 4px;
}
.selected { background-color: #EEE; color: #369; }
`]
// #enddocregion styles-1
})
public/docs/_examples/toh-3/ts/app/app.component.ts
+39 -7
View File
@@ -24,20 +24,52 @@ import {HeroDetailComponent} from './hero-detail.component';
`,
// #enddocregion hero-detail-template
styles:[`
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 10em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0em;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #EEE;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.1em 0.7em;
background-color: #369;
padding: 0.8em 0.7em 0em 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0px 0px 4px;
}
.selected { background-color: #EEE; color: #369; }
`],
// #docregion directives
directives: [HeroDetailComponent]
public/docs/_examples/toh-4/ts/app/app.component.ts
+39 -7
View File
@@ -22,20 +22,52 @@ import {HeroService} from './hero.service';
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
`,
styles:[`
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 10em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0em;
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
color: white;
}
.heroes li:hover {
color: #607D8B;
background-color: #EEE;
left: .1em;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.1em 0.7em;
background-color: #369;
padding: 0.8em 0.7em 0em 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0px 0px 4px;
}
.selected { background-color: #EEE; color: #369; }
`],
directives: [HeroDetailComponent],
providers: [HeroService]
public/docs/_examples/tutorial/ts/app/app.component.css
+28
View File
@@ -0,0 +1,28 @@
a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
a:visited, a:link {
color: #607D8B;
}
a:hover {
color: #039be5;
background-color: #CFD8DC;
}
a.router-link-active {
color: #039be5;
}
h1 {
font-size: 1.2em;
color: #999;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
padding-top: 0;
}
public/docs/_examples/tutorial/ts/app/app.component.ts
+4 -7
View File
@@ -3,6 +3,7 @@ import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HeroesComponent} from './heroes.component';
import {HeroDetailComponent} from './hero-detail.component';
import {DashboardComponent} from './dashboard.component';
import {HeroService} from './hero.service';
@Component({
selector: 'my-app',
@@ -12,13 +13,9 @@ import {DashboardComponent} from './dashboard.component';
<a [routerLink]="['Heroes']">Heroes</a>
<router-outlet></router-outlet>
`,
styles: [`
a {padding: 5px;text-decoration: none;}
a:visited, a:link {color: #444;}
a:hover {color: white; background-color: #1171a3;}
a.router-link-active {color: white; background-color: #52b9e9;}
`],
directives: [ROUTER_DIRECTIVES]
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [HeroService]
})
@RouteConfig([
// {path: '/', redirectTo: ['Dashboard'] },
public/docs/_examples/tutorial/ts/app/dashboard.component.css
+44 -21
View File
@@ -1,37 +1,60 @@
[class*='col-'] { float: left; }
[class*='col-'] {
float: left;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h3 { text-align: center; margin-bottom: 0; }
[class*='col-'] { padding-right: 20px; padding-bottom: 20px;}
[class*='col-']:last-of-type { padding-right: 0; }
.grid { margin: 0 10em; }
.col-1-4 { width: 25%; }
h3 {
text-align: center; margin-bottom: 0;
}
[class*='col-'] {
padding-right: 20px;
padding-bottom: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0;
}
.grid {
margin: 0 0em;
}
.col-1-4 {
width: 25%;
}
.module {
padding: 20px;
text-align: center;
color: #eee;
max-height: 120px;
min-width: 120px;
background-color: #1171a3;
background-color: #607D8B;
border-radius: 2px;
}
h4 {
position: relative;
}
.module:hover {
background-color: #EEE;
cursor: pointer;
color: #607d8b;
}
.grid-pad {
padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {
padding-right: 20px;
}
.module:hover { background-color: #52b9e9; cursor: pointer; }
.grid-pad { padding: 20px 0 20px 20px; }
.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; }
@media (max-width: 600px) {
.module { font-size: 10px; max-height: 75px; }
.module {
font-size: 10px;
max-height: 75px; }
}
@media (max-width: 1024px) {
.grid { margin: 0; }
.module { min-width: 60px; }
.grid {
margin: 0;
}
.module {
min-width: 60px;
}
}
public/docs/_examples/tutorial/ts/app/hero-detail.component.css
+24
View File
@@ -0,0 +1,24 @@
label {
display: inline-block;
width: 3em;
margin: .5em 0;
color: #607D8B;
font-weight: bold;
}
input {
height: 2em;
font-size: 1em;
padding-left: .4em;
}
button {
margin-top: 20px;
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer; cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
+1
View File
@@ -6,6 +6,7 @@ import {HeroService} from './hero.service';
@Component({
selector: 'my-hero-detail',
templateUrl: 'app/hero-detail.component.html',
styleUrls: ['app/hero-detail.component.css'],
inputs: ['hero']
})
export class HeroDetailComponent implements OnInit {
public/docs/_examples/tutorial/ts/app/heroes.component.css
+57 -16
View File
@@ -1,17 +1,58 @@
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
.heroes .badge {
font-size: small;
color: white;
padding: 0.1em 0.7em;
background-color: #369;
line-height: 1em;
position: relative;
left: -1px;
top: -1px;
.selected {
background-color: #CFD8DC !important;
color: white;
}
.selected { background-color: #EEE; color: #369; }
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 10em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0em;
height: 1.6em;
border-radius: 4px;
}
.heroes li:hover {
color: #607D8B;
background-color: #EEE;
left: .1em;
}
.heroes li.selected:hover {
color: white;
}
.heroes .text {
position: relative;
top: -3px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0em 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0px 0px 4px;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
public/docs/_examples/tutorial/ts/styles.css
+2 -1
View File
@@ -1,4 +1,5 @@
h2 { color: #444; font-weight: lighter; }
body { margin: 2em; }
body, input[text], button { color: #888; font-family: Cambria, Georgia; }
button {padding: 0.2em; font-size: 14px}
button { padding: 0.2em; font-size: 14px}
* { font-family: Arial; }
public/docs/ts/latest/tutorial/index.jade
+1 -1
View File
@@ -52,7 +52,7 @@ figure.image-display
"Magneta" as the selected hero.
figure.image-display
img(src='/resources/images/devguide/toh/heroes-list-3.png' alt="Output of heroes list app")
img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app")
:marked
We click a different hero and the readonly mini-detail beneath the list reflects our new choice.
public/docs/ts/latest/tutorial/toh-pt2.jade
+3 -5
View File
@@ -139,10 +139,8 @@ code-example(format="." language="bash").
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-styled', 'app.component.ts (Styled heroes)')
:marked
Our styled list of heroes should look like this:
figure.image-display
img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app (no selection color)")
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
We'll do this in a later chapter. For now let's keep rolling.
.l-main-section
:marked
@@ -277,7 +275,7 @@ figure.image-display
:marked
The browser reloads our app.
We select a hero and the selection is clearly identified by the background color.
We select the hero Magneta and the selection is clearly identified by the background color.
figure.image-display
img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")
public/resources/images/devguide/toh/hero-details-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 18 KiB

public/resources/images/devguide/toh/heroes-dashboard-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 22 KiB

public/resources/images/devguide/toh/heroes-list-1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 34 KiB

public/resources/images/devguide/toh/heroes-list-2.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 36 KiB

public/resources/images/devguide/toh/heroes-list-3.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

public/resources/images/devguide/toh/heroes-list-selected.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

public/resources/images/devguide/toh/nav-diagram.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 60 KiB

public/resources/images/devguide/toh/toh-anim.gif
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 458 KiB

After

Width:  |  Height:  |  Size: 268 KiB