Skip to content

Commit e8786e9

Browse files
author
Ismael Ramos
committed
feat(flex layout): added this module as a responsible layout instead of do it by myself
1 parent ae53c78 commit e8786e9

File tree

13 files changed

+100
-72
lines changed

13 files changed

+100
-72
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ Live DEMO [here](http://angularexampleapp.com/)!
5656
`npm start`
5757

5858
## Features
59-
* Responsive layout
59+
* Responsive layout (flex layout module)
6060
* Internationalization
6161
* Lazy loading modules
6262
* Progress bar active, if a request is pending (events)

‎package-lock.json‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@angular/common": "4.4.4",
2626
"@angular/compiler": "4.4.4",
2727
"@angular/core": "4.4.4",
28+
"@angular/flex-layout": "^2.0.0-beta.9",
2829
"@angular/forms": "4.4.4",
2930
"@angular/http": "4.4.4",
3031
"@angular/platform-browser": "4.4.4",

‎src/app/app.module.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {HttpClient, HttpClientModule} from '@angular/common/http';
1414
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
1515
import {HttpLoaderFactory} from './app.translate.factory';
1616
import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
17+
import {FlexLayoutModule} from '@angular/flex-layout';
1718

1819
@NgModule({
1920
imports: [

‎src/app/core/footer/footer.component.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<footer>
2-
<span>{{ 'angularExampleApp' | translate }} 2017</span>
3-
<div class="flex-spacer"></div>
4-
<a href="https://angular.io/" target="_blank"><img src="assets/images/angular.svg"></a>
5-
</footer>
2+
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center"
3+
class.xs="footer-xs">
4+
<div fxFlex="80">
5+
<span>{{ 'angularExampleApp' | translate }} 2017</span>
6+
</div>
7+
<div fxFlex class="text-right" class.xs="footer-xs">
8+
<a href="https://angular.io/" target="_blank"><img src="assets/images/angular.svg"></a>
9+
</div>
10+
</div>
11+
</footer>

‎src/app/core/footer/footer.component.scss‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
footer {
2-
display: flex;
3-
flex-wrap: wrap;
4-
align-items: center;
52
padding: 8px 16px;
63
color: white;
7-
height: 3.6em;
84
background: #3f51b5;
95
margin-top: 2em;
106
position: sticky;
117
top: 100%;
128

139
img {
14-
height: 4em;
10+
width: 25%;
1511
}
12+
}
1613

17-
@media (max-width: 360px) {
18-
height: 50%;
19-
text-align: center;
20-
display: block;
21-
padding-top: 1em;
22-
}
14+
.footer-xs {
15+
text-align: center;
16+
padding-top: 1em;
2317
}

‎src/app/core/nav/nav.component.html‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,41 @@
11
<header>
22
<nav>
3-
<a mat-raised-button *ngFor="let item of menuItems" routerLink="{{item.link}}">
4-
{{item.name | uppercase}}
5-
</a>
6-
<div class="flex-spacer"></div>
7-
<app-search-bar></app-search-bar>
8-
<button mat-icon-button [matMenuTriggerFor]="matmenu">
9-
<mat-icon>public</mat-icon>
10-
</button>
11-
<mat-menu #matmenu="matMenu">
12-
<button mat-menu-item (click)="changeLanguage('en')">
13-
<mat-icon>flag</mat-icon>
14-
<span>
3+
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
4+
<div fxFlex="50">
5+
<a mat-raised-button *ngFor="let item of menuItems" routerLink="{{item.link}}">
6+
{{item.name | uppercase}}
7+
</a>
8+
</div>
9+
<div fxFlex class="text-right">
10+
<app-search-bar></app-search-bar>
11+
<button mat-icon-button [matMenuTriggerFor]="matmenu">
12+
<mat-icon>public</mat-icon>
13+
</button>
14+
<mat-menu #matmenu="matMenu">
15+
<button mat-menu-item (click)="changeLanguage('en')">
16+
<mat-icon>flag</mat-icon>
17+
<span>
1518
English
1619
</span>
17-
</button>
18-
<button mat-menu-item (click)="changeLanguage('es')">
19-
<mat-icon>flag</mat-icon>
20-
<span>
20+
</button>
21+
<button mat-menu-item (click)="changeLanguage('es')">
22+
<mat-icon>flag</mat-icon>
23+
<span>
2124
Español
2225
</span>
23-
</button>
24-
<button mat-menu-item (click)="changeLanguage('pt-br')">
25-
<mat-icon>flag</mat-icon>
26-
<span>
26+
</button>
27+
<button mat-menu-item (click)="changeLanguage('pt-br')">
28+
<mat-icon>flag</mat-icon>
29+
<span>
2730
Português
2831
</span>
29-
</button>
30-
</mat-menu>
31-
<a class="image-icon" href="{{appConfig.repositoryURL}}" target="_blank">
32-
<img src="assets/images/github-circle-white-transparent.svg">
33-
</a>
32+
</button>
33+
</mat-menu>
34+
<a class="image-icon" href="{{appConfig.repositoryURL}}" target="_blank">
35+
<img src="assets/images/github-circle-white-transparent.svg">
36+
</a>
37+
</div>
38+
</div>
3439
</nav>
3540
<section class="progress-bar">
3641
<mat-progress-bar

‎src/app/core/nav/nav.component.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
align-items: center;
1515
padding: 8px 16px;
1616
color: white;
17-
height: 3em;
17+
height: 4em;
1818
background: #3f51b5;
1919

2020
.mat-raised-button {
@@ -33,6 +33,10 @@
3333
width: 20px;
3434
height: 20px;
3535
}
36+
37+
img {
38+
vertical-align: middle;
39+
}
3640
}
3741
}
3842
}

‎src/app/core/search-bar/search-bar.component.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
:host(app-search-bar) {
2-
display: flex;
3-
align-items: center;
4-
52
/deep/ .mat-input-placeholder {
63
font-weight: 100;
74
color: white;

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

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
1-
<h1 class="section-title">{{'topHeroes' | translate}}</h1>
2-
<mat-progress-spinner *ngIf="!heroes"
3-
class="progress-spinner"
4-
[color]="'primary'"
5-
[mode]="'indeterminate'">
6-
</mat-progress-spinner>
7-
<div id="heroes-list" *ngIf="heroes">
8-
<ng-container *ngFor="let hero of heroes">
9-
<mat-card class="hero-card">
10-
<mat-card-header>
11-
<div mat-card-avatar class="hero-header-image"
12-
[ngStyle]="{'background-image': 'url(https://github.com/assets/images/heroes/'%20+%20hero.id%20+%20'-thumbnail.jpg)'}"></div>
13-
<mat-card-title>{{hero.name}}</mat-card-title>
14-
<mat-card-subtitle>{{hero.alterEgo}}</mat-card-subtitle>
15-
<div class="flex-spacer"></div>
16-
<div class="hero-actions">
17-
{{hero.likes}}
18-
<mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
19-
[matTooltipPosition]="'above'"
20-
class="like-icon" (click)="like(hero)">favorite
21-
</mat-icon>
22-
</div>
23-
</mat-card-header>
24-
<img mat-card-image src="assets/images/heroes/{{hero.id}}.jpg">
25-
</mat-card>
26-
</ng-container>
1+
<div fxLayout="row">
2+
<div fxFlex="10" fxFlex.gt-sm="20"></div>
3+
<div fxFlex="90" fxFlex.gt-sm="80">
4+
<h1 class="section-title">{{'topHeroes' | translate}}</h1>
5+
<mat-progress-spinner *ngIf="!heroes"
6+
class="progress-spinner"
7+
[color]="'primary'"
8+
[mode]="'indeterminate'">
9+
</mat-progress-spinner>
10+
<div id="heroes-list" *ngIf="heroes">
11+
<ng-container *ngFor="let hero of heroes">
12+
<mat-card class="hero-card">
13+
<mat-card-header>
14+
<div mat-card-avatar class="hero-header-image"
15+
[ngStyle]="{'background-image': 'url(https://github.com/assets/images/heroes/'%20+%20hero.id%20+%20'-thumbnail.jpg)'}"></div>
16+
<mat-card-title>{{hero.name}}</mat-card-title>
17+
<mat-card-subtitle>{{hero.alterEgo}}</mat-card-subtitle>
18+
<div class="flex-spacer"></div>
19+
<div class="hero-actions">
20+
{{hero.likes}}
21+
<mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
22+
[matTooltipPosition]="'above'"
23+
class="like-icon" (click)="like(hero)">favorite
24+
</mat-icon>
25+
</div>
26+
</mat-card-header>
27+
<img mat-card-image src="assets/images/heroes/{{hero.id}}.jpg">
28+
</mat-card>
29+
</ng-container>
30+
</div>
31+
</div>
32+
<div fxFlex="10" fxFlex.gt-sm="20"></div>
2733
</div>

0 commit comments

Comments
 (0)