diff --git a/app/Services/PdfMaker/Design.php b/app/Services/PdfMaker/Design.php index e530f7a3caf1..4af38a1442d9 100644 --- a/app/Services/PdfMaker/Design.php +++ b/app/Services/PdfMaker/Design.php @@ -433,7 +433,11 @@ class Design extends BaseDesign ['element' => 'span', 'content' => '$entity.terms_label: ', 'properties' => ['hidden' => $this->entityVariableCheck('$entity.terms'), 'data-ref' => 'total_table-terms-label', 'style' => 'font-weight: bold; text-align: left;']], ['element' => 'span', 'content' => '$entity.terms', 'properties' => ['data-ref' => 'total_table-terms', 'style' => 'text-align: left;']], ]], + ['element' => 'div', 'properties' => ['style' => 'margin-top: 1.5rem; display: flex; align-items: flex-start;'], 'elements' => [ + ['element' => 'img', 'properties' => ['src' => '$invoiceninja.whitelabel', 'style' => 'height: 4rem;', 'hidden' => $this->entity->user->account->isPaid() ? 'true' : 'false', 'id' => 'invoiceninja-whitelabel-logo']], + ]], ]], + ['element' => 'div', 'properties' => ['class' => 'totals-table-right-side'], 'elements' => []], ]; foreach (['discount', 'custom_surcharge1', 'custom_surcharge2', 'custom_surcharge3', 'custom_surcharge4'] as $property) { @@ -461,8 +465,7 @@ class Design extends BaseDesign } foreach ($taxes as $i => $tax) { - $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) + $elements[1]['elements'][] = ['element' => 'div', 'elements' => [ ['element' => 'span', 'content', 'content' => $tax['name'], 'properties' => ['data-ref' => 'totals-table-total_tax_' . $i . '-label']], ['element' => 'span', 'content', 'content' => Number::formatMoney($tax['total'], $this->context['client']), 'properties' => ['data-ref' => 'totals-table-total_tax_' . $i]], ]]; @@ -475,15 +478,13 @@ class Design extends BaseDesign } foreach ($taxes as $i => $tax) { - $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) + $elements[1]['elements'][] = ['element' => 'div', 'elements' => [ ['element' => 'span', 'content', 'content' => $tax['name'], 'properties' => ['data-ref' => 'totals-table-line_tax_' . $i . '-label']], ['element' => 'span', 'content', 'content' => Number::formatMoney($tax['total'], $this->context['client']), 'properties' => ['data-ref' => 'totals-table-line_tax_' . $i]], ]]; } } else { - $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) + $elements[1]['elements'][] = ['element' => 'div', 'elements' => [ ['element' => 'span', 'content' => $variable . '_label', 'properties' => ['data-ref' => 'totals_table-' . substr($variable, 1) . '-label']], ['element' => 'span', 'content' => $variable, 'properties' => ['data-ref' => 'totals_table-' . substr($variable, 1)]], ]]; @@ -491,13 +492,17 @@ class Design extends BaseDesign } if (!is_null($this->entity->partial) && $this->entity->partial > 0) { - $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) + $elements[1]['elements'][] = ['element' => 'div', 'elements' => [ ['element' => 'span', 'content' => '$partial_due_label', 'properties' => ['data-ref' => 'totals_table-partial_due-label']], ['element' => 'span', 'content' => '$partial_due'], ]]; } + $elements[1]['elements'][] = ['element' => 'div', 'elements' => [ + ['element' => 'span', 'content' => '',], + ['element' => 'span', 'content' => ''], + ]]; + return $elements; } } diff --git a/app/Services/PdfMaker/Designs/Utilities/DesignHelpers.php b/app/Services/PdfMaker/Designs/Utilities/DesignHelpers.php index 53330d9b5bd8..5877f3804c1a 100644 --- a/app/Services/PdfMaker/Designs/Utilities/DesignHelpers.php +++ b/app/Services/PdfMaker/Designs/Utilities/DesignHelpers.php @@ -209,11 +209,9 @@ trait DesignHelpers }); */ - $javascript = 'document.querySelectorAll("tbody > tr > td").forEach(t=>{if(""!==t.innerText){let e=t.getAttribute("data-ref").slice(0,-3);document.querySelector(`th[data-ref="${e}-th"]`).removeAttribute("hidden")}}),document.querySelectorAll("tbody > tr > td").forEach(t=>{let e=t.getAttribute("data-ref").slice(0,-3);(e=document.querySelector(`th[data-ref="${e}-th"]`)).hasAttribute("hidden")&&""==t.innerText&&t.setAttribute("hidden","true")});'; return ['element' => 'div', 'elements' => [ - ['element' => 'img', 'properties' => ['src' => '$invoiceninja.whitelabel', 'style' => 'height: 3rem; position: fixed; bottom: 0; left: 0; padding: 5px; margin: 5px;', 'hidden' => $this->entity->user->account->isPaid() ? 'true' : 'false', 'id' => 'invoiceninja-whitelabel-logo']], ['element' => 'script', 'content' => $javascript], ]]; } diff --git a/app/Utils/HtmlEngine.php b/app/Utils/HtmlEngine.php index fdf8e0eeaa04..4626f76e270f 100644 --- a/app/Utils/HtmlEngine.php +++ b/app/Utils/HtmlEngine.php @@ -341,7 +341,7 @@ class HtmlEngine $data['$font_size'] = ['value' => $this->settings->font_size . 'px', 'label' => '']; - $data['$invoiceninja.whitelabel'] = ['value' => asset('images/created-by-invoiceninja-new.png'), 'label' => '']; + $data['$invoiceninja.whitelabel'] = ['value' => 'https://raw.githubusercontent.com/invoiceninja/invoiceninja/v5-develop/public/images/created-by-invoiceninja-new.png', 'label' => '']; $data['$primary_color'] = ['value' => $this->settings->primary_color, 'label' => '']; $data['$secondary_color'] = ['value' => $this->settings->secondary_color, 'label' => '']; diff --git a/database/migrations/2021_01_19_115919_update_designs.php b/database/migrations/2021_02_10_115919_update_designs.php similarity index 100% rename from database/migrations/2021_01_19_115919_update_designs.php rename to database/migrations/2021_02_10_115919_update_designs.php diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html index ea1b23ae6d0d..c45aed83da0c 100644 --- a/resources/views/pdf-designs/bold.html +++ b/resources/views/pdf-designs/bold.html @@ -9,6 +9,7 @@ -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: "$font_size"; + zoom: 80%; } @page { @@ -27,13 +28,11 @@ background-color: #2d2c2a; padding: 3rem; color: white; + min-width: 100%; } .company-logo { height: 6rem; - padding: 2rem; - background-color: white; - margin: -4rem 2rem 2rem; } #company-details, @@ -55,6 +54,8 @@ .client-entity-wrapper { display: grid; grid-template-columns: 1.5fr 1fr; + padding-left: 1rem; + padding-top: 3rem; } .entity-details-wrapper { @@ -99,8 +100,8 @@ #product-table > thead > tr > th, #delivery-note-table > thead > tr > th, #task-table > thead > tr > th { - padding: 1.5rem; - font-size: 1.5rem; + padding: 1.5rem 3rem; + font-size: 1rem; } #product-table > thead > tr > th:last-child, @@ -112,7 +113,7 @@ #product-table > tbody > tr > td, #delivery-note-table > tbody > tr > td, #task-table > tbody > tr > td { - padding: 1.5rem; + padding: 1.5rem 3rem; } #product-table > tbody > tr > td:last-child, @@ -137,12 +138,26 @@ page-break-inside: avoid; } - #table-totals > * { + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; + grid-template-columns: 2fr 1fr; padding-top: .5rem; - padding-left: 1.2rem; - gap: 20px; + padding-left: 3rem; + padding-right: 3rem; + gap: 80px; + } + + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; } #table-totals @@ -165,38 +180,90 @@ text-align: right; padding-right: 1.5rem; } + + .entity-label { + text-transform: uppercase; + color: var(--primary-color); + padding-left: 2rem; + font-size: 1.5rem; + } + + table.page-container { + page-break-after: always; + min-width: 100%; + } + + thead.page-header { + display: table-header-group; + } + + tfoot.page-footer { + display: table-footer-group; + } + + .footer-wrapper { + margin-top: 1rem; + background-color: #2d2c2a; + height: 160px; + min-width: 100%; + position: fixed; + bottom: 0; + padding: 1rem 3rem; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 15px; + } + + + + + + - + + + + -
-
- + + + + + +
+ +
+ +
+
+
+

$entity_label

+
+
-
- +
+
+
+
+
+
-
-
+
-
-
-
-
+
-
+
-
- -
- -
-
- - +
+
diff --git a/resources/views/pdf-designs/business.html b/resources/views/pdf-designs/business.html index d7194536be62..427a77b8f8c8 100644 --- a/resources/views/pdf-designs/business.html +++ b/resources/views/pdf-designs/business.html @@ -9,6 +9,7 @@ -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: "$font_size"; + zoom: 80%; } @page { @@ -37,7 +38,7 @@ #company-details { display: flex; flex-direction: column; - color: #b1b1b1; + color: #AAA9A9; } #company-details > * { @@ -68,20 +69,20 @@ #client-details { display: flex; flex-direction: column; - color: var(--primary-color); + margin-top: 1rem; } #client-details > * { margin-bottom: 0.5rem; } - #client-details > span:nth-child(1) { - font-weight: bold; + #client-details > p:nth-child(1) { + color: var(--primary-color); } #entity-details { background-color: var(--primary-color); - padding: 0.8rem; + padding: 1.2rem; border-radius: 1rem; width: 100%; color: white; @@ -90,6 +91,11 @@ #entity-details th { font-weight: normal; + padding-bottom: .5rem; + } + + #entity-details > tbody > tr > th:nth-child(2) { + text-align: right; } #product-table, @@ -151,7 +157,7 @@ #product-table > tbody > tr:nth-child(odd) > td, #delivery-note-table > tbody > tr:nth-child(odd) > td, #task-table > tbody > tr:nth-child(odd) > td { - background: #e8e8e8; + background: #F7F7F7; } #product-table > tbody > tr:nth-child(even) > td, @@ -177,16 +183,28 @@ border-bottom-right-radius: 1rem; } - #table-totals > * { - background-color: #f7f7f7; + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; - gap: 20px; + grid-template-columns: 2fr 1fr; + gap: 80px; padding-left: 1rem; padding-top: 0.5rem; padding-bottom: 0.8rem; } + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; + } + #table-totals > * [data-element='product-table-balance-due-label'], diff --git a/resources/views/pdf-designs/clean.html b/resources/views/pdf-designs/clean.html index 159957acdb9e..45e99ab0e336 100644 --- a/resources/views/pdf-designs/clean.html +++ b/resources/views/pdf-designs/clean.html @@ -9,6 +9,7 @@ -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: "$font_size"; + zoom: 80%; } @page { @@ -33,7 +34,6 @@ #company-details { display: flex; flex-direction: column; - color: #9f9f9f; } #company-details > span:first-child { @@ -43,12 +43,12 @@ #company-address { display: flex; flex-direction: column; - color: #9f9f9f; } .entity-label { text-transform: uppercase; margin-top: 3.5rem; + padding-left: 1rem; margin-bottom: 1rem; font-weight: bold; color: var(--primary-color); @@ -58,8 +58,8 @@ display: grid; grid-template-columns: 1fr 1fr; padding: 1rem; - border-top: 1px solid #9f9f9f; - border-bottom: 1px solid #9f9f9f; + border-top: 1px solid #d8d8d8; + border-bottom: 1px solid #d8d8d8; } #entity-details { @@ -110,10 +110,17 @@ padding-left: 1rem; } + #product-table > thead > tr > th:nth-last-child(1), + #delivery-note-table > thead > tr > th:nth-last-child(1), + #task-table > thead > tr > th:nth-last-child(1) { + text-align: right; + } + #product-table > tbody > tr > td, #delivery-note-table > tbody > tr > td, #task-table > tbody > tr > td { - border-bottom: 1px solid #9f9f9f; + border-top: 1px solid #d8d8d8; + border-bottom: 1px solid #d8d8d8; padding: 1rem; } @@ -123,6 +130,12 @@ color: var(--primary-color); } + #product-table > tbody > tr > td:last-child, + #delivery-note-table > tbody > tr > td:last-child, + #task-table > tbody > tr > td:last-child { + text-align: right; + } + #product-table > tbody > tr:nth-child(odd), #delivery-note-table > tbody > tr:nth-child(odd), #task-table > tbody > tr:nth-child(odd) { @@ -133,12 +146,24 @@ page-break-inside: avoid; } - #table-totals > * { + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; + grid-template-columns: 2fr 1fr; padding-top: .5rem; - padding-left: 1rem; - gap: 20px; + gap: 80px; + } + + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; } #table-totals diff --git a/resources/views/pdf-designs/creative.html b/resources/views/pdf-designs/creative.html index 90d645930999..e9026344f4eb 100644 --- a/resources/views/pdf-designs/creative.html +++ b/resources/views/pdf-designs/creative.html @@ -9,6 +9,7 @@ -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: "$font_size"; + zoom: 80%; } @page { @@ -37,6 +38,11 @@ flex-direction: column; } + [data-ref="company_details-company.name"] { + color: var(--primary-color); + font-weight: bold; + } + .header-wrapper #client-details > *:first-child { font-weight: bold; } @@ -136,10 +142,24 @@ page-break-inside: avoid; } - #table-totals > * { + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; + grid-template-columns: 2fr 1fr; padding-top: 1rem; + gap: 80px; + } + + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; } #table-totals @@ -153,11 +173,6 @@ padding-left: 1rem; } - #table-totals > *:last-child > * { - border-top: 5px solid var(--primary-color); - padding-top: 1rem; - } - #table-totals > * > :last-child { text-align: right; padding-right: 1rem; diff --git a/resources/views/pdf-designs/elegant.html b/resources/views/pdf-designs/elegant.html index 3c6b00b4c553..367ee8f13ac6 100644 --- a/resources/views/pdf-designs/elegant.html +++ b/resources/views/pdf-designs/elegant.html @@ -9,6 +9,7 @@ -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: "$font_size"; + zoom: 80%; } @page { @@ -32,11 +33,6 @@ height: 5rem; } - .double-border { - margin-top: 3px; - border-color: black; - } - .client-entity-wrapper { display: grid; grid-template-columns: 1.8fr 1.2fr; @@ -121,6 +117,7 @@ #delivery-note-table > tbody > tr > td, #task-table > tbody > tr > td { border-bottom: 1px solid; + border-top: 1px solid; padding: 1rem; } @@ -130,25 +127,29 @@ text-align: right; } - .thanks-label { - text-align: center; - margin-top: 6rem; - font-size: 1.5rem; - font-weight: bold; - padding-bottom: 1rem; - border-bottom: 4px solid; - } - #table-totals { page-break-inside: avoid; } - #table-totals > * { + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; + grid-template-columns: 2fr 1fr; padding-top: 0.5rem; padding-left: 1rem; - gap: 20px; + gap: 80px; + } + + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; } #table-totals @@ -214,8 +215,5 @@
-

$thanks_label!

-
- diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html index c806af01bc42..a36bb42ad376 100644 --- a/resources/views/pdf-designs/hipster.html +++ b/resources/views/pdf-designs/hipster.html @@ -9,6 +9,7 @@ -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: "$font_size"; + zoom: 80%; } @page { @@ -71,11 +72,7 @@ .entity-label { font-size: 3rem; text-transform: uppercase; - margin: 2rem 1rem; - } - - .entity-details-wrapper { - margin: 1rem; + margin: 2rem 0; } .entity-details-wrapper > * { @@ -150,12 +147,24 @@ page-break-inside: avoid; } - #table-totals > * { + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; + grid-template-columns: 2fr 1fr; padding-top: 0.5rem; - padding-left: 1rem; - gap: 20px; + gap: 80px; + } + + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; } #table-totals diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html index 0a0c2acb84b0..dcc24a87a4d3 100644 --- a/resources/views/pdf-designs/modern.html +++ b/resources/views/pdf-designs/modern.html @@ -11,6 +11,7 @@ font-size: "$font_size"; margin: 0; padding: 0; + zoom: 80%; } @page { @@ -28,11 +29,15 @@ color: white; display: grid; grid-template-columns: 1.5fr 1fr; - padding: 1.5rem; - width: 100%; + padding: 3rem; + min-width: 100%; height: 160px; } + .company-name { + text-align: left; + } + .header-container .company-name { font-size: 2rem; } @@ -53,7 +58,7 @@ } .logo-client-wrapper { - margin: 3rem 1.5rem; + margin: 3rem 2rem; display: grid; grid-template-columns: 1.5fr 1fr; } @@ -68,7 +73,7 @@ } .table-wrapper { - margin: 3rem 1.5rem; + margin: 3rem 2rem; } #product-table, @@ -98,7 +103,6 @@ padding: 0.8rem; background-color: var(--secondary-color); color: white; - width: 100%; } #product-table > thead > tr > th:last-child, @@ -129,8 +133,9 @@ .footer-wrapper { margin-top: 1rem; background-color: var(--primary-color); - padding: 1rem; - height: 160px; + padding-left: 3rem; + padding-right: 3rem; + height: 220px; width: 100%; position: fixed; bottom: 0; @@ -142,6 +147,7 @@ width: 100%; grid-template-columns: 1fr 1fr 1fr; color: #fff4e9; + max-height: 140px; } #company-address, @@ -161,12 +167,26 @@ page-break-inside: avoid; } - #table-totals > * { + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; - margin-top: 0.5rem; - margin-right: 1.5rem; - margin-left: 1.5rem; + grid-template-columns: 2fr 1fr; + padding-top: .5rem; + padding-left: 3rem; + padding-right: 3rem; + gap: 80px; + } + + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; } #table-totals @@ -179,22 +199,6 @@ font-size: 1.3rem; } - #table-totals > * > * { - padding-left: 1.5rem; - } - - #table-totals > * > :last-child { - text-align: right; - padding-right: 1rem; - } - - #table-totals > *:last-child { - background-color: var(--secondary-color); - color: white; - padding-top: 0.7rem; - padding-bottom: 0.7rem; - } - table.page-container { page-break-after: always; min-width: 100%; @@ -207,6 +211,10 @@ tfoot.page-footer { display: table-footer-group; } + + .page-content-cell { + padding: 1rem; + } diff --git a/resources/views/pdf-designs/plain.html b/resources/views/pdf-designs/plain.html index ef8909549ae6..6e0681def734 100644 --- a/resources/views/pdf-designs/plain.html +++ b/resources/views/pdf-designs/plain.html @@ -9,6 +9,7 @@ -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: "$font_size"; + zoom: 80%; } @page { @@ -114,12 +115,25 @@ page-break-inside: avoid; } - #table-totals > * { + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; + grid-template-columns: 2fr 1fr; padding-top: .5rem; padding-left: 1rem; - gap: 20px; + gap: 80px; + } + + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; } #table-totals diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html index be7c90815b44..3cf3caac55c3 100644 --- a/resources/views/pdf-designs/playful.html +++ b/resources/views/pdf-designs/playful.html @@ -9,10 +9,11 @@ -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: "$font_size"; + zoom: 80%; } @page { - margin: $global_margin; + margin: -0.25cm !important; } p { @@ -21,8 +22,10 @@ } .header-wrapper { + margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr 1fr; + padding: 2rem 3rem; } .header-wrapper .company-logo { @@ -47,10 +50,10 @@ } .contacts-wrapper { - margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; + padding: 3rem; } .contacts-wrapper .contact-label { @@ -90,7 +93,7 @@ #product-table, #delivery-note-table, #task-table { - margin-top: 3rem; + padding: 3rem; /* margin-bottom: 200px; */ min-width: 100%; table-layout: fixed; @@ -141,6 +144,7 @@ #product-table > tbody > tr > td, #delivery-note-table > tbody > tr > td, #task-table > tbody > tr > td { + background-color: #F7F7F7; border-bottom: 1px solid var(--primary-color); padding: 1rem; } @@ -161,12 +165,25 @@ page-break-inside: avoid; } - #table-totals > * { + #table-totals { display: grid; - grid-template-columns: 3fr 1fr 1fr; - padding-top: 0.5rem; - padding-left: 1rem; - gap: 20px; + grid-template-columns: 2fr 1fr; + gap: 80px; + padding-left: 3rem; + padding-right: 3rem; + } + + #table-totals .totals-table-right-side>* { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #table-totals>.totals-table-right-side>*> :nth-child(1) { + text-align: left; + } + + #table-totals>.totals-table-right-side>*> :nth-child(2) { + text-align: right; } #table-totals @@ -188,9 +205,45 @@ text-align: right; padding-right: 1rem; } + + #header { + position: fixed; + top: 0; + min-width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + margin-left: -10px; + } + + #header > * { + padding: 10px; + } + + #footer { + position: fixed; + bottom: 0; + min-width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + margin-left: -10px; + } + + #footer > * { + padding: 5px; + } - + +
@@ -231,5 +284,16 @@
- +