From 8e282c2ed82128858605b543096d92c0e3948040 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Sun, 24 Jul 2016 11:36:19 +0530
Subject: [PATCH] [mobile ui] fix pos payment layout #5780

---
 erpnext/public/css/erpnext.css             | 37 +++++++++++-
 erpnext/public/js/payment/payments.js      |  1 -
 erpnext/public/js/payment/pos_payment.html | 68 ++++++++++------------
 erpnext/public/less/erpnext.less           | 40 ++++++++++++-
 4 files changed, 106 insertions(+), 40 deletions(-)

diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index 9a015c2fc2..b8d51c02bd 100644
--- a/erpnext/public/css/erpnext.css
+++ b/erpnext/public/css/erpnext.css
@@ -127,8 +127,9 @@
 .dashboard-list-item:last-child {
   border-bottom: none;
 }
-.payment-toolbar {
-  margin-left: 35px;
+.payment-toolbar .row {
+  width: 323px;
+  margin: 0 auto;
 }
 .payment-mode {
   cursor: pointer;
@@ -159,6 +160,38 @@
   background-color: #FDFDFD;
   border-color: #e8e8e8;
 }
+.multimode-payments {
+  padding-left: 30px;
+}
+.payment-toolbar {
+  padding-right: 30px;
+}
+body[data-route="pos"] .modal-dialog {
+  width: 750px;
+}
+@media (max-width: 767px) {
+  body[data-route="pos"] .modal-dialog {
+    width: auto;
+  }
+  body[data-route="pos"] .modal-dialog .modal-content {
+    height: auto;
+  }
+}
+@media (max-width: 767px) {
+  .amount-row h3 {
+    font-size: 15px;
+  }
+  .pos-keyboard-key,
+  .delete-btn {
+    height: 50px;
+  }
+  .multimode-payments {
+    padding-left: 15px;
+  }
+  .payment-toolbar {
+    padding-right: 15px;
+  }
+}
 .amount-label {
   font-size: 16px;
 }
diff --git a/erpnext/public/js/payment/payments.js b/erpnext/public/js/payment/payments.js
index 90766e9eb6..0638b84ffa 100644
--- a/erpnext/public/js/payment/payments.js
+++ b/erpnext/public/js/payment/payments.js
@@ -11,7 +11,6 @@ erpnext.payments = erpnext.stock.StockController.extend({
 	
 		this.dialog.show();
 		this.$body = this.dialog.body;
-		this.dialog.$wrapper.find('.modal-dialog').css("width", "750px");
 		this.set_payment_primary_action();
 		this.make_keyboard();
 	},
diff --git a/erpnext/public/js/payment/pos_payment.html b/erpnext/public/js/payment/pos_payment.html
index 223850c504..c5d963aa85 100644
--- a/erpnext/public/js/payment/pos_payment.html
+++ b/erpnext/public/js/payment/pos_payment.html
@@ -1,40 +1,36 @@
 <div class="pos_payment row">
-    	<div class="col-sm-6">
-			<div class="row">
-				<div class="col-xs-6 text-center"> 
-					<p class="amount-label"> Total <h3>{%= format_currency(grand_total, currency) %} </h3></p>
-				</div>
-				<div class="col-xs-6 text-center"> 
-					<p class="amount-label"> Paid <h3 class="paid_amount">{%= format_currency(paid_amount, currency) %}</h3></p>
-				</div>              
-			</div>
-				<hr>
-			<div class="multimode-payments">
-    		</div>
-    	</div>
-    	<div class="col-sm-6">
-            <div class="row">
-				<div class="col-xs-6 text-center"> 
-					<p class="amount-label"> Outstanding <h3 class="outstanding_amount">{%= format_currency(outstanding_amount, currency) %} </h3></p>
-				</div>
-				<div class="col-xs-6 text-center"> 
-					<p class="amount-label"> Change <h3 class="change_amount">{%= format_currency(change_amount, currency) %}</h3></p>
-				</div>              
-            </div>
-			<hr>
-            <div class="payment-toolbar">
-				{% for(var i=0; i<3; i++) { %}
-					<div class="row">
-						{% for(var j=i*3; j<(i+1)*3; j++) { %}
-							<button type="button"  class="btn btn-default pos-keyboard-key">{{j+1}}</button>
-						{% } %}
-					</div>
-				{% } %}   
+	<div class="row amount-row">
+		<div class="col-xs-6 col-sm-3 text-center">
+			<p class="amount-label"> Total <h3>{%= format_currency(grand_total, currency) %} </h3></p>
+		</div>
+		<div class="col-xs-6 col-sm-3 text-center">
+			<p class="amount-label"> Paid <h3 class="paid_amount">{%= format_currency(paid_amount, currency) %}</h3></p>
+		</div>
+		<div class="col-xs-6 col-sm-3 text-center">
+			<p class="amount-label"> Outstanding <h3 class="outstanding_amount">{%= format_currency(outstanding_amount, currency) %} </h3></p>
+		</div>
+		<div class="col-xs-6 col-sm-3 text-center">
+			<p class="amount-label"> Change <h3 class="change_amount">{%= format_currency(change_amount, currency) %}</h3>
+			</p>
+		</div>
+	</div>
+	<hr>
+	<div class="row">
+		<div class="col-sm-6 multimode-payments">
+		</div>
+		<div class="col-sm-6 payment-toolbar">
+			{% for(var i=0; i<3; i++) { %}
 				<div class="row">
-					<button type="button"  class="btn btn-default delete-btn">Del</button>
-					<button type="button"  class="btn btn-default pos-keyboard-key">0</button>
-					<button type="button"  class="btn btn-default pos-keyboard-key">.</button>
+					{% for(var j=i*3; j<(i+1)*3; j++) { %}
+						<button type="button"  class="btn btn-default pos-keyboard-key">{{j+1}}</button>
+					{% } %}
 				</div>
-            </div>
-    	</div>
+			{% } %}
+			<div class="row">
+				<button type="button"  class="btn btn-default delete-btn">Del</button>
+				<button type="button"  class="btn btn-default pos-keyboard-key">0</button>
+				<button type="button"  class="btn btn-default pos-keyboard-key">.</button>
+			</div>
+        </div>
+	</div>
 </div>
diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less
index 404540a3d9..896aee79d9 100644
--- a/erpnext/public/less/erpnext.less
+++ b/erpnext/public/less/erpnext.less
@@ -162,7 +162,10 @@
 }
 
 .payment-toolbar {
-	margin-left: 35px;
+	.row {
+		width: 323px;
+		margin: 0 auto;
+	}
 }
 
 .payment-mode {
@@ -197,6 +200,41 @@
 	border-color: #e8e8e8;
 }
 
+.multimode-payments {
+	padding-left: 30px;
+}
+
+.payment-toolbar {
+	padding-right: 30px;
+}
+
+body[data-route="pos"] .modal-dialog {
+	width: 750px;
+
+	@media (max-width: @screen-xs) {
+		width: auto;
+
+		.modal-content {
+			height: auto;
+		}
+	}
+}
+
+@media (max-width: @screen-xs) {
+	.amount-row h3 {
+		font-size: 15px;
+	}
+	.pos-keyboard-key, .delete-btn {
+		height: 50px;
+	}
+	.multimode-payments {
+		padding-left: 15px;
+	}
+	.payment-toolbar {
+		padding-right: 15px;
+	}
+}
+
 .amount-label {
 	font-size: 16px;
 }