Shiloh/brotherton-erpnext
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[mobile ui] fix pos payment layout #5780

Browse Source
This commit is contained in:
Faris Ansari 2016-07-24 11:36:19 +05:30
parent 71b6494395
commit 8e282c2ed8
4 changed files with 106 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
erpnext/public/css/erpnext.css
View File

@ -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;
}

1
erpnext/public/js/payment/payments.js
View File

@ -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();
},

68
erpnext/public/js/payment/pos_payment.html
View File

@ -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>

40
erpnext/public/less/erpnext.less
View File

@ -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;
}