Skip to content

Commit 656f43d

Browse files
dweber019dweber019
committed
Merge branch 'feature/bootstrap-4' into develop
2 parents c9c3b10 + e8a68dc commit 656f43d

File tree

14 files changed

+98
-185
lines changed

14 files changed

+98
-185
lines changed

‎package-scripts.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@ module.exports = {
4141
development: {
4242
default: series(
4343
'nps webpack.build.before',
44-
'webpack --progress -d --env.config=development'
44+
'webpack --progress -d --env.extractCss --env.config=development'
4545
),
46-
extractCss: series(
46+
inlineCss: series(
4747
'nps webpack.build.before',
48-
'webpack --progress -d --env.extractCss, --env.config=development'
48+
'webpack --progress -d --env.config=development'
4949
),
5050
serve: series.nps(
5151
'webpack.build.development',
@@ -68,8 +68,8 @@ module.exports = {
6868
}
6969
},
7070
server: {
71-
default: `webpack-dev-server -d --inline --env.server`,
72-
extractCss: `webpack-dev-server -d --inline --env.server --env.extractCss`,
71+
default: `webpack-dev-server -d --inline --env.server --env.extractCss`,
72+
inlineCss: `webpack-dev-server -d --inline --env.server`,
7373
hmr: `webpack-dev-server -d --inline --hot --env.server`
7474
},
7575
},

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,8 @@
133133
"webpack-notifier": "^1.5.0"
134134
},
135135
"dependencies": {
136+
"@fortawesome/fontawesome": "^1.1.3",
137+
"@fortawesome/fontawesome-free-solid": "^5.0.6",
136138
"animate.css": "^3.5.2",
137139
"aurelia-animator-css": "^1.0.2",
138140
"aurelia-bootstrapper": "^2.1.1",
@@ -152,11 +154,12 @@
152154
"aurelia-templating-router": "^1.1.0",
153155
"aurelia-validation": "^1.1.1",
154156
"bluebird": "^3.5.0",
155-
"bootstrap-sass": "^3.3.7",
156-
"font-awesome": "^4.7.0",
157+
"bootstrap": "^4.0.0",
157158
"i18next-browser-languagedetector": "^2.0.0",
158159
"isomorphic-fetch": "^2.2.1",
159160
"jquery": "^3.2.1",
160-
"moment": "^2.18.1"
161+
"moment": "^2.18.1",
162+
"normalize.css": "^7.0.0",
163+
"popper.js": "^1.12.9"
161164
}
162165
}

‎src/app/main.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ import de_CHTranslation from './../locales/de_CH.json';
2828
import 'isomorphic-fetch';
2929
import LanguageDetector from 'i18next-browser-languagedetector';
3030

31+
// Fontawesome setup
32+
import fontawesome from '@fortawesome/fontawesome';
33+
import fontawesomeSolid from '@fortawesome/fontawesome-free-solid';
34+
fontawesome.library.add(fontawesomeSolid);
35+
3136
import * as Bluebird from 'bluebird';
3237
// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
3338
Bluebird.config({ warnings: { wForgottenReturn: false } });

‎src/app/modules/child-router/child-router.vm.html‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<template>
2-
<section class="au-animate">
2+
<div class="container-fluid 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>
4+
<div class="row">
5+
<div class="col-md-3">
6+
<div class="card">
7+
<div class="card-body">
8+
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
9+
<a repeat.for="row of router.navigation"
10+
class="nav-link ${row.isActive ? 'active' : ''}"
11+
href.bind="row.href">${ row.title }</a>
12+
</div>
13+
</div>
14+
</div>
1115
</div>
12-
<div class="col-md-10" style="padding: 0">
16+
<div class="col-md-9" style="padding: 0">
1317
<router-view></router-view>
1418
</div>
1519
</div>
16-
</section>
20+
</div>
1721
</template>

‎src/app/modules/users/users.vm.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
<template>
2-
<section class="au-animate">
2+
<div class="container-fluid au-animate">
33
<h2>${heading}</h2>
44
<div class="row au-stagger">
5-
<div class="col-sm-6 col-md-3 card-container au-animate" repeat.for="user of users">
6-
<div class="card">
7-
<div class="avatar">
8-
<img src.bind="user.getAvatarUrl()" crossorigin ref="image"/>
9-
</div>
10-
<div class="content">
11-
<p class="name">${user.getLogin()}</p>
12-
<p><a target="_blank" class="btn btn-default" href.bind="user.getHtmlUrl()">Contact</a></p>
5+
<div class="col-sm-6 col-md-3 au-animate" repeat.for="user of users">
6+
7+
<div class="card mb-4">
8+
<img class="card-img-top" src.bind="user.getAvatarUrl()" crossorigin ref="image">
9+
<div class="card-body">
10+
<h5 class="card-title">${user.getLogin()}</h5>
11+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
12+
<a href.bind="user.getHtmlUrl()" target="_blank" class="btn btn-primary">Contact</a>
1313
</div>
1414
</div>
15+
1516
</div>
1617
</div>
17-
</section>
18+
</div>
1819
</template>

‎src/app/modules/welcome/welcome.vm.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<section class="au-animate">
2+
<div class="container-fluid au-animate">
33
<h1 t="TITLE"></h1>
44
<h2>${heading}</h2>
55
<form role="form" submit.delegate="submit()">
@@ -15,7 +15,7 @@ <h2>${heading}</h2>
1515
<label>Full Name</label>
1616
<p class="help-block">${fullName | upper}</p>
1717
</div>
18-
<button type="submit" class="btn btn-default">Submit</button>
18+
<button type="submit" class="btn btn-primary">Submit</button>
1919
</form>
2020

2121
<show-name some-text.bind="firstName"></show-name>
@@ -42,5 +42,5 @@ <h3>Validation</h3>
4242

4343
<h3>Dialog</h3>
4444
<button click.delegate="openDialog()" class="btn btn-primary">open dialog</button>
45-
</section>
45+
</div>
4646
</template>

‎src/app/resources/templates/nav-bar/nav-bar.html‎

Lines changed: 16 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,22 @@
11
<template bindable="router">
2-
require("./nav-bar.scss");
3-
4-
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
5-
<div class="navbar-header">
6-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
7-
<span class="sr-only">Toggle Navigation</span>
8-
<span class="icon-bar"></span>
9-
<span class="icon-bar"></span>
10-
<span class="icon-bar"></span>
11-
</button>
12-
<a class="navbar-brand" href="#">
13-
<i class="fa fa-home"></i>
14-
<span>${router.title}</span>
15-
</a>
16-
</div>
17-
18-
<div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
19-
<ul class="nav navbar-nav">
20-
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
21-
<a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
22-
</li>
23-
</ul>
24-
25-
<ul class="nav navbar-nav navbar-right">
26-
<li class="loader" if.bind="router.isNavigating">
27-
<i class="fa fa-spinner fa-spin fa-2x"></i>
2+
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
3+
<a class="navbar-brand" href="#">
4+
<i class="fa fa-home"></i>
5+
<span>${ router.title }</span>
6+
</a>
7+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
8+
aria-label="Toggle navigation">
9+
<span class="navbar-toggler-icon"></span>
10+
</button>
11+
<div class="collapse navbar-collapse" id="navbarNav">
12+
<ul class="navbar-nav">
13+
<li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}">
14+
<a class="nav-link" href.bind="row.href">${ row.title }</a>
2815
</li>
2916
</ul>
3017
</div>
18+
<span class="navbar-text" if.bind="router.isNavigating">
19+
<i class="fa fa-spinner fa-spin"></i>
20+
</span>
3121
</nav>
3222
</template>

‎src/app/resources/templates/nav-bar/nav-bar.scss‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/index.ejs‎

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -15,49 +15,14 @@
1515
<% if (htmlWebpackPlugin.options.platform === 'browser') { %>
1616
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
1717
<% } %>
18-
19-
<style>
20-
.splash {
21-
text-align: center;
22-
margin: 10% 0 0 0;
23-
}
24-
25-
.splash .message {
26-
font-size: 72px;
27-
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
28-
}
29-
30-
.sk-three-bounce {
31-
margin: 40px auto;
32-
}
33-
34-
.sk-three-bounce .sk-child {
35-
width: 30px;
36-
height: 30px;
37-
background-color: #333;
38-
border-radius: 100%;
39-
display: inline-block;
40-
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
41-
}
42-
43-
.sk-three-bounce .sk-bounce1 { animation-delay: -0.32s; }
44-
.sk-three-bounce .sk-bounce2 { animation-delay: -0.16s; }
45-
46-
@keyframes sk-three-bounce {
47-
0%, 80%, 100% { transform: scale(0); }
48-
40% { transform: scale(1); }
49-
}
50-
</style>
5118
</head>
5219

5320
<body>
5421
<div aurelia-app="main">
55-
<div class="splash">
56-
<div class="message"><%- htmlWebpackPlugin.options.metadata.title %></div>
57-
<div class="sk-three-bounce">
58-
<div class="sk-child sk-bounce1"></div>
59-
<div class="sk-child sk-bounce2"></div>
60-
<div class="sk-child sk-bounce3"></div>
22+
<div class="row mt-5 justify-content-md-center">
23+
<div class="col-xs-4 text-center">
24+
<h1><%- htmlWebpackPlugin.options.metadata.title %></h1>
25+
<h3>Loading...</h3>
6126
</div>
6227
</div>
6328
</div>

‎src/scss/_aurelia.scss‎

Lines changed: 3 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
position: absolute;
88
left: 0;
99
right: 0;
10-
top: 50px;
10+
top: 56px;
1111
bottom: 0;
1212
overflow-x: hidden;
1313
overflow-y: auto;
@@ -25,24 +25,12 @@
2525
}
2626
}
2727

28-
section {
29-
margin: 0 20px;
30-
}
31-
32-
.navbar-nav li.loader {
33-
margin: 12px 24px 0 6px;
34-
}
35-
36-
.pictureDetail {
37-
max-width: 425px;
38-
}
39-
4028
/* animate page transitions */
41-
section.au-enter-active {
29+
div.au-enter-active {
4230
-webkit-animation: fadeIn 0.3s;
4331
animation: fadeIn 0.3s;
4432
}
45-
section.au-leave-active {
33+
div.au-leave-active {
4634
-webkit-animation: fadeOut 0.3s;
4735
animation: fadeOut 0.3s;
4836
}
@@ -53,64 +41,6 @@ div.au-stagger {
5341
animation-delay: 50ms;
5442
}
5543

56-
.card-container.au-enter {
57-
opacity: 0 !important;
58-
}
59-
60-
.card-container.au-enter-active {
61-
-webkit-animation: fadeIn 1s;
62-
animation: fadeIn 1s;
63-
}
64-
65-
.card {
66-
overflow: hidden;
67-
position: relative;
68-
border: 1px solid #CCC;
69-
border-radius: 8px;
70-
text-align: center;
71-
padding: 0;
72-
background-color: #337ab7;
73-
color: rgb(136, 172, 217);
74-
margin-bottom: 32px;
75-
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
76-
}
77-
78-
.card .content {
79-
margin-top: 10px;
80-
}
81-
82-
.card .content .name {
83-
color: white;
84-
text-shadow: 0 0 6px rgba(0, 0, 0, .5);
85-
font-size: 18px;
86-
}
87-
88-
.card .header-bg {
89-
/* This stretches the canvas across the entire hero unit */
90-
position: absolute;
91-
top: 0;
92-
left: 0;
93-
width: 100%;
94-
height: 70px;
95-
border-bottom: 1px #FFF solid;
96-
border-radius: 6px 6px 0 0;
97-
}
98-
99-
.card .avatar {
100-
position: relative;
101-
margin-top: 15px;
102-
z-index: 100;
103-
}
104-
105-
.card .avatar img {
106-
width: 100px;
107-
height: 100px;
108-
-webkit-border-radius: 50%;
109-
-moz-border-radius: 50%;
110-
border-radius: 50%;
111-
border: 2px #FFF solid;
112-
}
113-
11444
/* animation definitions */
11545
@keyframes fadeInRight {
11646
0% {

0 commit comments

Comments
 (0)