feat(redesign): new design for documentation page (#2680)

* feat(redesign): new design for documentation page * fix(redesign): fixed major issues for new design and mobile version * feat(landing): new landing page [WIP] * feat(landing): new landing page [ci skip]
valor-software · Sep 29, 2017 · fc0cd35 · fc0cd35
1 parent ae2ace3
commit fc0cd35
Show file tree

Hide file tree

Showing 87 changed files with 1,938 additions and 1,610 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -22,7 +22,7 @@
       "serviceWorker": false,
       "styles": [
         "../../src/datepicker/bs-datepicker.scss",
-        "assets/css/style.css",
+        "assets/css/style.scss",
         "assets/css/prettify-angulario.css"
       ],
       "scripts": [],

diff --git a/demo/e2e/tests/leftPanelTests.po.ts b/demo/e2e/tests/leftPanelTests.po.ts
@@ -1,6 +1,6 @@
 import { $, browser } from 'protractor';
 
-const menuLeftMaxi = $('.main-menu-container');
+const menuLeftMaxi = $('.sidenav-content');
 const menuLeftMini = $('#mobile-main-menu');
 
 const leftPanelTests = {

diff --git a/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html b/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html
@@ -9,7 +9,7 @@ <h3>
   <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
     <section>
       <h3 id="inputs">Properties</h3>
-      <table class="table table-sm table-hover">
+      <table class="table table-bordered">
         <tbody>
         <tr *ngFor="let prop of apiDocs.properties">
           <td class="col-xs-3"><code>{{prop.name}}</code></td>
@@ -29,7 +29,7 @@ <h3 id="inputs">Properties</h3>
   <ng-template [ngIf]="apiDocs.methods && apiDocs.methods.length">
     <section>
       <h3 id="methods">Methods</h3>
-      <table class="table table-sm table-hover">
+      <table class="table table-bordered">
         <tbody>
         <tr *ngFor="let method of apiDocs.methods">
           <td class="col-xs-3"><code>{{method.name}}</code></td>
@@ -45,4 +45,3 @@ <h3 id="methods">Methods</h3>
     </section>
   </ng-template>
 </div>
-<hr/>
diff --git a/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html b/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html
@@ -8,7 +8,7 @@ <h3>
   <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
     <section>
       <h3 id="inputs">Properties</h3>
-      <table class="table table-sm table-hover">
+      <table class="table table-bordered">
         <tbody>
         <tr *ngFor="let prop of apiDocs.properties">
           <td class="col-xs-3"><code>{{prop.name}}</code></td>
@@ -36,4 +36,3 @@ <h3 id="inputs">Properties</h3>
     </section>
   </ng-template>-->
 </div>
-<hr/>
diff --git a/demo/src/app/api-docs/api-doc/api-doc.component.html b/demo/src/app/api-docs/api-doc/api-doc.component.html
@@ -1,9 +1,10 @@
 <div class="api-doc-component">
   <h3>
     <a (click)="trackSourceClick()" href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}" target="_blank" rel="noopener">{{apiDocs.className}}</a>
-  </h3>
+</h3>
   <p [innerHtml]="apiDocs.description"></p>
-    <table class="table table-sm table-hover">
+  <div class="table-responsive">
+    <table class="table table-bordered">
       <tbody>
         <tr>
           <td class="col-xs-3">Selector</td>
@@ -15,60 +16,66 @@ <h3>
         </tr>
       </tbody>
     </table>
+  </div>
 
   <ng-template [ngIf]="apiDocs.inputs.length">
     <section>
       <h3 id="inputs">Inputs</h3>
-      <table class="table table-sm table-hover">
-        <tbody>
-        <tr *ngFor="let input of apiDocs.inputs">
-          <td class="col-xs-3"><code>{{input.name}}</code></td>
-          <td class="col-xs-9">
-            <div><i>Type: </i><code>{{ input.type }}</code></div>
-            <ng-template [ngIf]="defaultInputValue(input) || hasConfigProperty(input)">
-              <div>
-                <span><i>Default value: </i><code>{{ defaultInputValue(input) || '-' }}</code></span>
-                <span *ngIf="hasConfigProperty(input)">&mdash; initialized from {{ configServiceName }} service</span>
-              </div>
-            </ng-template>
-            <div [innerHtml]="input.description"></div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
+      <div class="table-responsive">
+        <table class="table table-bordered">
+          <tbody>
+          <tr *ngFor="let input of apiDocs.inputs">
+            <td class="col-xs-3"><code>{{input.name}}</code></td>
+            <td class="col-xs-9">
+              <div><i>Type: </i><code>{{ input.type }}</code></div>
+              <ng-template [ngIf]="defaultInputValue(input) || hasConfigProperty(input)">
+                <div>
+                  <span><i>Default value: </i><code>{{ defaultInputValue(input) || '-' }}</code></span>
+                  <span *ngIf="hasConfigProperty(input)">&mdash; initialized from {{ configServiceName }} service</span>
+                </div>
+              </ng-template>
+              <div [innerHtml]="input.description"></div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
     </section>
   </ng-template>
 
   <ng-template [ngIf]="apiDocs.outputs.length">
     <section>
       <h3 id="outputs">Outputs</h3>
-      <table class="table table-sm table-hover">
-        <tbody>
-          <tr *ngFor="let output of apiDocs.outputs">
-            <td class="col-xs-3"><code>{{output.name}}</code></td>
-            <td class="col-xs-9"><div [innerHtml]="output.description"></div></td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="table-responsive">
+        <table class="table table-bordered">
+          <tbody>
+            <tr *ngFor="let output of apiDocs.outputs">
+              <td class="col-xs-3"><code>{{output.name}}</code></td>
+              <td class="col-xs-9"><div [innerHtml]="output.description"></div></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </section>
   </ng-template>
 
   <ng-template [ngIf]="apiDocs.methods.length && apiDocs.exportAs">
     <section>
       <h3 id="methods">Methods</h3>
-      <table class="table table-sm table-hover">
-        <tbody>
-        <tr *ngFor="let method of apiDocs.methods">
-          <td class="col-xs-3"><code>{{method.name}}</code></td>
-          <td class="col-xs-9">
-            <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
-            <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
-            <div [innerHtml]="method.description"></div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
+      <div class="table-responsive">
+        <table class="table table-bordered">
+          <tbody>
+          <tr *ngFor="let method of apiDocs.methods">
+            <td class="col-xs-3"><code>{{method.name}}</code></td>
+            <td class="col-xs-9">
+              <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
+              <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
+              <div [innerHtml]="method.description"></div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
     </section>
   </ng-template>
 </div>
-<hr/>
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -1,14 +1,2 @@
 <top-menu></top-menu>
-<main-menu></main-menu>
-
-<div id="main">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-10 col-xs-12 col-md-offset-1 push-md-1">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
-  </div>
-  <app-footer></app-footer>
-</div>
-
+<router-outlet></router-outlet>
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -11,24 +11,24 @@ import { NgApiDoc } from './api-docs/api-docs.model';
 import { NgApiDocModule } from './api-docs/index';
 import { AppComponent } from './app.component';
 import { routes } from './app.routing';
-import { AppFooterComponent } from './common/app-footer/app-footer.component';
-import { MainMenuComponent } from './common/main-menu/main-menu.component';
-import { SearchFilterPipe } from './common/main-menu/search-filter.pipe';
+import { LandingComponent } from './common/landing/landing.component';
+import { DocumentationComponent } from './common/documentation/documentation.component';
 import { TopMenuComponent } from './common/top-menu/top-menu.component';
-import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { GettingStartedComponent } from './common/getting-started/getting-started.component';
 import { ThemeStorage } from './theme/theme-storage';
 import { StyleManager } from './theme/style-manager';
+import { SharedModule } from './shared/shared.module';
 
 @NgModule({
   declarations: [
     AppComponent,
     GettingStartedComponent,
     TopMenuComponent,
-    MainMenuComponent,
-    SearchFilterPipe,
-    AppFooterComponent
+    LandingComponent,
+    DocumentationComponent
   ],
   imports: [
+    SharedModule,
     NgApiDocModule,
     BrowserModule,
     FormsModule,

diff --git a/demo/src/app/app.routing.ts b/demo/src/app/app.routing.ts
@@ -1,8 +1,14 @@
-import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { LandingComponent } from './common/landing/landing.component';
+import { GettingStartedComponent } from './common/getting-started/getting-started.component';
 
 export const routes = [
   {
     path: '',
+    data: ['Landing page'],
+    component: LandingComponent
+  },
+  {
+    path: 'getting-started',
     data: ['Getting started'],
     component: GettingStartedComponent
   },

diff --git a/demo/src/app/common/add-nav/add-nav.component.html b/demo/src/app/common/add-nav/add-nav.component.html
diff --git a/demo/src/app/common/add-nav/add-nav.component.ts b/demo/src/app/common/add-nav/add-nav.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { routes } from '../../app.routing';
+import { StyleManager } from '../../theme/style-manager';
+import { ThemeStorage } from '../../theme/theme-storage';
+
+@Component({
+  selector: 'add-nav',
+  templateUrl: './add-nav.component.html'
+})
+export class AddNavComponent {
+  public constructor() {}
+}
diff --git a/demo/src/app/common/app-footer/app-footer.component.html b/demo/src/app/common/app-footer/app-footer.component.html
@@ -1,8 +1,6 @@
-<footer class="app-footer col-md-12">
-  <div class="container">
-    <p>Designed and built by the <a href="https://github.com/orgs/valor-software/teams/ng-team" target="_blank" rel="noopener">ng-team</a>
-      with the help of our <a href="https://github.com/valor-software/ngx-bootstrap/graphs/contributors" target="_blank" rel="noopener">contributors.</a></p>
-    <p>Code licensed under <a href="https://github.com/valor-software/ngx-bootstrap/blob/development/LICENSE" target="_blank" rel="noopener">MIT license conditions</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener">CC BY 3.0</a></p>
-    <p>Design and content of the documentation site heavily inspired by the <a  target="_blank" rel="noopener" href="http://v4-alpha.getbootstrap.com/">original bootstrap.</a> documentation</p>
-  </div>
+<footer class="app-footer">
+  <p>Designed and built by the <a href="https://github.com/orgs/valor-software/teams/ng-team" target="_blank" rel="noopener">ng-team</a>
+    with the help of our <a href="https://github.com/valor-software/ngx-bootstrap/graphs/contributors" target="_blank" rel="noopener">contributors.</a></p>
+  <p>Code licensed under <a href="https://github.com/valor-software/ngx-bootstrap/blob/development/LICENSE" target="_blank" rel="noopener">MIT license conditions</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener">CC BY 3.0</a></p>
+  <p>Design and content of the documentation site heavily inspired by the <a  target="_blank" rel="noopener" href="http://v4-alpha.getbootstrap.com/">original bootstrap</a> documentation</p>
 </footer>
diff --git a/demo/src/app/common/documentation/documentation.component.html b/demo/src/app/common/documentation/documentation.component.html
@@ -0,0 +1,13 @@
+<main class="main">
+  <sidebar class="sidebar"></sidebar>
+
+  <section class="main-container">
+    <div class="content">
+      <router-outlet></router-outlet>
+    </div>
+    <app-footer></app-footer>
+  </section>
+
+  <add-nav class="add-nav"></add-nav>
+
+</main>
diff --git a/demo/src/app/common/documentation/documentation.component.ts b/demo/src/app/common/documentation/documentation.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'documentation',
+  templateUrl: './documentation.component.html'
+})
+export class DocumentationComponent {}
diff --git a/demo/src/app/common/getting-started/getting-started.component.html b/demo/src/app/common/getting-started/getting-started.component.html
@@ -0,0 +1,44 @@
+<demo-section>
+  <div id="content" class="content-box">
+
+    <div class="image-responsive img-fluid">
+      <img class="mx-auto center-block d-block" src="assets/images/logos/angular.svg"
+           alt="angular logo" width="250" height="250">
+    </div>
+
+    <h1 align="center">
+      <a href="https://github.com/valor-software/ngx-bootstrap">ngx-bootstrap</a>
+    </h1>
+
+    <p align="center">
+      The best way to quickly integrate <a href="https://getbootstrap.com/">Bootstrap 3</a> or <a
+      href="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <a href="https://angular.io/">Angular</a>
+    </p>
+
+    <p align="center">
+      <span style="margin-top: 10px;display: inline-block;width: 120px;">
+        <iframe frameborder="0" scrolling="0" style="height: 20px;width: 120px;"
+                title="github stars count"
+                src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ngx-bootstrap&type=star&count=true"></iframe></span>
+      <br/>
+
+      <a href="https://badge.fury.io/js/ngx-bootstrap">
+        <img src="https://badge.fury.io/js/ngx-bootstrap.svg" alt="npm version">
+      </a>
+
+      <a href="https://npmjs.org/ngx-bootstrap">
+        <img src="https://img.shields.io/npm/dm/ngx-bootstrap.svg" alt="npm downloads">
+      </a>
+
+      <br/>
+      <a href="https://travis-ci.org/valor-software/ngx-bootstrap">
+        <img alt="build status" src="https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=development">
+      </a>
+      <a href="https://ngx-slack.herokuapp.com">
+        <img src="https://ngx-slack.herokuapp.com/badge.svg" alt="slack">
+      </a>
+    </p>
+
+    <div class="section" [innerHTML]="doc"></div>
+  </div>
+</demo-section>
diff --git a/...ting-started/getting-started.component.ts → ...ting-started/getting-started.component.ts b/...ting-started/getting-started.component.ts → ...ting-started/getting-started.component.ts
@@ -4,9 +4,10 @@ let doc = require('html-loader!markdown-loader!./getting-started.md');
 
 @Component({
   selector: 'getting-started',
-  templateUrl: './getting-started.template.html'
+  templateUrl: './getting-started.component.html'
 })
 export class GettingStartedComponent {
-  public name = `Native Angular widgets for Bootstrap 3 and Bootstrap 4`;
-  public doc: string = doc;
+  name = `Native Angular widgets for Bootstrap 3 and Bootstrap 4`;
+  src = 'https://github.com/valor-software/ngx-bootstrap';
+  doc: string = doc;
 }
diff --git a/...rc/app/getting-started/getting-started.md → ...common/getting-started/getting-started.md b/...rc/app/getting-started/getting-started.md → ...common/getting-started/getting-started.md