From 6beb30d4eda32b6fb2e638f3b60bdea226ac8aa7 Mon Sep 17 00:00:00 2001
From: "Loukas Wets (lowe)" <lowe@odoo.com>
Date: Fri, 31 Mar 2023 14:35:31 +0000
Subject: [PATCH] [IMP] point_of_sale: improve customer list in mobile view

Prior to this commit, data in the customer list of the POS were
partially omitted or lost outside of the screen if the resolution was
under 768px and/or in portrait mode.

Now, when the screen is under 768px, each data/values in each column for
each row are stacked on top of each other.

Task-3223287

closes odoo/odoo#117479

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
---
 addons/point_of_sale/static/src/scss/pos.scss | 94 ++++++++++++++-----
 .../Screens/PartnerListScreen/PartnerLine.xml | 16 ++--
 .../PartnerListScreen/PartnerListScreen.xml   |  5 +-
 3 files changed, 81 insertions(+), 34 deletions(-)

diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss
index c578546fa61..c11374ed1d6 100644
--- a/addons/point_of_sale/static/src/scss/pos.scss
+++ b/addons/point_of_sale/static/src/scss/pos.scss
@@ -1955,6 +1955,10 @@ td {
     background: rgba(255,255,255,.25);
 }
 
+.pos .partnerlist-screen tr.highlight div.unselect-tag-mobile{
+    display: none;
+}
+
 .pos .partnerlist-screen .partner-list th.partner-line-last-column-placeholder,
 .pos .partnerlist-screen .partner-list td.partner-line-last-column-placeholder {
     padding: 0;
@@ -2095,6 +2099,7 @@ td {
     width: 340px;
     font-size: 14px;
     box-sizing: border-box;
+    min-width: 100px;
 }
 .pos .partnerlist-screen .partner-details input.partner-name {
     font-size: 24px;
@@ -2106,40 +2111,81 @@ td {
     opacity: 0.3;
 }
 
-@media screen and (max-width: 768px) {
-    .pos .partnerlist-screen .partner-details-box {
+@media screen and (max-width: 1045px) {
+    .partner-list thead {
+        display: none;
+    }
+
+    .partner-list-contents {
+        margin-top: 10px;
+    }
+
+    .partner-line {
         display: flex;
         flex-wrap: wrap;
+        align-items: center;
+        padding: 12px 24px;
     }
-    .pos .partnerlist-screen .partner-details-left{
-        width: auto;
-        float: none;
-        flex-grow: 1;
+    .partner-line td {
+        flex-basis: 100%;
+        padding: 5px;
     }
-    .pos .partnerlist-screen .partner-details-right{
-        width: auto;
-        float: none;
-        flex-grow: 1;
+    .partner-line-adress{
+        margin-top: 10px;
     }
-    .pos .partnerlist-screen .partner-detail{
+    .partner-line-balance{
+        margin-top: 10px;
+        order: 3;
+    }
+    .partner-line .pos-right-align{
+        text-align: left ;
+    }
+    .partner-line-email {
+        order: 2;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: 10px;
+    }
+    .edit-partner-button-cell {
+        order: 4;
+        margin-top: 10px;
+    }
+    .partner-list-contents {
+        margin-top: 10px;
+    }
+    .partner-list td {
+        padding: 0px 0px !important;
+    }
+    .partner-line-last-column-placeholder {
+        display: none;
+    }
+    .pos .partnerlist-screen tr.highlight div.unselect-tag{
+        display: none;
+    }
+
+    .pos .partnerlist-screen tr.highlight div.unselect-tag-mobile {
+        display: inline-block;
+        color: #fff;
+        padding: 3px 6px;
+        font-size: small;
+        border-radius: 2px;
+        margin-top: 12px;
+        background: rgba(255,255,255,.25);
+        margin-left: 10px;
+    }
+    .pos .partnerlist-screen  .partner-details-box{
         display: flex;
         flex-direction: column;
     }
-    .pos .partnerlist-screen .partner-details input,
-    .pos .partnerlist-screen .partner-details select
-    {
-        width: 100%;
-    }
-    .pos .partnerlist-screen .partner-details input.partner-name {
-        width: 100%;
-    }
-    .pos .partnerlist-screen .partner-detail > .label{
-        width: auto;
+    .pos .partnerlist-screen  .partner-details-box .label{
         text-align: left;
     }
-    .pos .partnerlist-screen .partner-list td {
-        overflow: hidden;
-        white-space: nowrap;
+    .pos .partnerlist-screen .partner-details-left{
+        width: unset;
+    }
+    .pos .partnerlist-screen .partner-details-right{
+        width: unset;
     }
 }
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerLine.xml b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerLine.xml
index 52762932877..3f8dcce77f2 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerLine.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerLine.xml
@@ -16,10 +16,12 @@
                     <span> unselect </span>
                 </div>
             </td>
-            <td t-if="!env.isMobile">
-                <t t-esc="props.partner.address" />
+            <td>
+                <div class="partner-line-adress" t-if="props.partner.address">
+                    <t t-esc="props.partner.address" />
+                </div>
             </td>
-            <td class="partner-line-email" t-if="!env.isMobile">
+            <td class="partner-line-email" >
                 <div t-if="props.partner.phone">
                     <i class="fa fa-fw fa-phone"/><t t-esc="props.partner.phone"/>
                 </div>
@@ -30,13 +32,13 @@
                     <i class="fa fa-fw fa-paper-plane-o"/><t t-esc="props.partner.email" />
                 </div>
             </td>
-            <td t-if="env.isMobile">
-                <t t-esc="props.partner.zip or ''" />
-                <span t-if="highlight"><br/></span>
-            </td>
             <td class="partner-line-balance" t-if="props.isBalanceDisplayed"></td>
             <td class="edit-partner-button-cell">
                 <button class="edit-partner-button" t-on-click.stop="() => props.onClickEdit(props.partner)">DETAILS</button>
+                <div t-if="_isPartnerSelected" class="unselect-tag-mobile">
+                    <i class="fa fa-times"></i>
+                    <span> unselect </span>
+                </div>
             </td>
             <td class="partner-line-last-column-placeholder oe_invisible"></td>
         </tr>
diff --git a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
index 9a2ba44032e..cbebde3ac2e 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
@@ -50,9 +50,8 @@
                                         <thead>
                                             <tr>
                                                 <th>Name</th>
-                                                <th t-if="!env.isMobile">Address</th>
-                                                <th t-if="!env.isMobile" class="partner-line-email">Contact</th>
-                                                <th t-if="env.isMobile">ZIP</th>
+                                                <th>Address</th>
+                                                <th class="partner-line-email">Contact</th>
                                                 <th class="pos-right-align" t-if="isBalanceDisplayed">Balance</th>
                                                 <th class="partner-line-details"></th>
                                                 <th class="partner-line-last-column-placeholder oe_invisible"></th>