Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge ben/fix/cosmetic-tweaks

Browse source
This commit is contained in:
Ben Goldsworthy 2020-11-01 11:59:02 +00:00
commit ce9bce609b
11 changed files with 65 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app/dashboard/add-data.component.html
View file

@ -1,16 +1,22 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-6 col-md-8">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<strong>Submit Transaction</strong> <strong>Record Transaction</strong>
<small>Required Data marked in <strong>bold</strong>.</small> <small>Required Data marked in <strong>bold</strong>.</small>
</div> </div>
<div class="card-block"> <div class="card-block">
<div class="form-group row"> <div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label> <label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
<div class="col-md-9"> <div class="col-md-9">
<input type="datetime-local" class="form-control" [min]="minDate" [(ngModel)]="myDate" (ngModelChange)="transactionFormValidate()"> <input
type="datetime-local"
class="form-control"
[min]="minDate"
[(ngModel)]="myDate"
(ngModelChange)="transactionFormValidate()"
>
<span class="help-block">Enter the date and time the transaction occurred.</span> <span class="help-block">Enter the date and time the transaction occurred.</span>
</div> </div>
</div> </div>
@ -21,7 +27,7 @@
<span class="input-group-addon"><i class="fa fa-gbp"></i></span> <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
<input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="amount" (ngModelChange)="transactionFormValidate()"> <input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="amount" (ngModelChange)="transactionFormValidate()">
</div> </div>
<span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span> <span class="help-block">Enter the amount spent, such as &lsquo;5.35&rsquo; for &pound;5.35.</span>
</div> </div>
</div> </div>
@ -29,7 +35,7 @@
<label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label> <label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
<div class="col-md-9"> <div class="col-md-9">
<div class="input-group"> <div class="input-group">
<input type="checkbox" class="mr-auto" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()"> <input type="checkbox" class="mr-1" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span> <span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
</div> </div>
</div> </div>
@ -38,7 +44,7 @@
<label class="col-md-3 form-control-label" for="text-input">Recurring Purchase</label> <label class="col-md-3 form-control-label" for="text-input">Recurring Purchase</label>
<div class="col-md-9"> <div class="col-md-9">
<div class="input-group"> <div class="input-group">
<input type="checkbox" class="mr-auto" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()"> <input type="checkbox" class="mr-1" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
<span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span> <span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
</div> </div>
</div> </div>

4
src/app/dashboard/dashboard.routing.ts
View file

@ -48,7 +48,7 @@ const routes: Routes = [
{ {
path: 'add-data', path: 'add-data',
component: AddDataComponent, component: AddDataComponent,
data: { title: 'Add Transaction' }, data: { title: 'Record Transaction' },
}, },
{ {
path: 'leaderboard', path: 'leaderboard',
@ -85,7 +85,7 @@ const routes: Routes = [
{ {
path: 'feedback', path: 'feedback',
component: FeedbackComponent, component: FeedbackComponent,
data: { title: 'Give Feedback' }, data: { title: 'Submit Feedback' },
}, },
{ {
path: 'suppliers', path: 'suppliers',

4
src/app/dashboard/feedback.component.html
View file

@ -1,9 +1,9 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-6 col-md-8">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<strong>Submit Transaction</strong> <strong>Submit Feedback</strong>
<small>Required Data marked in <strong>bold</strong>.</small> <small>Required Data marked in <strong>bold</strong>.</small>
</div> </div>
<form class="form-horizontal" [formGroup]="feedbackForm" (ngSubmit)="onSubmit()"> <form class="form-horizontal" [formGroup]="feedbackForm" (ngSubmit)="onSubmit()">

2
src/app/dashboard/more-graphs-and-tables.component.html
View file

@ -27,7 +27,7 @@
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th>Ward</th> <th>Type</th>
<th>Amount of Transactions</th> <th>Amount of Transactions</th>
<th>Sum of Transactions</th> <th>Sum of Transactions</th>
</tr> </tr>

4
src/app/dashboard/suppliers.component.html
View file

@ -1,6 +1,6 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-6 col-md-8">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h4>Search Suppliers</h4> <h4>Search Suppliers</h4>
@ -20,7 +20,7 @@
</div> </div>
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-6 col-md-8">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h4>List of Suppliers</h4> <h4>List of Suppliers</h4>

34
src/app/layouts/full-layout.component.html
View file

@ -38,19 +38,17 @@
</div> </div>
</a> </a>
</li> </li>
<li *ngIf="accountType == 'organisation'" class="nav-item"> </ul>
<a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
<div class="row no-gutters align-items-center"> <hr>
<div class="col-2"><i class="icon-map"></i></div>
<div class="col-10">Infographics</div> <ul class="nav">
</div> <strong class="nav-title">Actions</strong>
</a>
</li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']"> <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col-2"><i class="icon-basket"></i></div> <div class="col-2"><i class="icon-basket"></i></div>
<div class="col-10">Add Transaction</div> <div class="col-10">Record Transaction</div>
</div> </div>
</a> </a>
</li> </li>
@ -58,7 +56,21 @@
<a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']"> <a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
<div class="row no-gutters align-items-center"> <div class="row no-gutters align-items-center">
<div class="col-2"><i class="icon-envelope-letter"></i></div> <div class="col-2"><i class="icon-envelope-letter"></i></div>
<div class="col-10">Enter Feedback</div> <div class="col-10">Submit Feedback</div>
</div>
</a>
</li>
</ul>
<hr>
<ul class="nav">
<strong class="nav-title">Info</strong>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
<div class="row no-gutters align-items-center">
<div class="col-2"><i class="icon-map"></i></div>
<div class="col-10">Infographics</div>
</div> </div>
</a> </a>
</li> </li>
@ -139,6 +151,6 @@
</div> </div>
<footer class="app-footer"> <footer class="app-footer">
<a href="http://www.peartrade.org" target="_blank">&copy; 2017 Pear Trading Ltd.</a> <a href="http://www.peartrade.org" target="_blank">&copy; 2020 Pear Trading Ltd.</a>
<span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span> <span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer> </footer>

1
src/scss/bootstrap/_button-group.scss
View file

@ -11,6 +11,7 @@
position: relative; position: relative;
flex: 0 1 auto; flex: 0 1 auto;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer;
// Bring the hover, focused, and "active" buttons to the fron to overlay // Bring the hover, focused, and "active" buttons to the fron to overlay
// the borders properly // the borders properly

2
src/scss/bootstrap/_buttons.scss
View file

@ -32,12 +32,14 @@
@include box-shadow(none); @include box-shadow(none);
} }
:enabled {
&:active, &:active,
&.active { &.active {
background-image: none; background-image: none;
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
} }
} }
}
// Future-proof disabling of clicks on `<a>` elements // Future-proof disabling of clicks on `<a>` elements
a.btn.disabled, a.btn.disabled,

4
src/scss/bootstrap/_card.scss
View file

@ -70,6 +70,10 @@
&:first-child { &:first-child {
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
} }
small {
padding-left: 1em;
}
} }
.card-footer { .card-footer {

10
src/scss/bootstrap/_input-group.scss
View file

@ -23,6 +23,16 @@
z-index: 3; z-index: 3;
} }
} }
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
}
.help-block {
font-size: 0.8em;
font-style: italic;
} }
.input-group-addon, .input-group-addon,

2
src/scss/bootstrap/_tables.scss
View file

@ -80,6 +80,8 @@
.table-hover { .table-hover {
tbody tr { tbody tr {
cursor: pointer;
@include hover { @include hover {
background-color: $table-bg-hover; background-color: $table-bg-hover;
} }