Hi everyone.
In the early days of Financier, I took screenshots of my progress with financier. I thought I'd share it all with you. :)
February 2nd, 2016
This is when Financier was an Electron app. Nothing worked except entering budget amounts. No reports, no account screen, no entering transactions, no checking categories. Just getting a layout look/feel and toying around with rolling balance amounts per category.
(https://i.imgur.com/dpN77l5.png)
February 11th, 2016
Got a month selector, and moved to the browser when I realized the browser could do everything I wanted to do:
(http://i.imgur.com/Qc1OkgB.png)
February 15th, 2016
First pass on the public website to share:
(http://i.imgur.com/rGw7zan.png)
Toyed with the colors, master categories, etc:
(http://i.imgur.com/73AbnZo.png)
February 16th, 2016
Starting to look more familiar. CSS tweaks:
(http://i.imgur.com/xQtxvgc.png)
Once I got to this point, I still couldn't add transactions (there was literally no functionality/UX yet), the billing still needed to be done, right right arrow, overspending, etc.
I also ditched the top navigation since it didn't work to show accounts and other info as well as the sidebar.
I'll make another post later showing more progress from here. :)
Great to see the evolution! Looking forward to seeing future updates!
Very cool. Thanks for sharing.
Very cool. I actually like the look of the top navigation bar. Of course, I think I have too many accounts that it would get all jacked up.
That original teal color looks nice, easy on the eyes. Any thoughts on how many options you'll have in the theme/color picker?
Quote from: asromzek on October 27, 2016, 12:53:16 PM
That original teal color looks nice, easy on the eyes. Any thoughts on how many options you'll have in the theme/color picker?
I kind of liked it too so I screwed around for a few minutes to see how it would look. I think the green is better...
The green looks much better IMO.
@Billy_McSkintos Do you have a script you could share for that?
Quote from: asromzek on November 02, 2016, 10:30:33 AM
Do you have a script you could share for that?
First stab at it:
/* Loader Screen */
.loader {
background: -webkit-linear-gradient(#3e8575, #59bda6);
background: linear-gradient(#3e8575, #59bda6);
}
/* Month Selector Bar */
.month-select__month, .month-select__year, .month-select__control {
background-color: #59bda6;
}
.month-select__month:hover, .month-select__year:hover, .month-select__control:hover {
background-color: #3E8575;
}
.month-select__year {
background-color: #3E8575;
}
/* Left Sidebar */
.app-view__sidebar {
background: -webkit-linear-gradient(#3e8575, #59bda6);
background: linear-gradient(#3e8575, #59bda6);}
.app-view__title {
background: #3E8875;
}
.app-view__sidebar-footer-button {
background-color: #59bda6;
}
.app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
background-color: #3E8575;
}
.app-view__sidebar-footer--logged-in.drop-enabled .app-view__sidebar-footer-button, .app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
background-color: #3e8575;
}
/* Budget Selection Screen */
.budgets-header {
background-color: #59bda6;
}
.budgets__title {
color: #59bda6;
border-bottom: 1px solid #59bda6
}
.budgets__budget {
transition: transform .25s ease;
border: 1px solid #59bda6;
}
/* Budget Screen Buttons and Pop-ups */
.button--primary {
background-color: #59bda6;
}
.button--primary:hover {
background-color: #3E8575;
}
.form__textarea:focus {
border-color: #59bda6;
}
.budget__month-cell--input input {
border: 1px solid #91D3C4;
}
.budget__month-cell--input input:focus, .budget__month-cell--input input:hover {
border: 1px solid #3e8575;
}
/* Account Manifest */
.account__th {
background-color: #59bda6;
}
.account__add-button {
color: #3e8575;
}
.account__editing-button--save {
background-color: #59bda6
}
.account__editing-button--save:hover {
background-color: #3e8575
}
.cleared--true {
background-color: #59bda6;
}
.account__tr--stripe {
background: #f4f7f6;
}
.virtual-list.odd-total .vs-repeat-after-content {
background: repeating-linear-gradient(180deg,#f4f7f6,#f4f7f6 30px,#fff 0,#fff 60px);
}
/* Modal Popup */
.ngdialog.ngdialog-theme-default .ngdialog-content {
border: 5px solid #59bda6;
}
.modal footer button.primary {
background-color: #59bda6;
}
.modal footer button.primary:hover {
background-color: #3E8575;
}
.modal form input:focus, .modal form select:focus {
border-color: #59bda6;
}
The alternating green background color on the transaction screen looks a little off with the teal. Otherwise, I like it. Some official themes would be awesome.
Quote from: asromzek on November 04, 2016, 03:08:31 PM
The alternating green background color on the transaction screen looks a little off with the teal. Otherwise, I like it. Some official themes would be awesome.
Not sure of the right colour here but this is 'tealed':
.account__tr--stripe {
background: #f4f7f6;
}
Yeah, that's better. You beat me to it.
Although, it's only applied to the transactions, and not to the repeating empty area below if there not enough transactions to fill the register.
I think we need this one too:
.virtual-list.odd-total .vs-repeat-after-content {
background: repeating-linear-gradient(180deg,#f4f7f6,#f4f7f6 30px,#fff 0,#fff 60px);
}
Yup, that'll do it. I going to run with the teal theme for a while, with all of the other styling turned off or set back to default.
I wasn't sure at first but I'm digging it now.
Do you know how to add parameters to replace the various colours such that a pallette can be selected to easily style?
I smell financier-toolkit. :)
Hey
@Alex, are you literally a one-man shop? Was just curious... someone pointed it out as a liability if something should go wrong. I'm not terribly concerned, given how many one person shops produce awesome software I buy and use, but it's an interesting point. I'd be sad if I was completely invested and you decided to close up shop someday without an heir apparent. ;)
lol :) Yeah it's just me.
I believe I said somewhere (reddit?) that Financier is pretty durable for a couple reasons:
1. I will release the source code under MIT if I stop development.
2. Financier's unique syncing design means that it could be easily tweaked to run in a standalone environment on your own computer with minimal code changes. No need to run an API, payment gateway, email sending system, other 3rd party APIs etc. :) (I'm pretty proud of this.)
Also, despite it just being me, I do document my code.
The bus factor is high though b/c I'm the only one developing Financier. Perhaps I will make some dead man's switch to open source the codebase if I ever kick the bucket. ;)
So I just enabled Google's "Inactive account manager" w/ instructions for family on what to do to open source Financier. So we should be good here.
If it's ever open sourced, it'll be in gitlab.com/financier.
Quote from: Alex on November 30, 2016, 04:57:35 PM
...Google's "Inactive account manager" w/ instructions for family on what to do to open source Financier...
Sounds like you've just written your digital Will
Yeah, the instructions to my relatives:
1. Open source financier
2. Contact x person in y project
3. Decide what to do with my web domains/website
4. Delete my porn
:P
I already have instructions set up on Vanguard re: money. :)
Quote from: Alex on November 04, 2016, 05:48:27 PM
I smell financier-toolkit. :)
Alex, for Desktop feature requests, would you consider implementing a browser extension toolkit to handle the workload whilst leaving the code as streamline as possible?
I'm not sure how you're handling the mobile, will it just be shown differently in a url like https://m.financier.io ?
I was looking at the ynab-toolkit and could see there are some good ideas in there as well as things which just add too many 'nice to haves'.
Like an investment portfolio snap-in, I could see this get attached to at toolkit rather than building it in the financier core since it should be on budgets alone.
I'm just wondering what your thoughts are with a toolkit for desktop users because a lot of my feature requests heavily rely on desktop for my main budgeting and mobile for my day to day transactions.
Mobile will be essentially the same app/code except optimized for the devices. So same URL.
If someone did build a financier-toolkit, it would be independent of Financier and they could build whatever functionality they want. 👍
Quote from: Alex on November 30, 2016, 06:04:47 PM
Mobile will be essentially the same app/code except optimized for the devices. So same URL.
If someone did build a financier-toolkit, it would be independent of Financier and they could build whatever functionality they want. 👍
So you would much prefer all your work and code to be built in to Financier core.
And for the mobile version with the same code it's just a matter of presentation/viewing for different screen real estate, right?
Well kinda. Some parts like the budget screen will just be optimized. Other parts like transaction entering are gonna be completely different UI to make them usable.
Quote from: Alex on November 30, 2016, 06:28:29 PM
Well kinda. Some parts like the budget screen will just be optimized. Other parts like transaction entering are gonna be completely different UI to make them usable.
Understood. I haven't used it for mobile because i couldn't see any columns in transaction. The budget wasn't too bad. Looking forward to seeing it in action!