Invoicebus / html-invoice-generator

JavaScript tool that will transform your HTML invoice template to fully functional invoice editor
http://generator.invoicebus.com
MIT License
167 stars 52 forks source link

Image Width and Tax #2

Closed disqvr closed 9 years ago

disqvr commented 9 years ago

Hi guys,

great tool, thanks for it! Just playing around and I have two questions:

(1) How can I set how the image is cropped? I would like to keep a max-height of 100px, but it should be possible to use images with a max-width of 400px.

(2) It would be great, if it would be possible to display taxes only in the "sums" section and not in the "items" section as well. Can you give me a hint on how to achieve that?

Thanks and best regards!

bitconym commented 9 years ago

Thanks, and first things first:

(1) The logo is placed with an <img /> tag and I suggest you play with its CSS styles. In /src/template/template.scss find this code:

.logo {
  float:left;
  margin-right:20px;

  img {
    width:150px;
    height:100px;
  }
}

And experiment with the width, height, max-width and max-height of the img, you should be able to find something that's working for you so you can achieve the required functionality.

(2) You can certainly do that with a little hack, but the invoice generator is not meant to work for this use-case, as the taxes are calculated automatically from every item row. If you hide the tax column than the taxes in the "sums" will always be 0 (or whatever value they have at the moment). Note that you can't edit the tax value in the sums section.

Anyway here's the CSS hack to hide the tax column while preserving tax visibility in the sums:

.ibcl_item_tax_label,
.ibcl_item_tax {
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}