Nested pages/dashboard route.

src/app/app.component.ts

@@ -5,6 +5,7 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig, Router} from 'angular2/router';
 
 import {Home} from './home';
+import {Pages} from './pages';
 import {AppState} from './app.service';
 import {RouterActive} from './router-active';
 
@@ -21,76 +22,24 @@ import {RouterActive} from './router-active';
   styles: [ require('normalize.css'), require('./app.scss') ],
   template: `
     <header>
-      <md-toolbar color="primary">
-        <span>{{ name }}</span>
-        <nav>
-          <ul>
-            <li router-active>
-              <a [routerLink]=" ['Index'] ">Index</a>
-            </li>
-            |
-            <li router-active>
-              <a [routerLink]=" ['Home'] ">Home</a>
-            </li>
-            |
-            <li router-active>
-              <a [routerLink]=" ['About'] ">About</a>
-            </li>
-          </ul>
-        </nav>
-      </md-toolbar>
     </header>
 
     <main>
       <router-outlet></router-outlet>
     </main>
 
-    <table class="table table-inverse">
-  <thead>
-    <tr>
-      <th>#</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Username</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>Larry</td>
-      <td>the Bird</td>
-      <td>@twitter</td>
-    </tr>
-  </tbody>
-</table>
-
-    <pre>this.appState.state = {{ appState.state | json }}</pre>
 
     <footer>
-      WebPack Angular 2 Starter by <a [href]="url">@AngularClass</a>
-      <div>
-        <img [src]="angularclassLogo" width="10%">
-      </div>
     </footer>
   `
 })
 @RouteConfig([
-  { path: '/',      name: 'Index', component: Home, useAsDefault: true },
-  { path: '/home',  name: 'Home',  component: Home },
-  // Async load a component using Webpack's require with es6-promise-loader and webpack `require`
-  { path: '/about', name: 'About', loader: () => require('es6-promise!./about')('About') }
+  {
+    path: '/pages/...',
+    name: 'Pages',
+    component: Pages,
+    useAsDefault: true
+  },
 ])
 export class App {
   angularclassLogo = 'assets/img/angularclass-avatar.png';

src/app/app.scss

@@ -0,0 +1 @@
+@import 'theme/conf/sass/conf';

src/app/pages/dashboard/dashboard.component.ts

@@ -1,3 +1,25 @@
-/**
- * Created by Andrey_Grabowsky on 20.04.16.
+/*
+ * Angular 2 decorators and services
  */
+import {Component, ViewEncapsulation} from 'angular2/core';
+/*
+ * App Component
+ * Top Level Component
+ */
+@Component({
+    selector: 'dashboard',
+    pipes: [ ],
+    providers: [ ],
+    encapsulation: ViewEncapsulation.None,
+    styles: [require('./dashboard.scss') ],
+    template: 'DASHBOARD'
+})
+export class Dashboard {
+
+    constructor() {}
+
+    ngOnInit() {
+        console.log('DASHBOARD');
+    }
+
+}

src/app/pages/dashboard/dashboard.scss

@@ -0,0 +1,23 @@
+@media screen and (min-width: 1620px) {
+  .row.shift-up {
+    > div {
+      margin-top: -573px;
+    }
+  }
+}
+
+@media screen and (max-width: 1620px) {
+ .panel.feed-panel.large-panel {
+   height: 824px;
+ }
+}
+
+.user-stats-panel {
+  .panel-title {
+    padding: 0 0 15px;
+  }
+}
+
+.blurCalendar{
+  height: 475px;
+}

src/app/pages/dashboard/index.ts

@@ -1,3 +1 @@
-/**
- * Created by Andrey_Grabowsky on 20.04.16.
- */
+export * from './dashboard.component';

src/app/pages/index.ts

@@ -1,3 +1 @@
-/**
- * Created by Andrey_Grabowsky on 20.04.16.
- */
+export * from './pages.component';

src/app/pages/pages.component.ts

@@ -0,0 +1,26 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {RouteConfig, Router} from 'angular2/router';
+
+import {Dashboard} from './dashboard';
+
+/*
+ * App Component
+ * Top Level Component
+ */
+@Component({
+    selector: 'pages',
+    encapsulation: ViewEncapsulation.None,
+    styles: [],
+    template:  `<router-outlet></router-outlet>`
+})
+@RouteConfig([
+    { path: '/dashboard', name: 'Dashboard', component: Dashboard, useAsDefault: true },
+])
+export class Pages {
+    constructor() {}
+
+    ngOnInit() {
+        console.log('Pages');
+    }
+
+}

src/app/theme/conf/sass/_colorScheme.scss

@@ -0,0 +1,23 @@
+$primary: #209e91 !default;
+$info: #2dacd1 !default;
+$success: #90b900 !default;
+$warning: #dfb81c !default;
+$danger: #e85656 !default;
+
+$primary-light: tint($primary, 30%);
+$info-light: tint($info, 30%);
+$success-light: tint($success, 30%);
+$warning-light: tint($warning, 30%);
+$danger-light: tint($danger, 30%);
+
+$primary-dark: shade($primary, 15%);
+$info-dark: shade($info, 15%);
+$success-dark: shade($success, 15%);
+$warning-dark: shade($warning, 15%);
+$danger-dark: shade($danger, 15%);
+
+$primary-bg: tint($primary, 20%);
+$info-bg: tint($info, 20%);
+$success-bg: tint($success, 20%);
+$warning-bg: tint($warning, 20%);
+$danger-bg: tint($danger, 20%);

src/app/theme/conf/sass/_mixins.scss

@@ -0,0 +1,128 @@
+/// Slightly lighten a color
+/// @access public
+/// @param {Color} $color - color to tint
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+/// Slightly darken a color
+/// @access public
+/// @param {Color} $color - color to shade
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
+@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
+  ::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: $foreground-color;
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: $background-color;
+  }
+
+  // For Internet Explorer
+  body {
+    scrollbar-face-color: $foreground-color;
+    scrollbar-track-color: $background-color;
+  }
+}
+
+@mixin bg-nr($relativeUrl) {
+  background: url($images-root + $relativeUrl) no-repeat 0 0;
+}
+@mixin bg($relativeUrl) {
+  background: url($images-root + $relativeUrl);
+}
+
+@mixin bg-image($relativeUrl) {
+  background-image: url($images-root + $relativeUrl);
+}
+
+@mixin main-background() {
+  $mainBgUrl: $images-root + 'blur-bg.jpg';
+
+  &::before {
+    content: '';
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url($mainBgUrl) no-repeat center center;
+    background-size: cover;
+    will-change: transform;
+    z-index: -1;
+  }
+}
+
+@mixin bg-translucent-dark($opacity) {
+  background: rgba(0, 0, 0, $opacity);
+}
+
+@mixin placeholderStyle($color, $opacity) {
+  &::-webkit-input-placeholder {
+    color: $color;
+    opacity: $opacity;
+  }
+  &:-moz-placeholder {
+    /* Firefox 18- */
+    color: $color;
+    opacity: $opacity;
+  }
+  &::-moz-placeholder {
+    /* Firefox 19+ */
+    color: $color;
+    opacity: $opacity;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+    opacity: $opacity;
+  }
+}
+
+@mixin overrideColors($color) {
+  p,
+  h1,h2,h3,h4,h5,h6,
+  .pie-chart-item,
+  .panel-heading>.dropdown .dropdown-toggle,
+  .panel-title,
+  ol.blur span,
+  ul.blur,
+  .popular-app-cost,
+  .popular-app-info,
+  .panel-title>.small,
+  .panel-title>.small>a,
+  .panel-title>a,
+  .panel-title>small,
+  .panel-title>small>a,
+  .traffic-text span,
+  .form-group label,
+  .help-block{
+    color: $color;
+  }
+  .feed-message .message-time, .text-muted {
+    color: darken($color, 20);
+  }
+}
+
+@mixin overridePanelBg($color, $borderColor, $dropdownColor) {
+  .panel.panel-blur, .panel.panel-blur:hover {
+    border-color: $borderColor;
+    background-color: $color;
+  }
+
+  .progress {
+    background: $color;
+  }
+}

src/app/theme/conf/sass/_variables.scss

@@ -0,0 +1,59 @@
+$font-family: 'Roboto', sans-serif;
+
+$view-total :rgba(0,0,0,.4);
+
+$activelink: $primary;
+$hoverlink: $primary-dark;
+
+$default: #ffffff !default;
+
+$facebook-color: #3b5998;
+$twitter-color: #55acee;
+$google-color: #dd4b39;
+$linkedin-color: #0177B5;
+$github-color: #6b6b6b;
+$stackoverflow-color: #2F96E8;
+$dribble-color: #F26798;
+$behace-color: #0093FA;
+
+$panel-bg: #f8f8f8;
+$panel-bg-hover: #fff;
+
+$disabled: #bdbdbd;
+$disabled-bg: #e6e6e6;
+
+$default-text: #7b7b7b;
+$help-text: #949494;
+
+$border: #dddddd;
+$border-light: #eeeeee;
+$input-border: #cccccc;
+
+$resXXL: 1280px;
+$resXL: 1170px;
+$resL: 991px;
+$resM: 768px;
+$resS: 660px;
+$resXS: 500px;
+$resXXS: 435px;
+$resMin: 320px;
+
+$top-height: 66px;
+
+$small-panel-height: 114px;
+$xsmall-panel-height: 187px;
+$medium-panel-height: 400px;
+$extra-medium-panel-height: 550px;
+$large-panel-height: 974px;
+
+$default-animation-duration: 0.2s;
+$default-animation-style: ease-out;
+
+$assets-root: '../assets/';
+$images-root: $assets-root + 'img/';
+$fonts-root: $assets-root + 'fonts/';
+$font-thin: 100;
+$font-light: 300;
+$font-normal: 400;
+$font-bold: 700;
+$font-ultraBold: 900;

src/app/theme/conf/sass/conf.scss

@@ -0,0 +1,3 @@
+@import 'mixins';
+@import 'colorScheme';
+@import 'variables';