Skip to content

Commit 4652e0e

Browse files
3cp3cp
authored
feat(scaffold-navigation): upgrade to bootstrap v4 and fontawesome v5 (#1167)
1 parent 20b7b14 commit 4652e0e

File tree

17 files changed

+98
-190
lines changed

17 files changed

+98
-190
lines changed

‎lib/workflow/questionnaire.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ exports.askScaffold = {
217217
}, {
218218
value: 'scaffold-navigation',
219219
message: 'Navigation App',
220-
hint: 'Add a router and some sample routes, Bootstrap v3 and Font Awesome v4.'
220+
hint: 'Add a router and some sample routes, Bootstrap v4 and Font Awesome v5.'
221221
}]
222222
};
223223

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎skeleton/docker/Dockerfile‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,6 @@ COPY --from=publish-stage /app/wwwroot/ .
107107
// @endif
108108

109109
// @if feat["cli-bundler"] && !feat["dotnet-core"]
110-
// @if feat["scaffold-navigation"]
111-
COPY --from=publish-stage /app/bootstrap/dist/ ./bootstrap/dist/
112-
// @endif
113110
COPY --from=publish-stage /app/scripts/ ./scripts/
114111
COPY --from=publish-stage /app/index.html/ .
115112
// @endif

‎skeleton/protractor/protractor.conf.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ const config = {
5656
'--disable-renderer-backgrounding',
5757
'--disable-device-discovery-notifications',
5858
'--no-sandbox',
59-
'--disable-dev-shm-usage'
59+
'--disable-dev-shm-usage',
60+
'--window-size=1024,768'
6061
]
6162
}
6263
},

‎skeleton/scaffold-navigation/aurelia_project__if_cli-bundler/aurelia.json‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,15 @@
55
"name": "vendor-bundle.js",
66
"prepend": [
77
"node_modules/whatwg-fetch/dist/fetch.umd.js"
8-
],
9-
"dependencies": [
10-
{
11-
"name": "bootstrap",
12-
"deps": ["jquery"],
13-
"path": "../node_modules/bootstrap",
14-
"main": "dist/js/bootstrap.min"
15-
}
168
]
179
}
1810
],
1911
"copyFiles": {
2012
// @if feat.web
21-
"node_modules/bootstrap/dist/fonts/*": "bootstrap/dist/fonts",
22-
"node_modules/font-awesome/fonts/*": "font-awesome/fonts",
13+
"node_modules/@fortawesome/fontawesome-free/webfonts/*": "@fortawesome/fontawesome-free/webfonts",
2314
// @endif
2415
// @if feat['dotnet-core']
25-
"node_modules/bootstrap/dist/fonts/*": "wwwroot/bootstrap/dist/fonts",
26-
"node_modules/font-awesome/fonts/*": "wwwroot/font-awesome/fonts",
16+
"node_modules/@fortawesome/fontawesome-free/webfonts/*": "wwwroot/@fortawesome/fontawesome-free/webfonts",
2717
// @endif
2818
}
2919
}

‎skeleton/scaffold-navigation/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
"dependencies": {
33
"whatwg-fetch": "^3.0.0",
44
"aurelia-fetch-client": "^1.0.0",
5-
"bootstrap": "^3.3.6",
6-
"font-awesome": "^4.6.3",
5+
"bootstrap": "^4.4.1",
6+
"popper.js": "^1.16.1",
7+
"@fortawesome/fontawesome-free": "^5.12.1",
78
"jquery": "^3.3.1"
89
}
910
}

‎skeleton/scaffold-navigation/src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<require from="bootstrap/dist/css/bootstrap.min.css"></require>
3-
<require from="font-awesome/css/font-awesome.min.css"></require>
3+
<require from="@fortawesome/fontawesome-free/css/all.min.css"></require>
44
<!-- @if feat['cli-bundler'] || !(feat.less || feat.sass || feat.stylus) -->
55
<require from="./styles.css"></require>
66
<!-- @endif -->

‎skeleton/scaffold-navigation/src/child-router.html‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
<template>
22
<section class="au-animate">
33
<h2>${heading}</h2>
4-
<div>
5-
<div class="col-md-2">
6-
<ul class="well nav nav-pills nav-stacked">
7-
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
8-
<a href.bind="row.href">${row.title}</a>
9-
</li>
10-
</ul>
11-
</div>
12-
<div class="col-md-10" style="padding: 0">
13-
<router-view></router-view>
4+
<div class="container-fluid card pt-3">
5+
<div class="row">
6+
<div class="col-md-2">
7+
<div class="card">
8+
<div class="list-group list-group-flush">
9+
<a
10+
repeat.for="row of router.navigation"
11+
class="list-group-item list-group-item-action ${row.isActive ? 'active' : ''}"
12+
href.bind="row.href">${row.title}</a>
13+
</div>
14+
</div>
15+
</div>
16+
<div class="col-md-10">
17+
<router-view></router-view>
18+
</div>
1419
</div>
1520
</div>
1621
</section>

‎skeleton/scaffold-navigation/src/nav-bar.html‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,26 @@
11
<template bindable="router">
2-
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
3-
<div class="navbar-header">
4-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-navbar-collapse-1">
5-
<span class="sr-only">Toggle Navigation</span>
6-
<span class="icon-bar"></span>
7-
<span class="icon-bar"></span>
8-
<span class="icon-bar"></span>
9-
</button>
10-
<a class="navbar-brand" href="#">
11-
<i class="fa fa-home"></i>
12-
<span>${router.title}</span>
13-
</a>
14-
</div>
15-
16-
<div class="collapse navbar-collapse" id="navigation-navbar-collapse-1">
17-
<ul class="nav navbar-nav">
18-
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
19-
<a data-toggle="collapse" data-target="#navigation-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
20-
</li>
21-
</ul>
22-
23-
<ul class="nav navbar-nav navbar-right">
24-
<li class="loader" if.bind="router.isNavigating">
25-
<i class="fa fa-spinner fa-spin fa-2x"></i>
26-
</li>
27-
</ul>
28-
</div>
29-
</nav>
30-
</template>
2+
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" role="navigation">
3+
<a class="navbar-brand" href="#">
4+
<i class="far fa-home"></i>
5+
<span>${router.title}</span>
6+
</a>
7+
8+
<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">
9+
<span class="navbar-toggler-icon"></span>
10+
</button>
11+
12+
<div class="collapse navbar-collapse" id="navigation-navbar-collapse-1">
13+
<ul class="navbar-nav mr-auto">
14+
<li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}">
15+
<a class="nav-link" href.bind="row.href">${row.title}</a>
16+
</li>
17+
</ul>
18+
19+
<ul class="navbar-nav">
20+
<li class="nav-item" if.bind="router.isNavigating & debounce">
21+
<i class="far fa-circle-notch fa-spin text-white fa-2x"></i>
22+
</li>
23+
</ul>
24+
</div>
25+
</nav>
26+
</template>

‎skeleton/scaffold-navigation/src/styles.css__if_not_less_and_not_sass_and_not_stylus‎

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,11 @@ body {
22
margin: 0;
33
}
44

5-
.splash {
6-
text-align: center;
7-
margin: 10% 0 0 0;
8-
box-sizing: border-box;
9-
}
10-
11-
.splash .message {
12-
font-size: 72px;
13-
line-height: 72px;
14-
text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
15-
text-transform: uppercase;
16-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
17-
}
18-
19-
.splash .fa-spinner {
20-
text-align: center;
21-
display: inline-block;
22-
font-size: 72px;
23-
margin-top: 50px;
24-
}
25-
265
.page-host {
276
position: absolute;
287
left: 0;
298
right: 0;
30-
top: 50px;
9+
top: 56px;
3110
bottom: 0;
3211
overflow-x: hidden;
3312
overflow-y: auto;
@@ -38,15 +17,15 @@ body {
3817
position: absolute;
3918
left: 10px;
4019
right: 0;
41-
top: 50px;
20+
top: 56px;
4221
bottom: 0;
4322
overflow-y: inherit;
4423
overflow-x: inherit;
4524
}
4625
}
4726

4827
section {
49-
margin: 0 20px;
28+
margin: 1rem;
5029
}
5130

5231
.navbar-nav li.loader {
@@ -69,16 +48,16 @@ div.au-stagger {
6948
animation-delay: 50ms;
7049
}
7150

72-
.card-container.au-enter {
51+
.user-card-container.au-enter {
7352
opacity: 0;
7453
}
7554

76-
.card-container.au-enter-active {
55+
.user-card-container.au-enter-active {
7756
-webkit-animation: fadeIn 2s;
7857
animation: fadeIn 2s;
7958
}
8059

81-
.card {
60+
.user-card {
8261
overflow: hidden;
8362
position: relative;
8463
border: 1px solid #CCC;
@@ -91,17 +70,17 @@ div.au-stagger {
9170
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
9271
}
9372

94-
.card .content {
73+
.user-card .content {
9574
margin-top: 10px;
9675
}
9776

98-
.card .content .name {
77+
.user-card .content .name {
9978
color: white;
10079
text-shadow: 0 0 6px rgba(0, 0, 0, .5);
10180
font-size: 18px;
10281
}
10382

104-
.card .header-bg {
83+
.user-card .header-bg {
10584
/* This stretches the canvas across the entire hero unit */
10685
position: absolute;
10786
top: 0;
@@ -112,13 +91,13 @@ div.au-stagger {
11291
border-radius: 6px 6px 0 0;
11392
}
11493

115-
.card .avatar {
94+
.user-card .avatar {
11695
position: relative;
11796
margin-top: 15px;
11897
z-index: 100;
11998
}
12099

121-
.card .avatar img {
100+
.user-card .avatar img {
122101
width: 100px;
123102
height: 100px;
124103
-webkit-border-radius: 50%;

0 commit comments

Comments
 (0)