mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-10 21:22:58 +01:00
Wrapping text
This commit is contained in:
parent
77ab9a7b06
commit
3249227fb8
@ -63,7 +63,7 @@ class Bold extends AbstractDesign
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div class="bg-teal-600 px-5 py-3 text-white">
|
||||
<div class="w-80 flex flex-col text-white">
|
||||
<div class="w-80 flex flex-col text-white flex-wrap">
|
||||
$entity_details
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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">
|
||||
<div class="col-span-2 p-3 flex flex-col flex-wrap">
|
||||
$company_details
|
||||
</div>
|
||||
<div class="col-span-2 p-3 flex flex-col">
|
||||
<div class="col-span-2 p-3 flex flex-col flex-wrap">
|
||||
$company_address
|
||||
</div>
|
||||
</div>';
|
||||
@ -64,11 +64,11 @@ $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">
|
||||
<div class="col-span-7 p-3 flex flex-col flex-wrap">
|
||||
$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">
|
||||
<div class="flex flex-col text-white flex-wrap">
|
||||
$entity_details
|
||||
</div>
|
||||
</div>
|
||||
|
@ -48,10 +48,10 @@ class Clean extends AbstractDesign
|
||||
<div class="h-14 w-14">$company_logo</div>
|
||||
</div>
|
||||
<div class="w-auto flex">
|
||||
<div class="mr-10 text-gray-600 flex flex-col">
|
||||
<div class="mr-10 text-gray-600 flex flex-col flex-wrap">
|
||||
$company_details
|
||||
</div>
|
||||
<div class="ml-5 text-gray-600 flex flex-col">
|
||||
<div class="ml-5 text-gray-600 flex flex-col flex-wrap">
|
||||
$company_address
|
||||
</div>
|
||||
</div>
|
||||
@ -68,13 +68,13 @@ class Clean extends AbstractDesign
|
||||
|
||||
<div class="ml-4 py-4">
|
||||
<div class="flex">
|
||||
<div class="w-40 flex flex-col">
|
||||
<div class="w-40 flex flex-col flex-wrap">
|
||||
$entity_labels
|
||||
</div>
|
||||
<div class="w-48 flex flex-col">
|
||||
<div class="w-48 flex flex-col flex-wrap">
|
||||
$entity_details
|
||||
</div>
|
||||
<div class="w-56 flex flex-col">
|
||||
<div class="w-56 flex flex-col flex-wrap">
|
||||
$client_details
|
||||
</div>
|
||||
</div>
|
||||
|
@ -60,7 +60,7 @@ $custom_css
|
||||
<div class="col-span-7">
|
||||
<p class="text-4xl text-pink-700">#$entity_number</p>
|
||||
</div>
|
||||
<div class="col-span-5 flex flex-col">$entity_details</div>
|
||||
<div class="col-span-5 flex flex-col flex-wrap">$entity_details</div>
|
||||
</div>
|
||||
|
||||
<table class="w-full table-auto border-t-4 border-pink-700 bg-white mt-8">
|
||||
|
@ -47,7 +47,7 @@ class Elegant extends AbstractDesign
|
||||
<div class="col-span-8">
|
||||
$company_logo
|
||||
</div>
|
||||
<div class="col-span-4 flex flex-col">
|
||||
<div class="col-span-4 flex flex-col flex-wrap">
|
||||
$entity_details
|
||||
</div>
|
||||
</div>
|
||||
@ -57,13 +57,13 @@ class Elegant extends AbstractDesign
|
||||
public function body()
|
||||
{
|
||||
return '<div class="grid grid-cols-12 gap-4 mt-8">
|
||||
<div class="col-span-4 mr-6 flex flex-col pr-2 border-r border-dashed border-black">
|
||||
<div class="col-span-4 mr-6 flex flex-col pr-2 border-r border-dashed border-black flex-wrap">
|
||||
$client_details
|
||||
</div>
|
||||
<div class="col-span-4 flex flex-col mr-6">
|
||||
<div class="col-span-4 flex flex-col mr-6 flex-wrap">
|
||||
$company_details
|
||||
</div>
|
||||
<div class="col-span-4 flex flex-col">
|
||||
<div class="col-span-4 flex flex-col flex-wrap">
|
||||
$company_address
|
||||
</div>
|
||||
</div>
|
||||
|
@ -48,15 +48,15 @@ $custom_css
|
||||
<div class="w-1/2 border-l pl-4 border-black mr-4">
|
||||
<p class="font-semibold uppercase text-yellow-600">From:</p>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col mr-5">
|
||||
<div class="flex flex-col mr-5 flex-wrap">
|
||||
$company_details
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col flex-wrap">
|
||||
$company_address
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/3 border-l pl-4 border-black flex flex-col">
|
||||
<div class="w-1/3 border-l pl-4 border-black flex flex-col flex-wrap">
|
||||
<p class="font-semibold uppercase text-yellow-600">To:</p>
|
||||
$client_details
|
||||
</div>
|
||||
|
@ -45,10 +45,10 @@ $custom_css
|
||||
<div class="col-span-2 p-3">
|
||||
<h1 class="text-white font-bold text-3xl">$company.name</h1>
|
||||
</div>
|
||||
<div class="col-span-2 p-3 flex flex-col text-white">
|
||||
<div class="col-span-2 p-3 flex flex-col text-white flex-wrap">
|
||||
$company_details
|
||||
</div>
|
||||
<div class="col-span-2 p-3 flex flex-col text-white">
|
||||
<div class="col-span-2 p-3 flex flex-col text-white flex-wrap">
|
||||
$entity_details
|
||||
</div>
|
||||
</div>
|
||||
@ -64,7 +64,7 @@ $custom_css
|
||||
<div class="col-span-2 p-3">
|
||||
$company_logo
|
||||
</div>
|
||||
<div class="col-span-3 p-3 flex flex-col">
|
||||
<div class="col-span-3 p-3 flex flex-col flex-wrap">
|
||||
$client_details
|
||||
</div>
|
||||
</div>
|
||||
@ -141,10 +141,10 @@ $custom_css
|
||||
return '
|
||||
<div class="footer bg-orange-600 flex justify-between py-8 px-12" style="page-break-inside: avoid;">
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-start-4 col-span-4 p-3 flex flex-col text-white text-right">
|
||||
<div class="col-start-4 col-span-4 p-3 flex flex-col text-white text-right flex-wrap">
|
||||
$company_details
|
||||
</div>
|
||||
<div class="col-span-4 p-3 flex flex-col text-white text-right">
|
||||
<div class="col-span-4 p-3 flex flex-col text-white text-right flex-wrap">
|
||||
$company_address
|
||||
</div>
|
||||
</div>
|
||||
|
@ -53,7 +53,7 @@ $custom_css
|
||||
$company_logo
|
||||
</div>
|
||||
<div class="col-span-5">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col flex-wrap">
|
||||
$entity_details
|
||||
</div>
|
||||
</div>
|
||||
@ -67,13 +67,13 @@ $custom_css
|
||||
<div class="flex flex-col">
|
||||
<div class="flex">
|
||||
<p class="uppercase text-orange-800">$to_label:</p>
|
||||
<div class="flex flex-col ml-2">
|
||||
<div class="flex flex-col ml-2 flex-wrap">
|
||||
$client_details
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-5">
|
||||
<p class="uppercase text-orange-800">$from_label:</p>
|
||||
<div class="flex flex-col ml-2">
|
||||
<div class="flex flex-col ml-2 flex-wrap">
|
||||
$company_details
|
||||
</div>
|
||||
</div>
|
||||
|
@ -56,7 +56,7 @@ $custom_css
|
||||
|
||||
public function body()
|
||||
{
|
||||
return '<div class="flex flex-col mt-8">
|
||||
return '<div class="flex flex-col mt-8 flex-wrap">
|
||||
$client_details
|
||||
</div>
|
||||
<table class="w-full table-auto mt-8">
|
||||
|
@ -48,7 +48,7 @@ $custom_css
|
||||
$company_logo
|
||||
</div>
|
||||
<div class="col-span-5 bg-teal-600 p-5 text-white">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col flex-wrap">
|
||||
$entity_details
|
||||
</div>
|
||||
</div>
|
||||
@ -62,7 +62,7 @@ $custom_css
|
||||
<div class="flex flex-col">
|
||||
<p class="font-semibold text-teal-600 pl-4">$to_label:</p>
|
||||
<div class="flex border-dashed border-t-4 border-b-4 border-teal-600 py-4 mt-4 pl-4">
|
||||
<section class="flex flex-col">
|
||||
<section class="flex flex-col flex-wrap">
|
||||
$client_details
|
||||
</section>
|
||||
</div>
|
||||
@ -72,7 +72,7 @@ $custom_css
|
||||
<div class="flex flex-col">
|
||||
<p class="font-semibold text-teal-600 pl-4">$from_label:</p>
|
||||
<div class="flex border-dashed border-t-4 border-b-4 border-teal-600 py-4 mt-4 pl-4">
|
||||
<section class="flex flex-col">
|
||||
<section class="flex flex-col flex-wrap">
|
||||
$company_details
|
||||
</section>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user