static/order.pug
doctype html
html(lang='en')
head
meta(charset='UTF-8')
title=order_header_title
body
style.
@import "https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, total, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
height: 840px;
width: 592px;
margin: auto;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
}
strong {
font-weight: 700;
}
#container {
position: relative;
padding: 4%;
}
#header {
height: 80px;
}
#header > #reference {
float: right;
text-align: right;
}
#header > #reference h3 {
margin: 0;
}
#header > #reference h4 {
margin: 0;
font-size: 85%;
font-weight: 600
}
#header > #reference p {
margin: 0;
margin-top: 2%;
font-size: 85%;
}
#header > #logo {
width: 50%;
float: left;
}
#fromto {
height: 160px;
}
#fromto > #from, #fromto > #to {
width: 45%;
min-height: 90px;
margin-top: 30px;
font-size: 85%;
padding: 1.5%;
line-height: 120%;
}
#fromto > #from {
float: left;
width: 45%;
background: #efefef;
margin-top: 30px;
font-size: 85%;
padding: 1.5%;
}
#fromto > #to {
float: right;
border: solid grey 1px;
}
#items {
margin-top: 10px;
}
#items > p {
font-weight: 700;
text-align: right;
margin-bottom: 1%;
font-size: 65%;
}
#items > table {
width: 100%;
font-size: 85%;
border: solid grey 1px;
}
#items > table th:first-child {
text-align: left;
}
#items > table th {
font-weight: 400;
padding: 1px 4px;
}
#items > table td {
padding: 1px 4px;
}
#items > table th:nth-child(2), #items > table th:nth-child(4) {
width: 45px;
}
#items > table th:nth-child(3) {
width: 60px;
}
#items > table th:nth-child(5) {
width: 80px;
}
#items > table tr td:not(:first-child) {
text-align: right;
padding-right: 1%;
}
#items table td {
border-right: solid grey 1px;
}
#items table tr td {
padding-top: 3px;
padding-bottom: 3px;
height: 10px;
}
#items table tr:nth-child(1) {
border: solid grey 1px;
}
#items table tr th {
border-right: solid grey 1px;
padding: 3px;
}
#items table tr:nth-child(2) > td {
padding-top: 8px;
}
#summary {
height: 155px;
margin-top: 30px;
}
#summary #note {
float: left;
width: 260px;
}
#summary #note h4 {
font-size: 10px;
font-weight: 600;
font-style: italic;
margin-bottom: 4px;
}
#summary #note p {
font-size: 10px;
font-style: italic;
line-height:12px;
}
#summary #total table {
font-size: 85%;
width: 260px;
float: right;
}
#summary #total table td {
padding: 3px 4px;
}
#summary #total table tr td:last-child {
text-align: right;
}
#summary #total table tr:nth-child(3) {
background: #efefef;
font-weight: 600;
}
#footer {
margin: auto;
position: absolute;
left: 4%;
bottom: 20px;
right: 4%;
border-top: solid grey 1px;
}
#footer p {
margin-top: 1%;
font-size: 65%;
line-height: 140%;
text-align: center;
}
.padding-table {
margin-top: 60px;
}
#container
#header
#logo
img(src=logo, alt='')
#reference
h3
strong=order_header_subject
h4 #{order_header_reference} #{order_header_reference_value}
p #{order_header_date} #{header_date}
#fromto
#from
p
strong=emitter_name
br
| #{emitter_first_name} #{emitter_last_name}
br
| #{emitter_street_number} #{emitter_street_name}
br
| #{emitter_zip_code} #{emitter_city}
br
br
| #{emitter_phone ? fromto_phone : ''} #{emitter_phone}
br
| #{emitter_mail ? fromto_mail : ''} #{emitter_mail}
#to
p
strong=recipient_company
br
| #{recipient_first_name} #{recipient_last_name}
br
| #{recipient_street_number} #{recipient_street_name}
br
| #{recipient_zip_code} #{recipient_city}
br
br
| #{recipient_phone ? fromto_phone : ''} #{recipient_phone}
br
| #{recipient_mail ? fromto_mail : ''} #{recipient_mail}
#items
p=table_information
- var rowCounter = 0
- for(var loopTable = 0; loopTable < template_configuration.loop_table; loopTable++) {
table(class=(loopTable === 0 ? '' : 'padding-table'))
tr
th=table_description
th=table_tax
th=table_price_without_taxes_unit
th=table_quantity
th=table_price_without_taxes
- var rowPerPage = 0
if loopTable === 0
- rowPerPage = template_configuration.rows_in_first_page
else if loopTable === (template_configuration.loop_table - 1)
- rowPerPage = template_configuration.rows_in_last_page
else
- rowPerPage = template_configuration.rows_per_pages
- for(var row = 0; row <= rowPerPage; row++) {
tr
td #{articles[rowCounter] && articles[rowCounter].description ? articles[rowCounter].description : ''}
td #{articles[rowCounter] && articles[rowCounter].tax ? articles[rowCounter].tax + '%': ''}
td #{articles[rowCounter] && articles[rowCounter].price ? articles[rowCounter].price : ''}
td #{articles[rowCounter] && articles[rowCounter].qt ? articles[rowCounter].qt : ''}
td #{articles[rowCounter] && articles[rowCounter].total_product_without_taxes ? articles[rowCounter].total_product_without_taxes : ''}
- rowCounter++
- }
if loopTable > 0
div(style='page-break-after:always')
- }
#summary
#note
h4=table_note
p=table_note_content
#total
table(border='1')
tr
td=table_total_without_taxes
td=table_total_without_taxes_value
tr
td=table_total_taxes
td=table_total_taxes_value
tr
td=table_total_with_taxes
td=table_total_with_taxes_value
#footer
p!=footer