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

Make default landing page look a little nicer

Browse source 
Signed-off-by: William Brawner <me@wbrawner.com>
This commit is contained in:
William Brawner 2020-02-19 20:18:27 -07:00
parent 1551b865d6
commit a473f58d22
2 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/app/budgets/budget.component.css
View file

@ -0,0 +1,28 @@
.dashboard {
color: #F1F1F1;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 1em;
flex-direction: column;
}
.auth-button-container {
display: flex;
flex-grow: 1;
width: 100%;
max-width: 500px;
justify-content: space-between;
padding-top: 1em;
}
.auth-button-container > a {
flex-grow: 1;
margin: 1em;
}
@media all and (max-width: 400px) {
.auth-button-container {
flex-direction: column-reverse;
}
}

12
src/app/budgets/budget.component.html
View file

@ -1,6 +1,10 @@
<div class="dashboard" *ngIf="!isLoggedIn()">
<h2 class="log-in">Get started</h2>
<p>To begin tracking your finances, <a routerLink="/login">login</a> or <a routerLink="/register">create an account</a>!</p>
<h2 class="log-in">Welcome to Twigs!</h2>
<p>To begin tracking your finances, login or create an account!</p>
<div class="auth-button-container">
<a routerLink="/register" mat-stroked-button color="accent">Register</a>
<a routerLink="/login" mat-raised-button color="accent">Login</a>
</div>
</div>
<mat-nav-list class="budgets" *ngIf="isLoggedIn()">
<a mat-list-item *ngFor="let budget of budgets" routerLink="/budgets/{{ budget.id }}">
@ -12,12 +16,12 @@
</p>
</a>
</mat-nav-list>
<div class="no-budgets" *ngIf="!budgets || budgets.length === 0">
<div class="no-budgets" *ngIf="isLoggedIn() && (!budgets || budgets.length === 0)">
<a mat-button routerLink="/budgets/new">
<mat-icon>add</mat-icon>
<p>Add budgets to begin tracking your finances.</p>
</a>
</div>
<a mat-fab routerLink="/budgets/new">
<a mat-fab routerLink="/budgets/new" *ngIf="isLoggedIn()">
<mat-icon aria-label="Add">add</mat-icon>
</a>