Skip to content

Commit

Permalink
Added icomoon icons and edited styles.css. Now load the hero list wit…
Browse files Browse the repository at this point in the history
…h placeholder data.
  • Loading branch information
dieharders committed Oct 7, 2018
1 parent ab4666a commit bf8e324
Show file tree
Hide file tree
Showing 22 changed files with 641 additions and 101 deletions.
10 changes: 5 additions & 5 deletions src/app/add-customer/add-customer.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h3>Add Hero</h3>
[(ngModel)]="customer.firstname" name="firstname" #firstname="ngModel">
<div [hidden]="firstname.valid || firstname.pristine"
class="alert alert-danger">
First Name is required
<span class="icon-block"></span> First Name is required!
</div>
</div>

Expand All @@ -22,7 +22,7 @@ <h3>Add Hero</h3>
[(ngModel)]="customer.lastname" name="lastname" #lastname="ngModel">
<div [hidden]="lastname.valid || lastname.pristine"
class="alert alert-danger">
Last Name is required
<span class="icon-block"></span> Last Name is required!
</div>
</div>

Expand All @@ -34,7 +34,7 @@ <h3>Add Hero</h3>
[(ngModel)]="customer.age" name="age" #age="ngModel">
<div [hidden]="age.valid || age.pristine"
class="alert alert-danger">
Age is required
<span class="icon-block"></span> Age is required!
</div>
</div>

Expand All @@ -52,12 +52,12 @@ <h3>Add Hero</h3>
<span class="badge badge-light" *ngFor="let hobby of customer.hobbies" id="hobbyButton">
<div id="hobbyName">{{hobby}}</div>
<!-- Add a delete button for this item -->
<button type="button" class="btn btn-dark" (click)="deleteHobby(hobby)" title="Remove" id="removeHobbyBut">✖️</button>
<button type="button" class="btn btn-dark" (click)="deleteHobby(hobby)" title="Remove" id="removeHobbyBut"><span class="icon-cross"></span></button>
</span>
</div>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-dark" (click)="addCustomer()" [disabled]="!addCustomerForm.form.valid">Add</button>
<button type="button" class="btn btn-dark" (click)="addCustomer()" [disabled]="!addCustomerForm.form.valid">Add <span class="icon-circle-with-plus"></span></button>
</div>
</form>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
/* http:https://tobiasahlin.com/spinkit/ */

.loading {
position: relative;
top: 14px;
color: #fff;
margin: auto;
}
.spinner {
position: absolute;
left: 50%;
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="spinner"></div>
<div class="spinner"><div class="loading">Loading</div></div>
4 changes: 2 additions & 2 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ <h1 class="nav justify-content-center">
<br>
<ul class="nav justify-content-center">
<li class="nav-item">
<a routerLink="customers" id="retrieve" class="btn btn-light btn-sm" role="button" routerLinkActive="active">Retrieve</a>
<a routerLink="customers" id="retrieve" class="btn btn-light btn-sm" role="button" routerLinkActive="active"><span class="icon-open-book"></span> Heroes</a>
</li>
<li class="nav-item">
<a routerLink="customer/add" id="create" class="btn btn-light btn-sm" role="button" routerLinkActive="active">Create</a>
<a routerLink="customer/add" id="create" class="btn btn-light btn-sm" role="button" routerLinkActive="active">Create <span class="icon-add-user"></span></a>
</li>
</ul>
<hr>
Expand Down
16 changes: 8 additions & 8 deletions src/app/customer-details/customer-details.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<loading-spinner *ngIf="showSpinner"></loading-spinner>

<h5><span class="badge badge-light">ID: {{customer._id}}</span> - {{customer.firstname}}</h5>
<h5><span class="badge badge-light">ID: {{customer._id}}</span></h5>

<div [hidden]="submitted" [@transitionView]>
<form #detailCustomerForm="ngForm">
Expand All @@ -10,7 +10,7 @@ <h5><span class="badge badge-light">ID: {{customer._id}}</span> - {{customer.fir
[(ngModel)]="customer.firstname" name="firstname" #firstname="ngModel">
<div [hidden]="firstname.valid || firstname.pristine"
class="alert alert-danger">
First Name is required
First Name is required!
</div>
</div>

Expand All @@ -20,7 +20,7 @@ <h5><span class="badge badge-light">ID: {{customer._id}}</span> - {{customer.fir
[(ngModel)]="customer.lastname" name="lastname" #lastname="ngModel">
<div [hidden]="lastname.valid || lastname.pristine"
class="alert alert-danger">
Last Name is required
Last Name is required!
</div>
</div>

Expand All @@ -30,7 +30,7 @@ <h5><span class="badge badge-light">ID: {{customer._id}}</span> - {{customer.fir
[(ngModel)]="customer.age" name="age" #age="ngModel">
<div [hidden]="age.valid || age.pristine"
class="alert alert-danger">
Age is required
Age is required!
</div>
</div>

Expand All @@ -48,14 +48,14 @@ <h5><span class="badge badge-light">ID: {{customer._id}}</span> - {{customer.fir
<span class="badge badge-light" *ngFor="let hobby of customer.hobbies" id="hobbyButton">
<div id="hobbyName">{{hobby}}</div>
<!-- Add a delete button for this item -->
<button type="button" class="btn btn-dark" (click)="deleteHobby(hobby)" title="Remove" id="removeHobbyBut">✖️</button>
<button type="button" class="btn btn-dark" (click)="deleteHobby(hobby)" title="Remove" id="removeHobbyBut"><span class="icon-cross"></span></button>
</span>
</div>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-dark" (click)="goBack()">Back</button>
<button type="button" class="btn btn-dark" (click)="update()" [disabled]="!detailCustomerForm.form.valid">Update</button>
<button type="button" class="btn btn-dark" (click)="delete()">Delete</button>
<button type="button" class="btn btn-dark" (click)="goBack()">Back <span class="icon-chevron-thin-left"></span></button>
<button type="button" class="btn btn-dark" (click)="update()" [disabled]="!detailCustomerForm.form.valid">Update <span class="icon-check"></span></button>
<button type="button" class="btn btn-dark" (click)="delete()">Delete <span class="icon-trash"></span></button>
</div>
</form>
</div>
Expand Down
3 changes: 3 additions & 0 deletions src/app/customer/customer.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,16 @@ a {
.badge {
color: rgb(255, 255, 255);
background-color: hsl(244, 50%, 23%);
height: 23px;
}

.heroSelect {
display: inline-block;
padding: 4px;
padding-top: 0px;
background-color: none;
font-size: 14pt;
cursor: pointer;
}
.heroSelect:hover {
background-color: #ffffff41;
Expand Down
11 changes: 7 additions & 4 deletions src/app/customer/customer.component.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
<loading-spinner *ngIf="showSpinner"></loading-spinner>

<h3 *ngIf="!showSpinner">All Heroes</h3>
<div *ngIf="!showSpinner">
<div class="heroSelect" *ngFor="let cust of customers; let rowIndex=index" [@transitionView]>
<a [routerLink]="['/customers', cust._id]"><span class="badge badge-dark">{{rowIndex + 1}}</span> {{cust.firstname}} {{cust.lastname}}</a>
<h3>All Heroes</h3>
<div [@transitionView]>
<div class="heroSelect" *ngFor="let cust of customers; let rowIndex=index">
<!-- Placeholder Hero Data -->
<a *ngIf="showSpinner"><span class="badge badge-dark">{{rowIndex + 1}} | {{cust.firstname}} {{cust.lastname}}</span></a>
<!-- Hero Data from server -->
<a *ngIf="!showSpinner" [routerLink]="['/customers', cust._id]"><span class="badge badge-dark">{{rowIndex + 1}} | {{cust.firstname}} {{cust.lastname}}</span></a>
</div>
</div>

Expand Down
12 changes: 11 additions & 1 deletion src/app/customer/customer.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Component, OnInit } from '@angular/core';
import { Customer } from '../customer';
import { CustomerService } from '../customer.service';
import { animView } from '../animations/transitions.animation'; // Anim file
import { stringify } from '@angular/core/src/util';

@Component({
selector: 'app-customer',
Expand All @@ -22,9 +23,18 @@ export class CustomerComponent implements OnInit {
showSpinner: boolean = true;
// Show the main hero list?
showHeroes: boolean = false;
// Placeholder customer data
person = [
{"_id":"1","firstname":"???","lastname":"????","age":26,"hobbies":["Playing 🏆sports","Dating 😎girls","Catching 🔥fire"]},
{"_id":"2","firstname":"???","lastname":"????","age":26,"hobbies":["Playing 🏆sports","Dating 😎girls","Catching 🔥fire"]},
{"_id":"3","firstname":"???","lastname":"????","age":26,"hobbies":["Playing 🏆sports","Dating 😎girls","Catching 🔥fire"]},
{"_id":"4","firstname":"???","lastname":"????","age":26,"hobbies":["Playing 🏆sports","Dating 😎girls","Catching 🔥fire"]}
];

ngOnInit(): void {
this.getCustomers();
// Set placeholder customers
this.customers = this.person;
this.getCustomers();
}

getCustomers() {
Expand Down
152 changes: 152 additions & 0 deletions src/assets/icons/icomoon/demo-files/demo.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5;
color: #555;
background: #fff;
}
h1 {
font-size: 1.5em;
font-weight: normal;
}
small {
font-size: .66666667em;
}
a {
color: #e74c3c;
text-decoration: none;
}
a:hover, a:focus {
box-shadow: 0 1px #e74c3c;
}
.bshadow0, input {
box-shadow: inset 0 -2px #e7e7e7;
}
input:hover {
box-shadow: inset 0 -2px #ccc;
}
input, fieldset {
font-family: sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
border: 0;
}
input {
color: inherit;
line-height: 1.5;
height: 1.5em;
padding: .25em 0;
}
input:focus {
outline: none;
box-shadow: inset 0 -2px #449fdb;
}
.glyph {
font-size: 16px;
width: 15em;
padding-bottom: 1em;
margin-right: 4em;
margin-bottom: 1em;
float: left;
overflow: hidden;
}
.liga {
width: 80%;
width: calc(100% - 2.5em);
}
.talign-right {
text-align: right;
}
.talign-center {
text-align: center;
}
.bgc1 {
background: #f1f1f1;
}
.fgc1 {
color: #999;
}
.fgc0 {
color: #000;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
.mvm {
margin-top: .75em;
margin-bottom: .75em;
}
.mtn {
margin-top: 0;
}
.mtl, .mal {
margin-top: 1.5em;
}
.mbl, .mal {
margin-bottom: 1.5em;
}
.mal, .mhl {
margin-left: 1.5em;
margin-right: 1.5em;
}
.mhmm {
margin-left: 1em;
margin-right: 1em;
}
.mls {
margin-left: .25em;
}
.ptl {
padding-top: 1.5em;
}
.pbs, .pvs {
padding-bottom: .25em;
}
.pvs, .pts {
padding-top: .25em;
}
.unit {
float: left;
}
.unitRight {
float: right;
}
.size1of2 {
width: 50%;
}
.size1of1 {
width: 100%;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.hidden-true {
display: none;
}
.textbox0 {
width: 3em;
background: #f1f1f1;
padding: .25em .5em;
line-height: 1.5;
height: 1.5em;
}
#testDrive {
display: block;
padding-top: 24px;
line-height: 1.5;
}
.fs0 {
font-size: 16px;
}
.fs1 {
font-size: 20px;
}

30 changes: 30 additions & 0 deletions src/assets/icons/icomoon/demo-files/demo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
if (!('boxShadow' in document.body.style)) {
document.body.setAttribute('class', 'noBoxShadow');
}

document.body.addEventListener("click", function(e) {
var target = e.target;
if (target.tagName === "INPUT" &&
target.getAttribute('class').indexOf('liga') === -1) {
target.select();
}
});

(function() {
var fontSize = document.getElementById('fontSize'),
testDrive = document.getElementById('testDrive'),
testText = document.getElementById('testText');
function updateTest() {
testDrive.innerHTML = testText.value || String.fromCharCode(160);
if (window.icomoonLiga) {
window.icomoonLiga(testDrive);
}
}
function updateSize() {
testDrive.style.fontSize = fontSize.value + 'px';
}
fontSize.addEventListener('change', updateSize, false);
testText.addEventListener('input', updateTest, false);
testText.addEventListener('change', updateTest, false);
updateSize();
}());
Loading

0 comments on commit bf8e324

Please sign in to comment.