fix: update styles to work with wkhtmltopdf rendering

This commit is contained in:
khushi8112
2025-09-19 02:14:32 +05:30
parent 6703610596
commit 39b6aab714
2 changed files with 456 additions and 403 deletions

View File

@@ -2,23 +2,26 @@
print_heading_template=None) -%} {% if letter_head and not no_letterhead %} print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
<div class="letter-head">{{ letter_head }}</div> <div class="letter-head">{{ letter_head }}</div>
{% endif %} {% if print_heading_template %} {{ frappe.render_template(print_heading_template, {"doc":doc}) }} {% endif %} {% if print_heading_template %} {{ frappe.render_template(print_heading_template, {"doc":doc}) }}
{% endif %} {%- if doc.meta.is_submittable and doc.docstatus==2 -%} {% endif %} {%- endmacro -%} {% for page in layout %}
<div class="text-center" document-status="cancelled">
<h4 style="margin: 0px; color: red">{{ _("CANCELLED") }}</h4>
</div>
{%- endif -%} {%- endmacro -%} {% for page in layout %}
<div class="page-break invoice-page"> <div class="page-break invoice-page">
<div {% if print_settings.repeat_header_footer %} id="header-html" class="hidden-pdf" {% endif %}> <div {% if print_settings.repeat_header_footer %} id="header-html" class="hidden-pdf" {% endif %}>
{{ add_header(loop.index, layout|len, doc, letter_head, no_letterhead, footer, print_settings) }} {{ add_header(loop.index, layout|len, doc, letter_head, no_letterhead, footer, print_settings) }}
</div> </div>
<style> <style>
.letter-head {
padding-top: 12px !important;
/* margin-top: 0px !important; */
}
.invoice-page { .invoice-page {
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
font-size: 13px;
color: #171717; color: #171717;
} }
.print-format-body {
padding: 30px 12px 12px 12px !important;
}
.title { .title {
color: #7c7c7c !important; color: #7c7c7c !important;
} }
@@ -133,27 +136,39 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
} }
.print-format { .print-format {
padding: 24px; color: #171717;
line-height: 1.5; font-size: 14px;
letter-spacing: 0.14px; font-style: normal;
font-weight: 420;
line-height: 21px;
padding: 0px !important;
margin-left: 0mm !important;
margin-right: 0mm !important;
} }
.print-format td{ .letter-head-footer {
margin-top: 0px !important;
}
.print-format-body td {
padding: 8px 8px !important; padding: 8px 8px !important;
} }
.tax-table td, .items-table td{ .tax-table td,
.items-table td {
height: 40px; height: 40px;
} }
.tax-table thead td, .items-table thead td{ .tax-table thead td,
.items-table thead td {
height: 32px; height: 32px;
} }
</style> </style>
<div class="print-format-body">
<table class="info-table col-xs-12" style="width: 100%"> <table class="info-table col-xs-12" style="width: 100%">
<tr> <tr>
<td class="col-xs-7" style="padding: 0 !important;"> <td class="col-xs-7" style="padding: 0 !important">
<div class="title col-xs-5 p-0"> <div class="title col-xs-5 p-0">
<div class="info-text">Customer Name:</div> <div class="info-text">Customer Name:</div>
<div class="info-text">Bill to:</div> <div class="info-text">Bill to:</div>
@@ -164,7 +179,7 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
</div> </div>
</td> </td>
<td class="col-xs-5" style="padding: 0 !important;"> <td class="col-xs-5" style="padding: 0 !important">
<div class="title col-xs-6 p-0"> <div class="title col-xs-6 p-0">
<div class="info-text">Invoice Number:</div> <div class="info-text">Invoice Number:</div>
<div class="info-text">Invoice Date:</div> <div class="info-text">Invoice Date:</div>
@@ -225,11 +240,18 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
</tbody> </tbody>
</table> </table>
<table class="totals mt-16" style="width: 100%;"> <table class="totals mt-16" style="width: 100%">
<tr> <tr>
<td style="width: 65%">&nbsp;</td> <td style="width: 65%">&nbsp;</td>
<td style="width: 35%; vertical-align: top; text-align: right; padding: 0px 0px 6px 0px !important"> <td
style="
width: 35%;
vertical-align: top;
text-align: right;
padding: 0px 0px 6px 0px !important;
"
>
<table style="width: 100%; border-collapse: collapse"> <table style="width: 100%; border-collapse: collapse">
<tr class="row-divider"> <tr class="row-divider">
<td class="text-right title">{{ _("Sub Total:") }}</td> <td class="text-right title">{{ _("Sub Total:") }}</td>
@@ -241,24 +263,28 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
</td> </td>
<td class="text-right">{{ doc.get_formatted("discount_amount", doc) }}</td> <td class="text-right">{{ doc.get_formatted("discount_amount", doc) }}</td>
</tr> </tr>
{% set tax_rate = doc.taxes | selectattr("tax_amount") | sum(attribute="rate") %} {% if {% set tax_rate = doc.taxes | selectattr("tax_amount") | sum(attribute="rate") %} {%
tax_rate > 0 %} if tax_rate > 0 %}
<tr class="row-divider"> <tr class="row-divider">
<td class="text-right title">{{ _("Tax") }} ({{ tax_rate }}%):</td> <td class="text-right title">{{ _("Tax") }} ({{ tax_rate }}%):</td>
<td class="text-right">{{ doc.get_formatted("total_taxes_and_charges", doc) }}</td> <td class="text-right">
{{ doc.get_formatted("total_taxes_and_charges", doc) }}
</td>
</tr> </tr>
{% endif %} {% endif %}
</table> </table>
</td> </td>
</tr> </tr>
<tr style="border-bottom: 1px solid #ededed;"> <tr style="border-bottom: 1px solid #ededed">
<td colspan="2" style="padding: 0 0 6px 0 !important"> <td colspan="2" style="padding: 0 0 6px 0 !important">
<div class="highlight-bg" style="border-radius: 12px"> <div class="highlight-bg" style="border-radius: 12px">
<table style="width: 100%; border-collapse: collapse"> <table style="width: 100%; border-collapse: collapse">
<tr> <tr>
<td class="text-left mw-400"> <td class="text-left mw-400">
<div class="text-capitalize"><span class="title"> {{ _("In Words: ") }}</span>{{ doc.in_words }}</div> <div class="text-capitalize">
<span class="title"> {{ _("In Words: ") }}</span>{{ doc.in_words }}
</div>
</td> </td>
<td class="text-right"><b>{{ _("Grand Total:") }}</b></td> <td class="text-right"><b>{{ _("Grand Total:") }}</b></td>
<td class="text-right"> <td class="text-right">
@@ -309,4 +335,5 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div>
{% endfor %} {% endfor %}

View File

@@ -13,10 +13,21 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
</div> </div>
<style> <style>
.letter-head {
margin-top: 12px !important;
}
.invoice-wrapper { .invoice-wrapper {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
color: var(--black-overlay-700); color: var(--black-overlay-700);
padding: 12px; }
.print-format-body {
padding: 30px 12px 12px 12px !important;
}
body {
margin-bottom: 0mm !important;
padding: 0px !important;
} }
table.info-table, table.info-table,
@@ -143,16 +154,26 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
} }
.print-format { .print-format {
color: var(--ink-gray-8, #171717); color: #171717;
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: 420; font-weight: 420;
line-height: 21px; line-height: 21px;
padding: 5px; padding: 0px;
letter-spacing: 0.14px; letter-spacing: 0.14px;
margin-left: 0mm !important;
margin-right: 0mm !important;
}
.letter-head-footer {
margin-top: 0px !important;
}
.print-heading {
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-bottom: 0px !important;
} }
</style> </style>
<div class="print-format-body">
<table class="info-table mb-20"> <table class="info-table mb-20">
<tr> <tr>
<td style="width: 50%"> <td style="width: 50%">
@@ -171,10 +192,11 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
</td> </td>
</tr> </tr>
<tr> <tr>
{% set address = (doc.address_display) %} {% if address and address.rstrip().endswith("<br />") %} {% set {% set address = (doc.address_display) %} {% if address and address.rstrip().endswith("<br />")
address = address[:-5] %} {% endif %} {% set company_address_display = %} {% set address = address[:-5] %} {% endif %} {% set company_address_display =
(doc.company_address_display) %} {% if company_address_display and company_address_display.rstrip().endswith("<br />") %} {% (doc.company_address_display) %} {% if company_address_display and
set company_address_display = company_address_display[:-5] %} {% endif %} company_address_display.rstrip().endswith("<br />") %} {% set company_address_display =
company_address_display[:-5] %} {% endif %}
<td><span class="heading">{{ _("Bill From") }}:</span><br />{{ address }}</td> <td><span class="heading">{{ _("Bill From") }}:</span><br />{{ address }}</td>
<td><span class="heading">{{ _("Bill To") }}:</span><br />{{ company_address_display }}</td> <td><span class="heading">{{ _("Bill To") }}:</span><br />{{ company_address_display }}</td>
</tr> </tr>
@@ -205,7 +227,9 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
<td>{{ item.item_name }}</td> <td>{{ item.item_name }}</td>
<td class="text-right text-dark">{{ item.get_formatted("qty", 0) }} {{ item.uom }}</td> <td class="text-right text-dark">{{ item.get_formatted("qty", 0) }} {{ item.uom }}</td>
<td class="text-right text-dark">{{ item.get_formatted("net_rate", doc) }}</td> <td class="text-right text-dark">{{ item.get_formatted("net_rate", doc) }}</td>
<td class="text-right" style="color: #171717">{{ item.get_formatted("net_amount", doc) }}</td> <td class="text-right" style="color: #171717">
{{ item.get_formatted("net_amount", doc) }}
</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
@@ -265,10 +289,11 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
<tr> <tr>
<td class="text-left">{{ item.gst_hsn_code }}</td> <td class="text-left">{{ item.gst_hsn_code }}</td>
<td class="text-right">{{ item.get_formatted("base_net_amount", doc) }}</td> <td class="text-right">{{ item.get_formatted("base_net_amount", doc) }}</td>
{% for row in doc.taxes %} {% set tax_amount = item.base_net_amount * (row.rate / 100) %} {% for row in doc.taxes %} {% set tax_amount = item.base_net_amount * (row.rate / 100)
%}
<td class="text-right"> <td class="text-right">
({{ (row.rate) }}%) {{ frappe.format_value(tax_amount, {"fieldtype": "Currency"}, doc) ({{ (row.rate) }}%) {{ frappe.format_value(tax_amount, {"fieldtype": "Currency"},
}} doc) }}
</td> </td>
{% endfor %} {% endfor %}
</tr> </tr>
@@ -286,4 +311,5 @@ print_heading_template=None) -%} {% if letter_head and not no_letterhead %}
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div>
{% endfor %} {% endfor %}