nsinnovations/erpnext
2
0
Fork 0
mirror of https://github.com/frappe/erpnext.git synced 2026-06-01 19:29:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #47182 from diptanilsaha/fix-pos-item-selector-cart-ui

Browse Source 
fix: pos item selector cart ui
This commit is contained in:
Diptanil Saha
2025-04-21 18:30:35 +05:30
committed by GitHub
parent c5db4ca43a 83cf17f07c
commit f3838c0b61
4 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
erpnext/public/scss/point-of-sale.scss
View File

@@ -153,9 +153,11 @@
margin-bottom: 0px; margin-bottom: 0px;
min-height: 8rem; min-height: 8rem;
height: 8rem; height: 8rem;
overflow: hidden;
> img { > img {
@extend .image; @extend .image;
width: 100%;
} }
} }
@@ -395,9 +397,11 @@
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
color: var(--text-light); color: var(--text-light);
margin-right: var(--margin-md); margin-right: var(--margin-md);
overflow: hidden;
> img { > img {
@extend .image; @extend .image;
width: 100%;
} }
} }
@@ -699,14 +703,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 11rem; max-width: 11rem;
height: 11rem; max-height: 11rem;
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
margin-left: var(--margin-md); margin-left: var(--margin-md);
color: var(--gray-500); color: var(--gray-500);
overflow: hidden;
> img { > img {
@extend .image; @extend .image;
width: 100%;
} }
> .item-abbr { > .item-abbr {
@@ -716,8 +722,8 @@
justify-content: center; justify-content: center;
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
font-size: var(--text-3xl); font-size: var(--text-3xl);
width: 100%; width: 11rem;
height: 100%; height: 11rem;
} }
} }
} }
@@ -747,6 +753,7 @@
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--padding-md); column-gap: var(--padding-md);
row-gap: var(--padding-md);
> .auto-fetch-btn { > .auto-fetch-btn {
@extend .pointer-no-select; @extend .pointer-no-select;
@@ -1167,6 +1174,16 @@
} }
} }
@media screen and (max-width: 1200px) {
.point-of-sale-app {
> .items-selector {
> .items-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}
}
@media screen and (max-width: 620px) { @media screen and (max-width: 620px) {
.point-of-sale-app { .point-of-sale-app {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));

1
erpnext/selling/page/point_of_sale/pos_controller.js
View File

@@ -376,7 +376,6 @@ erpnext.PointOfSale.Controller = class {
highlight_cart_item: (item) => { highlight_cart_item: (item) => {
const cart_item = this.cart.get_cart_item(item); const cart_item = this.cart.get_cart_item(item);
this.cart.toggle_item_highlight(cart_item);
}, },
item_field_focused: (fieldname) => { item_field_focused: (fieldname) => {

2
erpnext/selling/page/point_of_sale/pos_item_cart.js
View File

@@ -280,7 +280,7 @@ erpnext.PointOfSale.ItemCart = class {
toggle_item_highlight(item) { toggle_item_highlight(item) {
const $cart_item = $(item); const $cart_item = $(item);
const item_is_highlighted = $cart_item.attr("style") == "background-color:var(--gray-50);"; const item_is_highlighted = $cart_item.attr("style") == "background-color: var(--control-bg);";
if (!item || item_is_highlighted) { if (!item || item_is_highlighted) {
this.item_is_selected = false; this.item_is_selected = false;

6
erpnext/selling/page/point_of_sale/pos_item_selector.js
View File

@@ -104,11 +104,11 @@ erpnext.PointOfSale.ItemSelector = class {
return `<div class="item-qty-pill"> return `<div class="item-qty-pill">
<span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span> <span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
</div> </div>
<div class="flex items-center justify-center border-b-grey text-6xl text-grey-100" style="height:8rem; min-height:8rem"> <div class="item-display">
<img <img
onerror="cur_pos.item_selector.handle_broken_image(this)" onerror="cur_pos.item_selector.handle_broken_image(this)"
class="h-full item-img" src="${item_image}" class="item-img" src="${item_image}"
alt="${frappe.get_abbr(item.item_name)}" alt="${item.item_name}"
> >
</div>`; </div>`;
} else { } else {