feat(flex layout): added this module as a responsible layout instead …

…of do it by myself
Ismaestro · Oct 19, 2017 · e8786e9 · e8786e9
1 parent ae53c78
commit e8786e9
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 72 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ Live DEMO [here](http://angularexampleapp.com/)!
 `npm start`
 
 ## Features
-* Responsive layout
+* Responsive layout (flex layout module)
 * Internationalization
 * Lazy loading modules
 * Progress bar active, if a request is pending (events)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@angular/common": "4.4.4",
     "@angular/compiler": "4.4.4",
     "@angular/core": "4.4.4",
+    "@angular/flex-layout": "^2.0.0-beta.9",
     "@angular/forms": "4.4.4",
     "@angular/http": "4.4.4",
     "@angular/platform-browser": "4.4.4",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -14,6 +14,7 @@ import {HttpClient, HttpClientModule} from '@angular/common/http';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {HttpLoaderFactory} from './app.translate.factory';
 import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
+import {FlexLayoutModule} from '@angular/flex-layout';
 
 @NgModule({
   imports: [

diff --git a/src/app/core/footer/footer.component.html b/src/app/core/footer/footer.component.html
@@ -1,5 +1,11 @@
 <footer>
-    <span>{{ 'angularExampleApp' | translate }} 2017</span>
-    <div class="flex-spacer"></div>
-    <a href="https://angular.io/" target="_blank"><img src="assets/images/angular.svg"></a>
-</footer>
+    <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center"
+         class.xs="footer-xs">
+        <div fxFlex="80">
+            <span>{{ 'angularExampleApp' | translate }} 2017</span>
+        </div>
+        <div fxFlex class="text-right" class.xs="footer-xs">
+            <a href="https://angular.io/" target="_blank"><img src="assets/images/angular.svg"></a>
+        </div>
+    </div>
+</footer>
diff --git a/src/app/core/footer/footer.component.scss b/src/app/core/footer/footer.component.scss
@@ -1,23 +1,17 @@
 footer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
   padding: 8px 16px;
   color: white;
-  height: 3.6em;
   background: #3f51b5;
   margin-top: 2em;
   position: sticky;
   top: 100%;
 
   img {
-    height: 4em;
+    width: 25%;
   }
+}
 
-  @media (max-width: 360px) {
-    height: 50%;
-    text-align: center;
-    display: block;
-    padding-top: 1em;
-  }
+.footer-xs {
+  text-align: center;
+  padding-top: 1em;
 }
diff --git a/src/app/core/nav/nav.component.html b/src/app/core/nav/nav.component.html
@@ -1,36 +1,41 @@
 <header>
     <nav>
-        <a mat-raised-button *ngFor="let item of menuItems" routerLink="{{item.link}}">
-            {{item.name | uppercase}}
-        </a>
-        <div class="flex-spacer"></div>
-        <app-search-bar></app-search-bar>
-        <button mat-icon-button [matMenuTriggerFor]="matmenu">
-            <mat-icon>public</mat-icon>
-        </button>
-        <mat-menu #matmenu="matMenu">
-            <button mat-menu-item (click)="changeLanguage('en')">
-                <mat-icon>flag</mat-icon>
-                <span>
+        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
+            <div fxFlex="50">
+                <a mat-raised-button *ngFor="let item of menuItems" routerLink="{{item.link}}">
+                    {{item.name | uppercase}}
+                </a>
+            </div>
+            <div fxFlex class="text-right">
+                <app-search-bar></app-search-bar>
+                <button mat-icon-button [matMenuTriggerFor]="matmenu">
+                    <mat-icon>public</mat-icon>
+                </button>
+                <mat-menu #matmenu="matMenu">
+                    <button mat-menu-item (click)="changeLanguage('en')">
+                        <mat-icon>flag</mat-icon>
+                        <span>
                 English
             </span>
-            </button>
-            <button mat-menu-item (click)="changeLanguage('es')">
-                <mat-icon>flag</mat-icon>
-                <span>
+                    </button>
+                    <button mat-menu-item (click)="changeLanguage('es')">
+                        <mat-icon>flag</mat-icon>
+                        <span>
                 Español
             </span>
-            </button>
-            <button mat-menu-item (click)="changeLanguage('pt-br')">
-                <mat-icon>flag</mat-icon>
-                <span>
+                    </button>
+                    <button mat-menu-item (click)="changeLanguage('pt-br')">
+                        <mat-icon>flag</mat-icon>
+                        <span>
                 Português
             </span>
-            </button>
-        </mat-menu>
-        <a class="image-icon" href="{{appConfig.repositoryURL}}" target="_blank">
-            <img src="assets/images/github-circle-white-transparent.svg">
-        </a>
+                    </button>
+                </mat-menu>
+                <a class="image-icon" href="{{appConfig.repositoryURL}}" target="_blank">
+                    <img src="assets/images/github-circle-white-transparent.svg">
+                </a>
+            </div>
+        </div>
     </nav>
     <section class="progress-bar">
         <mat-progress-bar

diff --git a/src/app/core/nav/nav.component.scss b/src/app/core/nav/nav.component.scss
@@ -14,7 +14,7 @@
       align-items: center;
       padding: 8px 16px;
       color: white;
-      height: 3em;
+      height: 4em;
       background: #3f51b5;
 
       .mat-raised-button {
@@ -33,6 +33,10 @@
         width: 20px;
         height: 20px;
       }
+
+      img {
+        vertical-align: middle;
+      }
     }
   }
 }

diff --git a/src/app/core/search-bar/search-bar.component.scss b/src/app/core/search-bar/search-bar.component.scss
@@ -1,7 +1,4 @@
 :host(app-search-bar) {
-  display: flex;
-  align-items: center;
-
   /deep/ .mat-input-placeholder {
     font-weight: 100;
     color: white;

diff --git a/src/app/heroes/hero-top/hero-top.component.html b/src/app/heroes/hero-top/hero-top.component.html
@@ -1,27 +1,33 @@
-<h1 class="section-title">{{'topHeroes' | translate}}</h1>
-<mat-progress-spinner *ngIf="!heroes"
-                     class="progress-spinner"
-                     [color]="'primary'"
-                     [mode]="'indeterminate'">
-</mat-progress-spinner>
-<div id="heroes-list" *ngIf="heroes">
-    <ng-container *ngFor="let hero of heroes">
-        <mat-card class="hero-card">
-            <mat-card-header>
-                <div mat-card-avatar class="hero-header-image"
-                     [ngStyle]="{'background-image': 'url(assets/images/heroes/' + hero.id + '-thumbnail.jpg)'}"></div>
-                <mat-card-title>{{hero.name}}</mat-card-title>
-                <mat-card-subtitle>{{hero.alterEgo}}</mat-card-subtitle>
-                <div class="flex-spacer"></div>
-                <div class="hero-actions">
-                    {{hero.likes}}
-                    <mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
-                             [matTooltipPosition]="'above'"
-                             class="like-icon" (click)="like(hero)">favorite
-                    </mat-icon>
-                </div>
-            </mat-card-header>
-            <img mat-card-image src="assets/images/heroes/{{hero.id}}.jpg">
-        </mat-card>
-    </ng-container>
+<div fxLayout="row">
+    <div fxFlex="10" fxFlex.gt-sm="20"></div>
+    <div fxFlex="90" fxFlex.gt-sm="80">
+        <h1 class="section-title">{{'topHeroes' | translate}}</h1>
+        <mat-progress-spinner *ngIf="!heroes"
+                              class="progress-spinner"
+                              [color]="'primary'"
+                              [mode]="'indeterminate'">
+        </mat-progress-spinner>
+        <div id="heroes-list" *ngIf="heroes">
+            <ng-container *ngFor="let hero of heroes">
+                <mat-card class="hero-card">
+                    <mat-card-header>
+                        <div mat-card-avatar class="hero-header-image"
+                             [ngStyle]="{'background-image': 'url(assets/images/heroes/' + hero.id + '-thumbnail.jpg)'}"></div>
+                        <mat-card-title>{{hero.name}}</mat-card-title>
+                        <mat-card-subtitle>{{hero.alterEgo}}</mat-card-subtitle>
+                        <div class="flex-spacer"></div>
+                        <div class="hero-actions">
+                            {{hero.likes}}
+                            <mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
+                                      [matTooltipPosition]="'above'"
+                                      class="like-icon" (click)="like(hero)">favorite
+                            </mat-icon>
+                        </div>
+                    </mat-card-header>
+                    <img mat-card-image src="assets/images/heroes/{{hero.id}}.jpg">
+                </mat-card>
+            </ng-container>
+        </div>
+    </div>
+    <div fxFlex="10" fxFlex.gt-sm="20"></div>
 </div>
diff --git a/src/app/heroes/hero-top/hero-top.component.scss b/src/app/heroes/hero-top/hero-top.component.scss
@@ -3,7 +3,6 @@
 }
 
 .hero-card {
-  width: 45%;
   margin: 2em auto;
 }
 

diff --git a/src/app/shared/modules/shared.module.ts b/src/app/shared/modules/shared.module.ts
@@ -2,14 +2,17 @@ import {ModuleWithProviders, NgModule} from '@angular/core';
 import {MaterialModule} from './material.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {HeroService} from '../../heroes/shared/hero.service';
+import {FlexLayoutModule} from '@angular/flex-layout';
 
 @NgModule({
   imports: [
     MaterialModule,
+    FlexLayoutModule,
     TranslateModule
   ],
   exports: [
     MaterialModule,
+    FlexLayoutModule,
     TranslateModule
   ]
 })

diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss
@@ -79,3 +79,7 @@ snack-bar-container {
   height: 55px !important;
   width: 55px !important;
 }
+
+.text-right {
+  text-align: right;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ @@
     }
     .hero-card {
-      width: 45%;
       margin: 2em auto;
     }
@@ Expand Down @@