feat(docs): homepage & docs poc

akveo · Sep 8, 2017 · 41879c8 · 41879c8
1 parent c009c15
commit 41879c8
Show file tree

Hide file tree

Showing 72 changed files with 3,003 additions and 812 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -10,7 +10,8 @@
       "outDir": "dist",
       "assets": [
         "assets",
-        "favicon.ico"
+        "favicon.ico",
+        "favicon.png"
       ],
       "index": "index.html",
       "main": "main.ts",
@@ -68,7 +69,8 @@
       "outDir": "docs-dist",
       "assets": [
         "assets",
-        "favicon.ico"
+        "favicon.ico",
+        "favicon.png"
       ],
       "index": "index.html",
       "main": "main.ts",
@@ -78,13 +80,17 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/typeface-exo/index.css",
+        "../node_modules/open-sans-fontface/open-sans.css",
         "../node_modules/bootstrap/dist/css/bootstrap.css",
         "../node_modules/ionicons/scss/ionicons.scss",
+        "../node_modules/swiper/dist/css/swiper.css",
         "../node_modules/prismjs/themes/prism.css",
         "styles.scss"
       ],
       "scripts": [
-        "../node_modules/prismjs/prism.js"
+        "../node_modules/prismjs/prism.js",
+        "../node_modules/swiper/dist/js/swiper.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

diff --git a/docs/app/app.component.ts b/docs/app/app.component.ts
@@ -4,17 +4,56 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component } from '@angular/core';
-
+import { AfterViewInit, Component, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import 'style-loader!./styles/styles.scss';
+import { Subscription } from 'rxjs/Subscription';
+import { DocsService } from './docs/docs.service';
 
 @Component({
   selector: 'ngd-app-root',
   template: `
     <router-outlet></router-outlet>
   `,
 })
-export class NgdAppComponent {
+export class NgdAppComponent implements AfterViewInit, OnDestroy {
+
+  private fragmentSubscription: Subscription;
+
+
+  constructor(private service: DocsService,
+              private router: Router,
+              private route: ActivatedRoute,
+              private elementRef: ElementRef,
+              private renderer: Renderer2) {
+  }
+
+  // TODO: refactor this
+  ngAfterViewInit() {
+    this.fragmentSubscription = this.route.fragment
+      .merge(this.service.onFragmentClick())
+      .delay(1)
+      .subscribe((fr) => {
+        if (fr) {
+          const el = this.elementRef.nativeElement.querySelector(`#${fr}`);
+          if (el) {
+            el.scrollIntoView();
+            if (new RegExp(/theme/i).test(fr)) {
+              window.scrollBy(0, -130);
+              this.renderer.addClass(el, 'highlighted-row');
+              setTimeout(() => this.renderer.removeClass(el, 'highlighted-row'), 1000);
+            } else {
+              window.scrollBy(0, -80);
+            }
+          }
+        } else {
+          window.scrollTo(0, 0);
+        }
+      });
+  }
 
+  ngOnDestroy() {
+    this.fragmentSubscription.unsubscribe();
+  }
 }
diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
@@ -37,6 +37,7 @@ import { NgdFragmentDirective } from './docs/utils/ngd-fragment.directive';
 import { NgdThemeComponent } from './docs/page/blocks/ngd-theme-block.component';
 import { NgdSassPropValueDirective } from './docs/utils/ngd-color-swatch.directive';
 import { NgdThemesHeaderComponent } from './docs/page/blocks/ngd-themes-header.component';
+import { SwiperModule } from 'angular2-useful-swiper';
 
 
 @NgModule({
@@ -47,6 +48,7 @@ import { NgdThemesHeaderComponent } from './docs/page/blocks/ngd-themes-header.c
     NbThemeModule,
     NbSidebarModule,
     NbCardModule,
+    SwiperModule,
     NbLayoutModule,
     NbMenuModule.forRoot(),
     NbThemeModule.forRoot({ name: 'default' }),

diff --git a/docs/app/components/footer/ngd-footer.component.scss b/docs/app/components/footer/ngd-footer.component.scss
@@ -1,5 +1,31 @@
 @import '../../styles/themes';
 
+/deep/ .nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer nav{
+  margin-top: -167px;
+  position: relative;
+  z-index: 2;
+  background: transparent;
+  border: 0;
+  color: #a6adff;
+  font-size: 24px;
+
+  .footer-inner{
+    display: flex;
+    flex-flow: row-reverse nowrap;
+    text-align: left;
+    padding: 0 100px 0 18%;
+  }
+}
+@media screen and (max-width: 1300px) {
+  /deep/ .nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer nav{
+    .footer-inner{
+      font-size: 18px;
+      padding-left: 20%;
+    }
+  }
+}
+
+
 @include nb-install-component {
 
   max-width: nb-theme(content-width);
@@ -19,6 +45,7 @@
     }
   }
 
+
   @media screen and (max-width: 970px) {
     p {
       font-size: 0.75rem;

diff --git a/docs/app/components/footer/ngd-footer.component.ts b/docs/app/components/footer/ngd-footer.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
   selector: 'ngd-footer',
   styleUrls: ['ngd-footer.component.scss'],
   template: `
+    <div class="footer-inner">
       <div class="socio">
         <a href="https://github.com/akveo/ng2-admin" target="_blank" class="socicon socicon-github"></a>
         <a href="https://twitter.com/akveo_inc" target="_blank" class="socicon socicon-twitter"></a>
@@ -13,9 +14,7 @@ import { Component } from '@angular/core';
         © 2015-2017 Akveo LLC<br>
         Documentation licensed under CC BY 4.0.
       </p>
-      <p>
-        Powered by <b>Angular</b>
-      </p>
+    </div>
   `,
 
 })

diff --git a/docs/app/components/header/ngd-header.component.scss b/docs/app/components/header/ngd-header.component.scss
@@ -1,5 +1,55 @@
+@import '../../../../node_modules/image-comparison/src/ImageComparison.css';
 @import '../../styles/themes';
 
+
+/deep/ .nb-theme-default nb-layout .layout nb-layout-header {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 2;
+  nav {
+    padding: 0;
+    height: 4.75rem;
+    //box-shadow: 0 2px 12px 0 rgba(138, 127, 255, 0.5);
+    transition: all .6s ease-in-out;
+    ngd-header{
+      align-items: center;
+      padding: 0 45px;
+    }
+  }
+  &.transparent{
+    nav{
+      height: 6rem;
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+}
+/deep/ .nb-theme-default nb-layout .layout nb-layout-header nav a{
+  color: #a6adff;
+  &.active-link{
+    text-shadow: 0 2px 16px rgba(166, 173, 255, 0.6);
+    &:before{
+      display: none;
+    }
+  }
+  &:hover{
+    color: #a6adff;
+    text-decoration: none;
+    text-shadow: 0 2px 16px rgba(166, 173, 255, 0.6);
+  }
+}
+/deep/ .nb-theme-default .product-title.logo-container a{
+  font-size: 38px;
+  color: white;
+  &:hover{
+    color: white;
+    text-decoration: none;
+  }
+}
+
+
 @include nb-install-component {
   display: flex;
   max-width: nb-theme(content-width);
@@ -9,22 +59,20 @@
   .logo-container {
     font-size: 30px;
 
+    img {
+      width: 200px;
+    }
+
     a {
       display: flex;
       align-items: center;
     }
-
-    .svg-logo {
-      width: 65px;
-      height: 44px;
-      margin-right: 20px;
-    }
   }
 
   .menu {
     margin: auto;
-    font-size: 20px;
-    font-weight: bold;
+    font-size: 18px;
+    line-height: 4.75rem;
 
     a {
       position: relative;

diff --git a/docs/app/components/header/ngd-header.component.ts b/docs/app/components/header/ngd-header.component.ts
@@ -8,18 +8,15 @@ import { DocsService } from '../../docs/docs.service';
   selector: 'ngd-header',
   styleUrls: ['ngd-header.component.scss'],
   template: `
-    <div class="logo-container product-title">
+    <div class="logo-container">
       <a routerLink="/">
-        Title
+        <img src="assets/images/logo.png">
       </a>
     </div>
     <div class="menu">
       <a routerLink="/home" routerLinkActive="active-link">HOME</a>
       <a routerLink="/docs" routerLinkActive="active-link">DOCUMENTATION</a>
     </div>
-    <span> Need some help? Let us know!
-      <a class="contact-us" href="mailto:[email protected]"><b>[email protected]</b></a>
-    </span>
     <i class="menu-icon ion-navicon" (click)="toggleMenu()"></i>
     <nb-menu class="mobile-menu" [class.active]="isMenuActive" [items]="menuItems" tag="mobileMenu"></nb-menu>
   `,

diff --git a/docs/app/docs/docs.component.ts b/docs/app/docs/docs.component.ts
@@ -4,9 +4,10 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, OnDestroy, ElementRef, Renderer2, OnInit, AfterViewInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/operator/merge';
 
 import { NbMenuItem } from '@nebular/theme';
 import { NbMenuInternalService } from '@nebular/theme/components/menu/menu.service';
@@ -31,19 +32,15 @@ import 'rxjs/add/operator/filter';
     </nb-layout>
   `,
 })
-export class NgdDocsComponent implements OnDestroy, AfterViewInit {
+export class NgdDocsComponent implements OnDestroy {
 
   structure: any;
   menuItems: NbMenuItem[] = [];
   private routerSubscription: Subscription;
-  private fragmentSubscription: Subscription;
 
   constructor(private service: DocsService,
               private router: Router,
-              private route: ActivatedRoute,
-              private menuInternalService: NbMenuInternalService,
-              private elementRef: ElementRef,
-              private renderer: Renderer2) {
+              private menuInternalService: NbMenuInternalService) {
 
     this.menuItems = this.service.getPreparedMenu();
     this.structure = this.service.getPreparedStructure();
@@ -58,31 +55,7 @@ export class NgdDocsComponent implements OnDestroy, AfterViewInit {
       });
   }
 
-  ngAfterViewInit() {
-    this.fragmentSubscription = this.route.fragment
-      .merge(this.service.onFragmentClick())
-      .delay(1)
-      .subscribe((fr) => {
-        if (fr) {
-          const el = this.elementRef.nativeElement.querySelector(`#${fr}`);
-          if (el) {
-            el.scrollIntoView();
-            if (new RegExp(/theme/i).test(fr)) {
-              window.scrollBy(0, -130);
-              this.renderer.addClass(el, 'highlighted-row');
-              setTimeout(() => this.renderer.removeClass(el, 'highlighted-row'), 1000);
-            } else {
-              window.scrollBy(0, -80);
-            }
-          }
-        } else {
-          window.scrollTo(0, 0);
-        }
-      });
-  }
-
   ngOnDestroy() {
     this.routerSubscription.unsubscribe();
-    this.fragmentSubscription.unsubscribe();
   }
 }
diff --git a/docs/app/docs/docs.service.ts b/docs/app/docs/docs.service.ts
@@ -100,15 +100,16 @@ export class DocsService {
         const menuItem: any = {};
         const itemLink = item.type === 'block' ?
           `${parentLink}`
-          : `${parentLink ? parentLink : ''}/${item.name.replace(/\s/, '-').toLowerCase()}`;
+          : `${parentLink ? parentLink : ''}/${item.name.replace(/[^a-zA-Z0-9\s]+/g, '').replace(/\s/g, '-').toLowerCase()}`;
+
         if (item.type !== 'section' || !item.isSubpages) {
           menuItem['link'] = itemLink;
         }
         (item.type === 'block') ? menuItem['data'] = parentItem : menuItem['data'] = item;
         if (item.type === 'block') {
           menuItem['fragment'] = item.name;
         }
-        menuItem['pathMath'] = 'full';
+        menuItem['pathMatch'] = 'full';
         menuItem['title'] = item.name;
 
         if (item.children && item.children[0] && item.children[0].type === 'page') {

diff --git a/docs/app/docs/page/blocks/basic-blocks/ngd-description-block.component.ts b/docs/app/docs/page/blocks/basic-blocks/ngd-description-block.component.ts
@@ -10,8 +10,10 @@ import { Component, Input, OnChanges } from '@angular/core';
   selector: 'ngd-description-block',
   template: `
     <div class="block-container">
-    <h5 class="class-name">
-    <a [routerLink]="" fragment="{{blockData.name}}" ngdFragment> <i class="ion-link"></i></a> {{blockData.name}} </h5>
+      <h4 class="class-name">
+        <a [routerLink]="" fragment="{{blockData.name}}" ngdFragment> <i class="ion-link"></i></a>
+        {{blockData.name}}
+      </h4>
       <p *ngIf="isShortDescription" class="short-description">
         {{ blockData?.shortDescription }}
       </p>
@@ -28,7 +30,10 @@ export class NgdDescriptionBlockComponent implements OnChanges {
   isShortDescription: boolean;
 
   ngOnChanges() {
-    this.isShortDescription = !!this.blockData.shortDescription && this.blockData.shortDescription != this.blockData.name;
-    this.isDescription = !!this.blockData.description && this.blockData.description != this.blockData.shortDescription;
+    this.isShortDescription = !!this.blockData.shortDescription &&
+      this.blockData.shortDescription !== this.blockData.name;
+
+    this.isDescription = !!this.blockData.description &&
+      this.blockData.description !== this.blockData.shortDescription;
   }
 }
diff --git a/docs/app/docs/page/blocks/ngd-themes-header.component.ts b/docs/app/docs/page/blocks/ngd-themes-header.component.ts
@@ -4,6 +4,7 @@ import { DOCUMENT } from '@angular/platform-browser';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/observable/fromEvent';
 
 import { DocsService } from '../../docs.service';