From 79882dc4b26f9527b68eb54a16c11bd39edd0f2c Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Fri, 30 Apr 2021 08:14:27 +0000
Subject: [PATCH] [FIX] pos: Receipt-Screen: elements misaligned on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Users were automatically redirected to the middle of the
  receipt screen on mobile. It direcly showed the ticket but
  users missed the buttons at the top of the page.
  We changed the DOM to use the right "flex-direction" value.

- "(Both will be sent by email)" appears when you select a customer
  and ask an invoice.
  This text was positioned in absolute to be aligned to the bottom right
  on the input. This can't work when you have a scroll bar like on mobile.
  So we now simply use "text-align: right".

- Email input was too small on mobile.
  To fix this, we decided to only keep the icon and remove "Send" text.

Task ID: 2453679

X-original-commit: ce2c8414333ca3ae6a28da0c59502e44eb16980e
Part-of: odoo/odoo#79448
Co-authored-by: Adrien Dieudonné <adr@odoo.com>
---
 addons/point_of_sale/static/src/css/pos.css        | 14 +++-----------
 .../xml/Screens/ReceiptScreen/ReceiptScreen.xml    | 11 ++++++-----
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 22f8f073910..856b7f0d73b 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -3468,14 +3468,6 @@ td {
     display: flex;
 }
 
-.receipt-screen .default-view .actions .send-email .email-icon {
-    padding: 1rem;
-    border: solid 1px rgb(209, 209, 209);
-    border-right: none;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-}
-
 .receipt-screen .default-view .actions .send-email .input-email {
     display: flex;
     flex: 1;
@@ -3522,14 +3514,14 @@ td {
 }
 
 .receipt-screen .notice .send-mail-info {
-    position: absolute;
-    right: 1.5rem;
+    width: 100%;
+    text-align: right;
     font-style: italic;
 }
 
 @media screen and (max-width: 768px) {
     .receipt-screen .default-view {
-        flex-direction: column-reverse;
+        flex-direction: column;
         overflow: auto;
     }
     .receipt-screen .default-view .actions {
diff --git a/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
index 9e6c21923a2..269b00b1b5e 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
@@ -16,9 +16,6 @@
                     </div>
                 </div>
                 <div class="default-view">
-                    <div class="pos-receipt-container">
-                        <OrderReceipt order="currentOrder" t-ref="order-receipt" />
-                    </div>
                     <div class="actions">
                         <h1>How would you like to receive your receipt<t t-if="currentOrder.is_to_invoice()"> &amp; invoice</t>?</h1>
                         <div class="buttons">
@@ -27,10 +24,11 @@
                             </div>
                         </div>
                         <form t-on-submit.prevent="onSendEmail" class="send-email">
-                            <div class="email-icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
                             <div class="input-email">
                                 <input type="email" placeholder="Email Receipt" t-model="orderUiState.inputEmail" />
-                                <button class="send" t-att-class="{ highlight: is_email(orderUiState.inputEmail) }" type="submit">Send</button>
+                                <button class="send" t-att-class="{ highlight: is_email(orderUiState.inputEmail) }" type="submit">
+                                    <i class="fa fa-paper-plane" aria-hidden="true"/>
+                                </button>
                             </div>
                         </form>
                         <div class="notice">
@@ -42,6 +40,9 @@
                             </div>
                         </div>
                     </div>
+                    <div class="pos-receipt-container">
+                        <OrderReceipt order="currentOrder" t-ref="order-receipt" />
+                    </div>
                 </div>
             </div>
         </div>