Skip to content
Permalink
Browse files

slap on a coat of makeup and make the app look decent and usable

  • Loading branch information...
matthiaswh committed Mar 2, 2017
1 parent 7b2f9f3 commit 13a1e375cef2ff6eae9fa21660c41ccbe99e3101
@@ -3,6 +3,8 @@
<head>
<meta charset="utf-8">
<title>budgeterbium</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
@@ -1,7 +1,13 @@
<template>
<div id="app">
<img src="../assets/logo.png">
<router-view></router-view>
<div class="columns app-container">
<div class="column is-3 sidebar">
<span class="brand"><img src="../assets/logo.png">udgeterbium</span>
</div>
<div class="column">
<router-view></router-view>
</div>
</div>
</div>
</template>

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

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.columns.app-container {
flex: 1;
display: block;
padding: 0;
margin: 0;
}
@media only screen and (min-device-width : 769px) {
.columns.app-container {
display: flex;
}
}
.columns.app-container:last-child {
margin-bottom: 0;
}
.sidebar {
background-color: #02212B;
.brand {
font-size: 36px;
color: #ffffff;
margin: 40px 0 20px 20px;
vertical-align: top;
img {
margin: 4px;
max-width: 24%;
display: inline;
}
}
}
.table td, .table th {
border-color: #bbbbbb;
}
tbody tr {
background-color: rgba(34, 109, 59, 0.2);
}
.is-delinquent {
background-color: rgba(148, 62, 46, 0.2);
}
</style>
@@ -1,19 +1,46 @@
<template>
<div id="accounts-list-view">
I'm a list of accounts!

<router-link :to="{ name: 'createAccount' }">Add an account</router-link>
<nav class="level">
<div class="level-left">
<h1 class="title is-2">Accounts</h1>
</div>
<div class="level-right">
<div class="level-item">
<router-link :to="{ name: 'createAccount' }" class="button is-primary">Add Account +</router-link>
</div>
</div>
</nav>


<router-link :to="{ name: 'budgetsList' }">View budgets</router-link>

<ul>
<li v-for="account, key in accounts">
{{ account.name }}
<span class="tag is-small is-info">{{ categories[account.category] }}</span>
${{ account.balance }}
<a @click="confirmDeleteAccount(account)">Delete</a>
<router-link :to="{ name: 'updateAccount', params: { accountId: account.id } }">Edit</router-link>
</li>
</ul>
<table class="table is-bordered">
<thead>
<tr>
<th>Account name</th>
<th>Balance</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for="account, key in accounts"
:class="{ 'is-delinquent': account.balance < 0 }"
>
<td>
<span class="subtitle is-5">{{ account.name }}</span>
<span class="tag is-small ">{{ categories[account.category] }}</span>
</td>
<td><span class="subtitle is-5">${{ account.balance }}</span></td>
<td>
<router-link class="button is-primary" :to="{ name: 'updateAccount', params: { accountId: account.id } }">Edit</router-link>
<a class="button is-danger" @click="confirmDeleteAccount(account)">Delete</a>
</td>
</tr>
</tbody>
</table>

</div>
</template>

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

<style scoped lang='scss'>
#accounts-list-view {
}
</style>
@@ -1,36 +1,56 @@
<template>
<div id="accounts-create-edit-view">
You can create and edit accounts with me, yippee!

<router-link :to="{ name: 'accountsList' }">View all accounts</router-link>
<nav class="level">
<div class="level-left">
<h1 class="title is-2">Add Account</h1>
</div>
<div class="level-right">
<div class="level-item">
<router-link :to="{ name: 'accountsList' }" class="button">View all accounts &#8630;</router-link>
</div>
</div>
</nav>

<form class="form" @submit.prevent="processSave">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" v-model="selectedAccount.name">
</p>
<label for="category" class="label">Category</label>
<p class="control">
<span class="select">
<select name="category" v-model="selectedAccount.category">
<option v-for="value, key in categories" :value="key">{{ value }}</option>
</select>
</span>
</p>
<label for="balance" class="label">Balance</label>
<p class="control">
<input type="text" class="input" name="balance" v-model="selectedAccount.balance" v-if="!editing">
<span v-else>To update your balance, add a balance adjusting transaction.</span>
</p>
<div class="control is-grouped">
<p class="control">
<button class="button is-primary">Submit</button>
</p>
<p class="control">
<router-link :to="{ name: 'accountsList' }"><button class="button is-link">Cancel</button></router-link>
</p>
<div class="columns">
<div class="column is-6">
<form class="form" @submit.prevent="processSave">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" v-model="selectedAccount.name">
</p>
<label for="category" class="label">Category</label>
<p class="control">
<span class="select">
<select name="category" v-model="selectedAccount.category">
<option v-for="value, key in categories" :value="key">{{ value }}</option>
</select>
</span>
</p>
<label for="balance" class="label">Balance</label>
<p class="control has-icon" v-if="!editing">
<input type="number" class="input" name="balance" step="0.01" v-model="selectedAccount.balance">
<span class="help">Use negative values for accounts that carry a negative balance, e.g. credit cards</span>
<span class="icon">
<i class="fa fa-usd" aria-hidden="true"></i>
</span>
</p>
<p v-else>
<span>To update your balance, add a balance adjusting transaction.</span>
</p>
<div class="control is-grouped">
<p class="control">
<button class="button is-success">Submit</button>
</p>
<p class="control">
<router-link :to="{ name: 'accountsList' }"><button class="button is-link">Cancel</button></router-link>
</p>
</div>
</form>
</div>
</form>
</div>


</div>
</template>

@@ -1,19 +1,49 @@
<template>
<div id="budgets-list">
I'm a list of budgets!

<router-link :to="{ name: 'createBudget' }">Add a budget</router-link>
<nav class="level">
<div class="level-left">
<h1 class="title is-2">Budgets</h1>
</div>
<div class="level-right">
<div class="level-item">
<router-link :to="{ name: 'createBudget' }" class="button is-primary">Add Budget +</router-link>
</div>
</div>
</nav>

<router-link :to="{ name: 'accountsList' }">View accounts</router-link>

<ul>
<li v-for="budget in sortedBudgets">
{{ budget.month | moment }}
${{ budget.budgeted }}
${{ budget.spent }}
${{ budget.income }}
<router-link :to="{ name: 'updateBudget', params: { budgetId: budget.id } }">Edit</router-link>
</li>
</ul>
<table class="table is-bordered">
<thead>
<tr>
<th>Budget month</th>
<th>Budgeted</th>
<th>Spent</th>
<th>Income</th>
<th>Balance</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for="budget in sortedBudgets"
:class="{ 'is-delinquent': false }"
>
<td>
<span class="subtitle is-5">{{ budget.month | moment }}</span>
</td>
<td><span class="subtitle is-5">${{ budget.budgeted }}</span></td>
<td><span class="subtitle is-5">${{ budget.spent }}</span></td>
<td><span class="subtitle is-5">${{ budget.income }}</span></td>
<td><span class="subtitle is-5">${{ budget.budgeted - budget.spent}}</span></td>
<td>
<router-link class="button is-primary" :to="{ name: 'updateBudget', params: { budgetId: budget.id } }">Edit</router-link>
</td>
</tr>
</tbody>
</table>

</div>
</template>

0 comments on commit 13a1e37

Please sign in to comment.
You can’t perform that action at this time.