Financier's history

[Alex]

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.




February 11th, 2016

Got a month selector, and moved to the browser when I realized the browser could do everything I wanted to do:



February 15th, 2016

First pass on the public website to share:



Toyed with the colors, master categories, etc:



February 16th, 2016

Starting to look more familiar. CSS tweaks:




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.

[ottyacat]

Great to see the evolution! Looking forward to seeing future updates!

[Bruce]

Very cool. Thanks for sharing.

[Joel]

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.

[asromzek]

That original teal color looks nice, easy on the eyes. Any thoughts on how many options you'll have in the theme/color picker?

[Billy_McSkintos]

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...

[Bruce]

The green looks much better IMO.

[asromzek]

@Billy_McSkintos Do you have a script you could share for that?

[Billy_McSkintos]

Do you have a script you could share for that?

First stab at it:

Code Select Expand



/* 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;
}

[asromzek]

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.

[Billy_McSkintos]

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':

Code Select Expand


.account__tr--stripe {
    background: #f4f7f6;
}


[asromzek]

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.

[Billy_McSkintos]

I think we need this one too:

Code Select Expand


.virtual-list.odd-total .vs-repeat-after-content {
    background: repeating-linear-gradient(180deg,#f4f7f6,#f4f7f6 30px,#fff 0,#fff 60px);
}

[asromzek]

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.

[Billy_McSkintos]

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?