[FIX] pos_restaurant: Reduce "Back to Floor" button size on mobile

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>
This commit is contained in:
Romain Estievenart
2021-11-05 19:44:47 +00:00
committed by Adrien Dieudonne
co-authored by Adrien Dieudonné
parent 360a1168cb
commit 7334cd3086
2 changed files with 17 additions and 9 deletions
@@ -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;
}
@@ -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>