upgraded to bootstrap-4-beta

alexisszabo · Oct 21, 2017 · 8073157 · 8073157
1 parent a2f5609
commit 8073157
Show file tree

Hide file tree

Showing 15 changed files with 38 additions and 40 deletions.
diff --git a/Chapter-13-Complete/my-books/aurelia_project/aurelia.json b/Chapter-13-Complete/my-books/aurelia_project/aurelia.json
@@ -94,7 +94,7 @@
         "prepend": [
           "node_modules/bluebird/js/browser/bluebird.core.js",
           "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
-          "node_modules/tether/dist/js/tether.min.js",
+          "node_modules/popper.js/dist/umd/popper.min.js",
           "node_modules/requirejs/require.js"
         ],
         "dependencies": [
@@ -141,18 +141,19 @@
             "main": "aurelia-fetch-client",
             "path": "../node_modules/aurelia-fetch-client/dist/amd",
             "resources": []
-          },
+          },    
+          "lodash",
           "jquery",
           {
             "name": "bootstrap",
             "path": "../node_modules/bootstrap/dist",
-            "main": "js/bootstrap.min",
+            "main": "js/bootstrap.min.js",
             "deps": [
               "jquery"
             ],
-            "exports": "$",
-            "resources": [
-              "css/bootstrap.css"
+           "exports": "$",
+           "resources": [
+             "css/bootstrap.css"
             ]
           },
           {
@@ -166,12 +167,6 @@
               "dist/css/selectize.default.css"
             ]
           },
-          {
-            "name": "font-awesome",
-            "path": "../node_modules/font-awesome/css",
-            "main": "font-awesome.css"
-          },
-          "lodash",
           "moment",
           {
             "name": "aurelia-validation",

diff --git a/Chapter-13-Complete/my-books/index.html b/Chapter-13-Complete/my-books/index.html
@@ -5,20 +5,9 @@
     <title>Aurelia</title>
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
           rel="stylesheet" >
-    <link rel="stylesheet" 
-          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
-
   </head>
 
   <body aurelia-app="main">
-    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js">
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
-    </script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
-    </script>
-    <script src="scripts/vendor-bundle.js" 
-            data-main="aurelia-bootstrapper">
-    </script>
+    <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
   </body>
 </html>
diff --git a/Chapter-13-Complete/my-books/package.json b/Chapter-13-Complete/my-books/package.json
@@ -15,11 +15,12 @@
     "aurelia-http-client": "^1.1.1",
     "aurelia-validation": "^1.0.0",
     "bluebird": "^3.4.1",
-    "bootstrap": "^4.0.0-alpha.6",
+    "bootstrap": "^4.0.0-beta",
     "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
+    "popper.js": "^1.12.5",
     "requirejs": "^2.3.2",
     "selectize": "^0.12.4",
     "tether": "^1.4.0",

diff --git a/Chapter-13-Complete/my-books/src/app.html b/Chapter-13-Complete/my-books/src/app.html
@@ -1,4 +1,5 @@
 <template>
+    <require from="bootstrap/css/bootstrap.css"></require>
     <require from="styles.css"></require>
     <router-view></router-view>  
 </template>
diff --git a/Chapter-13-Complete/my-books/src/app.js b/Chapter-13-Complete/my-books/src/app.js
@@ -2,6 +2,7 @@ import { AuthService } from "./services/auth-service";
 import { inject } from "aurelia-framework";
 import { HttpClient } from "aurelia-fetch-client";
 import { AuthorizeStep } from "./router-steps/authorization-step";
+import 'bootstrap';
 
 @inject(AuthService, HttpClient)
 export class App {

diff --git a/Chapter-13-Complete/my-books/src/resources/components/ux-card.html b/Chapter-13-Complete/my-books/src/resources/components/ux-card.html
@@ -8,7 +8,7 @@
     <h4 class="card-header">
         <slot name="title">Title</slot>
     </h4>
-    <div class="card-block row">
+    <div class="card-body row">
         <div class="col-md-4" >
             <slot name="card-image"></slot>
         </div>

diff --git a/Chapter-13-Complete/my-books/src/resources/elements/admin-unknown-route.html b/Chapter-13-Complete/my-books/src/resources/elements/admin-unknown-route.html
@@ -1,6 +1,6 @@
 <template>
     <div class="card card-outline-danger mb-3 text-center">
-        <div class="card-block">
+        <div class="card-body">
             <h1><i class="fa fa-exclamation-triangle"></i> Not sure you should be here!</h1>
             <blockquote class="card-blockquote">
             <p>We couldn't find the page you were looking for in this restricted area.</p>

diff --git a/Chapter-13-Complete/my-books/src/resources/elements/book-stats.html b/Chapter-13-Complete/my-books/src/resources/elements/book-stats.html
@@ -1,6 +1,6 @@
 <template>
     <div class="card text-center">
-        <div class="card-block">
+        <div class="card-body">
             <p class="card-text">
                 <span show.bind="addedBooks" 
                       class="badge badge-primary">

diff --git a/Chapter-13-Complete/my-books/src/resources/elements/books.html b/Chapter-13-Complete/my-books/src/resources/elements/books.html
@@ -4,7 +4,7 @@
     <heading text.bind="'books'"></heading>
 
     <div class="card">
-        <div class="card-block">
+        <div class="card-body">
           <form class="form-inline" submit.trigger="addBook()">
 
             <label for="book-title"></label>
@@ -29,8 +29,8 @@
                genres.bind="genres" 
                shelves.bind="shelves">
     </book-list>
-    <div if.bind="books.length == 0" class="card card-outline-info mb-3 text-center">
-        <div class="card-block">
+    <div if.bind="books.length == 0 && loaded" class="card card-outline-info mb-3 text-center">
+        <div class="card-body">
             <h1><i class="fa fa-lightbulb-o"></i> Welcome</h1>
             <blockquote class="card-blockquote">
             <p>Your bookshelf is looking bare. Add some books to get started.</p>

diff --git a/Chapter-13-Complete/my-books/src/resources/elements/books.js b/Chapter-13-Complete/my-books/src/resources/elements/books.js
@@ -15,6 +15,7 @@ export class Books {
     this.bookApi = bookApi;
     this.eventAggregator = eventAggregator;
     this.bookApiJSONP = bookApiJSONP;
+    this.loaded = false;
   }
 
   addBook () {
@@ -43,8 +44,10 @@ export class Books {
 
   loadBooks(){
       this.bookApi.getBooks()
-              .then(savedBooks => 
-                    this.books = savedBooks);
+              .then(savedBooks => {
+                this.books = savedBooks;
+                this.loaded = true;
+              });
   }
 
   loadShelves(){

diff --git a/Chapter-13-Complete/my-books/src/resources/elements/login-styles.html b/Chapter-13-Complete/my-books/src/resources/elements/login-styles.html
@@ -28,7 +28,7 @@
             background: rgba(225, 225, 225, .5);
         }
 
-        .card-block{
+        .card-body{
             background: rgba(225, 225, 225, .8);
         }
     </style>

diff --git a/Chapter-13-Complete/my-books/src/resources/elements/login.html b/Chapter-13-Complete/my-books/src/resources/elements/login.html
@@ -6,7 +6,7 @@
                 <div class="card-header">
                     <h1>login</h1>
                 </div>
-                <form class="card-block form-inline" submit.trigger="logIn()">
+                <form class="card-body form-inline" submit.trigger="logIn()">
                     <label class="sr-only" for="userName">email</label>
                     <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                         <div class="input-group-addon">@</div>
@@ -23,7 +23,7 @@ <h1>login</h1>
 
                 </form>
                 <div class="card card-outline-danger text-center" show.bind="errorMessage.length > 0">
-                    <div class="card-block  login-error">
+                    <div class="card-body  login-error">
                         ${errorMessage}
                     </div>
                 </div>

diff --git a/Chapter-13-Complete/my-books/src/resources/elements/user-details.html b/Chapter-13-Complete/my-books/src/resources/elements/user-details.html
@@ -2,7 +2,7 @@
     <require from="../attributes/au-selectize"></require>
     <require from="selectize/dist/css/selectize.default.css"></require>
     <form if.bind="user" class="form card" submit.trigger="saveUser()">
-        <div class="card-block">
+        <div class="card-body">
             <h4 class="card-title">User details <i class="fa fa-user" ></i></h4>
             <h6 class="card-subtitle mb-2 text-muted">view / edit user details</h6>
             <hr/>
@@ -43,13 +43,15 @@ <h6 class="card-subtitle mb-2 text-muted">view / edit user details</h6>
             </div>
         </div>
         <div class="card-footer">
-            <a class="btn btn-secondary col-sm-2 no-gutter" route-href="route: users" >
+            <div class="row">
+            <a class="btn btn-secondary col-sm-2 mr-auto no-gutter" route-href="route: users" >
                 <i class="fa fa-arrow-left"></i> back 
             </a>
-            <button type="submit" class="btn btn-primary col-sm-2 push-sm-8" 
+            <button type="submit" class="btn btn-primary col-sm-2 col-auto" 
                     disabled.bind="user.name.length == 0">
                 save
             </button>  
         </div>
+        </div>
     </form>
 </template>
diff --git a/Chapter-13-Complete/my-books/src/resources/elements/what-happened.html b/Chapter-13-Complete/my-books/src/resources/elements/what-happened.html
@@ -1,6 +1,6 @@
 <template>
     <div class="card card-outline-warning mb-3 text-center">
-        <div class="card-block">
+        <div class="card-body">
             <h1><i class="fa fa-frown-o" aria-hidden="true"></i> Something went wrong!</h1>
             <blockquote class="card-blockquote">
             <p>We couldn't find the page you tried to visit, please try something else from our menu.</p>

diff --git a/Chapter-13-Complete/my-books/src/styles.css b/Chapter-13-Complete/my-books/src/styles.css
@@ -68,6 +68,12 @@ body {
   }
 }
 
+.btn-secondary {
+  color: #292b2c;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
 /***********************************************************************************************************/
 /** End Bootstrap theme specific CSS                                                                      **/
 /***********************************************************************************************************/