pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] pos_restaurant: split bill screen responsive

Browse Source 
The layout of the split bill screen is broken after the responsive pos ui.
This fixes the split bill screen and make it also responsive.

New classes are introduced because reusing proved to be very difficult.
One benefit of declaring a new classes (then styling them) is that we can
target the particular elements that we wanted to change without the concerns
that another elements are changed.

closes odoo/odoo#54529

X-original-commit: 51f0c6a1be912192d910d47b79ac2cb3c5b42784
Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>
This commit is contained in:
Joseph Caburnay
2020-07-15 15:29:11 +00:00
parent 8d721f6728
commit 800fa0812a
4 changed files with 103 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/point_of_sale/static/src/css/pos.css
+2 -1
View File
@@ -2193,7 +2193,6 @@ td {
.splitbill-screen .order-info {
text-align: center;
margin-bottom:20px;
padding: 20px 0px;
font-size: 64px;
color: #43996E;
@@ -2214,6 +2213,8 @@ td {
text-align: left;
max-width: 500px;
-webkit-transform: translate3d(0,0,0);
height: max-content;
width: 100%;
}
.splitbill-screen .order .orderline.selected{
background: rgb(110,200,155);
addons/pos_restaurant/static/src/css/restaurant.css
+76
View File
@@ -315,3 +315,79 @@
margin-right: 4px;
}
/* ------ SPLIT BILL SCREEN ------- */
.splitbill-screen.screen .contents {
display: flex;
flex-flow: column nowrap;
margin: 0px auto;
max-width: 1024px;
border-left: dashed 1px rgb(215,215,215);
border-right: dashed 1px rgb(215,215,215);
height: 100%;
}
.splitbill-screen.screen .main {
display: flex;
flex-flow: row nowrap;
/* take the remaining vertical space */
flex: 1;
/* do not capture overflow in this element */
overflow: hidden;
}
.splitbill-screen.screen .main .lines {
display: flex;
flex: 1;
justify-content: center;
/* show scrollbar inside this element if its content overflows */
overflow-y: auto;
}
.splitbill-screen.screen .main .controls {
display: flex;
flex-flow: column nowrap;
}
.splitbill-screen.screen .pay-button {
margin: 16px;
}
.splitbill-screen.screen .pay-button .button {
background: #e2e2e2;
line-height: 74px;
font-size: 16px;
border: solid 1px rgb(202, 202, 202);
border-top-width: 0px;
cursor: pointer;
width: 100%;
text-align: center;
}
.splitbill-screen.screen .pay-button .button:first-child {
border-top-width: 1px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.splitbill-screen.screen .pay-button .button:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.splitbill-screen.screen .pay-button .button:active {
background: black;
border-color: black;
color: white;
}
.splitbill-screen.screen .main .lines {
border-right: dashed 1px rgb(215,215,215);
}
.splitbill-screen.screen .main .controls {
flex: 1;
}
/* ------ NARROWER SCREEN ------ */
@media screen and (max-width: 768px) {
.splitbill-screen.screen .main {
flex-flow: column nowrap;
}
.splitbill-screen.screen .main .controls {
border-top: dashed 1px rgb(215,215,215);
flex: none;
}
}
addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
+24 -20
View File
@@ -3,35 +3,39 @@
<t t-name="SplitBillScreen" owl="1">
<div class="splitbill-screen screen">
<div class="screen-content">
<div class="contents">
<div class="top-content">
<span class="button back" t-on-click="back">
<i class="fa fa-angle-double-left"></i>
<span> </span>
<span>Back</span>
</span>
<h1>Bill Splitting</h1>
</div>
<div class="left-content touch-scrollable scrollable-y">
<div class="order">
<ul class="orderlines">
<t t-foreach="orderlines" t-as="line" t-key="line.cid">
<SplitOrderline line="line" split="splitlines[line.id]" />
</t>
</ul>
<div class="top-content-center">
<h1>Bill Splitting</h1>
</div>
</div>
<div class="right-content touch-scrollable scrollable-y">
<div class="order-info">
<span class="subtotal">
<t t-esc="env.pos.format_currency(newOrder.get_subtotal())" />
</span>
<div class="main">
<div class="lines">
<div class="order">
<ul class="orderlines">
<t t-foreach="orderlines" t-as="line" t-key="line.cid">
<SplitOrderline line="line" split="splitlines[line.id]" />
</t>
</ul>
</div>
</div>
<div class="paymentmethods">
<div class="button payment" t-on-click="proceed">
<i class="fa fa-chevron-right" />
<span> </span>
<span>Payment</span>
<div class="controls">
<div class="order-info">
<span class="subtotal">
<t t-esc="env.pos.format_currency(newOrder.get_subtotal())" />
</span>
</div>
<div class="pay-button">
<div class="button" t-on-click="proceed">
<i class="fa fa-chevron-right" />
<span> </span>
<span>Payment</span>
</div>
</div>
</div>
</div>
addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js
+1 -1
View File
@@ -28,7 +28,7 @@ odoo.define('pos_restaurant.tour.SplitBillScreenTourMethods', function (require)
return [
{
content: 'click pay button',
trigger: `.splitbill-screen .paymentmethods .payment`
trigger: `.splitbill-screen .pay-button .button`
}
]
}