Update designs with new margins & paddings

This commit is contained in:
Benjamin Beganović 2020-08-27 13:01:19 +02:00
parent bb71bfe82a
commit c8ff06e61d
10 changed files with 117 additions and 30 deletions

View File

@ -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')];

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>