From 6c381dd3fbc435a4741a0cc8634a7be4c40527e9 Mon Sep 17 00:00:00 2001 From: Arvind Tiwari Date: Thu, 21 Sep 2017 15:03:00 +0530 Subject: [PATCH] invoice page redesigned --- hosting/static/hosting/css/landing-page.css | 4 +- hosting/static/hosting/css/order.css | 34 ++- hosting/static/hosting/js/order.js | 15 ++ .../hosting/js/virtual_machine_detail.js | 2 + hosting/templates/hosting/base_short.html | 9 +- hosting/templates/hosting/order_detail.html | 217 ++++++++---------- hosting/views.py | 1 + 7 files changed, 157 insertions(+), 125 deletions(-) create mode 100644 hosting/static/hosting/js/order.js diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index 71b7a33d..5c71b7ca 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -580,9 +580,9 @@ a.unlink:hover { } .dcl-place-order-text{ - font-size: 13px; + /* font-size: 13px; */ color: #808080; - margin-bottom: 15px; + /* margin-bottom: 15px; */ } .dcl-order-table-total .tbl-total { diff --git a/hosting/static/hosting/css/order.css b/hosting/static/hosting/css/order.css index 186f7c16..0377bfac 100644 --- a/hosting/static/hosting/css/order.css +++ b/hosting/static/hosting/css/order.css @@ -1,6 +1,6 @@ .order-detail-container { max-width: 600px; - margin: 100px auto; + margin: 100px auto 40px; border: 1px solid #ccc; padding: 30px; } @@ -23,6 +23,7 @@ .order-detail-container .dashboard-title-thin { margin-top: 0; + margin-left: -3px; } .order-detail-container .dashboard-title-thin .un-icon { @@ -32,6 +33,7 @@ .order-detail-container .dashboard-container-head { position: relative; padding: 0; + margin-bottom: 38px; } .order-detail-container .dashboard-container-options { @@ -43,4 +45,34 @@ height: 20px; /* margin-right: 5px; */ width: 20px; +} + +.order-detail-container .order-details { + margin-bottom: 30px; +} + +.order-detail-container .order-details strong { + color: #777; +} + +.order-detail-container h4 { + font-size: 16px; + font-weight: bold; + margin-bottom: 15px; +} + +.order-detail-container p { + margin-bottom: 5px; + color: #595959; +} + +.order-detail-container hr { + margin: 15px 0; +} + +@media (max-width: 767px) { + .order-confirm-btn { + text-align: center; + margin-top: 10px; + } } \ No newline at end of file diff --git a/hosting/static/hosting/js/order.js b/hosting/static/hosting/js/order.js new file mode 100644 index 00000000..e9de4cf9 --- /dev/null +++ b/hosting/static/hosting/js/order.js @@ -0,0 +1,15 @@ +$(document).ready(function() { + $('.btn-pdf').click(function(e) { + e.preventDefault(); + var $target = $($(this).attr('data-target')) || $('body'); + var fileName = $target.attr('id') + '.pdf'; + html2pdf($target[0], { + filename: fileName, + }); + }); + $('.btn-print').click(function(e) { + e.preventDefault(); + console.log('a'); + window.print(); + }); +}); \ No newline at end of file diff --git a/hosting/static/hosting/js/virtual_machine_detail.js b/hosting/static/hosting/js/virtual_machine_detail.js index b6202e97..7d66afaf 100644 --- a/hosting/static/hosting/js/virtual_machine_detail.js +++ b/hosting/static/hosting/js/virtual_machine_detail.js @@ -1,4 +1,5 @@ $(document).ready(function () { + $('.modal-text').removeClass('hide'); var create_vm_form = $('#virtual_machine_create_form'); create_vm_form.submit(function () { $('#btn-create-vm').prop('disabled', true); @@ -22,6 +23,7 @@ $(document).ready(function () { fa_icon = $('.modal-icon > .fa'); fa_icon.attr('class', 'fa fa-times'); $('.modal-header > .close').attr('class', 'close'); + $('.modal-text').addClass('hide'); if (typeof(create_vm_error_message) !== 'undefined') { $('#createvm-modal-title').text(create_vm_error_message); } diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html index 63a0681d..3906133b 100644 --- a/hosting/templates/hosting/base_short.html +++ b/hosting/templates/hosting/base_short.html @@ -94,6 +94,13 @@ + {% block js_extra %} + {% comment %} + this block is above some files, because on stripe error scripts below the stripe + script are not properly executed. + {% endcomment %} + {% endblock js_extra %} + @@ -108,8 +115,6 @@ - - diff --git a/hosting/templates/hosting/order_detail.html b/hosting/templates/hosting/order_detail.html index 38b186db..49f7ba6b 100644 --- a/hosting/templates/hosting/order_detail.html +++ b/hosting/templates/hosting/order_detail.html @@ -5,7 +5,7 @@ {% block content %} -
+
{% if messages %}
{% for message in messages %} @@ -19,18 +19,18 @@ {% blocktrans with page_header_text=page_header_text|default:"Invoice" %}{{page_header_text}}{% endblocktrans %}
- - + +
{% if order %} -
- {% trans "Order #"%} {{order.id}} -
{% endif %} -
- {% trans "Invoice Date"%}: +

+ {% trans "Order #" %} {{order.id}} +

+

+ {% trans "Invoice Date" %}: {% if order %} {{order.created_at|date:'Y-m-d H:i'}} @@ -38,46 +38,43 @@ {% now "Y-m-d H:i" %} {% endif %} -

+

{% if order %} {% endif %} -
+

{% trans "Status" %}: {% if order.status == 'Approved' %} - {% trans "Approved" %} + {% trans "Approved" %} {% else %} {% trans "Declined" %} {% endif %} -

+

{% trans "Billed to" %}:

-
+

{% if order %} {{user.name}}
- {{order.billing_address.street_address}},{{order.billing_address.postal_code}}
- {{order.billing_address.city}}, - {{order.billing_address.country}}. + {{order.billing_address.street_address}}, {{order.billing_address.postal_code}}
+ {{order.billing_address.city}}, {{order.billing_address.country}} {% else %} {% with request.session.billing_address_data as billing_address %} - {{billing_address.cardholder_name}}
- {{billing_address.street_address}}, - {{billing_address.postal_code}}
- {{billing_address.city}}, - {{billing_address.country}}. + {{billing_address.cardholder_name}}
+ {{billing_address.street_address}}, {{billing_address.postal_code}}
+ {{billing_address.city}}, {{billing_address.country}} {% endwith %} {% endif %} -

+

{% trans "Payment method" %}:

-
+

{% if order %} {{order.cc_brand}} {% trans "ending in" %} **** {{order.last4}}
@@ -87,82 +84,55 @@ {{cc_last4}}
{{request.session.user.email}} {% endif %} -

-
-
-

{% trans "Order summary"%}

-
- {% if request.session.specs %} - {% request.session.specs as vm %} - {% endif %} - {% trans "Product" %}: {{request.session.template.name}} -
-
- -
- -

-
-
- -

{% trans "Cores"%} - {{vm.cpu}} -

-
-

{% trans "Memory"%} - {{vm.memory}} GB -

-
-

{% trans "Disk space"%} - {{vm.disk_size}} GB -

-
-

{% trans "Configuration"%} - {{request.session.template.name}} -

-
-

{% trans "Total"%} -

- {{vm.price}} CHF - /{% trans "Month" %} -

-

- {% endwith %} - {% else %} -

{% trans "Cores"%} - {{vm.cores}} -

+
-

{% trans "Memory"%} - {{vm.memory}} GB -

-
-

{% trans "Disk space"%} - {{vm.disk_size}} GB -

-
-

{% trans "Total"%}

{{vm.price}} - CHF /{% trans "Month" %} -

+
+

{% trans "Order summary" %}

+

+ {% trans "Product" %}: {{vm.name}} +

+
+
+ {% comment %} +

+ {% trans "Period" %} + {{vm.cpu}} +

+ {% endcomment %} +

+ {% trans "Cores" %} + {{vm.cpu}} +

+

+ {% trans "Memory" %} + {{vm.memory}} GB +

+

+ {% trans "Disk space" %} + {{vm.disk_size}} GB +

+

+ {% trans "Total" %} + {{vm.price}} CHF +

+
+
+
+ {% if not order %} +
{% endif %}
-
{% if not order %}
{% csrf_token %}
-

{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.

+
{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.
-
-
@@ -170,35 +140,43 @@ {% endif %} {% endif %}
- -