fix: pdf templates

This commit is contained in:
Ahmed Bouhuolia
2024-09-17 17:46:56 +02:00
parent 2c790427fa
commit bb0d91a9cb
11 changed files with 177 additions and 131 deletions

View File

@@ -44,8 +44,7 @@ block head
.#{prefix}-terms-item__value {
/* Styles for the term value */
}
.#{prefix}-group {
.#{prefix}-address-section{
box-sizing: border-box;
display: flex;
flex-flow: wrap;
@@ -56,12 +55,9 @@ block head
gap: 10px;
margin-bottom: 24px;
}
.#{prefix}-address {
/* Styles for each address block */
.#{prefix}-address-section > * {
flex: 1 1;
}
.#{prefix}-table {
width: 100%;
border-collapse: collapse;
@@ -124,15 +120,12 @@ block head
flex: 1 1 auto;
text-align: right;
}
.#{prefix}-statement {
/* Styles for customer note/terms statement section */
margin-bottom: 20px;
}
.#{prefix}-statement__label {
/* Styles for statement label */
color: #666;
}
.#{prefix}-statement__value {
/* Styles for statement value */
}
@@ -156,7 +149,7 @@ block content
div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
div(class=`${prefix}-group`)
div(class=`${prefix}-address-section`)
if showBilledFromAddress
div(class=`${prefix}-address`)
strong #{companyName}
@@ -169,30 +162,30 @@ block content
div #{address}
table(class=`${prefix}-table`)
thead(class=`${prefix}-table__header`)
thead
tr
th #{'Item'}
th #{'Description'}
th #{'Rate'}
th #{'Total'}
th(class=`${prefix}-table__header`) #{'Item'}
th(class=`${prefix}-table__header`) #{'Description'}
th(class=`${prefix}-table__header`) #{'Rate'}
th(class=`${prefix}-table__header`) #{'Total'}
tbody
each line in lines
tr(class=`${prefix}-table__row`)
td #{line.item}
td #{line.description}
td(class=`${prefix}-table__column--right`) #{line.rate}
td(class=`${prefix}-table__column--right`) #{line.total}
td(class=`${prefix}-table__cell`) #{line.item}
td(class=`${prefix}-table__cell`) #{line.description}
td(class=`${prefix}-table__cell--right`) #{line.rate}
td(class=`${prefix}-table__cell--right`) #{line.total}
div(class=`${prefix}-totals`)
if showSubtotal
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-gray`)
div #{subtotalLabel}:
div #{subtotal}
div(class=`${prefix}-totals__item-label`) #{subtotallabel}
div(class=`${prefix}-totals__item-amount`) #{subtotal}
if showTotal
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark`)
div #{totalLabel}:
div #{total}
div(class=`${prefix}-totals__item-amount`) #{totalLabel}:
div(class=`${prefix}-totals__item-label`) #{total}
if showCustomerNote
div(class=`${prefix}-statement`)

View File

@@ -26,7 +26,7 @@ block head
top: 26px;
overflow: hidden;
}
.#{prefix}-terms-list {
.#{prefix}-terms {
display: flex;
flex-direction: column;
gap: 4px;
@@ -43,7 +43,7 @@ block head
}
.#{prefix}-terms-item__value {
}
.#{prefix}-address-section{
.#{prefix}-addresses{
box-sizing: border-box;
display: flex;
flex-flow: wrap;
@@ -54,6 +54,9 @@ block head
gap: 10px;
margin-bottom: 24px;
}
.#{prefix}-addresses > * {
flex: 1 1;
}
.#{prefix}-address {
}
.#{prefix}-address__item {
@@ -120,8 +123,10 @@ block head
text-align: right;
}
.#{prefix}-statement {
margin-bottom: 20px;
}
.#{prefix}-statement__label {
color: #666;
}
.#{prefix}-statement__value {
}
@@ -150,7 +155,7 @@ block content
div(class=`${prefix}-terms-item__value`) #{expirationDate}
//- Addresses (Group section)
div(class=`${prefix}-address-section`)
div(class=`${prefix}-addresses`)
if showBilledFromAddress
div(class=`${prefix}-address`)
strong #{companyName}
@@ -182,21 +187,21 @@ block content
//- Totals section
div(class=`${prefix}-totals`)
if showSubtotal
div(class=`${prefix}-totals__item`)
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-gray`)
div(class=`${prefix}-totals__item-label`) #{subtotalLabel}
div(class=`${prefix}-totals__item-amount`) #{subtotal}
if showTotal
div(class=`${prefix}-totals__item`)
div(class=`${prefix}-totals__item ${prefix}-totals__item--border-dark ${prefix}-totals__item--font-weight-bold`)
div(class=`${prefix}-totals__item-label`) #{totalLabel}
div(class=`${prefix}-totals__item-amount`) #{total}
//- Statements section
if showCustomerNote
if showCustomerNote && customerNote
div(class=`${prefix}-statement`)
div(class=`${prefix}-statement__label`) #{customerNoteLabel}
div(class=`${prefix}-statement__value`) #{customerNote}
if showTermsConditions
if showTermsConditions && termsConditions
div(class=`${prefix}-statement`)
div(class=`${prefix}-statement__label`) #{termsConditionsLabel}
div(class=`${prefix}-statement__value`) #{termsConditions}

View File

@@ -229,13 +229,13 @@ block content
div(class=`${prefix}-totals__item-amount`) #{balanceDue}
//- Footer section
if showTermsConditions
if showTermsConditions && termsConditions
div(class=`${prefix}-paragraph`)
if termsConditionsLabel
div(class=`${prefix}-paragraph__label`) #{termsConditionsLabel}
div(class=`${prefix}-paragraph__value`) #{termsConditions}
if showStatement
if showStatement && statement
div(class=`${prefix}-paragraph`)
if statementLabel
div(class=`${prefix}-paragraph__label`) #{statementLabel}

View File

@@ -41,9 +41,6 @@ block head
.#{prefix}-terms-item__label{
min-width: 120px;
color: #333;
}
.#{prefix}-group{
}
.#{prefix}-addresses{
box-sizing: border-box;
@@ -95,12 +92,6 @@ block head
}
.#{prefix}-table__cell--right {
text-align: right;
}
.#{prefix}-table__column{
}
.#{prefix}-table__column--right{
}
.#{prefix}-totals {
display: flex;
@@ -177,11 +168,11 @@ block content
div(class=`${prefix}-totals`)
if showSubtotal
div(class=`${prefix}-totals__item`)
div(class=`${prefix}-totals__item ${prefix}-totals__item--gray-border`)
div(class=`${prefix}-totals__item-label`) #{subtotalLabel}
div(class=`${prefix}-totals__item-amount`) #{subtotal}
if showTotal
div(class=`${prefix}-totals__item`)
div(class=`${prefix}-totals__item ${prefix}-totals__item--dark-border`)
div(class=`${prefix}-totals__item-label`) #{totalLabel}
div(class=`${prefix}-totals__item-amount`) #{total}

View File

@@ -4,21 +4,13 @@ block head
- var prefix = 'bc'
style.
.#{prefix}-root {
color: #111;
color: #000;
padding: 24px 30px;
font-size: 12px;
position: relative;
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
}
.#{prefix}-logo-wrap {
font-size: 60px;
margin: 0;
line-height: 1;
margin-bottom: 25px;
font-weight: 500;
color: #333;
}
.#{prefix}-big-title {
height: 120px;
width: 120px;
position: absolute;
@@ -26,6 +18,14 @@ block head
top: 26px;
overflow: hidden;
}
.#{prefix}-big-title {
font-size: 60px;
margin: 0;
line-height: 1;
margin-bottom: 25px;
font-weight: 500;
color: #333;
}
.#{prefix}-terms-list {
display: flex;
flex-direction: column;
@@ -53,6 +53,9 @@ block head
gap: 10px;
margin-bottom: 24px;
}
.#{prefix}-address-section > * {
flex: 1 1 auto;
}
.#{prefix}-address {}
.#{prefix}-table {
width: 100%;
@@ -99,8 +102,12 @@ block head
display: flex;
padding: 4px 0;
}
.#{prefix}-totals__line--gray-border {}
.#{prefix}-totals__line--dark-border {}
.#{prefix}-totals__line--gray-border {
border-bottom: 1px solid #DADADA;
}
.#{prefix}-totals__line--dark-border {
border-bottom: 1px solid #000;
}
.#{prefix}-totals__line__label {
min-width: 160px;
}
@@ -161,30 +168,31 @@ block content
tbody
each line in lines
tr(class=`${prefix}-table__row`)
td(class=`${prefix}-table__column`)= line.item
td(class=`${prefix}-table__column`)= line.description
td(class=`${prefix}-table__column ${prefix}-table__column--right`)= line.rate
td(class=`${prefix}-table__column ${prefix}-table__column--right`)= line.total
td(class=`${prefix}-table__cell`)= line.item
td(class=`${prefix}-table__cell`)= line.description
td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.rate
td(class=`${prefix}-table__cell${prefix}-table__cell--right`)= line.total
//- Totals Section
div(class=`${prefix}-totals`)
if showSubtotal
div(class=`${prefix}-totals__line #{prefix}-totals__line--gray-border`)
div(class=`${prefix}-totals__line ${prefix}-totals__line--gray-border`)
span(class=`${prefix}-totals__line__label`)= subtotalLabel
span(class=`${prefix}-totals__line__amount`)= subtotal
if showTotal
div(class=`${prefix}-totals__line #{prefix}-totals__line--dark-border`)
div(class=`${prefix}-totals__line ${prefix}-totals__line--dark-border`)
span(class=`${prefix}-totals__line__label`)= totalLabel
span(class=`${prefix}-totals__line__amount`)= total
//- Customer Note Section
if showCustomerNote
div(class=`${prefix}-statement`)
span(class=`${prefix}-statement__label`)= customerNoteLabel
p(class=`${prefix}-statement__value`)= customerNote
div(class=`${prefix}-statement__label`)= customerNoteLabel
div(class=`${prefix}-statement__value`)= customerNote
//- Terms & Conditions Section
if showTermsConditions
div(class=`${prefix}-statement`)
span(class=`${prefix}-statement__label`)= termsConditionsLabel
p(class=`${prefix}-statement__value`)= termsConditions
div(class=`${prefix}-statement__label`)= termsConditionsLabel
div(class=`${prefix}-statement__value`)= termsConditions