QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-20 14:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: re-layout server-side pdf template

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-10-05 21:24:07 +02:00
parent af5726c48c
commit 59996e7a40
8 changed files with 229 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
packages/server/resources/views/modules/credit-note-regular.pug
View File

65
packages/server/resources/views/modules/credit-note-standard.pug
View File

@@ -10,21 +10,37 @@ block head
position: relative; position: relative;
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color); box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
} }
.#{prefix}-header{
box-sizing: border-box;
display: flex;
flex-flow: wrap;
flex: 0 0 auto;
-webkit-box-align: start;
align-items: start;
-webkit-box-pack: start;
justify-content: flex-start;
gap: 10px;
}
.#{prefix}-header-details{
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
flex: 1 1 0%;
}
.#{prefix}-big-title { .#{prefix}-big-title {
font-size: 60px; font-size: 60px;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
margin-bottom: 25px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.#{prefix}-logo-wrap { .#{prefix}-logo-wrap img {
height: 120px; height: auto;
width: 120px; width: auto;
position: absolute; max-width: 400px;
right: 26px; max-height: 160px;
top: 26px;
overflow: hidden;
} }
.#{prefix}-terms-list { .#{prefix}-terms-list {
display: flex; display: flex;
@@ -132,22 +148,27 @@ block head
block content block content
div(class=`${prefix}-root`) div(class=`${prefix}-root`)
div(class=`${prefix}-big-title`) Credit Note
if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`)
img(src=companyLogoUri alt=`Company Logo`)
div(class=`${prefix}-terms-list`) //- Header (includes big title, details and logo)
if showCreditNoteNumber div(class=`${prefix}-header`)
div(class=`${prefix}-terms-item`) //- Header details (includes big title and details)
div(class=`${prefix}-terms-item__label`) #{creditNoteNumberLabel}: div(class=`${prefix}-header-details`)
div(class=`${prefix}-terms-item__value`) #{creditNoteNumebr} div(class=`${prefix}-big-title`) Credit Note
if showCreditNoteDate div(class=`${prefix}-terms-list`)
div(class=`${prefix}-terms-item`) if showCreditNoteNumber
div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}: div(class=`${prefix}-terms-item`)
div(class=`${prefix}-terms-item__value`) #{creditNoteDate} div(class=`${prefix}-terms-item__label`) #{creditNoteNumberLabel}:
div(class=`${prefix}-terms-item__value`) #{creditNoteNumebr}
if showCreditNoteDate
div(class=`${prefix}-terms-item`)
div(class=`${prefix}-terms-item__label`) #{creditNoteDateLabel}:
div(class=`${prefix}-terms-item__value`) #{creditNoteDate}
if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`)
img(src=companyLogoUri alt=`Company Logo`)
div(class=`${prefix}-address-section`) div(class=`${prefix}-address-section`)
if showCompanyAddress if showCompanyAddress

77
packages/server/resources/views/modules/estimate-regular.pug
View File

@@ -10,21 +10,37 @@ block head
position: relative; position: relative;
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color); box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
} }
.#{prefix}-header {
box-sizing: border-box;
display: flex;
flex-flow: wrap;
flex: 0 0 auto;
-webkit-box-align: start;
align-items: start;
-webkit-box-pack: start;
justify-content: flex-start;
gap: 10px;
}
.#{prefix}-header-details {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
flex: 1 1 0%;
}
.#{prefix}-big-title { .#{prefix}-big-title {
font-size: 60px; font-size: 60px;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
margin-bottom: 25px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.#{prefix}-logo-wrap { .#{prefix}-logo-wrap img {
height: 120px; height: auto;
width: 120px; width: auto;
position: absolute; max-width: 400px;
right: 26px; max-height: 160px;
top: 26px;
overflow: hidden;
} }
.#{prefix}-terms { .#{prefix}-terms {
display: flex; display: flex;
@@ -131,26 +147,35 @@ block head
block content block content
div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`) div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
h1(class=`${prefix}-big-title`) Estimate
if showCompanyLogo && companyLogoUri //- Header (invluces big title, details and logo)
div(class=`${prefix}-logo-wrap`) div(class=`${prefix}-header`)
img(alt="Company logo", src=companyLogoUri)
//- Terms List //- Header details (includes big title and details )
div(class=`${prefix}-terms`) div(class=`${prefix}-header-details`)
if showEstimateNumber h1(class=`${prefix}-big-title`) Estimate
div(class=`${prefix}-terms-item`)
div(class=`${prefix}-terms-item__label`) #{estimateNumberLabel} //- Terms List
div(class=`${prefix}-terms-item__value`) #{estimateNumebr} div(class=`${prefix}-terms`)
if showEstimateDate if showEstimateNumber
div(class=`${prefix}-terms-item`) div(class=`${prefix}-terms-item`)
div(class=`${prefix}-terms-item__label`) #{estimateDateLabel} div(class=`${prefix}-terms-item__label`) #{estimateNumberLabel}
div(class=`${prefix}-terms-item__value`) #{estimateDate} div(class=`${prefix}-terms-item__value`) #{estimateNumebr}
if showExpirationDate
div(class=`${prefix}-terms-item`) if showEstimateDate
div(class=`${prefix}-terms-item__label`) #{expirationDateLabel} div(class=`${prefix}-terms-item`)
div(class=`${prefix}-terms-item__value`) #{expirationDate} div(class=`${prefix}-terms-item__label`) #{estimateDateLabel}
div(class=`${prefix}-terms-item__value`) #{estimateDate}
if showExpirationDate
div(class=`${prefix}-terms-item`)
div(class=`${prefix}-terms-item__label`) #{expirationDateLabel}
div(class=`${prefix}-terms-item__value`) #{expirationDate}
//- Company logo
if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`)
img(alt="Company logo", src=companyLogoUri)
//- Addresses (Group section) //- Addresses (Group section)
div(class=`${prefix}-addresses`) div(class=`${prefix}-addresses`)

77
packages/server/resources/views/modules/invoice-standard.pug
View File

@@ -10,21 +10,37 @@ block head
position: relative; position: relative;
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color); box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
} }
.#{prefix}-header{
box-sizing: border-box;
display: flex;
flex-flow: wrap;
flex: 0 0 auto;
-webkit-box-align: start;
align-items: start;
-webkit-box-pack: start;
justify-content: flex-start;
gap: 10px;
}
.#{prefix}-header-details{
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
flex: 1 1 0%;
}
.#{prefix}-big-title { .#{prefix}-big-title {
font-size: 60px; font-size: 60px;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
margin-bottom: 25px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.#{prefix}-logo-wrap { .#{prefix}-logo-wrap img {
height: 120px; height: auto;
width: 120px; width: auto;
position: absolute; max-width: 400px;
right: 26px; max-height: 160px;
top: 26px;
overflow: hidden;
} }
.#{prefix}-details { .#{prefix}-details {
display: flex; display: flex;
@@ -138,30 +154,35 @@ block head
block content block content
//- block head //- block head
div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`) div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
//- Title and company logo
h1(class=`${prefix}-big-title`) Invoice
if showCompanyLogo && companyLogoUri //- Header (includes big title, details and logo )
div(class=`${prefix}-logo-wrap`) div(class=`${prefix}-header`)
img(alt="Company logo", src=companyLogoUri) //- Header details (includes big title and details )
div(class=`${prefix}-header-details`)
//- Title and company logo
h1(class=`${prefix}-big-title`) Invoice
//- Invoice details //- Invoice details
div(class=`${prefix}-details`) div(class=`${prefix}-details`)
if showInvoiceNumber if showInvoiceNumber
div(class=`${prefix}-detail`) div(class=`${prefix}-detail`)
div(class=`${prefix}-detail__label`) #{invoiceNumberLabel} div(class=`${prefix}-detail__label`) #{invoiceNumberLabel}
div(class=`${prefix}-detail__value`) #{invoiceNumber} div(class=`${prefix}-detail__value`) #{invoiceNumber}
if showDateIssue if showDateIssue
div(class=`${prefix}-detail`) div(class=`${prefix}-detail`)
div(class=`${prefix}-detail__label`) #{dateIssueLabel} div(class=`${prefix}-detail__label`) #{dateIssueLabel}
div(class=`${prefix}-detail__value`) #{dateIssue} div(class=`${prefix}-detail__value`) #{dateIssue}
if showDueDate if showDueDate
div(class=`${prefix}-detail`) div(class=`${prefix}-detail`)
div(class=`${prefix}-detail__label`) #{dueDateLabel} div(class=`${prefix}-detail__label`) #{dueDateLabel}
div(class=`${prefix}-detail__value`) #{dueDate} div(class=`${prefix}-detail__value`) #{dueDate}
//- Company logo
if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`)
img(alt="Company logo", src=companyLogoUri)
//- Address section //- Address section
div(class=`${prefix}-address-root`) div(class=`${prefix}-address-root`)

0
packages/server/resources/views/modules/payment-receipt-regular.pug
View File

65
packages/server/resources/views/modules/payment-receive-standard.pug
View File

@@ -10,22 +10,38 @@ block head
font-size: 12px; font-size: 12px;
position: relative; position: relative;
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color); box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
}
.#{prefix}-header{
box-sizing: border-box;
display: flex;
flex-flow: wrap;
flex: 0 0 auto;
-webkit-box-align: start;
align-items: start;
-webkit-box-pack: start;
justify-content: flex-start;
gap: 10px;
}
.#{prefix}-header-details{
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
flex: 1 1 0%;
} }
.#{prefix}-big-title{ .#{prefix}-big-title{
font-size: 60px; font-size: 60px;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
margin-bottom: 25px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.#{prefix}-logo-wrap{ .#{prefix}-logo-wrap img {
height: 120px; height: auto;
width: 120px; width: auto;
position: absolute; max-width: 400px;
right: 26px; max-height: 160px;
top: 26px;
overflow: hidden;
} }
.#{prefix}-terms-list{ .#{prefix}-terms-list{
display: flex; display: flex;
@@ -120,23 +136,26 @@ block head
} }
block content block content
div(class=`${prefix}-root`) div(class=`${prefix}-root`)
div(class=`${prefix}-big-title`) Payment //- Header (includes big title, details and logo )
div(class=`${prefix}-header`)
//- Header details (includes big title and details )
div(class=`${prefix}-header-details`)
div(class=`${prefix}-big-title`) Payment
div(class=`${prefix}-terms-list`)
if showPaymentReceivedNumber
div(class=`${prefix}-terms-item`)
div(class=`${prefix}-terms-item__label`) #{paymentReceivedNumberLabel}
div(class=`${prefix}-terms-item__value`) #{paymentReceivedNumebr}
if showCompanyLogo && companyLogoUri if showPaymentReceivedDate
div(class=`${prefix}-logo-wrap`) div(class=`${prefix}-terms-item`)
img(src=companyLogoUri alt="Company Logo") div(class=`${prefix}-terms-item__label`) #{paymentReceivedDateLabel}
div(class=`${prefix}-terms-item__value`) #{paymentReceivedDate}
div(class=`${prefix}-terms-list`)
if showPaymentReceivedNumber
div(class=`${prefix}-terms-item`)
div(class=`${prefix}-terms-item__label`) #{paymentReceivedNumberLabel}
div(class=`${prefix}-terms-item__value`) #{paymentReceivedNumebr}
if showPaymentReceivedDate if showCompanyLogo && companyLogoUri
div(class=`${prefix}-terms-item`) div(class=`${prefix}-logo-wrap`)
div(class=`${prefix}-terms-item__label`) #{paymentReceivedDateLabel} img(src=companyLogoUri alt="Company Logo")
div(class=`${prefix}-terms-item__value`) #{paymentReceivedDate}
div(class=`${prefix}-addresses`) div(class=`${prefix}-addresses`)
if showCompanyAddress if showCompanyAddress
div(class=`${prefix}-address-from`) div(class=`${prefix}-address-from`)

0
packages/server/resources/views/modules/purchase-invoice-regular.pug
View File

69
packages/server/resources/views/modules/receipt-regular.pug
View File

@@ -10,19 +10,33 @@ block head
position: relative; position: relative;
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color); box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
} }
.#{prefix}-logo-wrap { .#{prefix}-header{
height: 120px; box-sizing: border-box;
width: 120px; display: flex;
position: absolute; flex-flow: wrap;
right: 26px; flex: 0 0 auto;
top: 26px; align-items: start;
overflow: hidden; justify-content: flex-start;
gap: 10px;
}
.#{prefix}-header-details{
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
flex: 1 1 0%;
}
.#{prefix}-logo-wrap img {
height: auto;
width: auto;
max-width: 400px;
max-height: 160px;
} }
.#{prefix}-big-title { .#{prefix}-big-title {
font-size: 60px; font-size: 60px;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
margin-bottom: 25px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
@@ -124,25 +138,30 @@ block head
block content block content
//- block head //- block head
div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`) div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
//- Title and company logo
h1(class=`${prefix}-big-title`) Receipt
//- Company Logo //- Header (includes big title, details and logo )
if showCompanyLogo && companyLogoUri div(class=`${prefix}-header`)
div(class=`${prefix}-logo-wrap`) //- Header details (includes big title and details )
img(src=companyLogoUri alt=`Company Logo`) div(class=`${prefix}-header-details`)
//- Title and company logo
h1(class=`${prefix}-big-title`) Receipt
//- Terms List //- Terms List
div(class=`${prefix}-terms-list`) div(class=`${prefix}-terms-list`)
if showReceiptNumber if showReceiptNumber
div(class=`${prefix}-terms-item`) div(class=`${prefix}-terms-item`)
span(class=`${prefix}-terms-item__label`)= receiptNumberLabel span(class=`${prefix}-terms-item__label`)= receiptNumberLabel
span(class=`${prefix}-terms-item__value`)= receiptNumber span(class=`${prefix}-terms-item__value`)= receiptNumber
if showReceiptDate
div(class=`${prefix}-terms-item`) if showReceiptDate
span(class=`${prefix}-terms-item__label`)= receiptDateLabel div(class=`${prefix}-terms-item`)
span(class=`${prefix}-terms-item__value`)= receiptDate span(class=`${prefix}-terms-item__label`)= receiptDateLabel
span(class=`${prefix}-terms-item__value`)= receiptDate
//- Company logo
if showCompanyLogo && companyLogoUri
div(class=`${prefix}-logo-wrap`)
img(src=companyLogoUri alt=`Company Logo`)
//- Address Section //- Address Section
div(class=`${prefix}-address-section`) div(class=`${prefix}-address-section`)