feat: bootstrap 4 alpha 6

Author: Felix Gladisch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-webpack-seed",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "scripts": {
     "start": "webpack-dev-server --inline --progress --port 3000",
     "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
@@ -31,7 +31,7 @@
     "@angular/platform-browser-dynamic": "2.4.7",
     "@angular/router": "3.4.7",
     "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.20",
-    "bootstrap": "4.0.0-alpha.5",
+    "bootstrap": "4.0.0-alpha.6",
     "core-js": "2.4.1",
     "ie-shim": "0.1.0",
     "ng2-translate": "5.0.0",

src/app/app.component.scss

@@ -1,3 +1,3 @@
 .container {
-  padding-top: 65px;
+  padding-top: 15px;
 }

src/app/app.component.spec.ts

@@ -5,9 +5,10 @@ import { APP_BASE_HREF } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
+import { NavigationComponent } from './navigation';
+
 // Load the implementations that should be tested
 import { AppComponent } from './app.component';
-import { NavigationComponent } from './navigation';
 
 class MockTranslateService {
   getBrowserLang(): string { return 'en'; }

src/app/app.module.ts

@@ -1,11 +1,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
 import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from 'ng2-translate/ng2-translate';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 
 import { AppComponent } from './app.component';
 import { routing } from './app.routing';
@@ -22,12 +20,12 @@ import { NavigationComponent } from './navigation';
     AboutComponent
   ],
   imports: [
-    routing,
+    BrowserModule,
     HttpModule,
     FormsModule,
-    BrowserModule,
     NgbModule.forRoot(),
-    TranslateModule.forRoot()
+    TranslateModule.forRoot(),
+    routing
   ]
 })
 export class AppModule { }

src/app/navigation/navigation.component.html

@@ -1,14 +1,16 @@
-<nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
+<nav class="navbar navbar-inverse bg-inverse navbar-fixed-top navbar-toggleable-sm">
 
-  <button class="navbar-toggler hidden-md-up float-xs-right" type="button" (click)="isCollapsed = !isCollapsed"></button>
+  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isCollapsed = !isCollapsed">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
   <a class="navbar-brand" [routerLink]="['/']">
     <img alt="Logo" src="../../assets/images/logo.png">
   </a>
 
-  <div class="navbar-toggleable-sm" [ngbCollapse]="isCollapsed">
+  <div class="collapse navbar-collapse" [ngbCollapse]="isCollapsed">
 
-    <ul class="nav navbar-nav">
+    <ul class="navbar-nav mr-auto">
 
       <li class="nav-item" [routerLinkActive]="['active']">
         <a class="nav-link" [routerLink]="['/home']">{{ 'HOME' | translate }}</a>
@@ -20,12 +22,12 @@
 
     </ul>
 
-    <ul class="nav navbar-nav float-md-right">
+    <ul class="navbar-nav">
 
       <li ngbDropdown class="nav-item dropdown">
 
         <a ngbDropdownToggle id="languageDropdown" class="nav-link dropdown-toggle">
-          <span class="hidden-md-down">{{ 'LANGUAGE' | translate }}</span>
+          <span>{{ 'LANGUAGE' | translate }}</span>
           <span class="caret"></span>
         </a>
         <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="languageDropdown">

src/app/navigation/navigation.component.scss

@@ -1,19 +1,5 @@
 .navbar-brand {
   img {
-    height: 20px;
+    height: 30px;
   }
 }
-
-.navbar-brand {
-  width: 60px;
-  height: 35px;
-}
-
-.navbar-brand img {
-  margin: auto;
-  display: block;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-size: auto 100%;
-  background-position: center;
-}

src/app/navigation/navigation.component.spec.ts

@@ -4,7 +4,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CommonModule, APP_BASE_HREF } from '@angular/common';
 
 // Load the implementations that should be tested
-import { NavigationComponent } from './';
+import { NavigationComponent } from './navigation.component';
 import { RouterModule } from '@angular/router';
 
 class MockTranslateService {

src/assets/styles/main.scss

@@ -3,14 +3,3 @@
 
 // Partials
 @import 'partials/custom';
-
-// Temporary Bootstrap 4 fix
-.navbar {
-  @include media-breakpoint-down(sm) {
-    .navbar-brand {
-      display: block;
-      float: none;
-      height: 40px;
-    }
-  }
-}

src/vendor.ts

@@ -1,15 +1,19 @@
 // Vendors
 
+
 // Angular 2
 import '@angular/platform-browser-dynamic';
 import '@angular/platform-browser';
 import '@angular/core';
 import '@angular/http';
 import '@angular/router';
+import '@angular/forms';
 
 
 // RxJS 5
 import 'rxjs/Rx';
 
 
-// For vendors for example jQuery, Lodash, angular2-jwt import them here
+// Import additional vendors here
+import 'ng2-translate';
+import '@ng-bootstrap/ng-bootstrap';