[mobile ui] fix pos payment layout #5780
diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css
index 9a015c2..b8d51c0 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 90766e9..0638b84 100644
--- a/erpnext/public/js/payment/payments.js
+++ b/erpnext/public/js/payment/payments.js
@@ -11,7 +11,6 @@
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 223850c..c5d963a 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 404540a..896aee7 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;
}