[IMP] pos: Show categories on mobile
Before this commit, users had to use a popup window to change the product category. It wasn't clear for users who are used to using a large screen. This commit adapts the breadcrumb navigation to be the same as on desktop. This avoids the use of this popup. We also improve the display of products by taking the entire width of the screen. This allows us to add some space between the products. Task ID: 2355025 X-original-commit: 9b7d1d6f9ef1342db5bb0d6a31eafa9d2586d171 Part-of: odoo/odoo#79448 Co-authored-by: Adrien Dieudonné <adr@odoo.com>
This commit is contained in:
Romain Estievenart
committed by
Adrien Dieudonne
Adrien Dieudonne
co-authored by
Adrien Dieudonné
Adrien Dieudonné
parent
a2ddef022f
commit
8e1a4259a4
@@ -850,6 +850,7 @@ td {
|
||||
/* ********* The right pane contains the screens and headers ********* */
|
||||
|
||||
.pos .rightpane {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -875,7 +876,8 @@ td {
|
||||
background: #d3d3d3;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.pos .green-border-bottom {
|
||||
@@ -889,11 +891,17 @@ td {
|
||||
/* ********* The product list ********* */
|
||||
|
||||
.pos .product-list {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
padding: 10px 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.pos .product-list {
|
||||
padding: 0px;
|
||||
gap: 0px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.pos .product-list-scroller{
|
||||
@@ -948,7 +956,6 @@ td {
|
||||
@media screen and (max-width: 768px) {
|
||||
.pos .breadcrumb-button.breadcrumb-home {
|
||||
width: auto;
|
||||
font-size: 13px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
@@ -1050,7 +1057,6 @@ td {
|
||||
padding: 0px;
|
||||
background: #cecece;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -1132,11 +1138,7 @@ td {
|
||||
|
||||
.pos .product {
|
||||
position:relative;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
line-height: 100px;
|
||||
font-size: 11px;
|
||||
margin: 8px !important;
|
||||
width: 122px;
|
||||
height:115px;
|
||||
background:#fff;
|
||||
@@ -1162,9 +1164,6 @@ td {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.pos .product-list {
|
||||
padding: 0px;
|
||||
}
|
||||
.pos .product {
|
||||
width: 32%;
|
||||
height: auto;
|
||||
|
||||
@@ -26,6 +26,9 @@ odoo.define('point_of_sale.ProductsWidgetControlPanel', function(require) {
|
||||
this.searchWordInput.el.value = '';
|
||||
this.trigger('clear-search');
|
||||
}
|
||||
get displayCategImages() {
|
||||
return this.env.pos.config.iface_display_categ_images && !this.env.isMobile;
|
||||
}
|
||||
updateSearch(event) {
|
||||
this.trigger('update-search', event.target.value);
|
||||
if (event.key === 'Enter') {
|
||||
|
||||
+1
-11
@@ -3,19 +3,9 @@
|
||||
|
||||
<t t-name="HomeCategoryBreadcrumb" owl="1">
|
||||
<span class="breadcrumb">
|
||||
<span t-if="!env.isMobile" class="breadcrumb-button breadcrumb-home"
|
||||
t-on-click="trigger('switch-category', 0)">
|
||||
<span class="breadcrumb-button breadcrumb-home" t-on-click="trigger('switch-category', 0)">
|
||||
<i class="fa fa-home" role="img" aria-label="Home" title="Home"></i>
|
||||
</span>
|
||||
<span t-if="env.isMobile" class="breadcrumb-button breadcrumb-home"
|
||||
t-on-click="trigger('categ-popup', props.subcategories)">
|
||||
<t t-if="env.pos.get('selectedCategoryId') === 0">
|
||||
All
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-esc="props.currentCat.name"/>
|
||||
</t>
|
||||
</span>
|
||||
</span>
|
||||
</t>
|
||||
|
||||
|
||||
+7
-9
@@ -5,26 +5,24 @@
|
||||
<div class="products-widget-control">
|
||||
<t t-if="!props.hasNoCategories">
|
||||
<div class="rightpane-header" t-att-class="{
|
||||
'green-border-bottom': !env.pos.config.iface_display_categ_images,
|
||||
'grey-border-bottom': env.pos.config.iface_display_categ_images,
|
||||
'green-border-bottom': !displayCategImages,
|
||||
'grey-border-bottom': displayCategImages,
|
||||
}">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="breadcrumbs">
|
||||
<HomeCategoryBreadcrumb subcategories="props.subcategories" currentCat="props.breadcrumbs[props.breadcrumbs.length - 1]"/>
|
||||
<t t-if="!env.isMobile">
|
||||
<t t-foreach="props.breadcrumbs" t-as="category" t-key="category.id">
|
||||
<CategoryBreadcrumb category="category" />
|
||||
</t>
|
||||
<t t-foreach="props.breadcrumbs" t-as="category" t-key="category.id">
|
||||
<CategoryBreadcrumb category="category" />
|
||||
</t>
|
||||
</div>
|
||||
<!-- Subcategories -->
|
||||
<t t-if="props.subcategories.length > 0 and !env.pos.config.iface_display_categ_images and !env.isMobile">
|
||||
<div t-if="props.subcategories.length > 0 and !displayCategImages" class="category-list simple">
|
||||
<t t-foreach="props.subcategories" t-as="category" t-key="category.id">
|
||||
<CategorySimpleButton category="category" />
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="props.subcategories.length > 0 and env.pos.config.iface_display_categ_images and !env.isMobile">
|
||||
<t t-if="props.subcategories.length > 0 and displayCategImages">
|
||||
<div class="categories">
|
||||
<div class="category-list-scroller">
|
||||
<div class="category-list">
|
||||
|
||||
Reference in New Issue
Block a user