Skip to content

Commit df226f8

Browse files
stephenlautierstephenlautier
committed
add bootstrap, font awesome, several styling from ng2-dojo and start styling
1 parent 9b1588d commit df226f8

31 files changed

+538
-47
lines changed

‎.angular-cli.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@
2222
"styles": [
2323
"styles.scss"
2424
],
25+
"stylePreprocessorOptions": {
26+
"includePaths": [
27+
"./assets/styles"
28+
]
29+
},
2530
"scripts": [],
2631
"environmentSource": "environments/environment.ts",
2732
"environments": {
@@ -83,6 +88,7 @@
8388
"defaults": {
8489
"styleExt": "scss",
8590
"component": {
91+
"spec": false
8692
}
8793
}
8894
}

‎.editorconfig‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
[*]
2+
indent_style = tab
13

24
[*.{js,ts}]
35
charset = utf-8
4-
indent_style = tab
5-
indent_size = 4
66
trim_trailing_whitespace = true
77

8-
[package.json]
9-
indent_style = spaces
10-
indent_size = 2
8+
[*.{json,yml,csproj,md}]
9+
indent_size = 2
10+
indent_style = space

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@
2626
"@angular/router": "^5.0.0",
2727
"@angular/service-worker": "^5.0.0",
2828
"@ssv/tools": "^0.6.12",
29+
"bootstrap": "^4.0.0-beta.2",
2930
"core-js": "^2.4.1",
31+
"font-awesome": "^4.7.0",
3032
"rxjs": "^5.5.2",
3133
"zone.js": "^0.8.14"
3234
},

‎screenshot.png‎

787 KB
Loading

‎src/app/app.component.html‎

Lines changed: 9 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,9 @@
1-
<!--The content below is only a placeholder and can be replaced.-->
2-
<div style="text-align:center">
3-
<h1>
4-
Welcome to {{ title }}!
5-
</h1>
6-
<img width="300"
7-
alt="Angular Logo"
8-
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
9-
</div>
10-
<h2>Here are some links to help you start: </h2>
11-
<ul>
12-
<li>
13-
<h2>
14-
<a target="_blank"
15-
rel="noopener"
16-
href="https://angular.io/tutorial">Tour of Heroes</a>
17-
</h2>
18-
</li>
19-
<li>
20-
<h2>
21-
<a target="_blank"
22-
rel="noopener"
23-
href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a>
24-
</h2>
25-
</li>
26-
<li>
27-
<h2>
28-
<a target="_blank"
29-
rel="noopener"
30-
href="https://blog.angular.io/">Angular blog</a>
31-
</h2>
32-
</li>
33-
</ul>
34-
35-
<router-outlet></router-outlet>
1+
<app-nav></app-nav>
2+
<main role="main" class="container">
3+
<router-outlet></router-outlet>
4+
</main>
5+
<footer class="footer">
6+
<div class="container">
7+
<p class="text-muted">&copy; Stephen Lautier 2016.</p>
8+
</div>
9+
</footer>

‎src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import { AppRoutingModule } from "./app-routing.module";
77
import { environment } from "../environments/environment";
88
import { CommandComponent } from "./command/command.component";
99
import { AppComponent } from "./app.component";
10+
import { NavComponent } from "./nav/nav.component";
1011

1112
@NgModule({
12-
declarations: [AppComponent, CommandComponent],
13+
declarations: [AppComponent, CommandComponent, NavComponent],
1314
imports: [
1415
BrowserModule.withServerTransition({ appId: "serverApp" }),
1516
AppRoutingModule,

‎src/app/command/command.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "variables";
2+
3+
h1 {
4+
color: $primary-color;
5+
}

‎src/app/nav/nav.component.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
2+
<a class="navbar-brand"
3+
routerLink="/">{{appTitle}}</a>
4+
<button class="navbar-toggler"
5+
type="button"
6+
data-toggle="collapse"
7+
data-target="#navbarsExampleDefault"
8+
aria-controls="navbarsExampleDefault"
9+
aria-expanded="false"
10+
aria-label="Toggle navigation">
11+
<span class="navbar-toggler-icon"></span>
12+
</button>
13+
14+
<div class="collapse navbar-collapse"
15+
id="navbarsExampleDefault">
16+
<ul class="navbar-nav mr-auto">
17+
<li *ngFor="let link of links" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="link.activeOptions || {exact: false}">
18+
<a class="nav-link"
19+
[routerLink]="link.path">{{link.title}}
20+
<!-- <span class="sr-only">(current)</span> -->
21+
</a>
22+
</li>
23+
</ul>
24+
<!-- <form class="form-inline my-2 my-lg-0">
25+
<input class="form-control mr-sm-2"
26+
type="text"
27+
placeholder="Search"
28+
aria-label="Search">
29+
<button class="btn btn-outline-success my-2 my-sm-0"
30+
type="submit">Search</button>
31+
</form> -->
32+
</div>

‎src/app/nav/nav.component.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// @import "variables";
2+
// .navbar {
3+
// background: $navbar-bg-color;
4+
// &,
5+
// .navbar-nav li {
6+
// a {
7+
// color: $navbar-text-color;
8+
// &:focus,
9+
// &:hover {
10+
// color: $navbar-active-text-color;
11+
// background: $navbar-active-bg-hover-color;
12+
// }
13+
// }
14+
// }
15+
// .navbar-brand {
16+
// &:focus,
17+
// &:hover {
18+
// color: $navbar-brand-text-hover-color;
19+
// background: $navbar-brand-bg-hover-color;
20+
// }
21+
// }
22+
// .active a {
23+
// background: $navbar-active-bg-color;
24+
// }
25+
// }
26+
27+
// .nav {
28+
// .user-profile {
29+
// a {
30+
// padding-left: 45px;
31+
// }
32+
// img {
33+
// width: 30px;
34+
// height: 30px;
35+
// position: absolute;
36+
// left: 12px;
37+
// top: 10px;
38+
// }
39+
// }
40+
// }

0 commit comments

Comments
 (0)