From fe5e8c0f5e143bd45c16daf0ebb906a96cec3faa Mon Sep 17 00:00:00 2001
From: Alexander Zhukov <a.zhukov@akveo.com>
Date: Fri, 31 Mar 2017 09:23:53 +0300
Subject: [PATCH] docs: fix left side menu, update docs

---
 .vscode/settings.json                           |  3 +--
 .../basic-example-button-view.component.ts      |  0
 .../custom-edit-view-examples.component.html    | 12 ++++++++++++
 src/app/pages/examples/examples.component.html  | 12 +++++++-----
 src/app/pages/examples/examples.component.scss  | 17 ++++++++++++++---
 src/app/pages/examples/examples.module.ts       |  5 ++++-
 .../server/server-examples.component.html       |  2 +-
 .../various/various-examples.component.html     | 12 ------------
 8 files changed, 39 insertions(+), 24 deletions(-)
 rename src/app/pages/examples/{various => custom-edit-view}/basic-example-button-view.component.ts (100%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 67e6f3cce..6de18e4ed 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,3 @@
 {
-    "typescript.tsdk": "./node_modules/typescript/lib",
-    "vsicons.presets.angular": true
+    "typescript.tsdk": "./node_modules/typescript/lib"
 }
diff --git a/src/app/pages/examples/various/basic-example-button-view.component.ts b/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts
similarity index 100%
rename from src/app/pages/examples/various/basic-example-button-view.component.ts
rename to src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts
diff --git a/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html b/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html
index eb11c69ae..581e2fdea 100644
--- a/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html
+++ b/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html
@@ -23,3 +23,15 @@ <h3><a id="custom-editor-renderer" class="anchor" href="#custom-editor-renderer"
   <b>For the custom cell renderer:</b><br>
   In this example the custom component is applying a <code>.toUpperCase()</code> to one of the columns. You can implement the ViewCell interface to make sure you are setting up your component correctly.
 </p>
+
+<h3>
+  <a id="buttonview" class="anchor" href="#buttonview" aria-hidden="true">
+    <span aria-hidden="true" class="octicon octicon-link"></span>
+  </a>Button View
+</h3>
+<p>An example on how to use custom button view:</p>
+<div class="with-source">
+  <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-button-view.component.ts"
+    target="_blank">Demo Source</a>
+  <basic-example-button-view></basic-example-button-view>
+</div>
diff --git a/src/app/pages/examples/examples.component.html b/src/app/pages/examples/examples.component.html
index f06d710f7..d4c39e260 100644
--- a/src/app/pages/examples/examples.component.html
+++ b/src/app/pages/examples/examples.component.html
@@ -1,13 +1,15 @@
 <header-component tagline="Examples"></header-component>
-<section class="main-content with-sidebar">
+<div class="main-content with-sidebar">
   <nav class="fixed-sidebar">
     <h4>Examples</h4>
     <ul class="examples-menu">
-      <li><a routerLink="./using-filters" routerLinkActive="active">Advanced & custom filtering</a></li>
-      <li><a routerLink="./populate-from-server" routerLinkActive="active">Populating with external data</a></li>
+      <li><a routerLink="./using-filters" routerLinkActive="active">Standalone & Advanced filters</a></li>
+      <li><a routerLink="./populate-from-server" routerLinkActive="active">Loading data from server</a></li>
       <li><a routerLink="./custom-editors-viewers" routerLinkActive="active">Custom editors and viewers</a></li>
       <li><a routerLink="./various" routerLinkActive="active">Various</a></li>
     </ul>
   </nav>
-  <router-outlet></router-outlet>
-</section>
+  <div class="main-content-body">
+    <router-outlet></router-outlet>
+  </div>
+</div>
diff --git a/src/app/pages/examples/examples.component.scss b/src/app/pages/examples/examples.component.scss
index a6a724426..07f94b4f8 100644
--- a/src/app/pages/examples/examples.component.scss
+++ b/src/app/pages/examples/examples.component.scss
@@ -1,30 +1,41 @@
 .with-sidebar {
   position: relative;
-  padding-right: 16rem;
+
+  .main-content-body {
+    padding-left: 16rem;
+  }
+
   .fixed-sidebar {
+    display: block;
     padding: 0 1rem;
     margin-top: 2rem;
-    position: absolute;
-    right: 0;
+    position: fixed;
+    top: 0;
+    padding-top: 290px;
     width: 16rem;
     font-size: 0.875rem;
+
     .back-top {
       display: none;
       margin-bottom: 1rem;
       font-weight: bold;
     }
+
     ul {
       padding-left: 1rem;
       list-style: none;
       margin-bottom: 0.875rem;
     }
+
     &.scrolled {
       position: fixed;
       top: 0;
+
       .back-top {
         display: block;
       }
     }
+
     .examples-menu {
       a.active {
         font-weight: bold;
diff --git a/src/app/pages/examples/examples.module.ts b/src/app/pages/examples/examples.module.ts
index a09c2a7e4..83834fc01 100644
--- a/src/app/pages/examples/examples.module.ts
+++ b/src/app/pages/examples/examples.module.ts
@@ -21,7 +21,10 @@ import { FilterExamplesComponent } from './filter/filter-examples.component';
 import { ServerExamplesComponent } from './server/server-examples.component';
 import { CustomViewEditExamplesComponent } from './custom-edit-view/custom-edit-view-examples.component';
 import { VariousExamplesComponent } from './various/various-examples.component';
-import { BasicExampleButtonViewComponent, ButtonViewComponent } from './various/basic-example-button-view.component';
+import {
+  BasicExampleButtonViewComponent,
+  ButtonViewComponent,
+} from './custom-edit-view/basic-example-button-view.component';
 
 const EXAMPLES_COMPONENTS = [
   AdvancedExampleFiltersComponent,
diff --git a/src/app/pages/examples/server/server-examples.component.html b/src/app/pages/examples/server/server-examples.component.html
index 9c7c6f001..d22bd3959 100644
--- a/src/app/pages/examples/server/server-examples.component.html
+++ b/src/app/pages/examples/server/server-examples.component.html
@@ -8,7 +8,7 @@ <h3><a id="from-server" class="anchor" href="#from-server" aria-hidden="true"><s
   <basic-example-load></basic-example-load>
 </div>
 
-<h3><a id="server" class="anchor" href="#server" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Load From Server Example</h3>
+<h3><a id="server" class="anchor" href="#server" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Server Data Source Example</h3>
 <p>
   An example on how to load data user Server DataSource:
 </p>
diff --git a/src/app/pages/examples/various/various-examples.component.html b/src/app/pages/examples/various/various-examples.component.html
index 339d522dd..b9c0955ea 100644
--- a/src/app/pages/examples/various/various-examples.component.html
+++ b/src/app/pages/examples/various/various-examples.component.html
@@ -15,15 +15,3 @@ <h3><a id="multiselect" class="anchor" href="#multiselect" aria-hidden="true"><s
   <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-multi-select.component.ts" target="_blank">Demo Source</a>
   <basic-example-multi-select></basic-example-multi-select>
 </div>
-
-<h3>
-  <a id="buttonview" class="anchor" href="#buttonview" aria-hidden="true">
-  <span aria-hidden="true" class="octicon octicon-link"></span>
-  </a>Button View
-</h3>
-<p>An example on how to use custom button view:</p>
-<div class="with-source">
-  <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-button-view.component.ts"
-    target="_blank">Demo Source</a>
-  <basic-example-button-view></basic-example-button-view>
-</div>