Fixed bootstrap

- Upgraded to bootstrap v4 beta2
- Removed bootstrap JS
- Added ng-bootstrap
- Fixed menu (now works with mobile devices) as per example of ng-bootstrap/ng-bootstrap#738 (comment)

FlyballETSWeb/.angular-cli.json

@@ -23,7 +23,6 @@
         "styles.css"
       ],
       "scripts": [
-        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

FlyballETSWeb/package.json

@@ -22,11 +22,13 @@
     "@angular/platform-browser": "^5.0.0-rc.3",
     "@angular/platform-browser-dynamic": "^5.0.0-rc.3",
     "@angular/router": "^5.0.0-rc.3",
-    "bootstrap": "^3.3.7",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
+    "bootstrap": "^4.0.0-beta.2",
     "core-js": "^2.4.1",
     "mdi": "^2.0.46",
     "moment": "^2.18.1",
     "moment-duration-format": "^1.3.0",
+    "ngx-loading": "^1.0.8",
     "rxjs": "^5.5.0",
     "typescript": "^2.4.2",
     "zone.js": "^0.8.14"

FlyballETSWeb/src/app/app.module.ts

@@ -5,6 +5,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
+import { LoadingModule, ANIMATION_TYPES } from 'ngx-loading';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/navbar/navbar.component';
@@ -28,7 +30,12 @@ const appRoutes: Routes = [
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
-     RouterModule.forRoot(appRoutes, { useHash: true })
+     RouterModule.forRoot(appRoutes, { useHash: true }),
+     LoadingModule.forRoot({
+      animationType: ANIMATION_TYPES.rectangleBounce,
+      backdropBorderRadius: '4px'
+      }),
+      NgbModule.forRoot()
   ],
   providers: [RaceDataService],
   bootstrap: [AppComponent]

FlyballETSWeb/src/app/components/navbar/navbar.component.html

@@ -1,16 +1,17 @@
-<nav class="navbar navbar-inverse navbar-fixed-top">
-  <div class="container">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-        <span class="sr-only">Toggle navigation</span>
-      </button>
-      <a class="navbar-brand" href="#">FlyballETS-WebUI</a>
-    </div>
-    <div id="navbar" class="collapse navbar-collapse">
-      <ul class="nav navbar-nav">
-        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]= "{exact: true}"><a [routerLink]="['']">Home</a></li>
-        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a [routerLink]="['racedisplay']">Race Display</a></li>
-      </ul>
-    </div><!--/.nav-collapse -->
-  </div>
-</nav>
+<header class="navbar navbar-light navbar-fixed-top navbar-expand-lg"> 
+  <a class="navbar-brand" [routerLink]="['/']" (click)="navbarCollapsed = true">FlyballETS-WebUI</a> 
+  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="navbarCollapsed = !navbarCollapsed" 
+          [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation"> 
+    <span class="navbar-toggler-icon"></span> 
+  </button>
+  <div class="navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarContent"> 
+    <ul class="navbar-nav mr-auto"> 
+      <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]= "{exact: true}"> 
+        <a class="nav-link" [routerLink]="['']" (click)="navbarCollapsed = true">Home</a> 
+      </li> 
+      <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]= "{exact: true}"> 
+        <a class="nav-link" [routerLink]="['racedisplay']" (click)="navbarCollapsed = true">Race Display</a> 
+      </li>
+    </ul> 
+  </div> 
+</header> 

FlyballETSWeb/src/app/components/navbar/navbar.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./navbar.component.css']
 })
 export class NavbarComponent implements OnInit {
-
+  navbarCollapsed = true;
   constructor() { }
 
   ngOnInit() {

FlyballETSWeb/src/styles.css

@@ -1,6 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-body { padding-top: 70px; }
-
 div.teamTime {
   font-family: monospace;
   font-size: xx-large;