Skip to content

Commit 13a1e37

Browse files
matthiaswhmatthiaswh
committed
slap on a coat of makeup and make the app look decent and usable
1 parent 7b2f9f3 commit 13a1e37

File tree

7 files changed

+306
-145
lines changed

7 files changed

+306
-145
lines changed

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
<head>
44
<meta charset="utf-8">
55
<title>budgeterbium</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
68
</head>
79
<body>
810
<div id="app"></div>

‎src/app/App.vue‎

Lines changed: 60 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<template>
22
<div id="app">
3-
<img src="../assets/logo.png">
4-
<router-view></router-view>
3+
<div class="columns app-container">
4+
<div class="column is-3 sidebar">
5+
<span class="brand"><img src="../assets/logo.png">udgeterbium</span>
6+
</div>
7+
<div class="column">
8+
<router-view></router-view>
9+
</div>
10+
</div>
511
</div>
612
</template>
713

@@ -11,13 +17,56 @@ export default {
1117
};
1218
</script>
1319

14-
<style>
15-
#app {
16-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
17-
-webkit-font-smoothing: antialiased;
18-
-moz-osx-font-smoothing: grayscale;
19-
text-align: center;
20-
color: #2c3e50;
21-
margin-top: 60px;
22-
}
20+
<style lang="scss">
21+
#app {
22+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
color: #2c3e50;
26+
27+
position: absolute;
28+
width: 100%;
29+
height: 100%;
30+
display: flex;
31+
flex-direction: column;
32+
}
33+
.columns.app-container {
34+
flex: 1;
35+
display: block;
36+
padding: 0;
37+
margin: 0;
38+
}
39+
@media only screen and (min-device-width : 769px) {
40+
.columns.app-container {
41+
display: flex;
42+
}
43+
}
44+
.columns.app-container:last-child {
45+
margin-bottom: 0;
46+
}
47+
.sidebar {
48+
background-color: #02212B;
49+
50+
.brand {
51+
font-size: 36px;
52+
color: #ffffff;
53+
margin: 40px 0 20px 20px;
54+
vertical-align: top;
55+
img {
56+
margin: 4px;
57+
max-width: 24%;
58+
display: inline;
59+
}
60+
}
61+
}
62+
63+
.table td, .table th {
64+
border-color: #bbbbbb;
65+
}
66+
tbody tr {
67+
background-color: rgba(34, 109, 59, 0.2);
68+
}
69+
.is-delinquent {
70+
background-color: rgba(148, 62, 46, 0.2);
71+
}
2372
</style>

‎src/app/accounts/components/AccountsList.vue‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,46 @@
11
<template>
22
<div id="accounts-list-view">
3-
I'm a list of accounts!
43

5-
<router-link :to="{ name: 'createAccount' }">Add an account</router-link>
4+
<nav class="level">
5+
<div class="level-left">
6+
<h1 class="title is-2">Accounts</h1>
7+
</div>
8+
<div class="level-right">
9+
<div class="level-item">
10+
<router-link :to="{ name: 'createAccount' }" class="button is-primary">Add Account +</router-link>
11+
</div>
12+
</div>
13+
</nav>
14+
15+
616
<router-link :to="{ name: 'budgetsList' }">View budgets</router-link>
717

8-
<ul>
9-
<li v-for="account, key in accounts">
10-
{{ account.name }}
11-
<span class="tag is-small is-info">{{ categories[account.category] }}</span>
12-
${{ account.balance }}
13-
<a @click="confirmDeleteAccount(account)">Delete</a>
14-
<router-link :to="{ name: 'updateAccount', params: { accountId: account.id } }">Edit</router-link>
15-
</li>
16-
</ul>
18+
<table class="table is-bordered">
19+
<thead>
20+
<tr>
21+
<th>Account name</th>
22+
<th>Balance</th>
23+
<th></th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<tr
28+
v-for="account, key in accounts"
29+
:class="{ 'is-delinquent': account.balance < 0 }"
30+
>
31+
<td>
32+
<span class="subtitle is-5">{{ account.name }}</span>
33+
<span class="tag is-small ">{{ categories[account.category] }}</span>
34+
</td>
35+
<td><span class="subtitle is-5">${{ account.balance }}</span></td>
36+
<td>
37+
<router-link class="button is-primary" :to="{ name: 'updateAccount', params: { accountId: account.id } }">Edit</router-link>
38+
<a class="button is-danger" @click="confirmDeleteAccount(account)">Delete</a>
39+
</td>
40+
</tr>
41+
</tbody>
42+
</table>
43+
1744
</div>
1845
</template>
1946

@@ -56,6 +83,5 @@ export default {
5683
</script>
5784

5885
<style scoped lang='scss'>
59-
#accounts-list-view {
60-
}
86+
6187
</style>

‎src/app/accounts/components/CreateUpdateAccount.vue‎

Lines changed: 48 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,56 @@
11
<template>
22
<div id="accounts-create-edit-view">
3-
You can create and edit accounts with me, yippee!
43

5-
<router-link :to="{ name: 'accountsList' }">View all accounts</router-link>
4+
<nav class="level">
5+
<div class="level-left">
6+
<h1 class="title is-2">Add Account</h1>
7+
</div>
8+
<div class="level-right">
9+
<div class="level-item">
10+
<router-link :to="{ name: 'accountsList' }" class="button">View all accounts &#8630;</router-link>
11+
</div>
12+
</div>
13+
</nav>
614

7-
<form class="form" @submit.prevent="processSave">
8-
<label for="name" class="label">Name</label>
9-
<p class="control">
10-
<input type="text" class="input" name="name" v-model="selectedAccount.name">
11-
</p>
12-
<label for="category" class="label">Category</label>
13-
<p class="control">
14-
<span class="select">
15-
<select name="category" v-model="selectedAccount.category">
16-
<option v-for="value, key in categories" :value="key">{{ value }}</option>
17-
</select>
18-
</span>
19-
</p>
20-
<label for="balance" class="label">Balance</label>
21-
<p class="control">
22-
<input type="text" class="input" name="balance" v-model="selectedAccount.balance" v-if="!editing">
23-
<span v-else>To update your balance, add a balance adjusting transaction.</span>
24-
</p>
25-
<div class="control is-grouped">
26-
<p class="control">
27-
<button class="button is-primary">Submit</button>
28-
</p>
29-
<p class="control">
30-
<router-link :to="{ name: 'accountsList' }"><button class="button is-link">Cancel</button></router-link>
31-
</p>
15+
<div class="columns">
16+
<div class="column is-6">
17+
<form class="form" @submit.prevent="processSave">
18+
<label for="name" class="label">Name</label>
19+
<p class="control">
20+
<input type="text" class="input" name="name" v-model="selectedAccount.name">
21+
</p>
22+
<label for="category" class="label">Category</label>
23+
<p class="control">
24+
<span class="select">
25+
<select name="category" v-model="selectedAccount.category">
26+
<option v-for="value, key in categories" :value="key">{{ value }}</option>
27+
</select>
28+
</span>
29+
</p>
30+
<label for="balance" class="label">Balance</label>
31+
<p class="control has-icon" v-if="!editing">
32+
<input type="number" class="input" name="balance" step="0.01" v-model="selectedAccount.balance">
33+
<span class="help">Use negative values for accounts that carry a negative balance, e.g. credit cards</span>
34+
<span class="icon">
35+
<i class="fa fa-usd" aria-hidden="true"></i>
36+
</span>
37+
</p>
38+
<p v-else>
39+
<span>To update your balance, add a balance adjusting transaction.</span>
40+
</p>
41+
<div class="control is-grouped">
42+
<p class="control">
43+
<button class="button is-success">Submit</button>
44+
</p>
45+
<p class="control">
46+
<router-link :to="{ name: 'accountsList' }"><button class="button is-link">Cancel</button></router-link>
47+
</p>
48+
</div>
49+
</form>
3250
</div>
33-
</form>
51+
</div>
52+
53+
3454
</div>
3555
</template>
3656

‎src/app/budgets/components/BudgetsList.vue‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,49 @@
11
<template>
22
<div id="budgets-list">
3-
I'm a list of budgets!
43

5-
<router-link :to="{ name: 'createBudget' }">Add a budget</router-link>
4+
<nav class="level">
5+
<div class="level-left">
6+
<h1 class="title is-2">Budgets</h1>
7+
</div>
8+
<div class="level-right">
9+
<div class="level-item">
10+
<router-link :to="{ name: 'createBudget' }" class="button is-primary">Add Budget +</router-link>
11+
</div>
12+
</div>
13+
</nav>
14+
615
<router-link :to="{ name: 'accountsList' }">View accounts</router-link>
716

8-
<ul>
9-
<li v-for="budget in sortedBudgets">
10-
{{ budget.month | moment }}
11-
${{ budget.budgeted }}
12-
${{ budget.spent }}
13-
${{ budget.income }}
14-
<router-link :to="{ name: 'updateBudget', params: { budgetId: budget.id } }">Edit</router-link>
15-
</li>
16-
</ul>
17+
<table class="table is-bordered">
18+
<thead>
19+
<tr>
20+
<th>Budget month</th>
21+
<th>Budgeted</th>
22+
<th>Spent</th>
23+
<th>Income</th>
24+
<th>Balance</th>
25+
<th></th>
26+
</tr>
27+
</thead>
28+
<tbody>
29+
<tr
30+
v-for="budget in sortedBudgets"
31+
:class="{ 'is-delinquent': false }"
32+
>
33+
<td>
34+
<span class="subtitle is-5">{{ budget.month | moment }}</span>
35+
</td>
36+
<td><span class="subtitle is-5">${{ budget.budgeted }}</span></td>
37+
<td><span class="subtitle is-5">${{ budget.spent }}</span></td>
38+
<td><span class="subtitle is-5">${{ budget.income }}</span></td>
39+
<td><span class="subtitle is-5">${{ budget.budgeted - budget.spent}}</span></td>
40+
<td>
41+
<router-link class="button is-primary" :to="{ name: 'updateBudget', params: { budgetId: budget.id } }">Edit</router-link>
42+
</td>
43+
</tr>
44+
</tbody>
45+
</table>
46+
1747
</div>
1848
</template>
1949

0 commit comments

Comments
 (0)