Added Material design.

Created lb-hero-list-item

package.json

@@ -71,12 +71,14 @@
     "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
   },
   "dependencies": {
-    "@angular/animations": "~4.1.2",
+    "@angular/animations": "^4.1.3",
     "@angular/common": "~4.1.2",
     "@angular/compiler": "~4.1.2",
     "@angular/core": "~4.1.2",
+    "@angular/flex-layout": "^2.0.0-beta.8",
     "@angular/forms": "~4.1.2",
     "@angular/http": "~4.1.2",
+    "@angular/material": "^2.0.0-beta.6",
     "@angular/platform-browser": "~4.1.2",
     "@angular/platform-browser-dynamic": "~4.1.2",
     "@angular/platform-server": "~4.1.2",
@@ -104,8 +106,8 @@
     "awesome-typescript-loader": "~3.1.2",
     "codelyzer": "~2.1.1",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
     "cross-env": "^5.0.0",
+    "css-loader": "^0.28.0",
     "exports-loader": "^0.6.4",
     "expose-loader": "^0.7.3",
     "extract-text-webpack-plugin": "~2.1.0",

src/app/app.module.ts

@@ -4,6 +4,9 @@ import { HttpModule } from '@angular/http';
 import { NgModule, ApplicationRef } from '@angular/core';
 import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
 import { RouterModule, PreloadAllModules } from '@angular/router';
+import { MdCardModule } from '@angular/material';
+import { FlexLayoutModule } from "@angular/flex-layout";
+
 
 /*
  * Platform and Environment providers/directives/pipes
@@ -51,7 +54,9 @@ type StoreType = {
     BrowserModule,
     FormsModule,
     HttpModule,
-    RouterModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules })
+    RouterModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules }),
+    MdCardModule,
+    FlexLayoutModule
   ],
   /**
    * Expose our Services and Providers into Angular's dependency injection.

src/app/app.routes.ts

@@ -11,7 +11,67 @@ export const ROUTES: Routes = [
     path: 'leaderboard',
     component: LeaderboardPageComponent,
     data: {
-      leaderboardData: []
+      leaderboardData: [{
+        team: {
+          _id: "123",
+          name: "JantarMantar",
+          picture_url: "https://scontent-sit4-1.cdninstagram.com/t51.2885-19/s150x150/18879349_1153562098082063_7316654845195190272_a.jpg",
+          members: [{
+            _id: "12",
+            name: "Paras Sharma",
+            picture_url:"https://scontent-sit4-1.cdninstagram.com/t51.2885-19/s150x150/18879349_1153562098082063_7316654845195190272_a.jpg",
+            instagram_username: "mohit",
+            instagram_uid: "mohit",
+            twitter_username: "mohit",
+            twitter_uid: "mohit"
+          },
+          {
+            _id: "12",
+            name: "Paras Sharma",
+            picture_url:"https://scontent-sit4-1.cdninstagram.com/t51.2885-19/s150x150/18879349_1153562098082063_7316654845195190272_a.jpg",
+            instagram_username: "mohit",
+            instagram_uid: "mohit",
+            twitter_username: "mohit",
+            twitter_uid: "mohit"
+          },{
+            _id: "12",
+            name: "Paras Sharma",
+            picture_url:"https://scontent-sit4-1.cdninstagram.com/t51.2885-19/s150x150/18879349_1153562098082063_7316654845195190272_a.jpg",
+            instagram_username: "mohit",
+            instagram_uid: "mohit",
+            twitter_username: "mohit",
+            twitter_uid: "mohit"
+          },{
+            _id: "12",
+            name: "Paras Sharma",
+            picture_url:"https://scontent-sit4-1.cdninstagram.com/t51.2885-19/s150x150/18879349_1153562098082063_7316654845195190272_a.jpg",
+            instagram_username: "mohit",
+            instagram_uid: "mohit",
+            twitter_username: "mohit",
+            twitter_uid: "mohit"
+          },
+          {
+            _id: "12",
+            name: "Paras Sharma",
+            picture_url:"https://scontent-sit4-1.cdninstagram.com/t51.2885-19/s150x150/18879349_1153562098082063_7316654845195190272_a.jpg",
+            instagram_username: "mohit",
+            instagram_uid: "mohit",
+            twitter_username: "mohit",
+            twitter_uid: "mohit"
+          }],
+          desc: "Sample optional Description"
+        }, stats: {
+          twitter: {
+            twitter_likes: 32,
+            twitter_retweets: 16,
+            tweet_count: 6
+          }, instagram: {
+            instagram_post_count: 45,
+            instagram_likes: 109,
+            instagram_comments: 16
+          }, total_engangement:(109+16+32)
+        }
+      }]
     }
   },
   { path: 'home', component: HomeComponent },

src/app/common/member.model.ts

@@ -1,6 +1,7 @@
 export interface MemberModel {
   _id: string;
   name: string;
+  picture_url?: string;
   instagram_username: string;
   instagram_uid: string;
   twitter_username: string;

src/app/leaderboard/items/lb-hero-item/lb-hero-item.component.html

@@ -1,6 +1,23 @@
-<p>
-  lb-hero-item works!
-</p>
-<pre>
-  {{ item | json }}
-</pre>
+<div class="lb-hero-item mat-elevation-z2">
+  <div class="container" fxLayout fxLayout.xs="column" fxLayout="row" fxLayoutAlign="center">
+    <div fxFlexAlign="center" fxFlex="12%"><span class="rank1">#1</span></div>
+    <div fxFlexAlign="center" fxFlex>
+      <div class="container" fxLayout fxLayout="column" fxLayoutGap="5px" fxfxLayoutAlign="center">
+        <div fxFlex><span class="team-name">{{item.team.name}}</span></div>
+        <div fxFlex>
+          <i class="social social-twitter"></i>&nbsp;{{item.stats.twitter.tweet_count}} <span> | </span>
+          <i class="social social-instagram"></i>&nbsp;{{item.stats.instagram.instagram_post_count}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="container" fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+    <div fxFlexAlign="center" fxFlex="35%">
+      <span *ngFor="let member of item.team.members">
+          <img [src]="member.picture_url" class="member-picture">
+          </span>
+    </div>
+    <div fxFlexAlign="center" fxFlex> Total Engangements: {{item.stats.total_engangement}}
+    </div>
+  </div>
+

src/app/leaderboard/items/lb-hero-item/lb-hero-item.component.scss

@@ -0,0 +1,39 @@
+$twitter-icon-img: "/assets/icon/twitter.png";
+$instagram-icon-img: "/assets/icon/instagram.png";
+$social-icon-size: 16px;
+$member-pic-size: 32px;
+$item-card-max-width: 600px;
+$rank-1-font-size: 35px;
+$team-name-font-size: 20px;;
+
+.lb-hero-item{
+  padding: 2px;
+}
+
+.social {
+  display: inline-block;
+  height: $social-icon-size;
+  width: $social-icon-size;
+  background-size: contain;
+}
+.social-twitter {
+  background-image: url($twitter-icon-img);
+}
+.social-instagram {
+  background-image: url($instagram-icon-img);
+}
+.member-picture{
+  height: $member-pic-size;
+  width: $member-pic-size;
+}
+.container{
+  margin:15px;
+}
+
+.rank1{
+  font-size: $rank-1-font-size;
+}
+
+.team-name{
+  font-size: $team-name-font-size;
+}

src/styles/styles.scss

@@ -1,2 +1,9 @@
 /* this file will be extracted to main dist folder and is imported in index.html */
 /* This file is for setting global styles  */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import url('https://fonts.googleapis.com/css?family=Lato');
+$sb-font: 'Lato';
+
+*{
+  font-family:$sb-font;
+}

yarn.lock

@@ -2,9 +2,11 @@
 # yarn lockfile v1
 
 
-"@angular/animations@~4.1.2":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.1.3.tgz#6e89a1e0fbfd6d0e90be4f2ae190aac67f83a411"
+"@angular/animations@^4.1.3":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.2.2.tgz#4b00dd3414d55cf7a486686c548680c2fc93425e"
+  dependencies:
+    tslib "^1.7.1"
 
 "@angular/common@~4.1.2":
   version "4.1.3"
@@ -26,6 +28,10 @@
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.1.3.tgz#285498eb86ab7d0b6f982f8f9f487ef610013b35"
 
+"@angular/flex-layout@^2.0.0-beta.8":
+  version "2.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-2.0.0-beta.8.tgz#b9cf57865a93ca158fe56d850952423f248d103b"
+
 "@angular/forms@~4.1.2":
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.1.3.tgz#380ab4c3af84c5d1d748c2a7d04151c7dc8e4982"
@@ -34,6 +40,12 @@
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.1.3.tgz#eb9d1c302a0172815f9a573310d9be0bdeb845ae"
 
+"@angular/material@^2.0.0-beta.6":
+  version "2.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.6.tgz#83bfdf00f540a8c7db900a1e7b8ed2cff49df821"
+  dependencies:
+    tslib "^1.7.1"
+
 "@angular/platform-browser-dynamic@~4.1.2":
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.1.3.tgz#3c13fdcf591d487f6efdc1d46913f280c6d8c2ec"
@@ -5377,7 +5389,7 @@ tsickle@^0.21.0:
     source-map "^0.5.6"
     source-map-support "^0.4.2"
 
-tslib@^1.6.1:
+tslib@^1.6.1, tslib@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"