demo page redesign

ng-select · Dec 9, 2017 · 0fae78d · 0fae78d
1 parent 3008f21
commit 0fae78d
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 66 deletions.
diff --git a/demo/app/app.component.html b/demo/app/app.component.html
@@ -1,13 +1,21 @@
 <layout-header [version]="version"></layout-header>
-<div class="container-fluid fill">
-    <div class="row flex-xl-nowrap fill">
-        <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
+<div class="container">
+    <div class="row">
+        <div class="d-flex align-items-center col-md-5 py-md-4 pl-md-4">
+            <img height="70px" src="https://angular.io/assets/images/logos/angular/angular.svg" width="70px">
+            <h1 class="">Ng-select</h1>
+        </div>
+    </div>
+</div>
+<div class="container fill">
+    <div class="row">
+        <div class="col-12 col-md-3 col-xl-3 py-md-4 bd-sidebar">
             <layout-sidenav></layout-sidenav>
         </div>
-        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content">
-            <h1 class="bd-title">
+        <main class="col-12 col-md-9 col-xl-8 py-md-4 pl-md-4 bd-content">
+            <h2 class="bd-title">
                 {{title}}
-            </h1>
+            </h2>
             <div class="card">
                 <div class="card-body">
                     <router-outlet></router-outlet>

diff --git a/demo/app/layout/sidenav-component.ts b/demo/app/layout/sidenav-component.ts
@@ -3,30 +3,30 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'layout-sidenav',
     template: `
-        <ul class="nav flex-column">
+        <ul class="nav nav-pills flex-column">
             <li class="nav-item" routerLinkActive="active">
-                <a class="nav-link" routerLink="/forms">Reactive forms</a>
+                <a class="nav-link" routerLink="/forms" routerLinkActive="active">Reactive forms</a>
             </li>
             <li class="nav-item" routerLinkActive="active">
-                <a class="nav-link" routerLink="/virtual-scroll">Virtual scroll</a>
+                <a class="nav-link" routerLink="/virtual-scroll" routerLinkActive="active">Virtual scroll</a>
             </li>
             <li class="nav-item" routerLinkActive="active">
-                <a class="nav-link" routerLink="/filter">Filter and autocomplete</a>
+                <a class="nav-link" routerLink="/filter" routerLinkActive="active">Filter and autocomplete</a>
             </li>
             <li class="nav-item" routerLinkActive="active">
-                <a class="nav-link" routerLink="/tags">Tags</a>
+                <a class="nav-link" routerLink="/tags" routerLinkActive="active">Tags</a>
             </li>
             <li class="nav-item" routerLinkActive="active">
-                <a class="nav-link" routerLink="/multiselect">Multiselect</a>
+                <a class="nav-link" routerLink="/multiselect" routerLinkActive="active">Multiselect</a>
             </li>
             <li class="nav-item" routerLinkActive="active">
                 <a class="nav-link" routerLink="/bindings" routerLinkActive="active">Data bindings</a>
             </li>
             <li class="nav-item" routerLinkActive="active">
-                <a class="nav-link" routerLink="/templates">Templates</a>
+                <a class="nav-link" routerLink="/templates" routerLinkActive="active">Templates</a>
             </li>
             <li class="nav-item" routerLinkActive="active">
-                <a class="nav-link" routerLink="/events">Output events</a>
+                <a class="nav-link" routerLink="/events" routerLinkActive="active">Output events</a>
             </li>
         </ul>
     `

diff --git a/demo/style/_content.scss b/demo/style/_content.scss
@@ -1,9 +1,5 @@
 .bd-title {
-  margin-top: 1rem;
+  margin-top: .5rem;
   margin-bottom: .5rem;
   font-weight: 300;
-
-  @include media-breakpoint-up(sm) {
-    font-size: 3rem;
-  }
 }
diff --git a/demo/style/_sidebar.scss b/demo/style/_sidebar.scss
@@ -1,11 +1,8 @@
-
 .section-nav {
   padding-left: 0;
   border-left: 1px solid #eee;
-
   ul {
     padding-left: 1rem;
-
     ul {
       display: none;
     }
@@ -14,12 +11,10 @@
 
 .toc-entry {
   display: block;
-
   a {
     display: block;
     padding: .125rem 1.5rem;
     color: #99979c;
-
     &:hover {
       color: $blue;
       text-decoration: none;
@@ -30,66 +25,54 @@
 //
 // Left side navigation
 //
-
 .bd-sidebar {
-  order: 0;
-  // background-color: #f5f2f9;
-  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  order: 0; // background-color: #f5f2f9;
   background-color: #ffffff;
   height: 100%;
-
-  @include media-breakpoint-up(md) {
-    border-right: 1px solid rgba(0, 0, 0, .1);
-  }
-
   @include media-breakpoint-between(xs, sm) {
     height: auto;
   }
-
   @include media-breakpoint-up(xl) {
     max-width: 320px;
   }
-
   .nav {
     margin-top: 10px;
-  }
-    // All levels of nav
-  .nav > li > a {
+  } // All levels of nav
+  .nav>li>a {
     display: block;
     color: rgba(0, 0, 0, .65);
     font-weight: 500;
-    padding: .5rem 0.5rem;
   }
-
-  .nav > li > a:hover {
+  .nav>li>a:hover {
     color: rgba(0, 0, 0, .85);
     text-decoration: none;
     background-color: transparent;
   }
-
-  .nav > .active > a,
-  .nav > .active:hover > a {
+  .nav>.active>a,
+  .nav>.active:hover>a {
     font-weight: 500;
     color: rgba(0, 0, 0, .85);
     background-color: transparent;
   }
-
+  .nav>.active>a.active {
+    border: 0 #343a40 solid;
+    border-right-width: 4px;
+    background-color: rgba(248, 248, 248, 0.62);
+    border-radius: 0;
+  }
 }
 
 .bd-links {
   padding-top: 1rem;
   padding-bottom: 1rem;
   margin-right: -15px;
   margin-left: -15px;
-
   @include media-breakpoint-up(md) {
     @supports (position: sticky) {
       max-height: calc(100vh - 9rem);
       overflow-y: auto;
     }
-  }
-
-  // Override collapse behaviors
+  } // Override collapse behaviors
   @include media-breakpoint-up(md) {
     display: block !important;
   }
@@ -109,7 +92,6 @@
   padding: .25rem 1.5rem;
   font-weight: 500;
   color: rgba(0, 0, 0, .65);
-
   &:hover {
     color: rgba(0, 0, 0, .85);
     text-decoration: none;
@@ -119,21 +101,17 @@
 .bd-toc-item {
   &.active {
     margin-bottom: 1rem;
-
     &:not(:first-child) {
       margin-top: 1rem;
     }
-
-    > .bd-toc-link {
+    >.bd-toc-link {
       color: rgba(0, 0, 0, .85);
-
       &:hover {
         background-color: transparent;
       }
     }
-
-    > .bd-sidenav {
+    >.bd-sidenav {
       display: block;
     }
   }
-}
+}
diff --git a/demo/style/styles.scss b/demo/style/styles.scss
@@ -3,18 +3,20 @@
 @import "custom";
 @import "sidebar";
 @import "content";
-
 body {
-    background-color: #e9ebee;
+    position: relative;
 }
 
-
-html, body, demo-app {
-    height:100%;
+html,
+body,
+demo-app {
+    height: 100%;
 }
 
-demo-app, layout-header, layout-sidenav {
-    display:block;
+demo-app,
+layout-header,
+layout-sidenav {
+    display: block;
 }
 
 .fill {
@@ -25,7 +27,6 @@ demo-app, layout-header, layout-sidenav {
     label {
         margin-bottom: 5px;
     }
-
     p {
         margin: 10px 0 20px 0;
     }
@@ -38,4 +39,4 @@ demo-app, layout-header, layout-sidenav {
 ng-select.ng-invalid.ng-touched .ng-control {
     border-color: #dc3545;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
-}
+}