fix(features): using proper flex layout grid to render tiles

xmlking · Oct 11, 2018 · 96995a6 · 96995a6
1 parent 420db62
commit 96995a6
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 34 deletions.
diff --git a/apps/webapp/src/environments/base.ts b/apps/webapp/src/environments/base.ts
@@ -17,6 +17,7 @@ export default {
     flexLayout: packageJson.dependencies['@angular/flex-layout'],
     rxjs: packageJson.dependencies.rxjs,
     angularCli: packageJson.devDependencies['@angular/cli'],
-    typescript: packageJson.devDependencies['typescript'],
+    // typescript: packageJson.devDependencies['typescript'],
+    typescript: packageJson.dependencies['typescript'],
   },
 };
diff --git a/libs/home/src/lib/containers/features/features.component.html b/libs/home/src/lib/containers/features/features.component.html
@@ -1,139 +1,160 @@
 <div class="default-primary-header">
-<h1>Features</h1>
+  <h1>Features</h1>
 </div>
 <div class="features-container" fxLayout="column">
-  <div fxLayout="row wrap" fxLayoutGap="20px">
-    <div  fxFlex="30" [ngClass]="routeAnimationsElements">
+  <div fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap="20px grid"fxLayoutGap="20px grid">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%"
+         [ngClass]="routeAnimationsElements">
       <mat-card>
         <mat-card-title><code>{{versions.angular}}</code>Angular</mat-card-title>
         <mat-card-subtitle>
           Modern powerful framework
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://angular.io/docs/ts/latest/" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
           <a mat-button href="https://github.com/angular/angular" target="_blank">
-            <mat-icon>code</mat-icon> Github
+            <mat-icon>code</mat-icon>
+            Github
           </a>
         </mat-card-actions>
       </mat-card>
     </div>
-    <div  fxFlex="30" [ngClass]="routeAnimationsElements">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%" [ngClass]="routeAnimationsElements">
       <mat-card>
         <mat-card-title><code>{{versions.material}}</code>Angular Material</mat-card-title>
         <mat-card-subtitle>
           Material design component library
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://material.angular.io/" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
           <a mat-button href="https://github.com/angular/material2/" target="_blank">
-            <mat-icon>code</mat-icon> Github
+            <mat-icon>code</mat-icon>
+            Github
           </a>
         </mat-card-actions>
       </mat-card>
     </div>
-    <div fxFlex="30"  [ngClass]="routeAnimationsElements">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%" [ngClass]="routeAnimationsElements">
       <mat-card>
         <mat-card-title><code>{{versions.angularCli}}</code>Angular Cli</mat-card-title>
         <mat-card-subtitle>
           Responsive layout from battle tested, world most famous UI library
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://github.com/angular/angular-cli/wiki/generate" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
           <a mat-button href="https://github.com/angular/angular-cli" target="_blank">
-            <mat-icon>code</mat-icon> Github
+            <mat-icon>code</mat-icon>
+            Github
           </a>
         </mat-card-actions>
       </mat-card>
     </div>
-    <div fxFlex="30"  [ngClass]="routeAnimationsElements">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%" [ngClass]="routeAnimationsElements">
       <mat-card>
         <mat-card-title><code>{{versions.ngxs}}</code>NGXS</mat-card-title>
         <mat-card-subtitle>
           NGXS is a state management pattern + library for Angular.
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://amcdnl.gitbooks.io/ngxs" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
           <a mat-button href="https://github.com/amcdnl/ngxs" target="_blank">
-            <mat-icon>code</mat-icon> Github
+            <mat-icon>code</mat-icon>
+            Github
           </a>
         </mat-card-actions>
       </mat-card>
     </div>
-    <div fxFlex="30"  [ngClass]="routeAnimationsElements">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%" [ngClass]="routeAnimationsElements">
       <mat-card>
         <mat-card-title><code>{{versions.rxjs}}</code>RxJS</mat-card-title>
         <mat-card-subtitle>
           Reactive programming with async collections using Observables.
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="http://reactivex.io/rxjs/" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
           <a mat-button href="https://github.com/ReactiveX/RxJS" target="_blank">
-            <mat-icon>code</mat-icon> Github
+            <mat-icon>code</mat-icon>
+            Github
           </a>
         </mat-card-actions>
       </mat-card>
     </div>
-    <div fxFlex="30"  [ngClass]="routeAnimationsElements">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%" [ngClass]="routeAnimationsElements">
       <mat-card>
         <mat-card-title><code>{{versions.flexLayout}}</code>Flex-Layout</mat-card-title>
         <mat-card-subtitle>
           Responsive layout from battle tested, world most famous UI library
         </mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://github.com/angular/flex-layout/wiki" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
           <a mat-button href="https://github.com/angular/flex-layout" target="_blank">
-            <mat-icon>code</mat-icon> Github
+            <mat-icon>code</mat-icon>
+            Github
           </a>
         </mat-card-actions>
       </mat-card>
     </div>
-    <div fxFlex="30"  [ngClass]="routeAnimationsElements">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%" [ngClass]="routeAnimationsElements">
       <mat-card>
-        <mat-card-title><code>{{versions.typescript}}</code> Typescript</mat-card-title>
+        <mat-card-title><code>{{versions.typescript}}</code>Typescript</mat-card-title>
         <mat-card-subtitle>Superior developer experience, code completion, refactoring and less bugs</mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://github.com/Microsoft/TypeScript" target="_blank">
-            <mat-icon>code</mat-icon> Github
+            <mat-icon>code</mat-icon>
+            Github
           </a>
           <a mat-button href="https://www.typescriptlang.org/docs/home.html" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
         </mat-card-actions>
       </mat-card>
     </div>
-    <div fxFlex="30"  [ngClass]="routeAnimationsElements">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%" [ngClass]="routeAnimationsElements">
       <mat-card>
         <mat-card-title>Themes</mat-card-title>
         <mat-card-subtitle>Flexible theming support for provided and custom components</mat-card-subtitle>
         <mat-card-actions>
           <a mat-button href="https://material.angular.io/guide/theming" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
-          <a mat-button href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1" target="_blank">
-            <mat-icon>redeem</mat-icon> Blog
+          <a mat-button
+             href="https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1"
+             target="_blank">
+            <mat-icon>redeem</mat-icon>
+            Blog
           </a>
         </mat-card-actions>
       </mat-card>
     </div>
-    <div  fxFlex="30" [ngClass]="routeAnimationsElements">
+    <div fxFlex="0 1 calc(33.3% - 20px)" fxFlex.lt-md="0 1 calc(50% - 20px)" fxFlex.lt-sm="100%" [ngClass]="routeAnimationsElements">
       <mat-card>
         <mat-card-title>Lazy loading</mat-card-title>
         <mat-card-subtitle>Faster startup time with lazy loaded feature modules</mat-card-subtitle>
         <mat-card-actions>
-          <a mat-button href="https://angular.io/docs/ts/latest/guide/router.html#!#lazy-loading-route-config" target="_blank">
-            <mat-icon>library_books</mat-icon> Docs
+          <a mat-button href="https://angular.io/docs/ts/latest/guide/router.html#!#lazy-loading-route-config"
+             target="_blank">
+            <mat-icon>library_books</mat-icon>
+            Docs
           </a>
         </mat-card-actions>
       </mat-card>

diff --git a/libs/home/src/lib/containers/features/features.component.scss b/libs/home/src/lib/containers/features/features.component.scss
@@ -7,8 +7,6 @@
 }
 
 mat-card {
-  margin: 0 0 20px 0;
-
   mat-card-title {
     position: relative;
 
@@ -21,6 +19,7 @@ mat-card {
     }
   }
   mat-card-subtitle {
+    padding-top: 8px;
     min-height: 60px;
   }