From 7334cd308673a3bb1077d5c53677a01a18ed3293 Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Fri, 9 Apr 2021 10:29:28 +0000
Subject: [PATCH] [FIX] pos_restaurant: Reduce "Back to Floor" button size on
 mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "back to floor" button is currently too big to be used on mobile
To fix this we have no choice but to display the table number only.
It would be good practice for this number to be unique; we will fix
the demo data in master branch.

This also fix a misalignment between arrow and text.

Task ID: 2453679

X-original-commit: 31dc371c824cee431072788faafb7f1dfd4a1335
Part-of: odoo/odoo#79448
Co-authored-by: Adrien Dieudonné <adr@odoo.com>
---
 .../static/src/css/restaurant.css             |  3 ++-
 .../xml/ChromeWidgets/BackToFloorButton.xml   | 23 ++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/addons/pos_restaurant/static/src/css/restaurant.css b/addons/pos_restaurant/static/src/css/restaurant.css
index 961e75bc961..477a6fbb6a7 100644
--- a/addons/pos_restaurant/static/src/css/restaurant.css
+++ b/addons/pos_restaurant/static/src/css/restaurant.css
@@ -281,10 +281,11 @@
 /* ------ FLOOR BUTTON IN THE ORDER SELECTOR ------- */
 
 .pos .order-button.floor-button {
+    display: flex;
+    align-items: center;
     background: #6EC89B;
     font-weight: bold;
     font-size: 16px;
-    min-width: 128px;
     padding-left: 16px;
     padding-right: 16px;
 }
diff --git a/addons/pos_restaurant/static/src/xml/ChromeWidgets/BackToFloorButton.xml b/addons/pos_restaurant/static/src/xml/ChromeWidgets/BackToFloorButton.xml
index 2b5c865ca18..4103fc8ec2c 100644
--- a/addons/pos_restaurant/static/src/xml/ChromeWidgets/BackToFloorButton.xml
+++ b/addons/pos_restaurant/static/src/xml/ChromeWidgets/BackToFloorButton.xml
@@ -4,14 +4,21 @@
     <t t-name="BackToFloorButton" owl="1">
         <span t-if="hasTable" class="order-button floor-button" t-on-click="backToFloorScreen">
             <i class="fa fa-angle-double-left" role="img" aria-label="Back to floor" title="Back to floor" />
-            <span> </span>
-            <span t-esc="floor.name" />
-            <span> </span>
-            <span class="table-name">
-                <span>( </span>
-                <span t-esc="table.name" />
-                <span> )</span>
-            </span>
+            <t t-if="env.isMobile">
+                <span class="table-name">
+                    <span t-esc="table.name" />
+                </span>
+            </t>
+            <t t-else="">
+                <span> </span>
+                <span t-esc="floor.name" />
+                <span> </span>
+                <span class="table-name">
+                    <span>( </span>
+                    <span t-esc="table.name" />
+                    <span> )</span>
+                </span>
+            </t>
         </span>
         <span t-else=""></span>
     </t>