wbrawner/twigs-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve styles for mobile usability

Browse source
This commit is contained in:
William Brawner 2018-09-01 11:09:07 -05:00
parent b4d7c831e9
commit 3e7bc1eed4
7 changed files with 37 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/add-edit-category/add-edit-category.component.html
View file

@ -1,6 +1,6 @@
<mat-toolbar>
<span>
<a (click)="goBack()">
<a mat-button (click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</a>
</span>
@ -8,7 +8,7 @@
{{ title }}
</span>
<span class="action-item">
<a (click)="save()">Save</a>
<a mat-button (click)="save()">Save</a>
</span>
</mat-toolbar>
<div *ngIf="!currentCategory">

4
src/app/add-edit-transaction/add-edit-transaction.component.html
View file

@ -1,6 +1,6 @@
<mat-toolbar>
<span>
<a (click)="goBack()">
<a mat-button (click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</a>
</span>
@ -8,7 +8,7 @@
{{ title }}
</span>
<span class="action-item">
<a (click)="save()">Save</a>
<a mat-button (click)="save()">Save</a>
</span>
</mat-toolbar>
<div *ngIf="!currentTransaction">

2
src/app/categories/categories.component.html
View file

@ -1,6 +1,6 @@
<mat-toolbar>
<span>
<a (click)="goBack()">
<a mat-button (click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</a>
</span>

11
src/app/dashboard/dashboard.component.css
View file

@ -36,11 +36,11 @@
}
.dashboard-primary div {
bottom: 1em;
bottom: 0.5em;
display: flex;
justify-content: space-between;
left: 1em;
right: 1em;
left: 0.5em;
right: 0.5em;
position: absolute;
}
@ -57,7 +57,6 @@
a.view-all {
position: absolute;
right: 1em;
top: 1em;
font-size: 1em;
right: 0.5em;
top: 0.5em;
}

11
src/app/dashboard/dashboard.component.html
View file

@ -8,18 +8,19 @@
<div class="dashboard">
<div class="dashboard-primary">
<h2 class="balance">
Current Balance: <span [ngClass]="{'income': balance > 0, 'expense': balance < 0}" >{{ balance | currency }}</span>
Current Balance: <br />
<span [ngClass]="{'income': balance > 0, 'expense': balance < 0}" >{{ balance | currency }}</span>
</h2>
<div class="transaction-navigation">
<a routerLink="/transactions/new">Add Transaction</a>
<a routerLink="/transactions">View Transactions</a>
<a mat-button routerLink="/transactions/new">Add Transaction</a>
<a mat-button routerLink="/transactions">View Transactions</a>
</div>
</div>
<div class="dashboard-categories">
<h3 class="categories">Categories</h3>
<a routerLink="/categories" class="view-all" *ngIf="categories">View All</a>
<a mat-button routerLink="/categories" class="view-all" *ngIf="categories">View All</a>
<div class="no-categories" *ngIf="!categories || categories.length === 0">
<a routerLink="/categories/new">
<a mat-button routerLink="/categories/new">
<mat-icon>add</mat-icon>
<p>Add categories to get more insights into your income and expenses.</p>
</a>

2
src/app/transactions/transactions.component.html
View file

@ -1,6 +1,6 @@
<mat-toolbar>
<span>
<a (click)="goBack()">
<a mat-button (click)="goBack()">
<mat-icon>arrow_back</mat-icon>
</a>
</span>

30
src/styles.css
View file

@ -24,25 +24,35 @@ a.mat-fab {
mat-toolbar {
box-shadow: 0px 3px 3px 1px #212121;
display: flex;
justify-content: space-between;
}
mat-toolbar.mat-toolbar-row, mat-toolbar.mat-toolbar-single-row {
padding: 0;
}
mat-toolbar span {
display: inline-block;
min-width: 24px;
display: flex;
width: 33%;;
}
mat-toolbar a {
padding: 1em 0;
mat-toolbar span:nth-child(1) {
justify-content: flex-start;
}
mat-toolbar span:nth-child(1) > a {
padding-left: 0;
mat-toolbar span:nth-child(2) {
justify-content: center;
}
mat-toolbar span:nth-child(3) > a {
padding-right: 0;
mat-toolbar span:nth-child(3) {
justify-content: flex-end;
}
mat-toolbar a.mat-button {
font-size: 1em;
}
mat-toolbar a.mat-button .mat-icon {
vertical-align: text-top;
}
mat-toolbar mat-icon {