From ae2c6002236d6667a51e6258275b0773a3742cd2 Mon Sep 17 00:00:00 2001
From: RitvikSardana <65544983+RitvikSardana@users.noreply.github.com>
Date: Sun, 13 Aug 2023 13:27:43 +0530
Subject: [PATCH] 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>
---
 erpnext/public/scss/point-of-sale.scss        | 65 +++++++++++++++++--
 .../page/point_of_sale/pos_item_cart.js       |  2 +-
 2 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index c9d001c127..ba64b59b46 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 46490c43ae..193048f676 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 @@ erpnext.PointOfSale.ItemCart = class {
 			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", "");
 		}