[IMP] account*: update invoice page view on customer portal

*account_payment, l10_in(_sale), sale(_stock), web

With this commit:
The invoice preview in portal (/my/invoices..) is now the HTML version of the
PDF report.
The HTML preview is based on the invoice report to closely match what is
already done in Odoo.

The invoice preview is displayed in an 'iframe', it is mandatory since:
1. Reports are rendered as a separate page as it returns the whole page after
   rendering, which has tag <html>, <head> etc
2. Reports are having their own layouts and their own assets that we we cannot
   load in the page directly or it will break the website layout.
3. We can not use report template with t-call because internally reports are
   using extra params like context_timestamp, company, DateTime, user etc which
   is used in header/footer

--

There will be a chatter (as a modal) to display/see the history of the document

--

For responsive purpose, we use new tables with limited column (Description,
Quantity and Amount) for responsive purpose (small screen).
It also adds some bootstrap classes to reports for responsive purpose.

--

The 'Pay Now' button remains if you already paid with 'wire transfer'.

--

Add margin after the header and before the footer to look like the real printed
document, without alterating the real printed version

Task ID: 39876

4 files changed, 7 insertions, 1 deletions

diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss
index e23b2585b50..2cc5972aea0 100644
--- a/addons/web/static/src/scss/layout_background.scss
+++ b/addons/web/static/src/scss/layout_background.scss
@@ -19,6 +19,7 @@
     }
 }
 .o_background_footer {
+    margin-top: 200px;
     ul {
         border-top: 1px solid $o-brand-primary;
         border-bottom: 1px solid $o-brand-primary;
@@ -34,7 +35,6 @@
     background-size: cover;
     background-position: bottom center;
     background-repeat: no-repeat;
-    min-height: 900px;
     thead tr th, h2 {
         color: $o-brand-primary;
     }
diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss
index f3aa7601107..fae631cda6a 100644
--- a/addons/web/static/src/scss/layout_boxed.scss
+++ b/addons/web/static/src/scss/layout_boxed.scss
@@ -15,6 +15,7 @@
     }
 }
 .o_boxed_footer {
+    margin-top: 200px;
     white-space: nowrap;
     border-top: 3px solid $gray;
     ul {
diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss
index ecbdb02153f..03ce4c993b9 100644
--- a/addons/web/static/src/scss/layout_clean.scss
+++ b/addons/web/static/src/scss/layout_clean.scss
@@ -3,6 +3,7 @@
     color: #000;
 }
 .o_clean_header {
+    border-bottom: 1px solid $o-brand-primary;
     img {
         max-height: 90px;
         max-width: 300px;
@@ -10,6 +11,7 @@
 }
 .o_clean_footer {
     margin: 0 3px;
+    margin-top: 200px;
     border-top: 3px solid $o-brand-primary;
     h4 {
         color: $o-brand-primary;
diff --git a/addons/web/static/src/scss/layout_standard.scss b/addons/web/static/src/scss/layout_standard.scss
new file mode 100644
index 00000000000..acc0e07bf1c
--- /dev/null
+++ b/addons/web/static/src/scss/layout_standard.scss
@@ -0,0 +1,3 @@
+.o_standard_footer {
+    margin-top: 200px;
+}