mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-05 18:52:44 +01:00
Merge pull request #3907 from beganovich/v2-pdfmaker-designs
Design updates to new PDF system
This commit is contained in:
David Bomba
GitHub
commit
bcb8f44948
@ -52,10 +52,10 @@ $custom_css
|
||||
<div class="col-span-2 p-3">
|
||||
$company_logo
|
||||
</div>
|
||||
<div class="col-span-2 p-3 flex flex-col flex-wrap">
|
||||
<div class="flex flex-col flex-wrap col-span-2 p-3">
|
||||
$company_details
|
||||
</div>
|
||||
<div class="col-span-2 p-3 flex flex-col flex-wrap">
|
||||
<div class="flex flex-col flex-wrap col-span-2 p-3">
|
||||
$company_address
|
||||
</div>
|
||||
</div>';
|
||||
@ -64,46 +64,46 @@ $custom_css
|
||||
public function body()
|
||||
{
|
||||
return '<div class="grid grid-cols-12 gap-1 mt-8">
|
||||
<div class="col-span-7 p-3 flex flex-col flex-wrap">
|
||||
<div class="flex flex-col flex-wrap col-span-7 p-3">
|
||||
$client_details
|
||||
</div>
|
||||
<div class="col-span-5 p-3 flex flex-col bg-orange-600 px-4 py-4 h-auto rounded-lg">
|
||||
<div class="flex flex-col text-white flex-wrap">
|
||||
<div class="flex flex-col h-auto col-span-5 p-3 px-4 py-4 bg-orange-600 rounded-lg">
|
||||
<div class="flex flex-col flex-wrap text-white">
|
||||
$entity_details
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="w-full table-auto mt-20">
|
||||
<table class="w-full mt-20 table-auto">
|
||||
<thead class="text-left">
|
||||
$product_table_header
|
||||
</thead>
|
||||
<tbody class="bg-gray-200 whitespace-pre-line">
|
||||
<tbody class="whitespace-pre-line bg-gray-200">
|
||||
$product_table_body
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="w-full table-auto mt-20">
|
||||
<table class="w-full mt-20 table-auto">
|
||||
<thead class="text-left">
|
||||
$task_table_header
|
||||
</thead>
|
||||
<tbody class="bg-gray-200 whitespace-pre-line">
|
||||
<tbody class="whitespace-pre-line bg-gray-200">
|
||||
$task_table_body
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex items-center justify-between px-4 pb-4 bg-gray-200 rounded py-2">
|
||||
<div class="flex items-center justify-between px-4 py-2 pb-4 bg-gray-200 rounded">
|
||||
<div class="w-1/2">
|
||||
<div class="flex flex-col">
|
||||
<p>$entity.public_notes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/3 flex flex-col">
|
||||
<div class="flex flex-col w-1/3">
|
||||
<div class="flex px-3 mt-2">
|
||||
<section class="w-1/2 text-right flex flex-col">
|
||||
<section class="flex flex-col w-1/2 text-right">
|
||||
$discount_label
|
||||
$total_tax_labels
|
||||
$line_tax_labels
|
||||
</section>
|
||||
<section class="w-1/2 text-right flex flex-col">
|
||||
<section class="flex flex-col w-1/2 text-right">
|
||||
$discount
|
||||
$total_tax_values
|
||||
$line_tax_values
|
||||
@ -111,17 +111,17 @@ $custom_css
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4 pb-4 px-4">
|
||||
<div class="flex items-center justify-between px-4 pb-4 mt-4">
|
||||
<div class="w-1/2">
|
||||
<div class="flex flex-col">
|
||||
<p class="font-semibold">$terms_label</p>
|
||||
<p>$terms</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-2/5 flex-col">
|
||||
<section class="flex py-2 bg-blue-900 px-4 py-3 rounded text-white">
|
||||
<div class="flex flex-col w-2/5">
|
||||
<section class="flex px-4 py-2 py-3 text-white bg-blue-900 rounded">
|
||||
<p class="w-1/2">$balance_due_label</p>
|
||||
<p class="text-right w-1/2">$balance_due</p>
|
||||
<p class="w-1/2 text-right">$balance_due</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,7 +142,7 @@ $custom_css
|
||||
{
|
||||
return '
|
||||
<footer>
|
||||
<div class="div_footer flex justify-between py-8 px-12" style="page-break-inside: avoid;">
|
||||
<div class="flex justify-between px-12 py-8 div_footer" style="page-break-inside: avoid;">
|
||||
</div>
|
||||
</footer>';
|
||||
}
|
||||
|
||||
1
public/css/tailwindcss@1.4.6.css
vendored
Normal file
1
public/css/tailwindcss@1.4.6.css
vendored
Normal file
File diff suppressed because one or more lines are too long
13
tests/Feature/PdfMaker/Bold.php
Normal file
13
tests/Feature/PdfMaker/Bold.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature\PdfMaker;
|
||||
|
||||
class Bold
|
||||
{
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/designs/bold.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,7 @@ class Business
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/business.html')
|
||||
base_path('tests/Feature/PdfMaker/designs/business.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
13
tests/Feature/PdfMaker/Clean.php
Normal file
13
tests/Feature/PdfMaker/Clean.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature\PdfMaker;
|
||||
|
||||
class Clean
|
||||
{
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/designs/clean.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
13
tests/Feature/PdfMaker/Creative.php
Normal file
13
tests/Feature/PdfMaker/Creative.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature\PdfMaker;
|
||||
|
||||
class Creative
|
||||
{
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/designs/creative.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
13
tests/Feature/PdfMaker/Elegant.php
Normal file
13
tests/Feature/PdfMaker/Elegant.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature\PdfMaker;
|
||||
|
||||
class Elegant
|
||||
{
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/designs/elegant.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
13
tests/Feature/PdfMaker/Hipster.php
Normal file
13
tests/Feature/PdfMaker/Hipster.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature\PdfMaker;
|
||||
|
||||
class Hipster
|
||||
{
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/designs/hipster.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
13
tests/Feature/PdfMaker/Modern.php
Normal file
13
tests/Feature/PdfMaker/Modern.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature\PdfMaker;
|
||||
|
||||
class Modern
|
||||
{
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/designs/modern.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -16,6 +16,12 @@ class PdfMaker
|
||||
|
||||
private $xpath;
|
||||
|
||||
private $filters = [
|
||||
'<![CDATA[' => '',
|
||||
']]>' => '',
|
||||
'<?xml version="1.0" encoding="utf-8" standalone="yes"??>' => '',
|
||||
];
|
||||
|
||||
public function __construct(array $data)
|
||||
{
|
||||
$this->data = $data;
|
||||
@ -43,8 +49,16 @@ class PdfMaker
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getCompiledHTML()
|
||||
public function getCompiledHTML($final = false)
|
||||
{
|
||||
return $this->document->saveHTML();
|
||||
if ($final) {
|
||||
$html = $this->document->saveXML();
|
||||
|
||||
$filtered = strtr($html, $this->filters);
|
||||
|
||||
return $filtered;
|
||||
}
|
||||
|
||||
return $this->document->saveXML();
|
||||
}
|
||||
}
|
||||
|
||||
1018
tests/Feature/PdfMaker/PdfMakerDesignsTest.php
Normal file
1018
tests/Feature/PdfMaker/PdfMakerDesignsTest.php
Normal file
File diff suppressed because it is too large
Load Diff
13
tests/Feature/PdfMaker/Plain.php
Normal file
13
tests/Feature/PdfMaker/Plain.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature\PdfMaker;
|
||||
|
||||
class Plain
|
||||
{
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/designs/plain.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
13
tests/Feature/PdfMaker/Playful.php
Normal file
13
tests/Feature/PdfMaker/Playful.php
Normal file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
namespace Tests\Feature\PdfMaker;
|
||||
|
||||
class Playful
|
||||
{
|
||||
public function html()
|
||||
{
|
||||
return file_get_contents(
|
||||
base_path('tests/Feature/PdfMaker/designs/playful.html')
|
||||
);
|
||||
}
|
||||
}
|
||||
65
tests/Feature/PdfMaker/designs/bold.html
Normal file
65
tests/Feature/PdfMaker/designs/bold.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
|
||||
<link rel="stylesheet" href="$css" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
#product-table tbody > tr:nth-child(even) {
|
||||
background-color: #edf2f7;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="antialiased break-words bg-white">
|
||||
<!-- Company logo, company details -->
|
||||
<div class="$global-padding static bg-gray-800">
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="absolute col-span-4 p-6 pb-10 bg-white">
|
||||
<img
|
||||
src="$company-logo"
|
||||
alt="$company->name logo"
|
||||
class="w-24 col-span-4 sm:w-32"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between col-span-8 col-start-6 lg:col-span-6 lg:col-start-8"
|
||||
>
|
||||
<div id="company-details" class="text-white"></div>
|
||||
<div id="company-address" class="text-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client details, entity details -->
|
||||
<div class="grid grid-cols-12 gap-4 my-12 ml-12">
|
||||
<div class="col-span-6">
|
||||
<h2
|
||||
class="text-2xl font-semibold tracking-tight text-teal-600 uppercase"
|
||||
>
|
||||
$your-invoice
|
||||
</h2>
|
||||
<div id="client-details" class="mt-4"></div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="h-auto px-4 py-4 bg-teal-600">
|
||||
<table
|
||||
class="flex justify-between text-white"
|
||||
id="entity-details"
|
||||
></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<div class="$global-margin">
|
||||
<table id="product-table" class="w-full mt-8 table-auto"></table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
tests/Feature/PdfMaker/designs/business.html
Normal file
67
tests/Feature/PdfMaker/designs/business.html
Normal file
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
|
||||
<link rel="stylesheet" href="$css">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
thead th:first-child {
|
||||
border-top-left-radius: .5rem;
|
||||
border-bottom-left-radius: .3rem;
|
||||
}
|
||||
|
||||
thead th:last-child {
|
||||
border-top-right-radius: .5rem;
|
||||
border-bottom-right-radius: .3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="$global-margin bg-white break-words antialiased">
|
||||
<!-- Logo, company details & company address -->
|
||||
<div class="flex grid items-start grid-cols-12 gap-4">
|
||||
<img src="$company-logo" alt="$company-name" class="grid w-24 col-span-4 sm:w-32">
|
||||
<div class="grid grid-cols-2 col-span-8 space-x-10 text-gray-700 lg:col-start-8">
|
||||
<div id="company-details" class="col-span-1 text-gray-500"></div>
|
||||
<div id="company-address" class="col-span-1 text-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client details, entity details -->
|
||||
<div class="grid grid-cols-12 gap-4 my-12">
|
||||
<div class="col-span-6">
|
||||
<p>$invoice-issued-to</p>
|
||||
<div id="client-details" class="mt-4 text-orange-600"></div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<div class="h-auto px-4 py-4 bg-orange-600 rounded-lg">
|
||||
<div class="flex justify-between text-white" id="entity-details"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-20 rounded table-auto"></table>
|
||||
|
||||
<!-- Balance due card -->
|
||||
<div class="grid grid-cols-12 my-12">
|
||||
<div class="col-span-6">
|
||||
<p class="font-semibold">$terms-label</p>
|
||||
<p>$terms</p>
|
||||
</div>
|
||||
<div class="col-span-5 col-start-8 lg:col-start-9 lg:col-span-4">
|
||||
<div class="h-auto px-4 py-4 bg-orange-600 rounded-lg">
|
||||
<div class="flex justify-between text-white">
|
||||
<p>$balance-due-label</p>
|
||||
<p>$balance-due</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
37
tests/Feature/PdfMaker/designs/clean.html
Normal file
37
tests/Feature/PdfMaker/designs/clean.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
|
||||
<link rel="stylesheet" href="$css">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
#product-table tr:nth-child(even) {
|
||||
background-color: #f7fafc;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="$global-margin bg-white break-words antialiased">
|
||||
<!-- Company logo, company details -->
|
||||
<div class="grid grid-cols-12 px-2">
|
||||
<img src="$company-logo" alt="$company-name logo" class="grid w-24 col-span-4 sm:w-32">
|
||||
<div class="grid grid-cols-2 col-span-8 text-gray-700 lg:col-span-6">
|
||||
<div id="company-details" class="col-span-1"></div>
|
||||
<div id="company-address" class="col-span-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entity labels, client details -->
|
||||
<p class="mt-10 text-xl text-blue-500 uppercase">$entity</p>
|
||||
<div class="grid grid-cols-12 px-2 py-3 mt-4 border-t border-b">
|
||||
<table class="col-span-6 lg:col-span-5" id="entity-details"></table>
|
||||
<div id="client-details" class="col-span-6"></div>
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="table-auto"></table>
|
||||
</body>
|
||||
67
tests/Feature/PdfMaker/designs/creative.html
Normal file
67
tests/Feature/PdfMaker/designs/creative.html
Normal file
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
|
||||
<link rel="stylesheet" href="$css" />
|
||||
</head>
|
||||
|
||||
<style>
|
||||
#product-table tbody > tr:nth-child(even) {
|
||||
background-color: #edf2f7;
|
||||
}
|
||||
|
||||
#product-table tbody > tr:nth-child(odd) {
|
||||
background-color: #f7fafc;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="$global-margin antialiased bg-white break-words">
|
||||
<!-- Client details, company details, company logo -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<!-- Client details -->
|
||||
<div class="col-span-4">
|
||||
<div id="client-details"></div>
|
||||
</div>
|
||||
|
||||
<!-- Company details -->
|
||||
<div class="flex flex-col col-span-4 space-y-4">
|
||||
<div id="company-details"></div>
|
||||
<div id="company-address"></div>
|
||||
</div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="flex flex-col items-end col-span-4">
|
||||
<img
|
||||
src="$company-logo"
|
||||
alt="$company-name logo"
|
||||
class="w-24 col-span-4 sm:w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entity label, entity details -->
|
||||
<div class="grid grid-cols-12 mt-10">
|
||||
<!-- Entity number -->
|
||||
<div class="col-span-4 text-3xl font-semibold uppercase">
|
||||
<span>$entity</span>
|
||||
<i class="text-pink-700">#$entity-number</i>
|
||||
</div>
|
||||
|
||||
<!-- Entity labels -->
|
||||
<div class="flex flex-col items-end col-span-8">
|
||||
<table id="entity-details"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table
|
||||
id="product-table"
|
||||
class="w-full mt-10 border-t-4 border-pink-700 table-auto"
|
||||
></table>
|
||||
</body>
|
||||
</html>
|
||||
52
tests/Feature/PdfMaker/designs/elegant.html
Normal file
52
tests/Feature/PdfMaker/designs/elegant.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
|
||||
<link rel="stylesheet" href="$css" />
|
||||
<link
|
||||
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<div class="col-span-6">
|
||||
<img
|
||||
src="$company-logo"
|
||||
alt="$company-name logo"
|
||||
class="w-24 col-span-4 sm:w-32"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col items-end col-span-6">
|
||||
<table id="entity-details"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client details, company details -->
|
||||
<div class="grid grid-cols-12 gap-4 pt-6 mt-1 border-t border-black">
|
||||
<div
|
||||
class="col-span-5 border-r border-black border-dashed"
|
||||
id="client-details"
|
||||
></div>
|
||||
<div class="flex col-span-7 space-x-8">
|
||||
<div id="company-details"></div>
|
||||
<div id="company-address"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-10 table-auto"></table>
|
||||
|
||||
<!-- Thanks label -->
|
||||
<p class="w-full pb-4 mt-10 text-2xl font-semibold text-center border-b-4 border-black">$thanks</p>
|
||||
<div class="w-full border-black order-b wpy-1"></div>
|
||||
</body>
|
||||
</html>
|
||||
47
tests/Feature/PdfMaker/designs/hipster.html
Normal file
47
tests/Feature/PdfMaker/designs/hipster.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
|
||||
<link rel="stylesheet" href="$css" />
|
||||
</head>
|
||||
|
||||
<body class="$global-margin antialiased break-words bg-white">
|
||||
<!-- Company details, address, client details, company logo -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-4 pl-4 border-l border-black">
|
||||
<div id="company-details">
|
||||
<p class="font-semibold text-yellow-600 uppercase">
|
||||
$from:
|
||||
</p>
|
||||
</div>
|
||||
<div id="company-address" class="mt-4"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col-span-5 pl-4 border-l border-black"
|
||||
id="client-details"
|
||||
>
|
||||
<p class="font-semibold text-yellow-600 uppercase">$to:</p>
|
||||
</div>
|
||||
<div class="col-span-3">
|
||||
<img
|
||||
src="$company-logo"
|
||||
alt="$company-name logo"
|
||||
class="w-24 col-span-4 sm:w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entity details -->
|
||||
<h1 class="mt-6 text-4xl font-semibold uppercase lg:text-6xl">$entity</h1>
|
||||
<div id="entity-details" class="flex items-center space-x-6"></div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-10 table-auto"></table>
|
||||
</body>
|
||||
</html>
|
||||
51
tests/Feature/PdfMaker/designs/modern.html
Normal file
51
tests/Feature/PdfMaker/designs/modern.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
|
||||
<link rel="stylesheet" href="$css">
|
||||
</head>
|
||||
|
||||
<body class="antialiased break-words bg-white">
|
||||
<!-- Company name, entity details -->
|
||||
<div class="bg-orange-600">
|
||||
<div class="$global-padding">
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="col-span-4">
|
||||
<h1 class="text-3xl font-bold text-white lg:text-4xl">$company-name</h1>
|
||||
</div>
|
||||
<div class="col-span-7 col-start-6 lg:col-start-7">
|
||||
<table id="entity-details" class="text-white"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="$global-margin">
|
||||
<!-- Company logo, client details -->
|
||||
<div class="grid grid-cols-12">
|
||||
<img src="$company-logo" alt="$company-name logo" class="grid w-24 col-span-4 sm:w-32">
|
||||
<div id="client-details" class="col-span-8 col-start-6"></div>
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-8 table-auto"></table>
|
||||
</div>
|
||||
|
||||
<!-- Company details -->
|
||||
<div class="bg-orange-600">
|
||||
<div class="$global-padding">
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="flex justify-between col-span-8 col-start-6 lg:col-span-6 lg:col-start-8">
|
||||
<div id="company-details" class="text-white"></div>
|
||||
<div id="company-address" class="text-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
43
tests/Feature/PdfMaker/designs/plain.html
Normal file
43
tests/Feature/PdfMaker/designs/plain.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
|
||||
<link rel="stylesheet" href="$css" />
|
||||
</head>
|
||||
|
||||
<body class="$global-margin antialiased break-words bg-white">
|
||||
<!-- Company name, company address, company logo -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-4">$company-name</div>
|
||||
<div class="col-span-4" id="company-address"></div>
|
||||
<div class="col-span-4">
|
||||
<img
|
||||
src="$company-logo"
|
||||
alt="$company->name logo"
|
||||
class="block w-24 col-span-4 sm:w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entity details -->
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="col-span-6 col-start-8 mt-10">
|
||||
<table class="flex justify-between" id="entity-details"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client details -->
|
||||
<div class="grid grid-cols-12">
|
||||
<div class="col-span-6" id="client-details"></div>
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-8 table-auto"></table>
|
||||
</body>
|
||||
</html>
|
||||
67
tests/Feature/PdfMaker/designs/playful.html
Normal file
67
tests/Feature/PdfMaker/designs/playful.html
Normal file
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
|
||||
<link rel="stylesheet" href="$css" />
|
||||
<link
|
||||
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
#product-table tbody > tr > td:first-child {
|
||||
color: #9b2c2c;
|
||||
}
|
||||
|
||||
#product-table tbody > tr > td:last-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="$global-margin antialiased bg-white break-words">
|
||||
<!-- Company logo, entity details -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-4">
|
||||
<img
|
||||
src="$company-logo"
|
||||
alt="$company-name logo"
|
||||
class="w-24 col-span-4 sm:w-32"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-5 col-start-8 p-5 bg-teal-600 rounded-lg">
|
||||
<table id="entity-details" class="text-white"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Company details, client details -->
|
||||
<div class="grid grid-cols-12 gap-12 mt-12">
|
||||
<div class="col-span-6">
|
||||
<p class="px-4 font-semibold text-teal-600">$to:</p>
|
||||
<div
|
||||
class="p-4 mt-4 border-t-4 border-b-4 border-teal-600 border-dashed"
|
||||
>
|
||||
<div id="client-details"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<p class="px-4 font-semibold text-teal-600">$from:</p>
|
||||
<div
|
||||
class="flex p-4 mt-4 space-x-4 border-t-4 border-b-4 border-teal-600 border-dashed"
|
||||
>
|
||||
<div id="company-details"></div>
|
||||
<div id="company-address"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product table -->
|
||||
<table id="product-table" class="w-full mt-10 table-auto"></table>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user