Skip to content

Commit 021a43c

Browse files
Ismaestroiramos
Ismaestro
authored and
iramos
committed
feat(footer): added sticky footer
1 parent c068595 commit 021a43c

5 files changed

Lines changed: 144 additions & 103 deletions

File tree

‎src/app/app.component.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
1-
<toh-nav [title]="'Tour of heroes'"></toh-nav>
2-
<router-outlet></router-outlet>
1+
<div class="container">
2+
<toh-nav [title]="'Tour of heroes'"></toh-nav>
3+
<router-outlet></router-outlet>
4+
</div>
5+
<footer class="footer">
6+
<div class="container">
7+
<span class="text-muted">Tour of heroes @2016.</span>
8+
</div>
9+
</footer>

‎src/app/heroes/hero-detail/hero-detail.component.html‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
<div *ngIf="hero">
2-
<h2>{{hero.name}} details!</h2>
3-
<div class="input-group">
4-
<span class="input-group-addon" id="hero-id">Id</span>
5-
<input type="text" class="form-control" placeholder="Id" aria-describedby="hero-id"
6-
[value]="hero.id" disabled>
1+
<div class="container">
2+
<div *ngIf="hero">
3+
<h2>{{hero.name}} details!</h2>
4+
<div class="input-group">
5+
<span class="input-group-addon" id="hero-id">Id</span>
6+
<input type="text" class="form-control" placeholder="Id" aria-describedby="hero-id"
7+
[value]="hero.id" disabled>
8+
</div>
9+
<br>
10+
<div class="input-group">
11+
<span class="input-group-addon" id="hero-name">Name</span>
12+
<input type="text" class="form-control" placeholder="Name" aria-describedby="hero-name"
13+
[(ngModel)]="hero.name">
14+
</div>
15+
<br>
16+
<div class="input-group">
17+
<span class="input-group-addon" id="hero-alter-ego">Alter ego</span>
18+
<input type="text" class="form-control" placeholder="Alter ego" aria-describedby="hero-alter-ego"
19+
[(ngModel)]="hero.alterEgo">
20+
</div>
21+
<br>
22+
<button class="btn btn-secondary" (click)="goBack()">Back</button>
23+
<button class="btn btn-primary" (click)="saveHero()">Save hero</button>
724
</div>
8-
<br>
9-
<div class="input-group">
10-
<span class="input-group-addon" id="hero-name">Name</span>
11-
<input type="text" class="form-control" placeholder="Name" aria-describedby="hero-name"
12-
[(ngModel)]="hero.name">
13-
</div>
14-
<br>
15-
<div class="input-group">
16-
<span class="input-group-addon" id="hero-alter-ego">Alter ego</span>
17-
<input type="text" class="form-control" placeholder="Alter ego" aria-describedby="hero-alter-ego"
18-
[(ngModel)]="hero.alterEgo">
19-
</div>
20-
<br>
21-
<button class="btn btn-secondary" (click)="goBack()">Back</button>
22-
<button class="btn btn-primary" (click)="saveHero()">Save hero</button>
23-
</div>
25+
</div>

‎src/app/heroes/hero-list/hero-list.component.html‎

Lines changed: 75 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,81 @@
1-
<h2>
2-
Heroes list
3-
<button class="btn btn-success"
4-
(click)="createNewHero = !createNewHero">
5-
<i class="fa fa-plus" aria-hidden="true"></i>
6-
</button>
7-
</h2>
8-
<div>
9-
<div class="hero-list">
10-
<h3>Pick a highlight color</h3>
11-
<div class="color-picker">
12-
<label class="custom-control custom-radio">
13-
<input id="color1" name="radio" type="radio" class="custom-control-input" (click)="color='orange'">
14-
<span class="custom-control-indicator"></span>
15-
<span class="custom-control-description">Orange</span>
16-
</label>
17-
<label class="custom-control custom-radio">
18-
<input id="color2" name="radio" type="radio" class="custom-control-input" (click)="color='yellow'">
19-
<span class="custom-control-indicator"></span>
20-
<span class="custom-control-description">Yellow</span>
21-
</label>
22-
<label class="custom-control custom-radio">
23-
<input id="color3" name="radio" type="radio" class="custom-control-input" (click)="color='cyan'">
24-
<span class="custom-control-indicator"></span>
25-
<span class="custom-control-description">Cyan</span>
26-
</label>
27-
</div>
1+
<div class="container">
2+
<h2>
3+
Heroes list
4+
<button class="btn btn-success"
5+
(click)="createNewHero = !createNewHero">
6+
<i class="fa fa-plus" aria-hidden="true"></i>
7+
</button>
8+
</h2>
9+
<div>
10+
<div class="hero-list">
11+
<h3>Pick a highlight color</h3>
12+
<div class="color-picker">
13+
<label class="custom-control custom-radio">
14+
<input id="color1" name="radio" type="radio" class="custom-control-input" (click)="color='orange'">
15+
<span class="custom-control-indicator"></span>
16+
<span class="custom-control-description">Orange</span>
17+
</label>
18+
<label class="custom-control custom-radio">
19+
<input id="color2" name="radio" type="radio" class="custom-control-input" (click)="color='yellow'">
20+
<span class="custom-control-indicator"></span>
21+
<span class="custom-control-description">Yellow</span>
22+
</label>
23+
<label class="custom-control custom-radio">
24+
<input id="color3" name="radio" type="radio" class="custom-control-input" (click)="color='cyan'">
25+
<span class="custom-control-indicator"></span>
26+
<span class="custom-control-description">Cyan</span>
27+
</label>
28+
</div>
2829

29-
<ul class="list-group">
30-
<li class="list-group-item"
31-
*ngFor="let hero of heroes" (click)="onSelect(hero)"
32-
[class.selected]="hero === selectedHero"
33-
[tohHighlight]="color" defaultColor="lightgreen">
34-
<div class="hero-info">
35-
<span class="badge badge-default badge-pill">{{hero.id}}</span>
36-
{{hero.name}} | {{hero.alterEgo}} | {{hero.power}}
37-
</div>
38-
<div class="hero-actions">
39-
<button *ngIf="hero === selectedHero" class="btn btn-info"
40-
(click)="gotoDetail()">
41-
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
42-
</button>
43-
<button class="btn btn-danger"
44-
(click)="showRemoveModal(hero)">
45-
<i class="fa fa-times" aria-hidden="true"></i>
46-
</button>
47-
</div>
48-
<div class="modal fade" id="askForRemove" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
49-
<div class="modal-dialog" role="document">
50-
<div class="modal-content">
51-
<div class="modal-header">
52-
<h5 class="modal-title" id="exampleModalLabel">Alert</h5>
53-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
54-
<span aria-hidden="true">&times;</span>
55-
</button>
56-
</div>
57-
<div class="modal-body">
58-
Do you want to remove the hero?
59-
</div>
60-
<div class="modal-footer">
61-
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
62-
<button type="button" class="btn btn-primary" (click)="remove()">
63-
Remove hero
64-
</button>
30+
<ul class="list-group">
31+
<li class="list-group-item"
32+
*ngFor="let hero of heroes" (click)="onSelect(hero)"
33+
[class.selected]="hero === selectedHero"
34+
[tohHighlight]="color" defaultColor="lightgreen">
35+
<div class="hero-info">
36+
<span class="badge badge-default badge-pill">{{hero.id}}</span>
37+
{{hero.name}} | {{hero.alterEgo}} | {{hero.power}}
38+
</div>
39+
<div class="hero-actions">
40+
<button *ngIf="hero === selectedHero" class="btn btn-info"
41+
(click)="gotoDetail()">
42+
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
43+
</button>
44+
<button class="btn btn-danger"
45+
(click)="showRemoveModal(hero)">
46+
<i class="fa fa-times" aria-hidden="true"></i>
47+
</button>
48+
</div>
49+
<div class="modal fade" id="askForRemove" tabindex="-1" role="dialog"
50+
aria-labelledby="exampleModalLabel" aria-hidden="true">
51+
<div class="modal-dialog" role="document">
52+
<div class="modal-content">
53+
<div class="modal-header">
54+
<h5 class="modal-title" id="exampleModalLabel">Alert</h5>
55+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
56+
<span aria-hidden="true">&times;</span>
57+
</button>
58+
</div>
59+
<div class="modal-body">
60+
Do you want to remove the hero?
61+
</div>
62+
<div class="modal-footer">
63+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
64+
<button type="button" class="btn btn-primary" (click)="remove()">
65+
Remove hero
66+
</button>
67+
</div>
6568
</div>
6669
</div>
6770
</div>
68-
</div>
69-
</li>
70-
</ul>
71-
</div>
72-
<div class="new-hero">
73-
<toh-hero-create-new *ngIf="createNewHero"
74-
[heroes]="heroes"
75-
[selectedHero]="selectedHero">
76-
</toh-hero-create-new>
71+
</li>
72+
</ul>
73+
</div>
74+
<div class="new-hero">
75+
<toh-hero-create-new *ngIf="createNewHero"
76+
[heroes]="heroes"
77+
[selectedHero]="selectedHero">
78+
</toh-hero-create-new>
79+
</div>
7780
</div>
7881
</div>

‎src/app/heroes/hero-top/hero-top.component.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
<h3>Top Heroes</h3>
2-
<div class="row">
3-
<div class="col" *ngFor="let hero of heroes" [routerLink]="['/heroes/', hero.id]">
4-
<div class="card-block">
5-
<h4 class="card-title">{{hero.name}}</h4>
1+
<div class="container">
2+
<h3>Top Heroes</h3>
3+
<div class="row">
4+
<div class="col" *ngFor="let hero of heroes" [routerLink]="['/heroes/', hero.id]">
5+
<div class="card-block">
6+
<h4 class="card-title">{{hero.name}}</h4>
7+
</div>
68
</div>
79
</div>
810
</div>

‎src/assets/css/styles.css‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,29 @@
22
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
33
}
44

5-
body {
6-
margin: 2em;
5+
html {
6+
position: relative;
7+
min-height: 100%;
78
}
89

910
body {
11+
margin-bottom: 60px;
1012
color: #888;
1113
font-family: Cambria, Georgia, "Helvetica Neue", Helvetica, sans-serif;
1214
}
1315

16+
.container {
17+
max-width: 100%;
18+
padding: 0;
19+
width: 100%;
20+
margin: 0;
21+
}
22+
23+
.container .container {
24+
width: 80%;
25+
margin: 0 auto;
26+
}
27+
1428
h2 {
1529
color: #444;
1630
font-weight: lighter;
@@ -24,3 +38,16 @@ button {
2438
cursor: pointer !important;
2539
}
2640

41+
.footer {
42+
position: absolute;
43+
bottom: 0;
44+
width: 100%;
45+
height: 60px;
46+
line-height: 60px;
47+
background-color: #f5f5f5;
48+
padding: 0 6em 0 6em;
49+
}
50+
51+
.footer > .container {
52+
padding: 0;
53+
}

0 commit comments

Comments
 (0)