docs(homepage): update styles, deploy script, wait for images

.angular-cli.json

@@ -68,7 +68,7 @@
     {
       "name": "docs",
       "root": "docs",
-      "outDir": "docs-dist",
+      "outDir": "docs/dist",
       "assets": [
         "assets",
         "favicon.ico",

docs/app/homepage/homepage.component.scss

@@ -164,6 +164,7 @@ $mobile: 767px;
     background-position: top center;
     height: 6720px;
     transform: translate3d(0, 0, 0);
+    will-change: top;
   }
   section {
     min-height: calc(100vh - 90px);
@@ -172,19 +173,12 @@ $mobile: 767px;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-    opacity: 0.1;
-    transition: opacity 0.3s ease-in-out;
-    will-change: opacity;
     .txt p {
       color: nb-theme(landing-fg-light);
       a {
         font-weight: nb-theme(font-weight-bold);
       }
     }
-
-    &.current {
-      opacity: 1;
-    }
   }
   .section-container {
     width: 100%;
@@ -362,6 +356,10 @@ $mobile: 767px;
       }
       border-radius: 12px;
       margin-right: 2rem;
+      margin-bottom: 1rem;
+    }
+    .docs {
+      font-weight: nb-theme(font-weight-bold);
     }
     .bigger {
       margin: 0 0 30px;
@@ -1130,20 +1128,39 @@ $mobile: 767px;
     .hero {
       .hero-i {
         height: auto;
+        padding: 50px;
       }
+      padding-top: 30px;
+      padding-bottom: 50px;
+    }
+    section {
+      margin-bottom: 100px;
     }
   }
 
   @media (max-width: 500px) {
+    section {
+      margin-bottom: 40px;
+    }
     .hero {
+      margin-top: 0;
+      padding-top: 0;
+      .hero-i {
+        padding: 0;
+      }
+      .section-container {
+        padding: 0;
+      }
       h1 {
         display: none;
       }
       .btn-hero-wrap {
         margin-top: 2rem;
+        text-align: center;
       }
       .btn-hero {
         font-size: 18px;
+        margin: 1rem;
       }
     }
     .fixed-pseudo-bg {
@@ -1184,6 +1201,9 @@ $mobile: 767px;
   and (min-device-width : 375px)
   and (max-device-width : 667px)
   and (orientation : landscape) {
+    .fixed-pseudo-bg {
+      top: 0!important;
+    }
     .ui-kit {
       .row {
         flex-direction: column-reverse;
@@ -1208,10 +1228,3 @@ $mobile: 767px;
   }
 
 }
-
-
-
-
-
-
-

docs/app/homepage/homepage.component.ts

@@ -14,6 +14,7 @@ import { Title } from '@angular/platform-browser';
 import * as ImageComparison from 'image-comparison';
 import 'style-loader!image-comparison/src/ImageComparison.css';
 import { Subject } from 'rxjs/Rx';
+import { NbSpinnerService } from '@nebular/theme';
 
 @Component({
   selector: 'ngd-homepage',
@@ -92,15 +93,26 @@ export class NgdHomepageComponent implements AfterViewInit, OnInit {
   highlightMenu$ = new Subject();
 
   constructor(private renderer: Renderer2,
+              private spinnerService: NbSpinnerService,
               private titleService: Title) {
     this.renderer.setProperty(document.body, 'scrollTop', 0);
 
     this.highlightMenu();
+    this.spinnerService.registerLoader(Promise.all([
+      this.loadImage('assets/images/hero-img-static.png'),
+      this.loadImage('assets/images/hero-img/1-2.png'),
+      this.loadImage('assets/images/hero-img/3-4.png'),
+      this.loadImage('assets/images/hero-img/5-6.png'),
+      this.loadImage('assets/images/hero-img/7.png'),
+      this.loadImage('assets/images/hero-img/8.png'),
+      this.loadImage('assets/images/hero-img/9.png'),
+    ]).then(() => {
+      setTimeout(() => this.animated = true, 500);
+    }));
   }
 
   ngOnInit() {
     this.titleService.setTitle('Nebular - full featured front-end framework based on Angular.');
-    setTimeout(() => this.animated = true, 500);
   }
 
   ngAfterViewInit() {
@@ -130,7 +142,7 @@ export class NgdHomepageComponent implements AfterViewInit, OnInit {
 
   private highlightMenu() {
     this.highlightMenu$
-      .debounceTime(100)
+      .debounceTime(30)
       .subscribe(() => {
         let closestSection = this.sections.first.nativeElement;
         this.sections
@@ -167,4 +179,14 @@ export class NgdHomepageComponent implements AfterViewInit, OnInit {
       html.clientHeight, html.scrollHeight, html.offsetHeight);
     return documentHeight / (NgdHomepageComponent.BG_IMAGE_HEIGHT - html.clientHeight);
   }
+
+  private loadImage(src): Promise<any> {
+    return new Promise((resolve, reject) => {
+      let img = new Image();
+      img.src = src;
+      img.onload = function () {
+        resolve(src);
+      };
+    });
+  }
 }

docs/tsconfig.app.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "sourceMap": true,
     "declaration": false,
@@ -15,8 +16,8 @@
     "baseUrl": ".",
     "types": [],
     "paths": {
-      "@nebular/theme": ["./../src/framework/theme"],
-      "@nebular/theme/*": ["./../src/framework/theme/*"]
+      "@nebular/theme": ["./framework/theme"],
+      "@nebular/theme/*": ["./framework/theme/*"]
     }
   },
   "exclude": [

package.json

@@ -10,14 +10,16 @@
   "repository": "git+https://github.com/akveo/nebular.git",
   "scripts": {
     "ng": "ng",
+    "ngh": "ngh",
     "start": "ng serve",
     "start:hmr": "ng serve --hmr",
     "start:aot": "ng serve --aot",
     "start:wp:aot": "npm run start:aot -- --app playground-wp",
     "docs:serve": "npm run docs:parse && npm run docs:start",
     "docs:parse": "gulp docs",
     "docs:start": "ng serve --app docs",
-    "docs:build": "npm run docs:parse && npm run build:prod:aot -- --app docs",
+    "docs:build": "npm run docs:parse && rimraf docs/dist && npm run build:prod:aot -- --app docs --base-href https://akveo.github.io/nebular/",
+    "docs:gh-pages": "npm run docs:build && npm run ngh -- --dir ./docs/dist",
     "build": "rimraf dist && ng build",
     "build:prod": "npm run build -- --prod",
     "build:prod:aot": "npm run build:prod -- --aot",