mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
Design updates
This commit is contained in:
parent
91d90c87b3
commit
1cb8574dd8
@ -19,20 +19,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@page {
|
@page {
|
||||||
margin: 0 -5px !important;
|
margin: 0 !important;
|
||||||
size: $page_size $page_layout;
|
size: $page_size $page_layout;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
/* page-break-after: always; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#spacer-table > * > tr > td {
|
#spacer-table > * > tr > td {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#spacer-table{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1.5fr 1fr 1fr;
|
grid-template-columns: 1.5fr 1fr 1fr;
|
||||||
@ -44,12 +47,12 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#header, #header-spacer {
|
#header, #header-spacer {
|
||||||
height: 160px;
|
height: 160px;
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.company-logo {
|
.company-logo {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@ -108,7 +111,11 @@
|
|||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
/* margin-bottom: 200px; */
|
margin-bottom: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-ref="table"]:last-child{
|
||||||
|
margin-bottom:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-time-details {
|
.task-time-details {
|
||||||
@ -307,7 +314,7 @@
|
|||||||
<div id="company-address"></div>
|
<div id="company-address"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="body">
|
<div id="body">
|
||||||
<table id="spacer-table">
|
<table id="spacer-table" cellspacing="0" >
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -331,7 +338,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Start Print Content -->
|
|
||||||
<table id="product-table" cellspacing="0" data-ref="table"></table>
|
<table id="product-table" cellspacing="0" data-ref="table"></table>
|
||||||
|
|
||||||
<table id="task-table" cellspacing="0" data-ref="table"></table>
|
<table id="task-table" cellspacing="0" data-ref="table"></table>
|
||||||
@ -346,7 +352,6 @@
|
|||||||
|
|
||||||
<table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
|
<table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
|
||||||
<div id="statement-aging-table-totals" data-ref="statement-totals"></div>
|
<div id="statement-aging-table-totals" data-ref="statement-totals"></div>
|
||||||
<!-- End Print Content -->
|
|
||||||
<div id="table-totals" cellspacing="0"></div>
|
<div id="table-totals" cellspacing="0"></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -368,14 +373,13 @@
|
|||||||
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
|
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
let tables = [
|
let tables = [
|
||||||
'product-table', 'task-table', 'delivery-note-table',
|
'product-table', 'task-table', 'delivery-note-table', 'statement-invoice-table-totals', 'statement-payment-table-totals','statement-invoice-table-totals',
|
||||||
'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',
|
'statement-invoice-table', 'statement-payment-table', 'statement-aging-table', 'statement-aging-table-totals', 'statement-payment-table-totals'
|
||||||
];
|
];
|
||||||
|
|
||||||
tables.forEach((tableIdentifier) => {
|
tables.forEach((tableIdentifier) => {
|
||||||
document.getElementById(tableIdentifier).childElementCount === 0
|
const el =document.getElementById(tableIdentifier);
|
||||||
? document.getElementById(tableIdentifier).style.display = 'none'
|
if(el && el.childElementCount === 0)el.remove()
|
||||||
: '';
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@page {
|
@page {
|
||||||
margin: 0 -5px !important;
|
margin: 0 !important;
|
||||||
size: $page_size $page_layout;
|
size: $page_size $page_layout;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -27,6 +27,14 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#spacer-table > * > tr > td {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer-table{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: white;
|
color: white;
|
||||||
@ -34,6 +42,7 @@
|
|||||||
grid-template-columns: 1.5fr 1fr;
|
grid-template-columns: 1.5fr 1fr;
|
||||||
position:fixed;
|
position:fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header, #header-spacer {
|
#header, #header-spacer {
|
||||||
@ -214,23 +223,6 @@
|
|||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.page-container {
|
|
||||||
page-break-after: always;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead.page-header {
|
|
||||||
display: table-header-group;
|
|
||||||
}
|
|
||||||
|
|
||||||
tfoot.page-footer {
|
|
||||||
display: table-footer-group;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-content-cell {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-ref="total_table-footer"] {
|
[data-ref="total_table-footer"] {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
@ -305,7 +297,7 @@
|
|||||||
<table id="entity-details" cellspacing="0" dir="$dir"></table>
|
<table id="entity-details" cellspacing="0" dir="$dir"></table>
|
||||||
</div>
|
</div>
|
||||||
<div id="body">
|
<div id="body">
|
||||||
<table id="spacer-table">
|
<table id="spacer-table" cellspacing="0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -359,13 +351,13 @@
|
|||||||
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
|
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
let tables = [
|
let tables = [
|
||||||
'product-table', 'task-table', 'delivery-note-table',
|
'product-table', 'task-table', 'delivery-note-table', 'statement-invoice-table-totals', 'statement-payment-table-totals','statement-invoice-table-totals',
|
||||||
'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',
|
'statement-invoice-table', 'statement-payment-table', 'statement-aging-table', 'statement-aging-table-totals', 'statement-payment-table-totals'
|
||||||
];
|
];
|
||||||
|
|
||||||
tables.forEach((tableIdentifier) => {
|
tables.forEach((tableIdentifier) => {
|
||||||
document.getElementById(tableIdentifier).childElementCount === 0
|
document.getElementById(tableIdentifier).childElementCount === 0
|
||||||
? document.getElementById(tableIdentifier).style.display = 'none'
|
? document.getElementById(tableIdentifier).remove()
|
||||||
: '';
|
: '';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user