Fix design for showing prices excl and incl vat and discount

This commit is contained in:
PCoder 2020-01-29 16:04:03 +05:30
parent 970834cc38
commit b8eca59e0d

View file

@ -121,40 +121,101 @@
<div class="col-sm-12"> <div class="col-sm-12">
<hr class="thin-hr"> <hr class="thin-hr">
</div> </div>
{% if vm.vat > 0 or vm.discount.amount > 0 %}
<div class="col-sm-6"> <div class="col-sm-6">
<div class="subtotal-price">
{% if vm.vat > 0 %}
<p> <p>
<strong class="text-lg">{% trans "Price" %} </strong> <strong class="text-uppercase">{% trans "Price Before VAT" %}</strong>
<strong class="pull-right">{{vm.price|floatformat:2|intcomma}} CHF</strong> <strong class="pull-right">{{vm.price|intcomma}} CHF</strong>
</p> </p>
</div>
<div class="col-sm-12">
<hr class="thin-hr">
</div>
<div class="col-sm-6">
<style>
* {
box-sizing: border-box;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 0 10px 0 10px;
}
.middle, .right {
width: 33%;
}
.left {
width: 34%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="row">
<div class="column left">
<p><span></span></p>
</div>
<div class="column middle">
<p class="text-center"><strong class="pull-right">Pre VAT</strong></p>
</div>
<div class="column right">
<p class="text-center"><strong class="pull-right">VAT for {{vm.vat_country}} ({{vm.vat_percent}}%)</strong></p>
</div>
</div>
<div class="row">
<div class="column left">
<p><span>Price</span></p>
</div>
<div class="column middle">
<p><span class="pull-right" >{{vm.price|intcomma}} CHF</span></p>
</div>
<div class="column right">
<p><span class="pull-right">{{vm.price_with_vat|intcomma}} CHF</span></p>
</div>
</div>
{% if vm.discount.amount > 0 %} {% if vm.discount.amount > 0 %}
<p class="text-primary"> <div class="row">
{%trans "Discount" as discount_name %} <div class="column left">
<strong>{{ vm.discount.name|default:discount_name }} </strong> <p><span>{{vm.discount.name}}</span></p>
<strong class="pull-right">- {{ vm.discount.amount }} CHF</strong> </div>
</p> <div class="column middle">
{% endif %} <p><span class="pull-right">-{{vm.discount.amount|intcomma}} CHF</span></p>
<p> </div>
<strong class="text-lg">{% trans "Subtotal" %} </strong> <div class="column right">
<strong class="pull-right">{{vm.price_after_discount}} CHF</strong> <p><span class="pull-right">-{{vm.discount.amount_with_vat|intcomma}} CHF</span></p>
</p> </div>
<p> </div>
<small>{% trans "VAT for" %} {{vm.vat_country}} ({{vm.vat_percent}}%) : </small>
<strong class="pull-right">{{vm.vat|floatformat:2|intcomma}} CHF</strong>
</p>
{% endif %} {% endif %}
</div> </div>
<div class="col-sm-12">
<hr class="thin-hr">
</div>
<div class="col-sm-6">
<div class="row">
<div class="column left">
<p><strong>Total</strong></p>
</div>
<div class="column middle">
<p><strong class="pull-right">{{vm.price_after_discount|intcomma}} CHF</strong></p>
</div>
<div class="column right">
<p><strong class="pull-right">{{vm.price_after_discount_with_vat|intcomma}} CHF</strong></p>
</div>
</div>
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12">
<hr class="thin-hr"> <hr class="thin-hr">
</div> </div>
{% endif %}
<div class="col-sm-6"> <div class="col-sm-6">
<p class="total-price"> <p>
<strong>{% trans "Total" %} </strong> <strong class="text-uppercase align-center">{% trans "Your Price in Total" %}</strong>
<strong class="pull-right">{{vm.total_price|floatformat:2|intcomma}} CHF</strong> <strong class="total-price pull-right">{{vm.total_price|floatformat:2|intcomma}} CHF</strong>
</p> </p>
</div> </div>
</div> </div>