fix(showcase): adjust showcase

Author: nivekcode

README.md

@@ -4,7 +4,7 @@
 
 # Ng-sortgrid
 
-![Logo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/logo-new.png)
+![Logo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/ng-sortgrid-logo.png)
 
 ![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/grid-demo.gif)
 

projects/ng-sortgrid-demo/src/app/app.component.css

@@ -36,3 +36,18 @@
   justify-content: center;
 }
 
+.btn {
+  background: #c30230;
+  font-size: 20px;
+  border: 1px solid white;
+}
+
+.btn:hover {
+  color: #c30230;
+  background: white;
+  border: 1px solid #c30230;
+}
+
+.border-primary {
+  border-color: #c30230 !important;
+}

projects/ng-sortgrid-demo/src/app/shared/header/header.component.css

@@ -0,0 +1,3 @@
+.header {
+  background: #c30230;
+}

projects/ng-sortgrid-demo/src/app/shared/header/header.component.html

@@ -1,4 +1,4 @@
-<header class="bg-primary py-5 mb-5">
+<header class="header py-5 mb-5">
   <div class="container h-100">
     <div class="row h-100 align-items-center">
       <div class="col-lg-12">

projects/ng-sortgrid-demo/src/app/shared/header/header.component.ts

@@ -2,7 +2,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ngsg-demo-header',
-  templateUrl: 'header.component.html'
+  templateUrl: 'header.component.html',
+  styleUrls: ['./header.component.css']
 })
 export class HeaderComponent {
 }

projects/ng-sortgrid-demo/src/app/shared/nav/nav.component.css

@@ -0,0 +1,15 @@
+.navbar {
+  background: white;
+  border-bottom: 1px solid #c30230;
+}
+
+.logo {
+  margin-top: 30px;
+  width: 250px;
+  height: 80px;
+}
+
+.icon {
+  color: #c30230;
+  font-size: 40px;
+}

projects/ng-sortgrid-demo/src/app/shared/nav/nav.component.html

@@ -1,21 +1,25 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary"
+<nav class="navbar navbar-expand-lg navbar-dark"
      [ngStyle]="{'height': height}"
      [ngClass]="{'fixed-top': fixed}">
   <div class="container">
-    <a class="navbar-brand" href="#" style="font-size: 30px">ng-sortgrid <small *ngIf="subtitle">{{subtitle}}</small></a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+    <a class="navbar-brand" href="#" style="font-size: 30px">
+      <img class="logo" src="assets/ng-sortgrid-logo.png"/>
+      <small *ngIf="subtitle">{{subtitle}}</small>
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
+            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarResponsive">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item active">
-          <a class="nav-link" href="https://twitter.com/KevinKreuzer90" target="_blank">
-            <i class="fab fa-twitter fa-2x"></i>
+          <a class="nav-link" href="https://twitter.com/kreuzercode" target="_blank">
+            <i class="icon fab fa-twitter fa-2x"></i>
           </a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="https://github.com/kreuzerk/ng-sortgrid" target="_blank">
-            <i class="fab fa-github fa-2x"></i>
+            <i class="icon fab fa-github fa-2x"></i>
           </a>
         </li>
       </ul>

projects/ng-sortgrid-demo/src/app/shared/nav/nav.component.ts

@@ -2,10 +2,11 @@ import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'ngsg-demo-nav',
-  templateUrl: './nav.component.html'
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.css']
 })
 export class NavComponent {
   @Input() fixed = false;
-  @Input() height = '60px';
+  @Input() height = '140px';
   @Input() subtitle;
 }