customising django allauth templates - django

mostly trying to modify the email verification that is sent on sign-up following the allauth documentation the sent email is modified when i change email_confirmation_message.txt but when i want to use an html representaion the documentation says to use email_confirmation_message.html but it is not recognized and instead it sends the default email or if i include both it only sneds the text one and ignores the html
email_confirmation_message.html :
{% extends "account/email/base_message.txt" %}
{% load account %}
{% load i18n %}
{% block content %}{% autoescape off %}{% user_display user as user_display %}{% blocktrans with site_name=current_site.name site_domain=current_site.domain %}
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Snippet - GoSNippets</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' rel='stylesheet'>
<link href='' rel='stylesheet'>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js'></script>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js'></script>
</head>
<body oncontextmenu='return false' class='snippet-body'>
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> We're thrilled to have you here! Get ready to dive into your new account. </div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">We're excited to have you get started on {{ site_domain }}. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#FFA73B">Confirm Account</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr> <!-- COPY -->
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 0px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">If that doesn't work, copy and paste the following link in your browser:</p>
</td>
</tr> <!-- COPY -->
</table>
<script type='text/javascript'></script>
</body>
</html>
{% endblocktrans %}{% endautoescape %}{% endblock %}

ok,so i figured it out. you have to also change email_confirmation_signup_message.txt
to email_confirmation_signup_message.html and inside it change {% include "account/email/email_confirmation_message.txt" %} to {% include "account/email/email_confirmation_message.html" %}

Related

= and 3D Character in html | non-ASCII characters | quoted-printable | Django email templates

Django 2, Python 3.
On sending user signup emails using Django default authentication. The sent email contains corrupted html.
contains 3D with each attribute's equal sign.
style=3D"margin:
contains = with each starting new line.
padd=
ing-top:20px;
Sample Code:
<div style="padding: 40px; background: #fff;">
<table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="border-bottom:1px solid #f6f6f6;">
<h1 style="font-size:14px; font-family:arial; margin:0px; font-weight:bold;">{% trans 'Greetings!,' %}</h1>
<p style="margin-top:0px; color:#bbbbbb;">{% trans 'Here are your account activation instructions.' %}</p>
</td>
</tr>
<tr>
<td style="padding:10px 0 30px 0;">
<p>{% trans 'Thank you for joining us.' %}</p>
<p>{% trans 'To activate your profile, please follow this link:' %}</p>
<center>
{% trans 'Activate Profile' %}
</center>
<b>- {% trans 'Thanks (project team)' %}</b> </td>
</tr>
<tr>
<td style="border-top:1px solid #f6f6f6; padding-top:20px; color:#777">{% trans 'If the button above does not work, try copying and pasting the URL into your browser. If you continue to have problems, please feel free to contact us at info#project.com' %}</td>
</tr>
</tbody>
</table>
</div>
Generated HTML template:
<div style=3D"padding: 40px; background: #fff;">
<table style=3D"width: 100%;" cellspacing=3D"0" cellpadding=
=3D"0" border=3D"0">
<tbody>
<tr>
<td style=3D"border-bottom:1px solid #f6f6f6;">
<h1 style=3D"font-size:14px; font-family:ar=
ial; margin:0px; font-weight:bold;">Greetings!,</h1>
<p style=3D"margin-top:0px; color:#bbbbbb;"=
>Here are your account activation instructions.</p>
</td>
</tr>
<tr>
<td style=3D"padding:10px 0 30px 0;">
<p>Thank you for joining us.</p>
<p>To activate your profile, please follow =
this link:</p>
<center>
<a href=3D"http://localhost:8000/accoun=
ts/activate/uyi90WsYyvLKmn4wwwqq/" style=3D"display: inline-block; padding:=
11px 30px; margin: 20px 0px 30px; font-size: 15px; color: #fff; background=
: #4fc3f7; border-radius: 60px; text-decoration:none;">Activate Profile</a>
</center>
<b>- Thanks (project team)</b> </td>
</tr>
<tr>
<td style=3D"border-top:1px solid #f6f6f6; padd=
ing-top:20px; color:#777">If the button above does not work, try copying an=
d pasting the URL into your browser. If you continue to have problems, plea=
se feel free to contact us at info#project.com</td>
</tr>
</tbody>
</table>
</div>
Please help resolve/identify the issue.

Oracle11g Regex Non-capturing Groups

Multi-currency REGEXP_SUBSTR Oracle11g
First time posting a question here, so I hope I don't muck it up too badly.
I created a query that pulls various customer order details including charged price, product list price and the big one, the price that was sent to customers via reminder emails.
Using REGEXP_SUBSTR I am able to match all of the prices from the emails HTML content in various currencies but I run into an issue with the output for certain Price currency abbreviation combinations lacking commas or periods: i.e. 123 kr, 999 Pesos or 1 050 Kč.
How can I make this scenario above match the output of the other price formats?
I pulled much of my "inspiration" from Gary's answer here: Regex currency validation.
Datasource HTML
Desired values starting at <!-- START Price Exp.. -->:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thank you for using us</title>
<style type="text/css">
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
BODY {
font-family: OpenSans, Arial, Helvetica, sans-serif;
font-size:13px;
color:#555555;
}
TD {
font-family: OpenSans, Arial, Helvetica, sans-serif;
font-size:13px;
color:#555555;
vertical-align: top;
}
A {
color: #f48024;
}
IMG {
display:block;
border: none;
}
H1 {
font-size: 18pt;
}
H2 {
font-size: 15pt;
}
H1, H2, H3, P, UL, LI {
margin: 0;
padding: 0;
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #eeeeee" bgcolor="#eeeeee">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; ">
<tbody>
<tr>
<td align="center" width="100%" >
<!-- TOP-->
<table bgcolor="#eeeeee" border="0" cellpadding="0" cellspacing="0" style="background-color: #eeeeee; width:100%; max-width:900px; ">
<tbody>
<tr>
<td height="34" style="font-size: 1px;"><!-- cell --></td>
</tr>
</tbody>
</table>
<!-- END TOP-->
<!-- LOGO -->
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#fff" style="width:100%; background-color: #fff; max-width:900px;">
<tr>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#fff" style="background-color: #fff; text-align: center; max-width:650px;">
<tr>
<td align="center" height="40" bgcolor="#fff" style="background-color: #fff; vertical-align: middle; text-align: center; ">
<img align="center" style="" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded" style="display:block" alt="" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END LOGO-->
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#fff" style="width:100%; max-width:900px; background-color: #fff;">
<tr>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#fff" style="width:100%; background-color: #fff; max-width:800px; padding-left:10px; padding-right:10px;">
<tr>
<td height="30" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: center; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:22px; color:#41424e; line-height: 1.4"><b>Example Template</b></p>
</td>
</tr>
<tr>
<td height="34" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#767683; line-height: 1.4">Dear customername,</p>
</td>
</tr>
<tr>
<td height="20" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#767683; line-height: 1.4">Your productname - 1PC has been successfully renewed.</p>
</td>
</tr>
<tr>
<td height="20" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#767683; line-height: 1.4">Details of your sub below.</p>
</td>
</tr>
<tr>
<td height="40" style="font-size: 1px;"><!-- cell --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- sum-->
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#F2F2F6" style="width:100%; background-color: #F2F2F6; max-width:900px;">
<tr>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#F2F2F6" style="width:100%; background-color: #F2F2F6; max-width:800px; padding-left:10px; padding-right:10px;">
<tr>
<td height="34" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: center; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#41424e; line-height: 1.4"><b>Your Auto-Renewal Sub</b></p>
</td>
</tr>
<tr>
<td height="20" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#42ba8f; line-height: 1.4"><b>Product</b></p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">Productname - 1 PC</p>
</td>
</tr>
<tr>
<td height="20" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#42ba8f; line-height: 1.4"><b>Order ID</b></p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">12131415161</p>
</td>
</tr>
<tr>
<td height="20" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#42ba8f; line-height: 1.4"><b>Exp Prices charged</b></p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<!--START Price Exp, templates could be in numerous different languages but info like i.e. customername, productname, Order ID, Tracking IDs will always use the same format. -->
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">$69.99 (a tax message)</p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">123 kr (b tax message)</p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">999 Pesos (c tax message)</p>
</td>
</tr>
<!--END Price Exps -->
<tr>
<td height="20" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#42ba8f; line-height: 1.4"><b>Automatically renewed</b></p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">May 20, 2018</p>
</td>
</tr>
<tr>
<td height="42" style="font-size: 1px;"><!-- cell --></td>
</tr>
</table>
</td>
</tr>
</table>
<!--END sum -->
<!-- white-->
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#fff" style="width:100%; max-width:900px; background-color: #fff;">
<tr>
<td height="15" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#fff" style="width:100%; background-color: #fff; max-width:800px; padding-left:10px; padding-right:10px;">
<tr>
<td height="30" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">If you’d like to check your order status, please sign in to company.com/orders with the login credentials below.</p>
</td>
</tr>
<tr>
<td height="20" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4"><b>Order ID:</b> 12131415161</p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4"><b>Password:</b> stAcKoverFlOwrocks</p>
</td>
</tr>
<tr>
<td height="20" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#42ba8f; line-height: 1.4"><b>Your Plan</b></p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4"><strong>Auto-Renewal Terms</strong><p>By completing your purchase, you have authorized us to do a bunch of legal stuff.</p>
</td>
</tr>
<tr>
<td height="30" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4"><b>Need help?</b></p>
</td>
</tr>
<tr>
<td height="1" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td style="vertical-align: middle;">
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">company.com/help</p>
</td>
</tr>
<tr>
<td height="30" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#41424e; line-height: 1.4">Thanks for trusting us.</p>
</td>
</tr>
<tr>
<td height="34" style="font-size: 1px;"><!-- cell --></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END white -->
<!--FOOTER-->
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#777684" style="width:100%; background-color: #E7E7EF; max-width:900px;">
<tr>
<td height="30" style="font-size: 1px;"><!-- cell --></td>
</tr>
<tr>
<td>
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#777684" style="width:100%; background-color: #E7E7EF; max-width:900px;">
<tr>
<td>
<table><tr><td>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#767683; line-height: 1.4">Trouble installing? <u>Visit FAQ</u></p>
<p style="text-align: left; margin:0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#767683; line-height: 1.4">Curious for more? <u>Find more</u></p>
</td></tr></table>
</td>
<td>
<table align="right" >
</tr> </table>
</td>
</tr>
<tr>
<td height="30" style="font-size: 1px;"><!-- cell --></td>
</tr>
</table>
</td>
</tr>
</table>
<!--END FOOTER -->
</td>
</tr>
</tbody>
</table>
</body>
</html>
REGEX
(NT\$|SAR)\s(\d{2,5})|\d{1,4}([.,]\d{3})*([\s.,]\d{2,3}|[^\W]\d+(\d{1,4})*\s(kr|zł|Pesos|Kč|Ft|บาท|SAR|₪))
Matches all
1.4">$19.99 (some random text)
1.4">R$20.00
1.4">20.00€
1.4">€25,99
1.4">£15.99
1.4">123 kr
1.4">1234 Ft
1.4">999 Pesos
Output
19.99
20.00
20.00
25.99
15.99
123 kr
1234 Ft
999 Pesos
The last three examples should not have a space and/or any letters following the numbers.
How can I remove them from the output but retain the numbers?
I realize this is likely due to the multiple capture groups I have, so I see three potential solutions:
Refine the Regex to eliminate the overuse of groups (I am not skilled enough to figure this out)...
Somehow write Regex non-capturing groups that result in the desired output. I have sadly learned that (?:) simply doesn't work.
Utilize the SQL function parameters to select subexpressions from REGEXP_SUBSTR. However, this doesn't appear to allow more than one subexpression in the output.
SQL
SELECT
REPLACE(REPLACE(REGEXP_SUBSTR(nnc.MESSAGE, '(NT\$|SAR)\s(\d{2,5})|\d{1,4}([.,]\d{3})*([\s.,]\d{2,3}|[^\W]\d+(\d{1,4})*\s(kr|zł|Pesos|Kč|Ft|บาท|SAR|₪))'),',','.'),' ','') AS EMAIL_PRICE_SENT
FROM tablename
WHERE clause;
That is the full statement with a couple nested REPLACE functions to format the output to the system format.
See Regex in action here: Regex 101 Link.
I know this is the wrong language so it will not provide a 100% accurate test but I find it very helpful before running it against the DB. I am always open for better tool suggestions!
I have spent too much time than I am proud of on this, so any assistance would be much appreciated.
Thanks,
Nick

Selenium Python how would verify a html table contains no data, the table is empty

I have a HTML table on a webpage and the table is empty. It contains no data as the data has been deleted by a previous test.
For this test I would like to check, verify the html table is empty, it contains no data.
What is the best way to check this? I was thinking of using an Xpath like the following:
//table[#id="data_configuration_edit_data_object_tab_address_rules_tb_level_rules_locality"]//tr//td//div[text()=""]
The HTML snippet is:
<table id="data_configuration_edit_data_object_tab_address_rules_tb_level_rules_locality" class="GFNQNVHJE border" cellspacing="0" __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true" style="min-width: 350px;">
<thead aria-hidden="false">
<colgroup>
<tbody style="display: none;"/>
<tbody>
<tr>
<td align="center" colspan="2">
<div>
<div class="" style="width: 100%; height: 100%; padding: 0px; margin: 0px;" aria-hidden="false">
<div class="" style="width: 100%; height: 100%;" aria-hidden="false">
<div class="gwt-Label">No data to display.</div>
</div>
</div>
<div style="width: 100%; height: 100%; padding: 0px; margin: 0px; display: none;" aria-hidden="true">
<div class="GFNQNVHBE" style="width: 100%; height: 100%; display: none;" aria-hidden="true">
<div class="gwt-Label"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot style="display: none;" aria-hidden="true"/>
</table>
Thanks, Riaz
Assuming that the only visible text in the <table> when it is empty is "No data to display.", then you can simplify the XPath as follow (formatted for readability) :
//table[
#id="data_configuration_edit_data_object_tab_address_rules_tb_level_rules_locality"
and
.='No data to display.'
]
xpatheval demo

Django reportlab insert pagebreak html-side

I'm trying to insert a pagebreak after a table in a pdf I'm generating with reportlab, I'm using the following function to generate the pdf:
def render_to_pdf(template_src, context_dict):
template = get_template(template_src)
context = Context(context_dict)
html = template.render(context)
result = StringIO.StringIO()
pdf = pisa.pisaDocument(StringIO.StringIO(html.encode("ISO-8859-1")), dest=result, link_callback=fetch_resources)
if not pdf.err:
return result.getvalue()
return HttpResponse('We had some errors<pre>%s</pre>' % escape(html))
def fetch_resources(uri, rel):
return os.path.join(MEDIA_ROOT, uri.replace(MEDIA_URL, ""))
I'm calling the function from a view this way:
#login_required(login_url=reverse('accounts:login_box'))
def quote_pdf(request, quote_id):
data_pdf = {}
quote = get_object_or_404(Quote, id=quote_id)
data_pdf['pagesize'] = 'letter'
data_pdf['quote'] = quote
pdf = render_to_pdf('rents/quote_pdf.html', data_pdf)
return HttpResponse(pdf, mimetype='application/pdf')
And this is my template (quote_pdf.html)
{% load humanize compress verbatim %}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Cotización No. {{ quote.id }} Flasherz.co/alquiler</title>
<style type="text/css">
#page {
size: {{ pagesize }};
margin: 1cm;
#frame footer {
-pdf-frame-content: footerContent;
bottom: 0cm;
margin-left: 0cm;
margin-right: 0cm;
height: 0cm;
}
}
</style>
<style type="text/css">
body {
font-size: 12px;
line-height: 13px;
}
div#pdf-header {
display: block;
}
div#pdf-header h2 {
display: block;
text-align: center;
font-weight: normal;
line-height: 35px;
font-size: 18px;
}
div#pdf-quote-info {
display: block;
margin-bottom: 20px;
}
p {
margin: 0;
}
table {
border-top: 1px solid #eee;
}
table td, table th {
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 5px;
border-left: 1px solid #eee;
}
table .price {
text-align: right;
}
table th {
padding: 5px 0;
font-size: 13px;
text-transform: uppercase;
color: black;
text-align: left;
background-color: #eee;
padding-left: 5px;
}
table p.description {
color: #555;
font-size: 11px;
}
table#quote-info {
border: none;
}
table#quote-info td, table#quote-info th {
border: none;
padding: 0;
}
table td.quantity {
text-align: center;
}
</style>
</head>
<body>
<div id="pdf-header">
<div style="width: 100%; text-align: center;">
<img src="{{ STATIC_URL }}img/quotes-logo.jpeg" alt="Flasherz.co Alquiler" width="600" height="126" />
<div style="display: block; text-align: center; margin: 10px 0;">
<h2>Cotización No. {{ quote.id }}, {{ quote.client_name }}</h2>
</div>
</div>
</div>
<div id="pdf-quote-info">
<table id="quote-info" width="70%" border="none" cellpadding="3" cellspacing="0">
<tr>
<td width="25%">Fecha:</td>
<td width="75%">{{ quote.created|date:'l j' }} de {{ quote.created|date:'F' }} de {{ quote.created|date:'Y' }}</td>
</tr>
{% if quote.client_name %}
<tr>
<td>Cliente:</td>
<td>{{ quote.client_name }}</td>
</tr>
{% endif %}
{% if quote.client_email %}
<tr>
<td>Correo:</td>
<td>{{ quote.client_email }}</td>
</tr>
{% endif %}
{% if quote.client_address %}
<tr>
<td>Dirección:</td>
<td>{{ quote.client_address }}</td>
</tr>
{% endif %}
{% if quote.client_phone %}
<tr>
<td>Teléfono:</td>
<td>{{ quote.client_phone }}</td>
</tr>
{% endif %}
<tr>
<td>Cantidad de días:</td>
<td>{{ quote.rental_days }}</td>
</tr>
</table>
</div>
</div>
<div id="pdf-quote-table">
<table id="quote-table" cellpadding="0" cellspacing="0" width="100%">
{% for category in quote.categories.all %}
<tbody>
<tr>
<th colspan="4" class="category-header">{{ category.category.name }}</th>
</tr>
{% for item in category.items.all %}
<tr>
<td class="quantity" width="10%">
<p>{{ item.quantity }}</p>
</td>
<td class="name" width="50%">
<p class="name">{{ item.name }}</p>
{% if item.content %}<p class="description">{{ item.content }}</p>{% endif %}
</td>
<td class="price" width="20%">
<p>${{ item.price|intcomma }}</p>
</td>
<td class="price total-price" width="20%">
<p>${{ item.total_price|intcomma }}</p>
</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
<tbody id="others">
<tr>
<th colspan="4" class="category-header">Seguro del 10%</th>
</tr>
<tr>
<td class="quantity"></td>
<td class="name">Seguro 10%</td>
<td class="price"></td>
<td class="price total-price">
<p>${{ quote.get_insurance_price|intcomma }}</p>
</td>
</tr>
</tbody>
{% if quote.discount %}
<tbody id="others">
<tr>
<th colspan="4" class="category-header">Descuento</th>
</tr>
<tr>
<td class="quantity">
</td>
<td class="name">Descuento</td>
<td class="price"></td>
<td class="price total-price">
<p>${{ quote.discount|intcomma }}</p>
</td>
</tr>
</tbody>
{% endif %}
<tbody id="totals">
<tr>
<th colspan="4" class="category-header">Total</th>
</tr>
<tr>
<td class="fake" colspan="2"></td>
<td class="name">Subtotal</td>
<td class="price">
<p>${{ quote.get_subtotal|intcomma }}</p>
</td>
</tr>
<tr>
<td class="fake" colspan="2"></td>
<td class="name">Total días</td>
<td class="price">
<p>${{ quote.get_total_days|intcomma }}</p>
</td>
</tr>
<tr>
<td class="fake" colspan="2"></td>
<td class="name">Total</td>
<td class="price">
<p><strong>${{ quote.get_total|intcomma }}</strong></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I don't know the way to insert a pagebreak after the table to insert the "terms and conditions" in the next page.
Also I have a problem with the images in the pdf, no one is appearing when rendered.
Thanks for helping me
From what I've learned in Pisa's documentation (and this forum post), you can use standard CSS tags like page-break-after and page-break-before. Pisa also has some of it's own tags, like pdf:nextpage. To use this, simply insert the following code block where you would like the page break (the div's are necessary so Pisa's HTML5 parser doesn't try to interpret them):
<div>
<pdf:nextpage />
</div>
I've found the correct method to do it, I needed to insert a few specific styles in the of my pdf
<style type="text/css">
#page {
size: {{ pagesize }};
margin: 1cm;
#frame footer {
-pdf-frame-content: footerContent;
bottom: 0cm;
margin-left: 0cm;
margin-right: 0cm;
height: 0cm;
}
}
.page-break{
page-break-after: always;
}
</style>
Then put a element with .page-break class in where you want to have a page break in your pdf.
I had no luck with the css method.
Just insert this bit of code in your template.html wherever you want a page break. It works for me. I'm not sure, but I think it has to be in a div.
<div>
<pdf:nextpage />
</div>

CSS for a 'contact sheet' view that wraps horizontally using a <ul>

I'm trying to generate an HTML/CSS combination to display a contact sheet type view of a bunch of photos, each with some text and a form element or two. I'd like the view to fill available width and wrap as needed, in order to get as many images on screen as the user's display can manage. I think a 'ul' is the right container to use, with display set to inline, and I think it's OK to use tables for each of the elements. What I've got so far looks promising in Safari (images that are under-size in either dimension are centered within their cell, wrapping behaves as intended), but fails in FireFox. It also fails the w3c validator (no doctype), but as soon as I specify a doctype the layout breaks (list goes back to displaying in a single column in both browsers).
This is what I have so far:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Layout test</title>
<style type="text/css">
#contact_sheet li {
list-style-type: none;
display: inline;
text-align: center;
}
#contact_sheet li table {
width: auto;
border-spacing: 0px;
display: inline;
border: thin solid #202020;
background-color: #404040;
color: white;
}
#contact_sheet li th {
height: 250px;
width: 250px;
text-align: center;
vertical-align: middle;
}
#contact_sheet li td {
text-align: center;
}
th img {
border: thin solid green;
}
</style>
</head>
<body>
<ul id="contact_sheet">
<li>
<table>
<tr>
<th><img src="" width="240" height="120" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th><img src="" width="120" height="240" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th><img src="" width="120" height="120" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
</ul>
</body>
</html>
What am I doing wrong?
This happens because when the specific doctype, tables took up the entire width of the page.
Just make them float:left and it will work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Layout test</title>
<style type="text/css">
#contact_sheet li {
list-style-type: none;
display: inline;
text-align: center;
}
#contact_sheet li table {
width: auto;
border-spacing: 0px;
display: inline;
border: thin solid #202020;
background-color: #404040;
color: white;
}
#contact_sheet li th {
height: 250px;
width: 250px;
text-align: center;
vertical-align: middle;
}
#contact_sheet li td {
text-align: center;
}
table {
float: left;
}
th img {
border: thin solid green;
}
</style>
</head>
<body>
<ul id="contact_sheet">
<li>
<table>
<tr>
<th><img src="" width="240" alt="" height="120" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th><img src="" width="120" alt="" height="240" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th><img src="" width="120" alt="" height="120" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
</ul>
</body>
Tables are at their best when the width can be predetermined. You may be better off without tables for your desired effect. I would suggest simply wrapping each img in a div. Float all the divs left and you're done. You then eliminate the need to specify new table rows, as each new row will be created when the floated divs wrap.
That also may make it easier to apply class styles to each individual image/form.
The main problem with this approach which may make it unworkable is that your images are of indeterminate size. One div would not affect the width of the div below it, leaving you without the order of a grid