Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Mar 11, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d05bfc2
feat(scaffold-navigation): upgrade to bootstrap v4 and fontawesome v5
3cp Mar 10, 2020
80a6abb
chore(scaffold-navigation): longer delay in protractor router test
3cp Mar 10, 2020
5b4561d
chore: update question hint
3cp Mar 11, 2020
4d6d438
chore: update docker file to bootstrap v4
3cp Mar 11, 2020
64467ff
test: try protractor fix
3cp Mar 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/workflow/questionnaire.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
}]
};

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 0 additions & 3 deletions skeleton/docker/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion skeleton/protractor/protractor.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shahabganji this fix did the job. The reason for element not interactable is that the protractor browser window size is too small.

Nobody knows why the default screen size is so small inside docker(or maybe vm). Explicit window size does the trick.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When element is off screen, protractor says it's not interactable.

]
}
},
Expand Down
14 changes: 2 additions & 12 deletions skeleton/scaffold-navigation/aurelia_project__if_cli-bundler/aurelia.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
Expand Down
5 changes: 3 additions & 2 deletions skeleton/scaffold-navigation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 1 addition & 1 deletion skeleton/scaffold-navigation/src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
Expand Down
25 changes: 15 additions & 10 deletions skeleton/scaffold-navigation/src/child-router.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
54 changes: 25 additions & 29 deletions skeleton/scaffold-navigation/src/nav-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
43 changes: 11 additions & 32 deletions skeleton/scaffold-navigation/src/styles.css__if_not_less_and_not_sass_and_not_stylus
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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%;
Expand Down
43 changes: 11 additions & 32 deletions skeleton/scaffold-navigation/src/styles.less__if_less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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%;
Expand Down
Loading