[IMP] point_of_sale: responsive UI

The point of sale user interface has been adapted to work on mobile
devices.

We modified the design of payment lines to look like payment methods and
stack them together in the mobile view.

When you had a cash method, the amount was not preffilled during
payment, now we always prefill the amount to keep it more simple.

closes odoo/odoo#51891

Task-id: 1887609
Related: odoo/upgrade#1334
Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>

1 files changed, 342 insertions, 154 deletions

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index af5c7b57175..9211354963e 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -209,7 +209,7 @@ td {
 }
 /* firefox seems to ignore the relative positionning of the subwindow-container
  * putting this inside subwindow-container fixes it.
- */ 
+ */
 .pos .subwindow .subwindow-container-fix{
     height: 100%;
     position: relative;
@@ -313,16 +313,14 @@ td {
     padding:0;
     color: gray;
     background: #393939;
+    display: flex;
 }
 
 /*  a) The left part of the top-bar */
 
 .pos .pos-branding{
-    position: absolute;
-    display: table-cell;
-    left:0;
-    top:0;
-    width:439px;
+    max-width: 459px;
+    flex-grow: 1;
     height:100%;
     margin:0;
     padding:0;
@@ -336,7 +334,7 @@ td {
     margin-left: 10px;
     margin-top: 5px;
     vertical-align:middle;
-} 
+}
 .pos .pos-branding .username{
     float:right;
     color:#DDD;
@@ -350,16 +348,11 @@ td {
 /*  b) The right part of the top-bar */
 
 .pos .pos-rightheader {
-    position: absolute;
-    left:440px;
-    right:0;
-    top:0;
+    flex-grow: 1;
     height:100%;
-    display: -webkit-flex;
     display: flex;
     overflow : hidden;
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
 }
 .pos .pos-rightheader > * {
     border-right: 1px solid #292929;
@@ -483,7 +476,7 @@ td {
 /*  c) The notifications indicator */
 
 .pos .oe_status{
-    float:right; 
+    float:right;
     color: rgba(255,255,255,0.4);
     padding: 14px;
     line-height: 20px;
@@ -528,23 +521,61 @@ td {
 
 /*  ********* The leftpane contains the order, numpad and paypad ********* */
 
+.pos .switchpane {
+    height: 100px;
+    flex-shrink: 0;
+    display: flex;
+}
+
+.pos .switchpane .order-info {
+    flex-grow: 1;
+    border-top: 1px solid #ebebeb;
+    padding: 8px 16px;
+    background-color: #FFFFFF;
+    color: #6ec89b;
+}
+.pos .switchpane .order-info h2 {
+    padding: 0px;
+    margin: 3px 0px;
+    font-weight: bold;
+}
+
+.pos .switchpane .btn-switchpane {
+    background-color: #6ec89b;
+    border-radius: 0px;
+    color: #FFFFFF;
+    font-size: 15px;
+    font-weight: bold;
+    flex-grow: 1;
+    flex-basis: 50%;
+}
+
+.pos .switchpane .btn-switchpane.secondary {
+    background-color: #FFFFFF;
+    color: #6ec89b;
+}
+
+
+
 .pos .leftpane {
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-        -ms-box-sizing: border-box;
-            box-sizing: border-box;
-    position:absolute;
-    left:0;
-    width:440px;
-    top:0px;
-    bottom:0;
-    border-right: solid 1px #CECBCB;
     border-right: solid 3px #787878;
     background: #e2e2e2;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    max-width: 500px;
 }
 
 .pos .leftpane .pads {
     border-top: solid 3px rgb(110, 200, 155);
+    display: flex;
+    flex-direction: column;
+}
+
+.pos .leftpane .pads .subpads {
+    display: flex;
+    flex-direction: row;
 }
 
 /*  ********* The control buttons ********* */
@@ -604,7 +635,7 @@ td {
 .pos .control-button.highlight,
 .pos .button.highlight {
     background: #6EC89B !important;
-    border: solid 1px #64AF8A !important; 
+    border: solid 1px #64AF8A !important;
     color: white !important;
 }
 .pos .control-button.altlight,
@@ -625,15 +656,12 @@ td {
 /*  ********* The actionpad (payment, set customer) ********* */
 
 .pos .actionpad {
-    display: inline-block;
-    float: left;
     padding: 0;
     margin: 16px;
     margin-top: 8px;
     margin-right: 0;
     text-align: center;
     vertical-align: top;
-    width: 186px;
     border: none;
     border-radius: 0;
     border-top: 1px solid;
@@ -641,6 +669,7 @@ td {
     border-color: #bfbfbf;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
+    flex-grow: 1;
 }
 .pos .actionpad .button {
     position: relative;
@@ -716,8 +745,6 @@ td {
 /*  ********* The Numpad ********* */
 
 .pos .numpad {
-    display: inline-block;
-    float: right;
     text-align: center;
     width: 216px;
     margin: 16px;
@@ -782,13 +809,24 @@ td {
 /*  ********* The right pane contains the screens and headers ********* */
 
 .pos .rightpane {
-    position: absolute;
-    top: 0;
-    bottom:0;
-    left: 440px;
-    right: 0;
-    vertical-align: top;
-    -webkit-transform: translate3d(0,0,0);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-basis: 25%;
+    flex-grow: 1;
+}
+
+.pos .products-widget {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.pos .product-list-container {
+    overflow: hidden;
+    overflow-y: scroll;
+    flex-grow: 1;
 }
 
 .pos .rightpane-header {
@@ -797,6 +835,7 @@ td {
     border-bottom: 1px solid #c7c7c7;
     background: #d3d3d3;
     text-align: center;
+    display: flex;
 }
 
 /*  ********* The product list  ********* */
@@ -805,6 +844,8 @@ td {
     padding: 10px;
     text-align: left;
     -webkit-transform: translate3d(0,0,0);
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .pos .product-list-scroller{
@@ -820,13 +861,6 @@ td {
     -webkit-transform: translate3d(0,0,0);
 
 }
-.pos .product-list-container {
-    position:absolute;
-    top:0px;
-    bottom:0px;
-    left:0px;
-    right:0px;
-}
 
 /*  a) the product list navigation bar */
 
@@ -870,11 +904,18 @@ td {
     margin: 12px 6px;
 }
 
+@media screen and (max-width: 768px) {
+    .pos .breadcrumb-button.breadcrumb-home {
+        width: auto;
+    }
+}
+
 /*  b) the search box */
 
 .pos .searchbox {
     position: absolute;
     right: 2px;
+    flex-grow: 1;
 }
 .pos .searchbox input {
     width: 100px;
@@ -915,6 +956,26 @@ td {
     cursor: pointer;
 }
 
+@media screen and (max-width: 768px) {
+  .search-clear.left {
+      position: relative;
+      top: -40px;
+      left: 5%;
+  }
+
+  .search-clear.right {
+      position: relative;
+      top: -70px;
+      left: 85%;
+  }
+  .pos .searchbox input {
+      width: 70%;
+  }
+  .pos .searchbox {
+      position: relative;
+  }
+}
+
 /*  c) the categories list */
 
 .pos .categories {
@@ -1022,7 +1083,7 @@ td {
     line-height: 14px;
     width: 100%;
     /* for some reason the -90deg orientation doesn't match the -webkit-linear-gradient. It should be 180deg here.
-     * webkit also insists on rendering *both* gradients instead of only the native one. So it doesn't looks right. ugh. 
+     * webkit also insists on rendering *both* gradients instead of only the native one. So it doesn't looks right. ugh.
     background:         linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1)); */
     /*background:#FFF;*/
     padding: 3px;
@@ -1063,6 +1124,34 @@ td {
     vertical-align: middle;
 }
 
+@media screen and (max-width: 768px) {
+    .pos .product-list {
+        padding: 0px;
+    }
+    .pos .product {
+        width: 32%;
+        height: auto;
+        margin: 0px !important;
+    }
+    .pos .product:after {
+        content: "";
+        display: block;
+        padding-bottom: 100%;
+    }
+    .pos .product .product-img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .pos .product .product-img img {
+        max-height: none;
+        max-width: none;
+    }
+
+}
+
+
+
 .pos .product .price-tag {
     position: absolute;
     top: 2px;
@@ -1133,12 +1222,22 @@ td {
 /* a) Generic Screen Layout Constructs */
 
 .screen .screen-content{
+    position: relative;
     margin: 0px auto;
     max-width: 1024px;
     text-align: left;
     height: 100%;
     overflow: hidden;
-    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.screen .screen-full-width{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
 }
 
 @media screen and (min-width: 1024px) {
@@ -1149,20 +1248,22 @@ td {
 }
 
 .screen .top-content{
-    position: absolute;
-    left: 0px; top: 0px; right: 0px;
     height: 64px;
     border-bottom: dashed 1px rgb(215,215,215);
     text-align: center;
+    display: flex;
+    padding-right: 10px;
+    padding-left: 10px;
 }
 .screen .top-content .button {
-    position: absolute;
-    top: 0px;
     line-height: 32px;
     padding: 3px 13px;
     font-size: 20px;
     background: rgb(230, 230, 230);
-    margin: 12px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    margin-left: 6px;
+    margin-right: 6px;
     border-radius: 3px;
     border: solid 1px rgb(209, 209, 209);
     cursor: pointer;
@@ -1184,43 +1285,50 @@ td {
 .screen .top-content .button.highlight:hover {
     background: rgb(120,210,165);
 }
-.screen .top-content .button.back {
-    left: 0px;
-    margin-left: 16px;
+
+.screen .top-content .top-content-center {
+    flex-grow: 1;
 }
-.screen .top-content .button.next{
-    right: 0px;
-    margin-right: 16px;
+
+.screen .main-content{
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    overflow-y: scroll;
 }
 .screen .left-content{
-    position: absolute;
-    left:0px; top: 64px; bottom: 0px;
-    right:50%;
     overflow-x: hidden;
     overflow-y: auto;
     border-right: dashed 1px rgb(215,215,215);
+    flex-grow: 1;
+    min-width: 200px;
 }
-.screen .left-content.pc40{
-    right: 66%;
-}
+
 .screen .right-content{
-    position: absolute;
-    right:0px; top: 64px; bottom: 0px;
-    left:50%;
     overflow-x: hidden;
     overflow-y: auto;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
-.screen .right-content.pc60{
-    left:34%;
+
+.pos .btn-switch-payment {
+    background-color: #6ec89b;
+    border-radius: 0px;
+    color: #FFFFFF;
+    font-size: 15px;
+    font-weight: bold;
+    height: 100px;
+    width: 100%;
 }
 .screen .centered-content{
-    position: absolute;
-    right:25%; top: 64px; bottom: 0px;
-    left:25%;
     border-right: dashed 1px rgb(215,215,215);
     border-left: dashed 1px rgb(215,215,215);
     overflow-x: hidden;
     overflow-y: auto;
+    max-width: 512px;
+    margin-left: auto;
+    margin-right: auto;
 }
 .screen .full-content{
     position: absolute;
@@ -1233,7 +1341,8 @@ td {
 .pos .screen .layout-table {
     border:none;
     width:100%;
-    height:100%;
+    display: flex;
+    flex-grow: 1;
 }
 
 .pos .screen .header-row {
@@ -1262,23 +1371,26 @@ td {
 
 /* b) The payment screen */
 
+.pos .payment-buttons-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
 .pos .payment-numpad {
-    display: inline-block;
-    width: 50%;
     box-sizing: border-box;
-    padding: 16px;
+    margin: 16px;
     text-align: center;
-    float: left;
+    flex-grow: 1;
 }
 .pos .payment-numpad .numpad {
-    float: none;
     border-radius: 4px;
     border-top: 1px solid;
     border-left: 1px solid;
     border-color: #cacaca;
     width: 296px;
-    overflow: hidden;
-    margin: 0;
+    height: 100%;
+    margin: auto;
 }
 .pos .payment-numpad .numpad button {
     width: 74px;
@@ -1299,61 +1411,61 @@ td {
 }
 
 .pos .paymentlines {
-    width: 100%;
     border-spacing: 0px 10px;
     border-collapse: inherit;
+    margin: 16px;
 }
-.pos .paymentlines .controls {
-    width: 40px;
-}
-.pos .paymentlines .body{
-    background: white;
-    border-radius: 3px;
-}
-.pos .paymentline{
-    display: grid;
-    grid-template-columns: 4fr 3fr 1fr;
-    font-size: 22px;
-    border-bottom: 10px solid #f0eeee;
+
+.paymentlines .paymentline:first-child {
+    border-top-width: 1px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
 }
-.pos .paymentline.electronic_payment {
-    display: grid;
-    grid-template-columns: 7fr 1fr;
+.paymentlines .paymentline:last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
 }
-.pos .paymentline.heading {
+
+.pos  .paymentline {
+    background: #e2e2e2;
+    line-height: 74px;
     font-size: 16px;
-    font-weight: bold;
+    border: solid 1px rgb(202, 202, 202);
+    border-top-width: 0px;
+    cursor: pointer;
+    display: flex;
+    padding-left: 30px;
+    padding-right: 30px;
+    flex-grow: 1;
+    flex-basis: 100%;
 }
-.pos .paymentline.selected {
-    font-size: 22px;
-    background: #6EC89B;
+.paymentline:active {
+    background: black;
+    border-color: black;
     color: white;
 }
-.pos .paymentline.selected.payment-terminal {
-    border-bottom: 0px;
-}
-.pos .paymentline > *{
-    padding: 8px 12px;
+.paymentline .payment-name {
+    flex-grow: 1;
+    margin-left: 10px;
+    margin-right: 10px;
 }
-.pos .paymentline .col-tendered {
-    min-width: 90px;
+.paymentline .payment-amount {
+    margin-left: 10px;
+    margin-right: 10px;
 }
-.pos .paymentline .col-name {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
+.paymentline .delete-button {
+  margin-left: 10px;
+  margin-right: 10px;
 }
-.pos .paymentline .delete-button{
-    cursor: pointer;
-    text-align: center;
+.paymentline.selected{
+  background: white;
 }
+
 .pos .payment-buttons {
-    display: inline-block;
-    width: 50%;
     box-sizing: border-box;
-    padding: 16px;
+    margin: 16px;
     padding-left: 0;
-    float: right;
+    flex-grow: 5;
 }
 .payment-screen .payment-buttons .button {
     background: #e2e2e2;
@@ -1457,6 +1569,28 @@ td {
     padding-right: 7px;
 }
 
+@media screen and (max-width: 768px) {
+      .pos .paymentlines-container {
+          min-height: 0px;
+      }
+      .payment-status-container {
+          font-size: 22px;
+      }
+      .payment-screen .payment-buttons {
+          display: flex;
+          flex-wrap: wrap;
+      }
+      .payment-screen .payment-buttons .button {
+          flex-basis: 30%;
+          flex-grow: 1;
+          border: 1px solid rgba(0,0,0,0.2);
+          border-radius: 0px;
+      }
+      .payment-screen .payment-buttons .button .fa {
+          display: none;
+      }
+}
+
 /* c) The receipt screen */
 
 .pos .receipt-screen .centered-content .button {
@@ -1509,8 +1643,8 @@ td {
     .o_notification_manager,
     .oe_leftbar,
     .oe_loading,
-    .pos .pos-topheader, 
-    .pos .pos-leftpane, 
+    .pos .pos-topheader,
+    .pos .pos-leftpane,
     .pos .keyboard_frame,
     .pos .receipt-screen header,
     .pos .receipt-screen .top-content,
@@ -1521,9 +1655,9 @@ td {
     .pos,
     .pos .pos-content,
     .pos .rightpane,
-    .pos .screen, 
-    .pos .window, 
-    .pos .window .subwindow, 
+    .pos .screen,
+    .pos .window,
+    .pos .window .subwindow,
     .pos .subwindow .subwindow-container{
         display: block;
         position: static;
@@ -1628,6 +1762,10 @@ td {
 
 /* e) The Client List Screen */
 
+.pos .clientlist-screen .full-content{
+    overflow: auto;
+}
+
 .pos .clientlist-screen .client-list{
     font-size: 16px;
     width: 100%;
@@ -1758,52 +1896,69 @@ td {
 .pos .clientlist-screen .client-detail > .empty{
     opacity: 0.3;
 }
-.pos .clientlist-screen .searchbox{
-    right: auto;
-    margin-left: -90px;
-    margin-top:8px;
-    left: 50%;
+
+.pos .clientlist-screen .button.new-customer {
+    min-width: 30px;
 }
-.pos .clientlist-screen .searchbox input{
+
+.pos .searchbox-client {
+    padding: 3px 13px;
+    margin-top: 12px;
+    margin-bottom : 12px;
+}
+
+.pos .searchbox-client input {
     width: 120px;
+    border: 1px solid #cecbcb;
+    padding: 10px 20px;
+    padding-left: 38px;
+    padding-right: 33px;
+    background-color: white;
+    border-radius: 20px;
+    font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
+    font-size: 13px;
 }
-.pos .clientlist-screen .button.new-customer {
-    left: 50%;
-    margin-left: 120px;
+.pos .searchbox-client input:focus {
+    outline: none;
+    box-shadow: 0px 0px 0px 2px rgb(153, 153, 255) inset;
+    color: rgb(153, 153, 255);
 }
 
-/* These css declarations is to make sure that the list of clients
- * always occupies the remaining space regardless when the client
- * details is displayed or not.
- */
- .clientlist-screen .client-window {
+.pos .search-clear-client {
+    position: absolute;
+    top: 9px;
+    width: 30px;
+    height: 30px;
     display: flex;
-    flex-flow: column;
-    height: 100%;
+    align-items: center;
+    justify-content: center;
 }
 
-.clientlist-screen .client-window section.list {
-    flex: 1;
-    overflow: auto;
+.search-clear-client.left {
+    left: 11px;
+    color: #808080;
 }
 
+.search-clear-client.right {
+    left: 145px;
+    color: #808080;
+    cursor: pointer;
+}
+
+
+
+
 
 /*  ********* The OrderWidget  ********* */
 
 .pos .order-container{
-    position: absolute;
     top: 0px;
     width:100%;
     height: 100%;
     background: white;
-}
-
-.pos .order-scroller{
-    width:100%;
-    height:100%;
+    flex-grow: 1;
     overflow: hidden;
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
 }
 
 .pos .scrollable-y{
@@ -1988,6 +2143,8 @@ td {
 }
 .paymentmethods {
     margin: 16px;
+    display: flex;
+    flex-wrap: wrap;
 }
 .paymentmethods .button {
     background: #e2e2e2;
@@ -1996,7 +2153,6 @@ td {
     border: solid 1px rgb(202, 202, 202);
     border-top-width: 0px;
     cursor: pointer;
-    text-align: center;
 }
 .paymentmethods .button:first-child {
     border-top-width: 1px;
@@ -2017,8 +2173,39 @@ td {
     color: white;
     border-color: #6EC89B;
 }
+.paymentmethod {
+    display: flex;
+    padding-left: 30px;
+    padding-right: 30px;
+    flex-grow: 1;
+    flex-basis: 100%;
+}
+.paymentmethod .payment-name {
+    flex-grow: 1;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+.paymentmethod .payment-amount {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+.paymentmethod .delete-button {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.paymentmethod.selected{
+  background: white;
+}
 
-
+@media screen and (max-width: 768px) {
+    .paymentmethods .button {
+        border: solid 1px rgb(202, 202, 202);
+        border-radius: 3px;
+    }
+    .paymentmethod {
+        flex-basis: 30%;
+    }
+}
 
 /*  ********* The ActionBarWidget  ********* */
 
@@ -2098,7 +2285,7 @@ td {
     top: 10px;
     width: 200px;
     font-size: 10px;
-    
+
     background: rgba(0,0,0,0.82);
     color: white;
     padding-bottom: 10px;
@@ -2188,7 +2375,8 @@ td {
 .pos .modal-dialog .popup{
     position: absolute;
     margin: auto;
-    width:500px;
+    max-width:500px;
+    width: 100%;
     height:400px;
     text-align:center;
     font-size:20px;
@@ -2350,7 +2538,7 @@ td {
     line-height: 50px;
     margin-top: -1px;
     border-top: solid 3px rgba(60,60,60,0.1);
-    
+
 }
 .pos .popup.popup-selection .selection-item {
     width: auto;