Skip to content

Commit 14bed08

Browse files
codediodeiocodediodeio
committed
replace bs4 w bulma
1 parent 80e639f commit 14bed08

22 files changed

+278
-128
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ FireStarter is designed to handle the basic features most Angular+Firebase apps
77
- Authentication w/ Router Guard
88
- Realtime Database CRUD Demo
99
- File Uploads to Firebase Storage Demo
10-
- SASS + Bootstrap 4 + FontAwesome
10+
- SASS + Bulma + FontAwesome
1111
- Reactive Form Validation
1212

1313
## Usage

‎src/app/app-routing.module.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import { AuthGuard } from './core/auth.guard';
55
import { UserLoginComponent } from './users/user-login/user-login.component';
66
import { ItemsListComponent } from './items/items-list/items-list.component';
77
import { UploadsListComponent } from './uploads/uploads-list/uploads-list.component';
8+
import { ReadmePageComponent } from './ui/readme-page/readme-page.component';
89

910
const routes: Routes = [
10-
{
11-
path: '',
12-
children: []
13-
},
11+
{ path: '', component: ReadmePageComponent },
1412
{ path: 'login', component: UserLoginComponent, },
1513
{ path: 'items', component: ItemsListComponent, canActivate: [AuthGuard]},
1614
{ path: 'uploads', component: UploadsListComponent, canActivate: [AuthGuard]},

‎src/app/app.component.html

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
<top-nav></top-nav>
22

3-
<div class="container main-content">
3+
<div class="content columns">
44

5-
<div class="row">
6-
<div class="col-md-4 align-self-start">
5+
<aside class="column is-2 is-offset-1">
6+
<user-profile></user-profile>
7+
</aside>
78

8-
<user-profile></user-profile>
9-
10-
<a routerLink="/items">Realtime DB Demo</a><br>
11-
<a routerLink="/uploads">File Uploads Demo</a>
12-
13-
14-
</div>
15-
<main class="col-md-8 main">
169

10+
<main class="column is-8">
1711
<router-outlet></router-outlet>
18-
1912
</main>
20-
</div>
2113

22-
</div>
14+
<aside class="column is-1">
15+
</aside>
16+
17+
</div>
2318

2419

2520
<footer-nav></footer-nav>

‎src/app/app.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { NavService } from './ui/shared/nav.service';
3737
import { TopNavComponent } from './ui/top-nav/top-nav.component';
3838
import { FooterNavComponent } from './ui/footer-nav/footer-nav.component';
3939
import { LoadingSpinnerComponent } from './ui/loading-spinner/loading-spinner.component';
40+
import { ReadmePageComponent } from './ui/readme-page/readme-page.component';
4041

4142

4243
export const firebaseConfig = environment.firebaseConfig;
@@ -58,7 +59,8 @@ export const firebaseConfig = environment.firebaseConfig;
5859
TopNavComponent,
5960
FooterNavComponent,
6061
UserFormComponent,
61-
LoadingSpinnerComponent
62+
LoadingSpinnerComponent,
63+
ReadmePageComponent
6264
],
6365
imports: [
6466
BrowserModule,

‎src/app/items/item-detail/item-detail.component.html

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1+
<div class="card-header">
2+
<p class="card-header-title">{{ item.title || 'missing title' }}</p>
3+
</div>
4+
15

2-
<h5 class="card-header">{{ item.title || 'missing title' }}</h5>
3-
<div class="card-block">
6+
<div class="card-content">
47

58
Active: {{ item.active }}<br>
69
{{ item.timeStamp | date: 'medium' }}
710

811
</div>
912

10-
<div class="card-footer text-muted text-xs-center">
11-
<span class="btn btn-sm btn-secondary" (click)='updateTimeStamp()'>Update Timestamp</span>
12-
<span class="btn btn-sm btn-success" *ngIf='item.active' (click)='updateActive(false)'>Mark Complete</span>
13-
<span class="btn btn-sm btn-primary" *ngIf='!item.active' (click)='updateActive(true)'>Mark Active</span>
14-
<span class="btn btn-sm btn-danger" (click)='deleteItem()'>Delete</span>
13+
<div class="card-footer">
14+
<span class="button is-small is-info card-footer-item" (click)='updateTimeStamp()'>Update Timestamp</span>
15+
<span class="button is-small is-success card-footer-item" *ngIf='item.active' (click)='updateActive(false)'>Mark Complete</span>
16+
<span class="button is-small is-primary card-footer-item" *ngIf='!item.active' (click)='updateActive(true)'>Mark Active</span>
17+
<span class="button is-small is-danger card-footer-item" (click)='deleteItem()'>Delete</span>
1518
</div>

‎src/app/items/item-form/item-form.component.html

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<h3>New Task Form</h3>
22

3-
<div class='form-group'>
4-
<fieldset>
5-
<label class="control-label">Name: </label>
3+
<label class="label">Name: </label>
64

7-
<input placeholder="Item Title" class="form-control"
5+
<input placeholder="Item Title" class="input"
86
[(ngModel)]="item.title"
97
required minlength="2" maxlength="23"
108
#title='ngModel' autofocus>
@@ -14,14 +12,13 @@ <h3>New Task Form</h3>
1412
</div>
1513

1614

17-
<button class="btn btn-primary" (click)='createItem()' [disabled]="!title.valid">Create</button>
18-
</fieldset>
19-
</div>
15+
<button class="button" (click)='createItem()' [disabled]="!title.valid">Create</button>
16+
2017

2118
<ng-template #valid>
22-
<p class="text-success">looks good!</p>
19+
<p class="help is-success">looks good!</p>
2320
</ng-template>
2421

2522
<ng-template #errors>
26-
<p class="text-danger">form contains errors!</p>
23+
<p class="help is-danger">form contains errors!</p>
2724
</ng-template>

‎src/app/items/items-list/items-list.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ <h1>Items</h1>
44
<item-detail [item]='item'></item-detail>
55
</div>
66

7+
<loading-spinner></loading-spinner>
78

89

9-
<button type="button" class="btn btn-danger" (click)='deleteItems()'>Delete Entire List</button>
10+
11+
<button type="button" class="button is-danger" (click)='deleteItems()'>Delete Entire List</button>
1012

1113
<hr>
1214

‎src/app/ui/footer-nav/footer-nav.component.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<footer class="footer sticky-bottom">
2-
<div class="container text-center">
1+
<footer class="footer">
32
Angular 4 + Firebase Starter App -- Build me from scratch at <a href="https://angularfirebase.com">AngularFirebase</a>
4-
</div>
53
</footer>

‎src/app/ui/loading-spinner/loading-spinner.component.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
<p>
2-
loading-spinner works!
3-
</p>
1+
<div class="spinner">
2+
<div class="rect1"></div>
3+
<div class="rect2"></div>
4+
<div class="rect3"></div>
5+
<div class="rect4"></div>
6+
<div class="rect5"></div>
7+
</div>

‎src/app/ui/loading-spinner/loading-spinner.component.scss

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.spinner {
2+
margin: 100px auto;
3+
width: 50px;
4+
height: 40px;
5+
text-align: center;
6+
font-size: 10px;
7+
}
8+
9+
.spinner > div {
10+
background-color: #333;
11+
height: 100%;
12+
width: 6px;
13+
display: inline-block;
14+
15+
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
16+
animation: sk-stretchdelay 1.2s infinite ease-in-out;
17+
}
18+
19+
.spinner .rect2 {
20+
-webkit-animation-delay: -1.1s;
21+
animation-delay: -1.1s;
22+
}
23+
24+
.spinner .rect3 {
25+
-webkit-animation-delay: -1.0s;
26+
animation-delay: -1.0s;
27+
}
28+
29+
.spinner .rect4 {
30+
-webkit-animation-delay: -0.9s;
31+
animation-delay: -0.9s;
32+
}
33+
34+
.spinner .rect5 {
35+
-webkit-animation-delay: -0.8s;
36+
animation-delay: -0.8s;
37+
}
38+
39+
@-webkit-keyframes sk-stretchdelay {
40+
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
41+
20% { -webkit-transform: scaleY(1.0) }
42+
}
43+
44+
@keyframes sk-stretchdelay {
45+
0%, 40%, 100% {
46+
transform: scaleY(0.4);
47+
-webkit-transform: scaleY(0.4);
48+
} 20% {
49+
transform: scaleY(1.0);
50+
-webkit-transform: scaleY(1.0);
51+
}
52+
}

0 commit comments

Comments
 (0)