Added bootstrap with ng-bootstrap

package.json

@@ -8,10 +8,12 @@
   },
   "scripts": {
     "watch": "webpack --watch",
-    "watch:dev": "npm run server & npm run watch",
-    "clean:dist": "rimraf dist",
+    "watch:dev": "npm run server & npm run watch & npm run sass:watch",
+    "clean:dist": "rimraf dist **/*.css",
     "clean:ngc": "rimraf **/*.ngfactory.ts **/*.css.shim.ts",
-    "prebuild": "npm run clean:dist",
+    "sass": "node-sass src -o src --include-path node_modules --output-style compressed -q",
+    "sass:watch": "node-sass -w src -o src --include-path node_modules --output-style compressed -q",
+    "prebuild": "npm run clean:dist && npm run sass",
     "build": "webpack  --progress",
     "build:prod:ngc": "npm run clean:ngc && npm run ngc && npm run clean:dist && npm run build:prod",
     "build:prod:ngc:json": "npm run clean:ngc && npm run ngc && npm run clean:dist && npm run build:prod:json",
@@ -43,13 +45,16 @@
     "@angular/upgrade": "~2.1.2",
     "@angularclass/bootloader": "~1.0.1",
     "@angularclass/idle-preload": "~1.0.4",
+    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.14",
     "angular2-express-engine": "~2.1.0-rc.1",
     "angular2-platform-node": "~2.1.0-rc.1",
     "angular2-universal": "~2.1.0-rc.1",
     "angular2-universal-polyfills": "~2.1.0-rc.1",
     "body-parser": "^1.15.2",
+    "bootstrap": "4.0.0-alpha.5",
     "compression": "^1.6.2",
     "express": "^4.14.0",
+    "font-awesome": "^4.7.0",
     "js.clone": "0.0.3",
     "methods": "~1.1.2",
     "morgan": "^1.7.0",
@@ -77,6 +82,7 @@
     "awesome-typescript-loader": "^2.2.4",
     "codelyzer": "1.0.0-beta.3",
     "cookie-parser": "^1.4.3",
+    "copy-webpack-plugin": "4.0.1",
     "express-interceptor": "^1.2.0",
     "iltorb": "^1.0.13",
     "imports-loader": "^0.6.5",

src/app/app.component.html

@@ -1,7 +1,21 @@
-<h3>DSpace</h3>
-<nav>
-  <a routerLinkActive="router-link-active" routerLink="home">Home</a>
+<header>
+  <nav class="navbar navbar-dark bg-inverse">
+    <button class="navbar-toggler hidden-sm-up" type="button" (click)="toggle()" aria-controls="collapsingNav" aria-expanded="false" aria-label="Toggle navigation">
+      <i class="fa fa-bars fa-fw" aria-hidden="true"></i>
+    </button>
+    <div [ngClass]="{'clearfix': !isNavBarCollaped()}">
+      <a class="navbar-brand" routerLink="/home">
+        <!-- TODO: add logo here -->DSpace</a>
+    </div>
+    <div [ngbCollapse]="isNavBarCollaped()" class="collapse navbar-toggleable-xs" id="collapsingNav">
+      <ul class="nav navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/home" routerLinkActive="active"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home<span class="sr-only">(current)</span></a>
+        </li>
+      </ul>
+    </div>
   </nav>
+</header>
 <div class="container-fluid">
   <main>
     <router-outlet></router-outlet>

src/app/app.component.scss

@@ -1 +1,11 @@
+header nav.navbar {
+  border-radius: 0rem;
+}
 
+header nav.navbar .navbar-toggler {
+  float: right;
+}
+
+header nav.navbar .navbar-toggler:hover {
+  cursor: pointer;
+}

src/app/app.component.ts

@@ -1,4 +1,6 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { Component, HostListener, Input, ChangeDetectionStrategy, ViewEncapsulation, OnDestroy, OnInit } from '@angular/core';
+
+import { Event, NavigationEnd, Router } from '@angular/router';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -7,5 +9,51 @@ import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy, OnInit {
+
+  // TODO: move header and all related properties into its own component
+
+  private navCollapsed: boolean;
+
+  private routerSubscription: any;
+
+  constructor(private router: Router) {
+    this.collapse();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  private onResize(event): void {
+    this.collapse();
+  }
+
+  ngOnInit() {
+    this.routerSubscription = this.router.events.subscribe((event: Event) => {
+      if (event instanceof NavigationEnd) {
+        this.collapse();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.routerSubscription) {
+      this.routerSubscription.unsubscribe();
+    }
+  }
+
+  private collapse(): void {
+    this.navCollapsed = true;
+  }
+
+  private expand(): void {
+    this.navCollapsed = false;
+  }
+
+  public toggle(): void {
+    this.navCollapsed ? this.expand() : this.collapse();
+  }
+
+  public isNavBarCollaped(): boolean {
+    return this.navCollapsed;
+  }
+
 }

src/app/home/home.component.css

@@ -1,8 +0,0 @@
-blockquote {
-  border-left:5px #158126 solid;
-  background:#fff;
-  padding:20px 20px 20px 40px;
-}
-blockquote::before {
-  left: 1em;
-}

src/app/home/home.component.ts

@@ -4,7 +4,7 @@ import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/
   changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   selector: 'ds-home',
-  styleUrls: [ './home.component.css' ],
+  styleUrls: ['./home.component.scss'],
   templateUrl: './home.component.html'
 })
 export class HomeComponent {

src/app/shared/shared.module.ts

@@ -2,6 +2,9 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
 import { ApiService } from './api.service';
 import { ModelService } from './model/model.service';
 
@@ -10,7 +13,8 @@ const MODULES = [
   CommonModule,
   RouterModule,
   FormsModule,
-  ReactiveFormsModule
+  ReactiveFormsModule,
+  NgbModule
 ];
 
 const PIPES = [

src/browser.module.ts

@@ -4,6 +4,8 @@ import { RouterModule } from '@angular/router';
 import { UniversalModule, isBrowser, isNode, AUTO_PREBOOT } from 'angular2-universal/browser'; // for AoT we need to manually split universal packages
 import { IdlePreload, IdlePreloadModule } from '@angularclass/idle-preload';
 
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
 import { AppModule, AppComponent } from './app/app.module';
 import { SharedModule } from './app/shared/shared.module';
 import { CacheService } from './app/shared/cache.service';
@@ -35,7 +37,8 @@ export const UNIVERSAL_KEY = 'UNIVERSAL_CACHE';
 @NgModule({
   bootstrap: [AppComponent],
   imports: [
-    // MaterialModule.forRoot() should be included first
+    NgbModule.forRoot(),
+
     UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
 
     FormsModule,

src/index.html

@@ -1,21 +1,20 @@
 <!doctype html>
 <html>
+
 <head>
-  <title>DSpace</title>
   <meta charset="UTF-8">
+  <title>DSpace</title>
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-
+  <link rel="stylesheet" href="/styles/main.css">
   <base href="/">
-
 </head>
-<body>
 
+<body>
   <ds-app>
     Loading DSpace ...
   </ds-app>
-
   <script async src="/main.bundle.js"></script>
 </body>
+
 </html>

src/node.module.ts

@@ -3,6 +3,8 @@ import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { UniversalModule, isBrowser, isNode } from 'angular2-universal/node'; // for AoT we need to manually split universal packages
 
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
 import { AppModule, AppComponent } from './app/app.module';
 import { SharedModule } from './app/shared/shared.module';
 import { CacheService } from './app/shared/cache.service';
@@ -27,7 +29,8 @@ export const UNIVERSAL_KEY = 'UNIVERSAL_CACHE';
 @NgModule({
   bootstrap: [AppComponent],
   imports: [
-    // MaterialModule.forRoot() should be included first
+    NgbModule.forRoot(),
+
     UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
 
     FormsModule,

src/server.aot.ts

@@ -101,6 +101,7 @@ function cacheControl(req, res, next) {
 }
 // Serve static files
 app.use('/assets', cacheControl, express.static(path.join(__dirname, 'assets'), { maxAge: 30 }));
+app.use('/styles', cacheControl, express.static(path.join(__dirname, 'styles'), { maxAge: 30 }));
 app.use(cacheControl, express.static(path.join(ROOT, 'dist/client'), { index: false }));
 
 //

src/server.ts

@@ -58,6 +58,7 @@ function cacheControl(req, res, next) {
 }
 // Serve static files
 app.use('/assets', cacheControl, express.static(path.join(__dirname, 'assets'), { maxAge: 30 }));
+app.use('/styles', cacheControl, express.static(path.join(__dirname, 'styles'), { maxAge: 30 }));
 app.use(cacheControl, express.static(path.join(ROOT, 'dist/client'), { index: false }));
 
 //

src/styles/main.scss

@@ -0,0 +1,10 @@
+@import './variables.scss';
+
+@import '../../node_modules/bootstrap/scss/bootstrap';
+
+@import "../../node_modules/font-awesome/scss/font-awesome.scss";
+
+html {
+  position: relative;
+  min-height: 100%;
+}

src/styles/variables.scss

@@ -0,0 +1,18 @@
+// Colors
+
+$gray-dark:                 #373a3c !default;
+$gray:                      #55595c !default;
+$gray-light:                #818a91 !default;
+$gray-lighter:              #eceeef !default;
+$gray-lightest:             #f7f7f9 !default;
+
+$brand-primary:             #0275d8 !default;
+$brand-success:             #5cb85c !default;
+$brand-info:                #5bc0de !default;
+$brand-warning:             #f0ad4e !default;
+$brand-danger:              #d9534f !default;
+$brand-inverse:             $gray-dark !default;
+
+// Fonts
+
+$fa-font-path: "../assets/fonts";

webpack.config.ts

@@ -2,6 +2,7 @@ var webpack = require('webpack');
 var path = require('path');
 var clone = require('js.clone');
 var webpackMerge = require('webpack-merge');
+let CopyWebpackPlugin = require('copy-webpack-plugin');
 
 export var commonPlugins = [
   new webpack.ContextReplacementPlugin(
@@ -13,6 +14,12 @@ export var commonPlugins = [
     }
   ),
 
+  // Copy fonts
+  new CopyWebpackPlugin([{
+    from: path.join(__dirname, 'node_modules', 'font-awesome', 'fonts'),
+    to: path.join('assets', 'fonts')
+  }]),
+
   // Loader options
   new webpack.LoaderOptionsPlugin({