fix: POS compatible for mobile view (#36534)
* fix: POS compatable for mobile view
* fix: variables for margin and font size, and dark mode compatibility while selecting any item from cart
---------
Co-authored-by: Ritvik Sardana <ritviksardana@Ritviks-MacBook-Air.local>
diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index c9d001c..ba64b59 100644
--- a/erpnext/public/scss/point-of-sale.scss
+++ b/erpnext/public/scss/point-of-sale.scss
@@ -53,7 +53,7 @@
.seperator {
margin-left: var(--margin-sm);
- margin-right: var(--margin-sm);
+ margin-right: var(--margin-md);
border-bottom: 1px solid var(--gray-300);
}
@@ -381,6 +381,7 @@
align-items: center;
padding: var(--padding-sm);
border-radius: var(--border-radius-md);
+ margin-right: var(--margin-sm);
&:hover {
background-color: var(--control-bg);
@@ -858,13 +859,10 @@
> .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 {
@@ -1152,3 +1150,62 @@
}
}
}
+
+@media screen and (max-width: 620px) {
+ .point-of-sale-app {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+
+ > .items-selector {
+ grid-column: span 6 / span 1 !important;
+ > .items-container {
+ grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+ }
+ }
+
+ > .item-details-container, .customer-cart-container {
+ grid-column: span 6 / span 1;
+ }
+
+ > .payment-container {
+ overflow: scroll;
+ > .fields-numpad-container {
+ flex-direction: column-reverse;
+ > .number-pad {
+ display: none;
+ }
+ > .fields-section {
+ width: 100%;
+ }
+ }
+ }
+
+ > .past-order-summary{
+ > .invoice-summary-wrapper {
+ width: 100%;
+ }
+ }
+
+ .numpad-totals {
+ > span {
+ padding: 0 5px;
+ font-size: var(--text-sm);
+ }
+ }
+
+ .col > * {
+ font-size: var(--text-sm) !important;
+ }
+
+ .control-input-wrapper {
+ padding-left: 0.15rem;
+ }
+
+ .pay-amount {
+ margin-left: 0.2rem;
+ }
+
+ .past-order-list {
+ grid-column: span 6 / span 1;
+ }
+ }
+}
diff --git a/erpnext/selling/page/point_of_sale/pos_item_cart.js b/erpnext/selling/page/point_of_sale/pos_item_cart.js
index 46490c4..193048f 100644
--- a/erpnext/selling/page/point_of_sale/pos_item_cart.js
+++ b/erpnext/selling/page/point_of_sale/pos_item_cart.js
@@ -286,7 +286,7 @@
this.item_is_selected = false;
this.$cart_container.find('.cart-item-wrapper').css("background-color", "");
} else {
- $cart_item.css("background-color", "var(--gray-50)");
+ $cart_item.css("background-color", "var(--control-bg)");
this.item_is_selected = true;
this.$cart_container.find('.cart-item-wrapper').not(item).css("background-color", "");
}