feat(sass): add mixins and functions and refactor some styles

.angular-cli.json

@@ -31,6 +31,11 @@
         "assets/js/modernizr.js",
         "assets/js/gtm.js"
       ],
+      "stylePreprocessorOptions": {
+        "includePaths": [
+          "../src/styles/"
+        ]
+      },
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",

README.md

@@ -58,22 +58,29 @@ npm run docker           | Builds the docker image and run the container
 ## Features
 
 * Responsive layout (flex layout module)
-* Internationalization
-* Lazy loading modules
-* Interceptors and Events (Progress bar active, if a request is pending)
+* SASS (most used functions and mixins)
+* Modal and toasts (snakbar)!
+
 * CRUD: create, update and remove heroes
-* Service Workers
-* Custom example library
 * Search bar, to look for heroes
-* Angular Pipes
 * Custom loading page
-* Modal and toasts (snakbar)!
+
+* Angular Pipes
+* Interceptors and Events (Progress bar active, if a request is pending)
+* Internationalization
+* Lazy loading modules
+* Service Workers
+
+* Custom [example library](https://github.com/Ismaestro/angular-example-library)
+
+* Modernizr (browser features detection)
+* Google Tag Manager
+* Github pages deploy ready
+
 * Unit tests with Jasmine and Karma including code coverage
 * End-to-end tests with Protractor
-* ES6 Promises
-* Github pages deploy ready
-* Google Tag Manager
-* Modernizr (browser features detection)
+* ES6 Promises and Observables
+
 * Following the [best practices](https://angular.io/guide/styleguide)!
 
 ## Docker

src/app/core/error404/error-404.component.scss

@@ -1,11 +1,13 @@
+@import "mixins";
+
 img {
-  margin: 0 auto;
+  @include push--auto();
   display: block;
 }
 
 .explanation {
-  margin: 1em 0;
+  margin: 1rem 0;
   text-align: center;
-  font-size: 1.2em;
+  font-size: 1.2rem;
   font-weight: 300;
 }

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

@@ -1,8 +1,10 @@
+@import "mixins";
+
 footer {
-  padding: 8px 16px;
-  color: white;
-  background: #3f51b5;
-  margin-top: 2em;
+  padding: calculateRem(8px) calculateRem(16px);
+  color: $secondary--color;
+  background: $primary--color;
+  margin-top: 2rem;
   position: sticky;
   top: 100%;
 
@@ -13,5 +15,5 @@ footer {
 
 .footer-xs {
   text-align: center;
-  padding-top: 1em;
+  padding-top: 1rem;
 }

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

@@ -6,8 +6,8 @@
                     {{item.name | uppercase}}
                 </a>
             </div>
-            <div fxFlex="20" id="today">
-                <sample-component *ngIf="currentLang" [locale]="currentLang"></sample-component>
+            <div fxFlex="20" id="today" *ngIf="currentLang">
+                <sample-component [locale]="currentLang"></sample-component>
             </div>
             <div fxFlex class="text-right">
                 <app-search-bar></app-search-bar>

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

@@ -1,6 +1,8 @@
+@import "mixins";
+
 :host(app-nav) {
   padding-top: 0;
-  padding-bottom: 5em;
+  padding-bottom: 6.5rem;
   display: grid;
 
   header {
@@ -12,34 +14,34 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      padding: 8px 16px;
-      color: white;
-      height: 4em;
-      background: #3f51b5;
+      padding: calculateRem(8px) calculateRem(16px);
+      color: $secondary--color;
+      height: 4rem;
+      background: $primary--color;
 
       .mat-raised-button {
-        color: #3f51b5;
-        margin-right: 1em;
+        color: $primary--color;
+        margin-right: 1rem;
       }
 
       .progress-bar {
         display: flex;
         align-content: center;
         align-items: center;
-        height: 5px;
+        height: calculateRem(5px);
       }
 
       .image-icon {
-        width: 20px;
-        height: 20px;
+        width: calculateRem(20px);
+        height: calculateRem(20px);
       }
 
       img {
         vertical-align: middle;
       }
 
       #today {
-        font-size: 0.7em;
+        font-size: 0.7rem;
       }
     }
   }
@@ -54,22 +56,22 @@
 @media (max-width: 680px) {
   :host(app-nav) {
     padding-top: 0;
-    padding-bottom: 1em;
+    padding-bottom: 1rem;
 
     header {
       position: relative;
 
       nav {
-        height: 7em;
+        height: 7rem;
         display: flex;
-        padding: 1em 2em 0;
+        padding: 1rem 2rem 0;
 
         > div {
-          margin-top: 1em;
+          margin-top: 1rem;
         }
 
         #today {
-          margin-top: 1em;
+          margin-top: 1rem;
         }
       }
     }

src/app/core/nav/nav.component.ts

@@ -22,10 +22,10 @@ export class NavComponent implements OnInit {
               private progressBarService: ProgressBarService,
               private translateService: TranslateService) {
     this.appConfig = appConfig;
-    this.currentLang = this.translateService.currentLang;
   }
 
   ngOnInit() {
+    this.currentLang = this.translateService.currentLang;
     this.loadMenus();
     this.progressBarService.updateProgressBar$.subscribe((mode: string) => {
       this.progressBarMode = mode;

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

@@ -1,15 +1,17 @@
+@import "mixins";
+
 :host(app-search-bar) {
   /deep/ .mat-input-placeholder {
     font-weight: 100;
-    color: white;
+    color: $secondary--color;
   }
 
   /deep/ .mat-input-underline {
-    background-color: white;
-    bottom: 1.5em;
+    background-color: $secondary--color;
+    bottom: 1.5rem;
   }
 
   /deep/ .mat-input-infix {
-    border-top: 1.2em solid transparent;
+    border-top: 1.2rem solid transparent;
   }
 }

src/app/heroes/hero-detail/hero-detail.component.scss

@@ -1,10 +1,18 @@
+@import "mixins";
+
 #heroe-detail {
   width: 65%;
-  margin: 0 auto;
-  margin-top: 2em;
+  @include push--auto();
+  margin-top: 2rem;
 }
 
 button {
-  margin: 2rem auto;
+  @include push--auto(2rem);
   display: block;
+}
+
+@media (max-width: 600px) {
+  #heroe-detail {
+    width: 90%;
+  }
 }

src/app/heroes/hero-list/hero-list.component.scss

@@ -1,3 +1,5 @@
+@import "mixins";
+
 #left {
   width: 50%;
   float: left;
@@ -15,7 +17,7 @@
 }
 
 .mat-list {
-  margin: 0 auto;
+  @include push--auto();
   display: table;
 
   /deep/ .mat-list-text {
@@ -27,7 +29,7 @@
   padding-bottom: 0;
 
   .remove-icon {
-    padding-left: 0.5em;
+    padding-left: 0.5rem;
     color: darkslategrey;
     cursor: pointer;
   }
@@ -36,13 +38,13 @@
 form {
   display: grid;
   width: 80%;
-  margin: 0 auto;
+  @include push--auto();
 
   .mat-raised-button {
-    color: white;
-    background: #3f51b5;
+    color: $secondary--color;
+    background: $primary--color;
     width: 50%;
-    margin: 0 auto;
+    @include push--auto();
   }
 
   .mat-form-field {
@@ -62,7 +64,7 @@ form {
   #left {
     width: 100%;
     float: none;
-    margin: 0 auto;
+    @include push--auto();
   }
 
   #right {

src/app/heroes/hero-top/hero-top.component.scss

@@ -1,26 +1,28 @@
+@import "mixins";
+
 #heroes-list {
-  margin: 2em;
+  margin: 2rem;
 }
 
 .hero-header-image, mat-card-title, mat-card-subtitle, .mat-card-image {
   cursor: pointer;
 }
 
 .hero-card {
-  margin: 2em auto;
+  @include push--auto(2rem);
 }
 
 .progress-spinner {
-  margin: 0 auto;
+  @include push--auto();
 }
 
 @media (max-width: 680px) {
   .hero-card {
     width: 80%;
-    margin: 0 auto;
+    @include push--auto();
   }
 
   .mat-card {
-    margin-bottom: 2em;
+    margin-bottom: 2rem;
   }
 }

src/app/heroes/shared/hero.service.spec.ts

@@ -94,8 +94,8 @@ describe('HeroService', () => {
       }, (error) => {
         expect(error).toBe('maximum votes');
         heroService.deleteHeroById(hero.id).subscribe((response) => {
-        expect(response).toEqual({});
-      });
+          expect(response).toEqual({});
+        });
       });
     });
   }));
@@ -109,9 +109,9 @@ describe('HeroService', () => {
     }).subscribe((hero) => {
       heroService.like(hero).subscribe((response) => {
         expect(response).toEqual({});
-        heroService.deleteHeroById(hero.id).subscribe((response) => {
-        expect(response).toEqual({});
-      });
+        heroService.deleteHeroById(hero.id).subscribe((res) => {
+          expect(res).toEqual({});
+        });
       });
     });
   }));