Merge pull request #9 from forevermatt/develop

Release 0.4.0

README.md

@@ -13,7 +13,15 @@ https://forevermatt.github.io/svelte-budget/
 - [x] Add a category
 - [x] Edit a category
 - [x] Add a financial account
+- [x] Add nicer buttons (with icons)
 - [ ] Edit a financial account
 - [ ] Record an expense
 - [ ] Create separate repo to document data structure versions
 - [ ] ...
+
+## Development
+
+### Icons
+
+The list of icons available in the library I'm using can be found here:
+https://fontawesome.com/icons?d=gallery

package.json

@@ -18,17 +18,19 @@
   },
   "homepage": "https://github.com/forevermatt/svelte-budget#readme",
   "devDependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-node-resolve": "^7.0.0",
+    "fa-svelte": "^3.1.0",
     "rollup": "^1.20.0",
-    "rollup-plugin-livereload": "^1.0.0",
-    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-livereload": "^1.3.0",
+    "rollup-plugin-svelte": "^5.2.2",
     "rollup-plugin-terser": "^5.1.2",
-    "svelte": "^3.0.0",
-    "svelte-spa-router": "^2.1.0"
+    "svelte": "^3.23.2",
+    "svelte-spa-router": "^2.2.0"
   },
   "dependencies": {
-    "sirv-cli": "^0.4.4",
+    "sirv-cli": "^0.4.6",
     "uuid": "^7.0.3"
   }
 }

src/App.svelte

@@ -14,7 +14,7 @@ onMount(async () => {
 })
 </script>
 
-<div class="container my-3">
+<div class="container-xl my-3">
   <ErrorMessage />
   <Router {routes}/>
 </div>

src/components/Button.svelte

@@ -0,0 +1,49 @@
+<script>
+import Icon from 'fa-svelte'
+
+export let icon
+export let name
+export let left = false
+export let url = ''
+</script>
+
+<style>
+a {
+  color: #337ab7;
+  font-weight: bold;
+}
+
+a:focus,
+a:hover {
+  color: #111;
+}
+
+a:focus .button-circle,
+a:hover .button-circle {
+  background-color: #111;
+}
+
+.button-circle {
+  border-radius: 3rem;
+  background-color: #337ab7;
+  color: #fff;
+  display: inline-block;
+  font-size: 2rem;
+  height: 4rem;
+  line-height: 1rem;
+  padding: 1rem;
+  overflow: hidden;
+  text-align: center;
+  width: 4rem;
+}
+</style>
+
+<a id="button-{ name }" class="btn" class:float-left={left}
+   href="{ url || 'javascript:void(0)' }" role="button">
+  <span class="button-circle">
+    {#if icon }
+      <Icon {icon} />
+    {/if}<br />
+  </span><br />
+  { name }
+</a>

src/components/ButtonRow.svelte

@@ -0,0 +1,18 @@
+<style>
+#button-row {
+  bottom: 10px;
+  left: 10px;
+  position: fixed;
+  right: 10px;
+  text-align: right;
+}
+#button-row-spacer {
+  height: 100px;
+}
+</style>
+
+<div id="button-row-spacer"></div>
+<div id="button-row">
+  <slot />
+  <div class="clearfix"></div>
+</div>

src/views/Accounts.svelte

@@ -1,5 +1,8 @@
 <script>
 import { accounts } from '../data/accounts'
+import Button from '../components/Button.svelte'
+import ButtonRow from '../components/ButtonRow.svelte'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
 </script>
 
 <h2>Accounts</h2>
@@ -12,4 +15,6 @@ import { accounts } from '../data/accounts'
 
 <p><a href="#/account/new">Add new account</a></p>
 
-<p><a href="#/budget">Budget</a></p>
+<ButtonRow>
+  <Button icon={faHome} name="budget" url="#/budget" left />
+</ButtonRow>

src/views/Budget.svelte

@@ -1,5 +1,8 @@
 <script>
 import BudgetOverview from '../components/BudgetOverview.svelte'
+import Button from '../components/Button.svelte'
+import ButtonRow from '../components/ButtonRow.svelte'
+import { faListUl } from '@fortawesome/free-solid-svg-icons'
 </script>
 
 <h2>Budget</h2>
@@ -8,4 +11,6 @@ import BudgetOverview from '../components/BudgetOverview.svelte'
 
 <p><a href="#/category/new">Add new category</a></p>
 
-<p><a href="#/accounts">Accounts</a></p>
+<ButtonRow>
+  <Button icon={faListUl} name="accounts" url="#/accounts" left />
+</ButtonRow>