fix(pos): UI fixes related to overflowing payment section (#25652)
* fix: additional fields overflowing in payment section
* fix: pos profile filter in pos opening dialog
* fix: item quantity pill
diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index 0bb8e68..9bdaa8d 100644
--- a/erpnext/public/scss/point-of-sale.scss
+++ b/erpnext/public/scss/point-of-sale.scss
@@ -129,11 +129,20 @@
@extend .pointer-no-select;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-base);
+ position: relative;
&:hover {
transform: scale(1.02, 1.02);
}
+ .item-qty-pill {
+ position: absolute;
+ display: flex;
+ margin: var(--margin-sm);
+ justify-content: flex-end;
+ right: 0px;
+ }
+
.item-display {
display: flex;
align-items: center;
@@ -766,9 +775,10 @@
> .payment-modes {
display: flex;
padding-bottom: var(--padding-sm);
- margin-bottom: var(--margin-xs);
+ margin-bottom: var(--margin-sm);
overflow-x: scroll;
overflow-y: hidden;
+ flex-shrink: 0;
> .payment-mode-wrapper {
min-width: 40%;
@@ -825,9 +835,24 @@
> .fields-numpad-container {
display: flex;
flex: 1;
+ height: 100%;
+ position: relative;
+ justify-content: flex-end;
> .fields-section {
flex: 1;
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ padding-bottom: var(--margin-md);
+
+ .invoice-fields {
+ overflow-y: scroll;
+ }
}
> .number-pad {
@@ -835,6 +860,7 @@
display: flex;
justify-content: flex-end;
align-items: flex-end;
+ max-width: 50%;
.numpad-container {
display: grid;
@@ -861,6 +887,7 @@
margin-bottom: var(--margin-sm);
justify-content: center;
flex-direction: column;
+ flex-shrink: 0;
> .totals {
display: flex;
diff --git a/erpnext/selling/page/point_of_sale/pos_controller.js b/erpnext/selling/page/point_of_sale/pos_controller.js
index 8adf5bf..8e0a1e1 100644
--- a/erpnext/selling/page/point_of_sale/pos_controller.js
+++ b/erpnext/selling/page/point_of_sale/pos_controller.js
@@ -58,7 +58,7 @@
}
const pos_profile_query = {
query: 'erpnext.accounts.doctype.pos_profile.pos_profile.pos_profile_query',
- filters: { company: frappe.defaults.get_default('company') }
+ filters: { company: dialog.fields_dict.company.get_value() }
}
const dialog = new frappe.ui.Dialog({
title: __('Create POS Opening Entry'),
diff --git a/erpnext/selling/page/point_of_sale/pos_item_selector.js b/erpnext/selling/page/point_of_sale/pos_item_selector.js
index 9384ae5..b8a82a9 100644
--- a/erpnext/selling/page/point_of_sale/pos_item_selector.js
+++ b/erpnext/selling/page/point_of_sale/pos_item_selector.js
@@ -90,14 +90,16 @@
function get_item_image_html() {
if (!me.hide_images && item_image) {
- return `<div class="flex" style="margin: 8px; justify-content: flex-end">
- <span class="indicator-pill whitespace-nowrap ${indicator_color}" id="text">${qty_to_display}</span></div>
+ return `<div class="item-qty-pill">
+ <span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
+ </div>
<div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100">
<img class="h-full" src="${item_image}" alt="${frappe.get_abbr(item.item_name)}" style="object-fit: cover;">
</div>`;
} else {
- return `<div class="flex" style="margin: 8px; justify-content: flex-end">
- <span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span></div>
+ return `<div class="item-qty-pill">
+ <span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
+ </div>
<div class="item-display abbr">${frappe.get_abbr(item.item_name)}</div>`;
}
}