Skip to content

Commit 14123bb

Browse files
moizKachwalamoizKachwala
committed
styled components
1 parent 0631119 commit 14123bb

File tree

9 files changed

+79
-176
lines changed

9 files changed

+79
-176
lines changed

‎client/app/components/dashboard/dashboard.component.css‎

Lines changed: 6 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,22 @@
1-
[class*='col-'] {
2-
float: left;
3-
}
4-
*, *:after, *:before {
5-
-webkit-box-sizing: border-box;
6-
-moz-box-sizing: border-box;
7-
box-sizing: border-box;
8-
}
91
h3 {
10-
text-align: center; margin-bottom: 0;
2+
text-align: center; margin-bottom: 10;
113
}
124
[class*='col-'] {
135
padding-right: 20px;
146
padding-bottom: 20px;
157
}
16-
[class*='col-']:last-of-type {
17-
padding-right: 0;
18-
}
19-
.grid {
20-
margin: 0;
21-
}
22-
.col-1-4 {
23-
width: 25%;
24-
}
258
.module {
269
padding: 20px;
2710
text-align: center;
2811
color: #eee;
2912
max-height: 120px;
3013
min-width: 120px;
31-
background-color: #607D8B;
14+
background-color: orangered;
3215
border-radius: 2px;
3316
}
34-
h4 {
35-
position: relative;
36-
}
17+
3718
.module:hover {
38-
background-color: #EEE;
19+
background-color: darkred;
3920
cursor: pointer;
40-
color: #607d8b;
41-
}
42-
.grid-pad {
43-
padding: 10px 0;
44-
}
45-
.grid-pad > [class*='col-']:last-of-type {
46-
padding-right: 20px;
47-
}
48-
@media (max-width: 600px) {
49-
.module {
50-
font-size: 10px;
51-
max-height: 75px; }
52-
}
53-
@media (max-width: 1024px) {
54-
.grid {
55-
margin: 0;
56-
}
57-
.module {
58-
min-width: 60px;
59-
}
60-
}
21+
color: white;
22+
}

‎client/app/components/dashboard/dashboard.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h3>Top Heroes</h3>
2-
<div class="grid grid-pad">
3-
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
2+
<div class="row">
3+
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-md-3">
44
<div class="module hero">
55
<h4>{{hero.name}}</h4>
66
</div>

‎client/app/components/heroDetail/hero-detail.component.css‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎client/app/components/heroDetail/hero-detail.component.html‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,35 @@
1-
<div *ngIf="hero">
1+
<div *ngIf="hero" class="form-horizontal">
22
<h2>{{hero.name}} details!</h2>
3-
<div *ngIf="!newHero"><label>id: </label>{{hero._id}}</div>
4-
<div>
5-
<label>Name: </label>
6-
<input [(ngModel)]="hero.name" placeholder="name"/>
3+
<div class="form-group">
4+
<div *ngIf="!newHero">
5+
<label class="col-sm-2 control-label">id: </label>
6+
<div class="col-sm-10">
7+
{{hero._id}}
8+
</div>
9+
</div>
710
</div>
8-
<div>
9-
<label>Power: </label>
10-
<input [(ngModel)]="hero.power" placeholder="power"/>
11+
<div class="form-group">
12+
<label class="col-sm-2 control-label">Name: </label>
13+
<div class="col-sm-10">
14+
<input class="form-control" [(ngModel)]="hero.name" placeholder="name" />
15+
</div>
1116
</div>
12-
<div>
13-
<label>Amount People Saved: </label>
14-
<input [(ngModel)]="hero.amountPeopleSaved" placeholder="amountPeopleSaved"/>
17+
<div class="form-group">
18+
<label class="col-sm-2 control-label">Power: </label>
19+
<div class="col-sm-10">
20+
<input class="form-control" [(ngModel)]="hero.power" placeholder="power" />
21+
</div>
22+
</div>
23+
<div class="form-group">
24+
<label class="col-sm-2 control-label">Amount People Saved: </label>
25+
<div class="col-sm-10">
26+
<input class="form-control" [(ngModel)]="hero.amountPeopleSaved" placeholder="amountPeopleSaved" />
27+
</div>
28+
</div>
29+
<div class="form-group">
30+
<div class="col-sm-offset-2 col-sm-10">
31+
<button (click)="goBack()" class="btn btn-default">Back</button>
32+
<button (click)="save()" class="btn btn-primary">Save</button>
33+
</div>
1534
</div>
16-
<button (click)="goBack()">Back</button>
17-
<button (click)="save()">Save</button>
1835
</div>

‎client/app/components/heroDetail/hero-detail.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import {HeroService} from "../../services/hero.service";
99

1010
@Component({
1111
selector: 'my-hero-detail',
12-
templateUrl: './app/components/heroDetail/hero-detail.component.html',
13-
styleUrls: ['./app/components/heroDetail/hero-detail.component.css']
12+
templateUrl: './app/components/heroDetail/hero-detail.component.html'
1413
})
1514

1615
export class HeroDetailComponent implements OnInit {

‎client/app/components/heroes/heroes.component.css‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎client/app/components/heroes/heroes.component.html‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,40 @@
11
<h1>{{title}}</h1>
22
<h2>My Heroes</h2>
3-
<div class="error" *ngIf="error">{{error}}</div>
4-
<button class="buttonCls topButton" (click)="addHero()">Add New Hero</button>
5-
<ul class="heroes">
6-
<li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
7-
<span class="hero-element">
8-
<span class="badge">{{hero._id}}</span> {{hero.name}}
9-
</span>
10-
<button class="delete-button" (click)="deleteHero(hero, $event)">Delete</button>
11-
</li>
12-
</ul>
13-
14-
<div *ngIf="selectedHero">
15-
<h2>
16-
{{selectedHero.name | uppercase}} is my hero
17-
</h2>
18-
<button class="buttonCls" (click)="gotoDetail()">View Details</button>
3+
<div class="row">
4+
<div class="col-md-12">
5+
<div class="error" *ngIf="error">{{error}}</div>
6+
<div class="pull-right">
7+
<button class="btn btn-success" (click)="addHero()">Add New Hero</button>
8+
</div>
9+
</div>
10+
</div>
11+
<div class="row">
12+
<div class="col-md-12">
13+
<table class="table table-bordered">
14+
<thead>
15+
<tr>
16+
<th>Object Id</th>
17+
<th>Name</th>
18+
<th>Action</th>
19+
</tr>
20+
</thead>
21+
<tbody>
22+
<tr *ngFor="let hero of heroes" [class.active]="hero === selectedHero" (click)="onSelect(hero)">
23+
<td>{{hero._id}}</td>
24+
<td>{{hero.name}}</td>
25+
<td><button class="btn btn-danger" (click)="deleteHero(hero, $event)">Delete</button></td>
26+
</tr>
27+
</tbody>
28+
</table>
29+
</div>
30+
</div>
31+
<div class="row">
32+
<div class="col-md-12">
33+
<div *ngIf="selectedHero">
34+
<h2>
35+
{{selectedHero.name | uppercase}} is my hero
36+
</h2>
37+
<button class="btn btn-primary" (click)="gotoDetail()">View Details</button>
38+
</div>
39+
</div>
1940
</div>

‎client/app/components/heroes/heroes.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import { Router } from '@angular/router';
88

99
@Component({
1010
selector: 'my-heroes',
11-
templateUrl: './app/components/heroes/heroes.component.html',
12-
styleUrls: ['./app/components/heroes/heroes.component.css']
11+
templateUrl: './app/components/heroes/heroes.component.html'
1312
})
1413

1514
export class HeroesComponent implements OnInit {

‎gulpfile.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,11 @@ gulp.task('watch', function () {
153153
gulp.watch(["client/**/*.ts"], ['compile']).on('change', function (e) {
154154
console.log('TypeScript file ' + e.path + ' has been changed. Compiling.');
155155
});
156+
156157
gulp.watch(["client/**/*.html", "client/**/*.css"], ['clientResources']).on('change', function (e) {
157158
console.log('Resource file ' + e.path + ' has been changed. Updating.');
158159
});
160+
159161
gulp.watch(["server/src/**/*.ts"], ['compile']).on('change', function (e) {
160162
console.log('TypeScript file ' + e.path + ' has been changed. Compiling.');
161163
});

0 commit comments

Comments
 (0)