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

Merge pull request #5849 from netchampfaris/ui-fixes

Browse Source 
[mobile ui] fix pos payment layout #5780
This commit is contained in:
Rushabh Mehta 2016-07-24 12:47:13 +05:30 committed by GitHub
commit 49e17e4590
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 { .dashboard-list-item:last-child {
border-bottom: none; border-bottom: none;
} }
.payment-toolbar { .payment-toolbar .row {
margin-left: 35px; width: 323px;
margin: 0 auto;
} }
.payment-mode { .payment-mode {
cursor: pointer; cursor: pointer;
@ -159,6 +160,38 @@
background-color: #FDFDFD; background-color: #FDFDFD;
border-color: #e8e8e8; 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 { .amount-label {
font-size: 16px; 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.dialog.show();
this.$body = this.dialog.body; this.$body = this.dialog.body;
this.dialog.$wrapper.find('.modal-dialog').css("width", "750px");
this.set_payment_primary_action(); this.set_payment_primary_action();
this.make_keyboard(); this.make_keyboard();
}, },

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

@ -1,40 +1,36 @@
<div class="pos_payment row"> <div class="pos_payment row">
<div class="col-sm-6"> <div class="row amount-row">
<div class="row"> <div class="col-xs-6 col-sm-3 text-center">
<div class="col-xs-6 text-center"> <p class="amount-label"> Total <h3>{%= format_currency(grand_total, currency) %} </h3></p>
<p class="amount-label"> Total <h3>{%= format_currency(grand_total, currency) %} </h3></p> </div>
</div> <div class="col-xs-6 col-sm-3 text-center">
<div class="col-xs-6 text-center"> <p class="amount-label"> Paid <h3 class="paid_amount">{%= format_currency(paid_amount, currency) %}</h3></p>
<p class="amount-label"> Paid <h3 class="paid_amount">{%= format_currency(paid_amount, currency) %}</h3></p> </div>
</div> <div class="col-xs-6 col-sm-3 text-center">
</div> <p class="amount-label"> Outstanding <h3 class="outstanding_amount">{%= format_currency(outstanding_amount, currency) %} </h3></p>
<hr> </div>
<div class="multimode-payments"> <div class="col-xs-6 col-sm-3 text-center">
</div> <p class="amount-label"> Change <h3 class="change_amount">{%= format_currency(change_amount, currency) %}</h3>
</div> </p>
<div class="col-sm-6"> </div>
<div class="row"> </div>
<div class="col-xs-6 text-center"> <hr>
<p class="amount-label"> Outstanding <h3 class="outstanding_amount">{%= format_currency(outstanding_amount, currency) %} </h3></p> <div class="row">
</div> <div class="col-sm-6 multimode-payments">
<div class="col-xs-6 text-center"> </div>
<p class="amount-label"> Change <h3 class="change_amount">{%= format_currency(change_amount, currency) %}</h3></p> <div class="col-sm-6 payment-toolbar">
</div> {% for(var i=0; i<3; i++) { %}
</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"> <div class="row">
<button type="button" class="btn btn-default delete-btn">Del</button> {% for(var j=i*3; j<(i+1)*3; j++) { %}
<button type="button" class="btn btn-default pos-keyboard-key">0</button> <button type="button" class="btn btn-default pos-keyboard-key">{{j+1}}</button>
<button type="button" class="btn btn-default pos-keyboard-key">.</button> {% } %}
</div> </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> </div>

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

@ -162,7 +162,10 @@
} }
.payment-toolbar { .payment-toolbar {
margin-left: 35px; .row {
width: 323px;
margin: 0 auto;
}
} }
.payment-mode { .payment-mode {
@ -197,6 +200,41 @@
border-color: #e8e8e8; 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 { .amount-label {
font-size: 16px; font-size: 16px;
} }