feat: add features overview

tomastrajan · May 23, 2017 · 2a4447f · 2a4447f
1 parent 8ec91e5
commit 2a4447f
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 3 deletions.
diff --git a/src/app/static/features/features.component.html b/src/app/static/features/features.component.html
@@ -1,3 +1,73 @@
-<p>
-  features works!
-</p>
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+      <h1 class="main-heading">Features</h1>
+    </div>
+  </div>
+  <div class="row align-items-end">
+    <div class="col-sm-6 col-md-4">
+      <md-card>
+        <md-card-title>Angular</md-card-title>
+        <md-card-subtitle>Modern powerful framework</md-card-subtitle>
+        <md-card-actions>
+          <a md-button href="https://angular.io/docs/ts/latest/" target="_blank">
+            <i class="fa fa-book fa-lg"></i> Docs
+          </a>
+          <a md-button href="https://github.com/angular/angular" target="_blank">
+            <i class="fa fa-github fa-lg"></i> Github
+          </a>
+        </md-card-actions>
+      </md-card>
+    </div>
+    <div class="col-sm-6 col-md-4">
+      <md-card>
+        <md-card-title>ngRx</md-card-title>
+        <md-card-subtitle>One way data flow powered by RxJS Observables</md-card-subtitle>
+        <md-card-actions>
+          <a md-button href="https://github.com/ngrx/platform" target="_blank">
+            <i class="fa fa-github fa-lg"></i> Github
+          </a>
+        </md-card-actions>
+      </md-card>
+    </div>
+    <div class="col-sm-6 col-md-4">
+      <md-card>
+        <md-card-title>Angular Material</md-card-title>
+        <md-card-subtitle>Material design component library</md-card-subtitle>
+        <md-card-actions>
+          <a md-button href="https://material.angular.io/" target="_blank">
+            <i class="fa fa-book fa-lg"></i> Docs
+          </a>
+          <a md-button href="https://github.com/angular/material2/" target="_blank">
+            <i class="fa fa-github fa-lg"></i> Github
+          </a>
+        </md-card-actions>
+      </md-card>
+    </div>
+    <div class="col-sm-6 col-md-4">
+      <md-card>
+        <md-card-title>Themes</md-card-title>
+        <md-card-subtitle>Flexible theming support for provided and custom components</md-card-subtitle>
+        <md-card-actions>
+          <a md-button href="https://material.angular.io/guide/theming" target="_blank">
+            <i class="fa fa-book fa-lg"></i> Docs
+          </a>
+        </md-card-actions>
+      </md-card>
+    </div>
+    <div class="col-sm-6 col-md-4">
+      <md-card>
+        <md-card-title>Bootstrap</md-card-title>
+        <md-card-subtitle>Responsive layout from battle tested, world most famous UI library</md-card-subtitle>
+        <md-card-actions>
+          <a md-button href="https://v4-alpha.getbootstrap.com/layout/grid/" target="_blank">
+            <i class="fa fa-book fa-lg"></i> Docs
+          </a>
+          <a md-button href="https://github.com/twbs/bootstrap" target="_blank">
+            <i class="fa fa-github fa-lg"></i> Github
+          </a>
+        </md-card-actions>
+      </md-card>
+    </div>
+  </div>
+</div>
diff --git a/src/app/static/features/features.component.scss b/src/app/static/features/features.component.scss
@@ -0,0 +1,33 @@
+@import 'styles-variables';
+
+.container {
+  margin-top: 20px;
+}
+
+
+.main-heading {
+  text-transform: uppercase;
+  margin: 0 0 20px 0
+}
+
+md-card {
+  margin: 0 0 20px 0;
+
+  md-card-subtitle {
+    min-height: 60px;
+  }
+
+  @media (max-width: map-get($grid-breakpoints, sm)) {
+    md-card-subtitle {
+      min-height: auto;
+    }
+  }
+
+  a {
+    i {
+      position: relative;
+      top: -1px;
+      left: -3px;
+    }
+  }
+}
diff --git a/src/app/static/features/features.component.ts b/src/app/static/features/features.component.ts
@@ -12,4 +12,8 @@ export class FeaturesComponent implements OnInit {
   ngOnInit() {
   }
 
+  openLink(link: string) {
+    window.open(link, '_blank');
+  }
+
 }