Saturday, 3 October 2015

Our AngularJS invoice in the FAQ sidebar just got way better

We get a lot of our best inspiration from the curated links on this sub, so we love being able to give back.

Link to live demo invoice.

Link to Github for the code.


How is it better? Before this was just a weekend project. Now it's been about two more weekends.

  • jQueryUI sortable was wrapped with Angular to allow you to click and drag the line items and notes and change their order.
  • Hover over a line item or note to reveal a delete button. If you're deleting a line item the total is recalculated.
  • More white labeled. Placeholder logo and copy, generic fonts. All scripts that were used for our purposes (like the stuff that hides and shows the how-to in the demo) removed, etc.
  • Entering anything but a number used to break the input rendering the line item useless. No longer.

Q: Do I have to be good at AngularJS, or javascript for that matter, to use this invoice?

A: No. Open the invoice.js file and you can plainly see where the placeholder text lives. Change it to suit your needs.


Q: So what will it take to customize this then outside of changing the placeholder copy?

A: Use Google fonts, upload your own, or change sans-serif to a different system font. Replace the placehold.it link in the <img> src to a URL that points to your logo. If you know HTML and CSS you can of course customize the structure, or rebuild it entirely.


Any other questions or comments I'd be happy to help however possible.



Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted October 04, 2015 at 04:21AM by key-frames http://ift.tt/1OcnhrW

No comments:

Post a Comment