[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>
This commit is contained in:
Loukas Wets (lowe)
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user