mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-11-04 01:17:30 -05:00
Merge pull request #4019 from beganovich/v2-invoice-design-improvements
Update designs with new margins & paddings
This commit is contained in:
David Bomba
GitHub
commit
39f23a2c2f
@ -95,8 +95,8 @@ class HtmlEngine
|
||||
}
|
||||
|
||||
$data = [];
|
||||
$data['$global-margin'] = ['value' => 'm-12', 'label' => ''];
|
||||
$data['$global-padding'] = ['value' => 'p-12', 'label' => ''];
|
||||
$data['$global-margin'] = ['value' => 'm-8', 'label' => ''];
|
||||
$data['$global-padding'] = ['value' => 'p-8', 'label' => ''];
|
||||
$data['$tax'] = ['value' => '', 'label' => ctrans('texts.tax')];
|
||||
$data['$app_url'] = ['value' => $this->generateAppUrl(), 'label' => ''];
|
||||
$data['$from'] = ['value' => '', 'label' => ctrans('texts.from')];
|
||||
|
||||
@ -12,9 +12,16 @@
|
||||
</head>
|
||||
|
||||
<style>
|
||||
#product-table tbody > tr:nth-child(even) {
|
||||
tbody > tr:nth-child(even) {
|
||||
background-color: #edf2f7;
|
||||
}
|
||||
|
||||
/** Required for proper margins on print **/
|
||||
@page {
|
||||
margin-bottom: 8.5mm;
|
||||
}
|
||||
|
||||
/** Custom CSS goes here.. */
|
||||
</style>
|
||||
|
||||
<body class="antialiased break-words bg-white">
|
||||
@ -36,7 +43,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client details, entity details -->
|
||||
<div class="grid grid-cols-12 gap-4 my-12 ml-12">
|
||||
@ -60,7 +66,10 @@
|
||||
|
||||
<!-- Product table -->
|
||||
<div class="$global-margin">
|
||||
<table id="product-table" class="w-full mt-8 table-auto"></table>
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full table-auto mt-8 $table-padding"
|
||||
></table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
@ -25,6 +25,14 @@
|
||||
tbody > tr > td:first-child {
|
||||
color: #d03801;
|
||||
}
|
||||
|
||||
/** Required for proper margins on print **/
|
||||
@page {
|
||||
margin-top: 8.5mm;
|
||||
margin-bottom: 8.5mm;
|
||||
}
|
||||
|
||||
/** Custom CSS goes here.. */
|
||||
</style>
|
||||
|
||||
<body class="$global-margin bg-white break-words antialiased">
|
||||
@ -68,7 +76,7 @@
|
||||
<!-- Product table -->
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full mt-20 rounded table-auto"
|
||||
class="w-full mt-20 rounded table-auto $table-padding"
|
||||
></table>
|
||||
</body>
|
||||
|
||||
|
||||
@ -15,6 +15,14 @@
|
||||
#product-table tbody > tr:nth-child(even) {
|
||||
background-color: #f7fafc;
|
||||
}
|
||||
|
||||
/** Required for proper margins on print **/
|
||||
@page {
|
||||
margin-top: 8.5mm;
|
||||
margin-bottom: 8.5mm;
|
||||
}
|
||||
|
||||
/** Custom CSS goes here.. */
|
||||
</style>
|
||||
|
||||
<body class="$global-margin bg-white break-words antialiased">
|
||||
@ -34,7 +42,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Entity labels, client details -->
|
||||
<p class="mt-10 px-2 text-xl text-blue-500 uppercase">$entity_label</p>
|
||||
<p class="px-2 mt-10 text-xl text-blue-500 uppercase">$entity_label</p>
|
||||
<div class="grid grid-cols-12 px-2 py-3 mt-4 border-t border-b">
|
||||
<div class="col-span-6">
|
||||
<table id="entity-details"></table>
|
||||
@ -43,7 +51,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="table-auto mt-12 w-full"></table>
|
||||
<table
|
||||
id="product-table"
|
||||
class="table-auto w-full mt-12 $table-padding"
|
||||
></table>
|
||||
</body>
|
||||
|
||||
<footer id="footer"></footer>
|
||||
|
||||
@ -19,6 +19,14 @@
|
||||
#product-table tbody > tr:nth-child(odd) {
|
||||
background-color: #f7fafc;
|
||||
}
|
||||
|
||||
/** Required for proper margins on print **/
|
||||
@page {
|
||||
margin-top: 8.5mm;
|
||||
margin-bottom: 8.5mm;
|
||||
}
|
||||
|
||||
/** Custom CSS goes here.. */
|
||||
</style>
|
||||
|
||||
<body class="$global-margin antialiased bg-white break-words">
|
||||
@ -61,7 +69,7 @@
|
||||
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full mt-10 border-t-4 border-pink-700 table-auto"
|
||||
class="w-full mt-10 border-t-4 border-pink-700 table-auto $table-padding"
|
||||
></table>
|
||||
</body>
|
||||
|
||||
|
||||
@ -11,6 +11,16 @@
|
||||
<link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
/** Required for proper margins on print **/
|
||||
@page {
|
||||
margin-top: 8.5mm;
|
||||
margin-bottom: 8.5mm;
|
||||
}
|
||||
|
||||
/** Custom CSS goes here.. */
|
||||
</style>
|
||||
|
||||
<body class="$global-margin antialiased bg-white break-words">
|
||||
<!-- Company logo, entity details -->
|
||||
<div class="grid grid-cols-12 gap-4 pb-6 border-b-4 border-black">
|
||||
@ -44,16 +54,19 @@
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-10 table-auto"></table>
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full mt-10 table-auto $table-padding"
|
||||
></table>
|
||||
|
||||
<!-- Thanks label -->
|
||||
<p
|
||||
class="w-full pb-4 mt-10 text-2xl font-semibold text-center border-b-4 border-black"
|
||||
>
|
||||
$thanks_label
|
||||
</p>
|
||||
<div class="w-full border-black order-b wpy-1"></div>
|
||||
<div id="footer">
|
||||
<p
|
||||
class="w-full pb-4 mt-10 text-2xl font-semibold text-center border-b-4 border-black"
|
||||
>
|
||||
$thanks_label
|
||||
</p>
|
||||
<div class="w-full border-black order-b wpy-1"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer id="footer"></footer>
|
||||
</html>
|
||||
|
||||
@ -11,6 +11,16 @@
|
||||
<link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
/** Required for proper margins on print **/
|
||||
@page {
|
||||
margin-top: 8.5mm;
|
||||
margin-bottom: 8.5mm;
|
||||
}
|
||||
|
||||
/** Custom CSS goes here.. */
|
||||
</style>
|
||||
|
||||
<body class="$global-margin antialiased break-words bg-white">
|
||||
<!-- Company details, address, client details, company logo -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
@ -49,7 +59,10 @@
|
||||
></div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-10 table-auto"></table>
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full mt-10 table-auto $table-padding"
|
||||
></table>
|
||||
</body>
|
||||
|
||||
<footer id="footer"></footer>
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
|
||||
<div class="$global-margin">
|
||||
<!-- Company logo, client details -->
|
||||
<div class="col-span-12 mb-10">
|
||||
<p class="text-xl text-orange-600 font-semibold uppercase">
|
||||
<div class="col-span-12 mt-6 mb-10">
|
||||
<p class="text-xl font-semibold text-orange-600 uppercase">
|
||||
$your_entity_label
|
||||
</p>
|
||||
</div>
|
||||
@ -45,11 +45,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-8 table-auto"></table>
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full mt-8 mb-10 table-auto $table-padding"
|
||||
></table>
|
||||
</div>
|
||||
|
||||
<!-- Company details -->
|
||||
<div class="bg-orange-600">
|
||||
<footer id="footer" class="fixed bottom-0 w-full bg-orange-600">
|
||||
<div class="$global-padding">
|
||||
<div class="grid grid-cols-12">
|
||||
<div
|
||||
@ -60,8 +63,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<footer id="footer"></footer>
|
||||
</html>
|
||||
|
||||
@ -11,6 +11,16 @@
|
||||
<link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
/** Required for proper margins on print **/
|
||||
@page {
|
||||
margin-top: 8.5mm;
|
||||
margin-bottom: 8.5mm;
|
||||
}
|
||||
|
||||
/** Custom CSS goes here.. */
|
||||
</style>
|
||||
|
||||
<body class="$global-margin antialiased break-words bg-white">
|
||||
<!-- Company name, company address, company logo -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
@ -35,7 +45,7 @@
|
||||
<!-- Client details -->
|
||||
<div class="grid grid-cols-12 mt-12">
|
||||
<div class="col-span-12 mb-10">
|
||||
<p class="text-xl text-black font-semibold uppercase">
|
||||
<p class="text-xl font-semibold text-black uppercase">
|
||||
$your_entity_label
|
||||
</p>
|
||||
</div>
|
||||
@ -43,7 +53,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-8 table-auto"></table>
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full mt-8 table-auto $table-padding"
|
||||
></table>
|
||||
</body>
|
||||
|
||||
<footer id="footer"></footer>
|
||||
|
||||
@ -20,6 +20,14 @@
|
||||
color: #9b2c2c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Required for proper margins on print **/
|
||||
@page {
|
||||
margin-top: 8.5mm;
|
||||
margin-bottom: 8.5mm;
|
||||
}
|
||||
|
||||
/** Custom CSS goes here.. */
|
||||
</style>
|
||||
|
||||
<body class="$global-margin antialiased bg-white break-words">
|
||||
@ -40,7 +48,7 @@
|
||||
<!-- Company details, client details -->
|
||||
<div class="grid grid-cols-12 gap-12 mt-12">
|
||||
<div class="col-span-12">
|
||||
<p class="text-xl text-teal-600 font-semibold uppercase">
|
||||
<p class="text-xl font-semibold text-teal-600 uppercase">
|
||||
$your_entity_label
|
||||
</p>
|
||||
</div>
|
||||
@ -64,7 +72,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-10 table-auto"></table>
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full mt-10 table-auto $table-padding"
|
||||
></table>
|
||||
</body>
|
||||
|
||||
<footer id="footer"></footer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user