mirror of
				https://github.com/invoiceninja/invoiceninja.git
				synced 2025-10-31 09:27:33 -04:00 
			
		
		
		
	Merge pull request #4051 from beganovich/v2-design-improvements
Design improvements
This commit is contained in:
		
						commit
						519293c6dd
					
				| @ -173,14 +173,7 @@ class PreviewController extends BaseController | ||||
| 
 | ||||
|         $html = new HtmlEngine(null, $invoice->invitations()->first(), 'invoice'); | ||||
| 
 | ||||
|         if (isset(request()->design['name'])) { | ||||
|             $design = new Design(strtolower(request()->design['name'])); | ||||
|         } else { | ||||
|         $design = new Design(Design::CUSTOM, ['custom_partials' => request()->design['design']]); | ||||
|         } | ||||
| 
 | ||||
|         // $designer = new Designer($entity_obj, $design_object, $entity_obj->client->getSetting('pdf_variables'), lcfirst($entity));
 | ||||
|         // $html = $this->generateEntityHtml($designer, $entity_obj);
 | ||||
| 
 | ||||
|         $state = [ | ||||
|             'template' => $design->elements([ | ||||
|  | ||||
| @ -67,7 +67,7 @@ class Design extends BaseDesign | ||||
|             : config('ninja.designs.base_path'); | ||||
| 
 | ||||
|         return file_get_contents( | ||||
|             $path.$this->design | ||||
|             $path . $this->design | ||||
|         ); | ||||
|     } | ||||
| 
 | ||||
| @ -164,7 +164,7 @@ class Design extends BaseDesign | ||||
| 
 | ||||
|         foreach ($variables as $variable) { | ||||
|             $elements[] = ['element' => 'tr', 'properties' => ['hidden' => $this->entityVariableCheck($variable)], 'elements' => [ | ||||
|                 ['element' => 'th', 'content' => $variable.'_label'], | ||||
|                 ['element' => 'th', 'content' => $variable . '_label'], | ||||
|                 ['element' => 'th', 'content' => $variable], | ||||
|             ]]; | ||||
|         } | ||||
| @ -187,7 +187,7 @@ class Design extends BaseDesign | ||||
|         $elements = []; | ||||
| 
 | ||||
|         foreach ($this->context['pdf_variables']["{$this->type}_columns"] as $column) { | ||||
|             $elements[] = ['element' => 'th', 'content' => $column.'_label']; | ||||
|             $elements[] = ['element' => 'th', 'content' => $column . '_label']; | ||||
|         } | ||||
| 
 | ||||
|         return $elements; | ||||
| @ -226,6 +226,22 @@ class Design extends BaseDesign | ||||
|             ]], | ||||
|         ]; | ||||
| 
 | ||||
|         foreach (['discount', 'custom_surcharge1', 'custom_surcharge2', 'custom_surcharge3', 'custom_surcharge4'] as $property) { | ||||
|             $variable = sprintf('%s%s', '$', $property); | ||||
| 
 | ||||
|             if ( | ||||
|                 !is_null($this->entity->{$property}) || | ||||
|                 !empty($this->entity->{$property}) || | ||||
|                 $this->entity->{$property} !== 0 | ||||
|             ) { | ||||
|                 continue; | ||||
|             } | ||||
| 
 | ||||
|             $variables = array_filter($variables, function ($m) use ($variable) { | ||||
|                 return $m != $variable; | ||||
|             }); | ||||
|         } | ||||
| 
 | ||||
|         foreach ($variables as $variable) { | ||||
|             if ($variable == '$total_taxes' || $variable == '$line_taxes') { | ||||
|                 continue; | ||||
| @ -233,7 +249,7 @@ class Design extends BaseDesign | ||||
| 
 | ||||
|             $elements[] = ['element' => 'div', 'elements' => [ | ||||
|                 ['element' => 'span', 'content' => 'This is placeholder for the 3rd fraction of element.', 'properties' => ['style' => 'opacity: 0%']], // Placeholder for fraction of element (3fr)
 | ||||
|                 ['element' => 'span', 'content' => $variable.'_label'], | ||||
|                 ['element' => 'span', 'content' => $variable . '_label'], | ||||
|                 ['element' => 'span', 'content' => $variable], | ||||
|             ]]; | ||||
|         } | ||||
|  | ||||
| @ -79,7 +79,9 @@ trait DesignHelpers | ||||
|                 $document->importNode($element, true) | ||||
|             ); | ||||
| 
 | ||||
|             return $document->saveXML(); | ||||
|             $html = $document->saveHTML(); | ||||
| 
 | ||||
|             return str_replace('%24', '$', $html); | ||||
|         } | ||||
| 
 | ||||
|         return ''; | ||||
|  | ||||
| @ -71,14 +71,8 @@ class PdfMaker | ||||
| 
 | ||||
|     public function getCompiledHTML($final = false) | ||||
|     { | ||||
|         if ($final) { | ||||
|             $html = $this->document->saveXML(); | ||||
|         $html =  $this->document->saveHTML(); | ||||
|      | ||||
|             $filtered = strtr($html, $this->filters); | ||||
| 
 | ||||
|             return $filtered; | ||||
|         } | ||||
| 
 | ||||
|         return $this->document->saveXML(); | ||||
|         return str_replace('%24', '$', $html); | ||||
|     } | ||||
| } | ||||
|  | ||||
| @ -104,6 +104,7 @@ class HtmlEngine | ||||
|         //$data['$invoice_date']           = ['value' => $this->date ?: ' ', 'label' => ctrans('texts.invoice_date')];
 | ||||
|         $data['$invoice.date'] = &$data['$date']; | ||||
|         $data['$due_date'] = ['value' => $this->entity->due_date ?: ' ', 'label' => ctrans('texts.'.$this->entity_string.'_due_date')]; | ||||
|         $data['$payment_due'] = ['value' => $this->entity->due_date ?: ' ', 'label' => ctrans('texts.payment_due')]; | ||||
|         $data['$invoice.due_date'] = &$data['$due_date']; | ||||
|         $data['$invoice.number'] = ['value' => $this->entity->number ?: ' ', 'label' => ctrans('texts.invoice_number')]; | ||||
|         $data['$invoice.po_number'] = ['value' => $this->entity->po_number ?: ' ', 'label' => ctrans('texts.po_number')]; | ||||
| @ -154,6 +155,7 @@ class HtmlEngine | ||||
|         $data['$partial_due'] = ['value' => Number::formatMoney($this->entity->partial, $this->client) ?: ' ', 'label' => ctrans('texts.partial_due')]; | ||||
|         $data['$total'] = ['value' => Number::formatMoney($this->entity_calc->getTotal(), $this->client) ?: ' ', 'label' => ctrans('texts.total')]; | ||||
|         $data['$amount'] = &$data['$total']; | ||||
|         $data['$amount_due'] = ['value' => &$data['$total']['value'], 'label' => ctrans('texts.amount_due')]; | ||||
|         $data['$quote.total'] = &$data['$total']; | ||||
|         $data['$invoice.total'] = ['value' => Number::formatMoney($this->entity_calc->getTotal(), $this->client) ?: ' ', 'label' => ctrans('texts.invoice_total')]; | ||||
|         $data['$invoice.amount'] = &$data['$total']; | ||||
| @ -275,10 +277,10 @@ class HtmlEngine | ||||
|         $data['$company3'] = ['value' => $this->settings->custom_value3 ?: ' ', 'label' => $this->makeCustomField('company3')]; | ||||
|         $data['$company4'] = ['value' => $this->settings->custom_value4 ?: ' ', 'label' => $this->makeCustomField('company4')]; | ||||
| 
 | ||||
|         $data['$custom_surcharge1'] = ['value' => $this->entity->custom_surcharge1, 'label' => $this->makeCustomField('custom_surcharge1')]; | ||||
|         $data['$custom_surcharge2'] = ['value' => $this->entity->custom_surcharge2, 'label' => $this->makeCustomField('custom_surcharge2')]; | ||||
|         $data['$custom_surcharge3'] = ['value' => $this->entity->custom_surcharge3, 'label' => $this->makeCustomField('custom_surcharge3')]; | ||||
|         $data['$custom_surcharge4'] = ['value' => $this->entity->custom_surcharge4, 'label' => $this->makeCustomField('custom_surcharge4')]; | ||||
|         $data['$custom_surcharge1'] = ['value' => $this->entity->custom_surcharge1 ?: ' ', 'label' => $this->makeCustomField('custom_surcharge1')]; | ||||
|         $data['$custom_surcharge2'] = ['value' => $this->entity->custom_surcharge2 ?: ' ', 'label' => $this->makeCustomField('custom_surcharge2')]; | ||||
|         $data['$custom_surcharge3'] = ['value' => $this->entity->custom_surcharge3 ?: ' ', 'label' => $this->makeCustomField('custom_surcharge3')]; | ||||
|         $data['$custom_surcharge4'] = ['value' => $this->entity->custom_surcharge4 ?: ' ', 'label' => $this->makeCustomField('custom_surcharge4')]; | ||||
| 
 | ||||
|         $data['$product.date'] = ['value' => '', 'label' => ctrans('texts.date')]; | ||||
|         $data['$product.discount'] = ['value' => '', 'label' => ctrans('texts.discount')]; | ||||
| @ -313,6 +315,8 @@ class HtmlEngine | ||||
|         $data['_rate2'] = ['value' => '', 'label' => ctrans('texts.tax')]; | ||||
|         $data['_rate3'] = ['value' => '', 'label' => ctrans('texts.tax')]; | ||||
| 
 | ||||
|         $data['$font-size'] = ['value' => $this->settings->font_size . 'px', 'label' => '']; | ||||
| 
 | ||||
|         // $data['custom_label1']              = ['value' => '', 'label' => ctrans('texts.')];
 | ||||
|         // $data['custom_label2']              = ['value' => '', 'label' => ctrans('texts.')];
 | ||||
|         // $data['custom_label3']              = ['value' => '', 'label' => ctrans('texts.')];
 | ||||
|  | ||||
| @ -3266,4 +3266,6 @@ return [ | ||||
|     'add_payment_method_first' => 'add payment method', | ||||
| 
 | ||||
|     'no_items_selected' => 'No items selected.', | ||||
| 
 | ||||
|     'payment_due' => 'Payment due', | ||||
| ]; | ||||
|  | ||||
| @ -3,18 +3,16 @@ | ||||
|     <head id="head"> | ||||
|         <meta charset="UTF-8" /> | ||||
|         <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||
|     </head> | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             * { | ||||
|                 margin: 0; | ||||
|                 padding: 0; | ||||
|             font-size: 14px; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
|             margin-top: 1cm; | ||||
|             margin-bottom: 1cm; | ||||
|                 margin: 1cm; | ||||
|             } | ||||
| 
 | ||||
|             body { | ||||
| @ -120,11 +118,15 @@ | ||||
|             #product-table-footer | ||||
|                 > * | ||||
|                 [data-element='product-table-balance-due-label'], | ||||
|         #product-table-footer > * [data-element='product-table-balance-due'] { | ||||
|             #product-table-footer | ||||
|                 > * | ||||
|                 [data-element='product-table-balance-due'] { | ||||
|                 font-weight: bold; | ||||
|                 font-size: 1.4rem; | ||||
|             } | ||||
|         #product-table-footer > * [data-element='product-table-balance-due'] { | ||||
|             #product-table-footer | ||||
|                 > * | ||||
|                 [data-element='product-table-balance-due'] { | ||||
|                 color: #35a39a; | ||||
|             } | ||||
|             #product-table-footer > * > :last-child { | ||||
| @ -132,8 +134,8 @@ | ||||
|                 padding-right: 1.5rem; | ||||
|             } | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|     <div class="header-wrapper" id="header"> | ||||
|         <div><!-- Empty space placeholder--></div> | ||||
| 
 | ||||
| @ -141,6 +143,7 @@ | ||||
|         <div id="company-address"></div> | ||||
|     </div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <img | ||||
|             class="company-logo" | ||||
|             src="$company.logo" | ||||
| @ -158,7 +161,7 @@ | ||||
|         <table id="product-table" cellspacing="0"></table> | ||||
| 
 | ||||
|         <div id="product-table-footer" cellspacing="0"></div> | ||||
| 
 | ||||
|         <footer id="footer"></footer> | ||||
|     </body> | ||||
|      | ||||
|     <div id="footer"><!-- Your footer content here --></div> | ||||
| </html> | ||||
|  | ||||
| @ -6,23 +6,14 @@ | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             body { | ||||
|                 margin: 2rem; | ||||
|                 -webkit-font-smoothing: antialiased; | ||||
|                 -moz-osx-font-smoothing: grayscale; | ||||
|                 font-family: Arial, Helvetica, sans-serif; | ||||
|                 font-size: 14px; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
|                 margin-top: 1cm; | ||||
|                 margin-bottom: 1cm; | ||||
|             } | ||||
| 
 | ||||
|             @media print { | ||||
|                 body { | ||||
|                     margin: 0; | ||||
|                     padding: 0; | ||||
|                 } | ||||
|                 margin: 1cm; | ||||
|             } | ||||
| 
 | ||||
|             .header-container { | ||||
| @ -172,8 +163,10 @@ | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <div id="header"></div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <div class="header-container" id="header"> | ||||
|         <div class="header-container"> | ||||
|             <img | ||||
|                 src="$company.logo" | ||||
|                 class="company-logo" | ||||
| @ -196,7 +189,7 @@ | ||||
|         <table id="product-table" cellspacing="0"></table> | ||||
| 
 | ||||
|         <div id="product-table-footer" cellspacing="0"></div> | ||||
| 
 | ||||
|         <footer id="footer"></footer> | ||||
|     </body> | ||||
|      | ||||
|     <div id="footer"><!-- Your footer content here --></div> | ||||
| </html> | ||||
|  | ||||
| @ -7,23 +7,16 @@ | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             body { | ||||
|                 margin: 2rem; | ||||
|                 -webkit-font-smoothing: antialiased; | ||||
|                 -moz-osx-font-smoothing: grayscale; | ||||
|                 font-family: Arial, Helvetica, sans-serif; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
|                 margin-top: 1cm; | ||||
|                 margin-bottom: 1cm; | ||||
|                 margin: 1cm; | ||||
|             } | ||||
| 
 | ||||
|             @media print { | ||||
|                 body { | ||||
|                     margin-top: 0; | ||||
|                     margin-right: 0; | ||||
|                 } | ||||
|             } | ||||
|             .header-container { | ||||
|                 display: grid; | ||||
|                 grid-template-columns: 1fr 1fr 1fr; | ||||
| @ -134,8 +127,10 @@ | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <div id="header"></div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <div class="header-container" id="header"> | ||||
|         <div class="header-container"> | ||||
|             <img | ||||
|                 class="company-logo" | ||||
|                 src="$company.logo" | ||||
| @ -157,7 +152,7 @@ | ||||
|         <table id="product-table" cellspacing="0"></table> | ||||
| 
 | ||||
|         <div id="product-table-footer" cellspacing="0"></div> | ||||
| 
 | ||||
|         <footer id="footer"></footer> | ||||
|     </body> | ||||
|      | ||||
|     <div id="footer"><!-- Your footer content here --></div> | ||||
| </html> | ||||
|  | ||||
| @ -6,9 +6,7 @@ | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             * { | ||||
|                 margin: 0; | ||||
|                 padding: 0; | ||||
|                 font-size: 14px; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
| @ -128,8 +126,10 @@ | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <div id="header"></div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <div class="header-wrapper" id="header"> | ||||
|         <div class="header-wrapper"> | ||||
|             <div id="client-details"></div> | ||||
| 
 | ||||
|             <div class="company-info-wrapper"> | ||||
| @ -156,7 +156,7 @@ | ||||
|         <table id="product-table" cellspacing="0"></table> | ||||
| 
 | ||||
|         <div id="product-table-footer" cellspacing="0"></div> | ||||
| 
 | ||||
|         <footer id="footer"></footer> | ||||
|     </body> | ||||
| 
 | ||||
|     <div id="footer"><!-- Your footer content here --></div> | ||||
| </html> | ||||
|  | ||||
| @ -6,14 +6,11 @@ | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             * { | ||||
|                 margin: 0; | ||||
|                 padding: 0; | ||||
|                 font-size: 14px; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
|                 margin-top: 1cm; | ||||
|                 margin-bottom: 1cm; | ||||
|                 margin: 1cm; | ||||
|             } | ||||
| 
 | ||||
|             body { | ||||
| @ -22,16 +19,6 @@ | ||||
|                 font-family: Arial, Helvetica, sans-serif; | ||||
|             } | ||||
| 
 | ||||
|             @media print { | ||||
|                 body { | ||||
|                     margin: 0; | ||||
|                     padding: 0; | ||||
|                 } | ||||
|             } | ||||
|             body { | ||||
|                 margin: 2rem; | ||||
|             } | ||||
| 
 | ||||
|             .company-logo-wrapper { | ||||
|                 display: flex; | ||||
|                 flex-direction: row; | ||||
| @ -147,8 +134,10 @@ | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <div id="header"></div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <div class="company-logo-wrapper" id="header"> | ||||
|         <div class="company-logo-wrapper"> | ||||
|             <img | ||||
|                 class="company-logo" | ||||
|                 src="$company.logo" | ||||
| @ -181,10 +170,10 @@ | ||||
|         <table id="product-table" cellspacing="0"></table> | ||||
| 
 | ||||
|         <div id="product-table-footer" cellspacing="0"></div> | ||||
|     </body> | ||||
|      | ||||
|     <footer id="footer"> | ||||
|         <p class="thanks-label">$thanks_label!</p> | ||||
|         <hr class="double-border" /> | ||||
|     </footer> | ||||
|     </body> | ||||
| </html> | ||||
|  | ||||
| @ -6,14 +6,11 @@ | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             * { | ||||
|                 margin: 0; | ||||
|                 padding: 0; | ||||
|                 font-size: 14px; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
|                 margin-top: 1cm; | ||||
|                 margin-bottom: 1cm; | ||||
|                 margin: 1cm; | ||||
|             } | ||||
| 
 | ||||
|             body { | ||||
| @ -22,16 +19,6 @@ | ||||
|                 font-family: Arial, Helvetica, sans-serif; | ||||
|             } | ||||
| 
 | ||||
|             @media print { | ||||
|                 body { | ||||
|                     margin: 0; | ||||
|                     padding: 0; | ||||
|                 } | ||||
|             } | ||||
|             body { | ||||
|                 margin: 2rem; | ||||
|             } | ||||
| 
 | ||||
|             .header-wrapper { | ||||
|                 display: grid; | ||||
|                 grid-template-columns: 1.2fr 1.8fr; | ||||
| @ -151,8 +138,10 @@ | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <div id="header"></div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <div class="header-wrapper" id="header"> | ||||
|         <div class="header-wrapper"> | ||||
|             <div class="header-left-side-wrapper"> | ||||
|                 <p class="header-text-label">$from_label:</p> | ||||
| 
 | ||||
| @ -185,8 +174,8 @@ | ||||
|                 <span class="entity-property-value">$entity_number</span> | ||||
|             </span> | ||||
|             <span> | ||||
|                 <span class="entity-property-label">$entity_date_label:</span> | ||||
|                 <span class="entity-property-value">$entity_date</span> | ||||
|                 <span class="entity-property-label">$date_label:</span> | ||||
|                 <span class="entity-property-value">$date</span> | ||||
|             </span> | ||||
|             <span> | ||||
|                 <span class="entity-property-label">$payment_due_label:</span> | ||||
| @ -205,7 +194,7 @@ | ||||
|         <table id="product-table" cellspacing="0"></table> | ||||
| 
 | ||||
|         <div id="product-table-footer" cellspacing="0"></div> | ||||
| 
 | ||||
|         <footer id="footer"></footer> | ||||
|     </body> | ||||
| 
 | ||||
|     <div id="footer"><!-- Your footer content here --></div> | ||||
| </html> | ||||
|  | ||||
| @ -6,14 +6,7 @@ | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             * { | ||||
|                 margin: 0; | ||||
|                 padding: 0; | ||||
|                 font-size: 14px; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
|                 margin-top: 1cm; | ||||
|                 margin-bottom: 1cm; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             body { | ||||
| @ -22,12 +15,6 @@ | ||||
|                 font-family: Arial, Helvetica, sans-serif; | ||||
|             } | ||||
| 
 | ||||
|             @media print { | ||||
|                 body { | ||||
|                     margin: 0; | ||||
|                     padding: 0; | ||||
|                 } | ||||
|             } | ||||
|             .header-container { | ||||
|                 background-color: #f46521; | ||||
|                 color: white; | ||||
| @ -100,8 +87,6 @@ | ||||
| 
 | ||||
|             .footer-wrapper { | ||||
|                 display: grid; | ||||
|                 position: fixed; | ||||
|                 bottom: 0; | ||||
|                 width: 100%; | ||||
|                 padding: 1.5rem; | ||||
|                 grid-template-columns: 2fr 1fr 1fr; | ||||
| @ -151,13 +136,13 @@ | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|     <div class="header-container" id="header"> | ||||
|         <h1 class="company-name">$company.name</h1> | ||||
| 
 | ||||
|         <table id="entity-details" cellspacing="0"></table> | ||||
|     </div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <div class="logo-client-wrapper"> | ||||
|             <img | ||||
|                 class="company-logo" | ||||
| @ -173,8 +158,9 @@ | ||||
| 
 | ||||
|             <div id="product-table-footer" cellspacing="0"></div> | ||||
|         </div> | ||||
|     </body> | ||||
| 
 | ||||
|         <div class="footer-wrapper"> | ||||
|     <div class="footer-wrapper" id="footer"> | ||||
|         <div> | ||||
|             <!-- Placeholder for offset --> | ||||
|         </div> | ||||
| @ -182,7 +168,4 @@ | ||||
|         <div id="company-details"></div> | ||||
|         <div id="company-address"></div> | ||||
|     </div> | ||||
| 
 | ||||
|         <footer id="footer"></footer> | ||||
|     </body> | ||||
| </html> | ||||
|  | ||||
| @ -6,14 +6,11 @@ | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             * { | ||||
|                 margin: 0; | ||||
|                 padding: 0; | ||||
|                 font-size: 14px; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
|                 margin-top: 1cm; | ||||
|                 margin-bottom: 1cm; | ||||
|                 margin: 1cm; | ||||
|             } | ||||
| 
 | ||||
|             body { | ||||
| @ -22,16 +19,6 @@ | ||||
|                 font-family: Arial, Helvetica, sans-serif; | ||||
|             } | ||||
| 
 | ||||
|             @media print { | ||||
|                 body { | ||||
|                     margin: 0; | ||||
|                     padding: 0; | ||||
|                 } | ||||
|             } | ||||
|             body { | ||||
|                 margin: 2rem; | ||||
|             } | ||||
| 
 | ||||
|             .header-wrapper { | ||||
|                 display: grid; | ||||
|                 grid-template-columns: 1fr 1fr 1fr; | ||||
| @ -115,8 +102,10 @@ | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <div id="header"></div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <div class="header-wrapper" id="header"> | ||||
|         <div class="header-wrapper"> | ||||
|             <p>$company.name</p> | ||||
| 
 | ||||
|             <div id="company-address"></div> | ||||
| @ -137,7 +126,7 @@ | ||||
|         <table id="product-table" cellspacing="0"></table> | ||||
| 
 | ||||
|         <div id="product-table-footer" cellspacing="0"></div> | ||||
| 
 | ||||
|         <footer id="footer"></footer> | ||||
|     </body> | ||||
|      | ||||
|     <div id="footer"><!-- Your footer content here --></div> | ||||
| </html> | ||||
|  | ||||
| @ -6,14 +6,11 @@ | ||||
| 
 | ||||
|         <style id="style"> | ||||
|             * { | ||||
|                 margin: 0; | ||||
|                 padding: 0; | ||||
|                 font-size: 14px; | ||||
|                 font-size: '$font-size'; | ||||
|             } | ||||
| 
 | ||||
|             @page { | ||||
|                 margin-top: 1cm; | ||||
|                 margin-bottom: 1cm; | ||||
|                 margin: 1cm; | ||||
|             } | ||||
| 
 | ||||
|             body { | ||||
| @ -22,16 +19,6 @@ | ||||
|                 font-family: Arial, Helvetica, sans-serif; | ||||
|             } | ||||
| 
 | ||||
|             @media print { | ||||
|                 body { | ||||
|                     margin: 0; | ||||
|                     padding: 0; | ||||
|                 } | ||||
|             } | ||||
|             body { | ||||
|                 margin: 2rem; | ||||
|             } | ||||
| 
 | ||||
|             .header-wrapper { | ||||
|                 display: grid; | ||||
|                 grid-template-columns: 1fr 1fr 1fr; | ||||
| @ -152,8 +139,10 @@ | ||||
|         </style> | ||||
|     </head> | ||||
| 
 | ||||
|     <div id="header"></div> | ||||
| 
 | ||||
|     <body id="body"> | ||||
|         <div class="header-wrapper" id="header"> | ||||
|         <div class="header-wrapper"> | ||||
|             <img | ||||
|                 class="company-logo" | ||||
|                 src="$company.logo" | ||||
| @ -188,7 +177,7 @@ | ||||
|         <table id="product-table" cellspacing="0"></table> | ||||
| 
 | ||||
|         <div id="product-table-footer" cellspacing="0"></div> | ||||
| 
 | ||||
|         <footer id="footer"></footer> | ||||
|     </body> | ||||
|      | ||||
|     <div id="footer"><!-- Your footer content here --></div> | ||||
| </html> | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user