feat(scaffold-navigation): upgrade to bootstrap v4 and fontawesome v5 (…

…#1167)
aurelia · Mar 11, 2020 · 4652e0e · 4652e0e
1 parent 20b7b14
commit 4652e0e
Show file tree

Hide file tree

Showing 17 changed files with 98 additions and 190 deletions.
diff --git a/lib/workflow/questionnaire.js b/lib/workflow/questionnaire.js
@@ -217,7 +217,7 @@ exports.askScaffold = {
   }, {
     value: 'scaffold-navigation',
     message: 'Navigation App',
-    hint: 'Add a router and some sample routes, Bootstrap v3 and Font Awesome v4.'
+    hint: 'Add a router and some sample routes, Bootstrap v4 and Font Awesome v5.'
   }]
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/skeleton/docker/Dockerfile b/skeleton/docker/Dockerfile
@@ -107,9 +107,6 @@ COPY --from=publish-stage /app/wwwroot/ .
 // @endif
 
 // @if feat["cli-bundler"] && !feat["dotnet-core"]
-  // @if feat["scaffold-navigation"]
-COPY --from=publish-stage /app/bootstrap/dist/ ./bootstrap/dist/
-  // @endif
 COPY --from=publish-stage /app/scripts/ ./scripts/
 COPY --from=publish-stage /app/index.html/ .
 // @endif

diff --git a/skeleton/protractor/protractor.conf.js b/skeleton/protractor/protractor.conf.js
@@ -56,7 +56,8 @@ const config  = {
         '--disable-renderer-backgrounding',
         '--disable-device-discovery-notifications',
         '--no-sandbox',
-        '--disable-dev-shm-usage'
+        '--disable-dev-shm-usage',
+        '--window-size=1024,768'
       ]
     }
   },

diff --git a/skeleton/scaffold-navigation/aurelia_project__if_cli-bundler/aurelia.json b/skeleton/scaffold-navigation/aurelia_project__if_cli-bundler/aurelia.json
@@ -5,25 +5,15 @@
         "name": "vendor-bundle.js",
         "prepend": [
           "node_modules/whatwg-fetch/dist/fetch.umd.js"
-        ],
-        "dependencies": [
-          {
-            "name": "bootstrap",
-            "deps": ["jquery"],
-            "path": "../node_modules/bootstrap",
-            "main": "dist/js/bootstrap.min"
-          }
         ]
       }
     ],
     "copyFiles": {
       // @if feat.web
-      "node_modules/bootstrap/dist/fonts/*": "bootstrap/dist/fonts",
-      "node_modules/font-awesome/fonts/*": "font-awesome/fonts",
+      "node_modules/@fortawesome/fontawesome-free/webfonts/*": "@fortawesome/fontawesome-free/webfonts",
       // @endif
       // @if feat['dotnet-core']
-      "node_modules/bootstrap/dist/fonts/*": "wwwroot/bootstrap/dist/fonts",
-      "node_modules/font-awesome/fonts/*": "wwwroot/font-awesome/fonts",
+      "node_modules/@fortawesome/fontawesome-free/webfonts/*": "wwwroot/@fortawesome/fontawesome-free/webfonts",
       // @endif
     }
   }

diff --git a/skeleton/scaffold-navigation/package.json b/skeleton/scaffold-navigation/package.json
@@ -2,8 +2,9 @@
   "dependencies": {
     "whatwg-fetch": "^3.0.0",
     "aurelia-fetch-client": "^1.0.0",
-    "bootstrap": "^3.3.6",
-    "font-awesome": "^4.6.3",
+    "bootstrap": "^4.4.1",
+    "popper.js": "^1.16.1",
+    "@fortawesome/fontawesome-free": "^5.12.1",
     "jquery": "^3.3.1"
   }
 }
diff --git a/skeleton/scaffold-navigation/src/app.html b/skeleton/scaffold-navigation/src/app.html
@@ -1,6 +1,6 @@
 <template>
   <require from="bootstrap/dist/css/bootstrap.min.css"></require>
-  <require from="font-awesome/css/font-awesome.min.css"></require>
+  <require from="@fortawesome/fontawesome-free/css/all.min.css"></require>
   <!-- @if feat['cli-bundler'] || !(feat.less || feat.sass || feat.stylus) -->
   <require from="./styles.css"></require>
   <!-- @endif -->

diff --git a/skeleton/scaffold-navigation/src/child-router.html b/skeleton/scaffold-navigation/src/child-router.html
@@ -1,16 +1,21 @@
 <template>
   <section class="au-animate">
     <h2>${heading}</h2>
-    <div>
-      <div class="col-md-2">
-        <ul class="well nav nav-pills nav-stacked">
-          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-            <a href.bind="row.href">${row.title}</a>
-          </li>
-        </ul>
-      </div>
-      <div class="col-md-10" style="padding: 0">
-        <router-view></router-view>
+    <div class="container-fluid card pt-3">
+      <div class="row">
+        <div class="col-md-2">
+          <div class="card">
+            <div class="list-group list-group-flush">
+              <a
+                repeat.for="row of router.navigation"
+                class="list-group-item list-group-item-action ${row.isActive ? 'active' : ''}"
+                href.bind="row.href">${row.title}</a>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-10">
+          <router-view></router-view>
+        </div>
       </div>
     </div>
   </section>

diff --git a/skeleton/scaffold-navigation/src/nav-bar.html b/skeleton/scaffold-navigation/src/nav-bar.html
@@ -1,30 +1,26 @@
 <template bindable="router">
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-navbar-collapse-1">
-          <span class="sr-only">Toggle Navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#">
-          <i class="fa fa-home"></i>
-          <span>${router.title}</span>
-        </a>
-      </div>
-
-      <div class="collapse navbar-collapse" id="navigation-navbar-collapse-1">
-        <ul class="nav navbar-nav">
-          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-            <a data-toggle="collapse" data-target="#navigation-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
-          </li>
-        </ul>
-
-        <ul class="nav navbar-nav navbar-right">
-          <li class="loader" if.bind="router.isNavigating">
-            <i class="fa fa-spinner fa-spin fa-2x"></i>
-          </li>
-        </ul>
-      </div>
-    </nav>
-  </template>
+  <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" role="navigation">
+    <a class="navbar-brand" href="#">
+      <i class="far fa-home"></i>
+      <span>${router.title}</span>
+    </a>
+
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-navbar-collapse-1" aria-controls="navigation-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navigation-navbar-collapse-1">
+      <ul class="navbar-nav mr-auto">
+        <li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}">
+          <a class="nav-link" href.bind="row.href">${row.title}</a>
+        </li>
+      </ul>
+
+      <ul class="navbar-nav">
+        <li class="nav-item" if.bind="router.isNavigating & debounce">
+          <i class="far fa-circle-notch fa-spin text-white fa-2x"></i>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
diff --git a/skeleton/scaffold-navigation/src/styles.css__if_not_less_and_not_sass_and_not_stylus b/skeleton/scaffold-navigation/src/styles.css__if_not_less_and_not_sass_and_not_stylus
@@ -2,32 +2,11 @@ body {
   margin: 0;
 }
 
-.splash {
-  text-align: center;
-  margin: 10% 0 0 0;
-  box-sizing: border-box;
-}
-
-.splash .message {
-  font-size: 72px;
-  line-height: 72px;
-  text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
-  text-transform: uppercase;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.splash .fa-spinner {
-  text-align: center;
-  display: inline-block;
-  font-size: 72px;
-  margin-top: 50px;
-}
-
 .page-host {
   position: absolute;
   left: 0;
   right: 0;
-  top: 50px;
+  top: 56px;
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -38,15 +17,15 @@ body {
     position: absolute;
     left: 10px;
     right: 0;
-    top: 50px;
+    top: 56px;
     bottom: 0;
     overflow-y: inherit;
     overflow-x: inherit;
   }
 }
 
 section {
-  margin: 0 20px;
+  margin: 1rem;
 }
 
 .navbar-nav li.loader {
@@ -69,16 +48,16 @@ div.au-stagger {
   animation-delay: 50ms;
 }
 
-.card-container.au-enter {
+.user-card-container.au-enter {
   opacity: 0;
 }
 
-.card-container.au-enter-active {
+.user-card-container.au-enter-active {
   -webkit-animation: fadeIn 2s;
   animation: fadeIn 2s;
 }
 
-.card {
+.user-card {
   overflow: hidden;
   position: relative;
   border: 1px solid #CCC;
@@ -91,17 +70,17 @@ div.au-stagger {
   box-shadow: 0 0 5px rgba(0, 0, 0, .5);
 }
 
-.card .content {
+.user-card .content {
   margin-top: 10px;
 }
 
-.card .content .name {
+.user-card .content .name {
   color: white;
   text-shadow: 0 0 6px rgba(0, 0, 0, .5);
   font-size: 18px;
 }
 
-.card .header-bg {
+.user-card .header-bg {
   /* This stretches the canvas across the entire hero unit */
   position: absolute;
   top: 0;
@@ -112,13 +91,13 @@ div.au-stagger {
   border-radius: 6px 6px 0 0;
 }
 
-.card .avatar {
+.user-card .avatar {
   position: relative;
   margin-top: 15px;
   z-index: 100;
 }
 
-.card .avatar img {
+.user-card .avatar img {
   width: 100px;
   height: 100px;
   -webkit-border-radius: 50%;

diff --git a/skeleton/scaffold-navigation/src/styles.less__if_less b/skeleton/scaffold-navigation/src/styles.less__if_less
@@ -2,32 +2,11 @@ body {
   margin: 0;
 }
 
-.splash {
-  text-align: center;
-  margin: 10% 0 0 0;
-  box-sizing: border-box;
-}
-
-.splash .message {
-  font-size: 72px;
-  line-height: 72px;
-  text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
-  text-transform: uppercase;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.splash .fa-spinner {
-  text-align: center;
-  display: inline-block;
-  font-size: 72px;
-  margin-top: 50px;
-}
-
 .page-host {
   position: absolute;
   left: 0;
   right: 0;
-  top: 50px;
+  top: 56px;
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -38,15 +17,15 @@ body {
     position: absolute;
     left: 10px;
     right: 0;
-    top: 50px;
+    top: 56px;
     bottom: 0;
     overflow-y: inherit;
     overflow-x: inherit;
   }
 }
 
 section {
-  margin: 0 20px;
+  margin: 1rem;
 }
 
 .navbar-nav li.loader {
@@ -69,16 +48,16 @@ div.au-stagger {
   animation-delay: 50ms;
 }
 
-.card-container.au-enter {
+.user-card-container.au-enter {
   opacity: 0;
 }
 
-.card-container.au-enter-active {
+.user-card-container.au-enter-active {
   -webkit-animation: fadeIn 2s;
   animation: fadeIn 2s;
 }
 
-.card {
+.user-card {
   overflow: hidden;
   position: relative;
   border: 1px solid #CCC;
@@ -91,17 +70,17 @@ div.au-stagger {
   box-shadow: 0 0 5px rgba(0, 0, 0, .5);
 }
 
-.card .content {
+.user-card .content {
   margin-top: 10px;
 }
 
-.card .content .name {
+.user-card .content .name {
   color: white;
   text-shadow: 0 0 6px rgba(0, 0, 0, .5);
   font-size: 18px;
 }
 
-.card .header-bg {
+.user-card .header-bg {
   /* This stretches the canvas across the entire hero unit */
   position: absolute;
   top: 0;
@@ -112,13 +91,13 @@ div.au-stagger {
   border-radius: 6px 6px 0 0;
 }
 
-.card .avatar {
+.user-card .avatar {
   position: relative;
   margin-top: 15px;
   z-index: 100;
 }
 
-.card .avatar img {
+.user-card .avatar img {
   width: 100px;
   height: 100px;
   -webkit-border-radius: 50%;