From a37442196312e427a1bd385728608fe64e920bab Mon Sep 17 00:00:00 2001 From: Arvind Tiwari Date: Wed, 17 Jan 2018 17:32:32 +0530 Subject: [PATCH] order details page --- .../static/datacenterlight/css/hosting.css | 147 +++++++++++++++-- .../datacenterlight/base_hosting.html | 3 + .../datacenterlight/order_detail.html | 151 +++++++++++++++--- 3 files changed, 267 insertions(+), 34 deletions(-) diff --git a/datacenterlight/static/datacenterlight/css/hosting.css b/datacenterlight/static/datacenterlight/css/hosting.css index c64eca96..1c6d9f4e 100644 --- a/datacenterlight/static/datacenterlight/css/hosting.css +++ b/datacenterlight/static/datacenterlight/css/hosting.css @@ -118,6 +118,13 @@ h6 { } } +.un-icon { + width: 15px; + height: 15px; + opacity: 0.5; + margin-top: -1px; +} + .network-name { text-transform: uppercase; font-size: 14px; @@ -248,20 +255,6 @@ p.copyright { } } -.footer-light { - position: relative; -} -.footer-light footer { - background: transparent; - color: #eee; -} -.footer-light a, -.footer-light .text-muted { - color: #ddd; -} -.footer-light a:hover, .footer-light a:focus, .footer-light a:active { - color: #fff; -} .footer-vm p.copyright { margin-top: 4px; } @@ -590,4 +583,130 @@ p.copyright { .no-padding { padding: 0 !important; +} + +/* hosting-order */ +.order-detail-container { + max-width: 600px; + margin: 100px auto 40px; + border: 1px solid #ccc; + padding: 30px 30px 20px; +} + +.order-detail-container .dashboard-title-thin { + margin-top: 0; + margin-left: -3px; +} + +.order-detail-container .dashboard-title-thin .un-icon { + margin-top: -6px; +} + +.order-detail-container .dashboard-container-head { + position: relative; + padding: 0; + margin-bottom: 38px; +} + +.order-detail-container .order-details { + margin-bottom: 15px; +} + +.order-detail-container .order-details strong { + color: #595959; +} + +.order-detail-container h4 { + font-size: 16px; + font-weight: bold; + margin-bottom: 10px; +} + +.order-detail-container p { + margin-bottom: 5px; + color: #595959; +} + +.order-detail-container hr { + margin: 15px 0; +} + +@media (max-width: 767px) { + .order-detail-container { + padding: 15px; + } + .order-confirm-btn { + text-align: center; + margin-top: 10px; + } + .order-detail-container .dashboard-container-options { + position: absolute; + top: 4px; + right: -4px; + } + .order-detail-container .dashboard-container-options .svg-img { + height: 16px; + width: 16px; + } +} + +.order_detail_footer { + font-size: 9px; + letter-spacing: 1px; + color: #333333; +} + +.order_detail_footer strong { + font-size: 11px; +} + +#virtual_machine_create_form { + padding: 15px 0; +} + +.dashboard-title-thin { + font-weight: 300; + font-size: 32px; +} + +.dashboard-title-thin .un-icon { + height: 34px; + margin-right: 5px; + margin-top: -2px; + width: 34px; + vertical-align: middle; +} + +@media (max-width:767px) { + .dashboard-title-thin { + font-size: 22px; + } + .dashboard-title-thin .un-icon { + height: 22px; + width: 22px; + margin-top: -3px; + } +} + + +.locale_date { + opacity: 0; +} + +.locale_date.done{ + opacity: 1; +} + +.btn-vm-back { + color: #fff; + background: #C4CEDA; + border: 2px solid #C4CEDA; + padding: 5px 25px; + font-size: 12px; + letter-spacing: 1.3px; +} +.btn-vm-back:hover, .btn-vm-back:focus { + color: #fff; + background: #8da4c0; + border-color: #8da4c0; } \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/base_hosting.html b/datacenterlight/templates/datacenterlight/base_hosting.html index d88d49f8..ebe779cb 100644 --- a/datacenterlight/templates/datacenterlight/base_hosting.html +++ b/datacenterlight/templates/datacenterlight/base_hosting.html @@ -73,6 +73,9 @@ {% endif %} + + + {% addtoblock "vendor_js" %} diff --git a/datacenterlight/templates/datacenterlight/order_detail.html b/datacenterlight/templates/datacenterlight/order_detail.html index 79119777..6b103970 100644 --- a/datacenterlight/templates/datacenterlight/order_detail.html +++ b/datacenterlight/templates/datacenterlight/order_detail.html @@ -1,24 +1,135 @@ {% extends "datacenterlight/base_hosting.html" %} -{% load i18n %} +{% load staticfiles bootstrap3 i18n custom_tags %} -{% block navbar %} - {% include "datacenterlight/includes/_navbar.html" %} -{% endblock navbar %} +{% block content %} +
+ {% if messages %} +
+ {% for message in messages %} + {{ message }} + {% endfor %} +
+ {% endif %} + {% if not error %} +
+

+ {% blocktrans with page_header_text=page_header_text|default:"Invoice" %}{{page_header_text}}{% endblocktrans %} +

+
+
+

+ {% trans "Date" %}: + + {% now "Y-m-d h:i a" %} + +

+
+
+
+

{% trans "Billed to" %}:

+

+ {% 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}} + {% endwith %} +

+
+
+
+
+

{% trans "Payment method" %}:

+

+ {{cc_brand|default:_('Credit Card')}} {% trans "ending in" %} ****{{cc_last4}}
+ {{request.user.email}} +

+
+
+
+

{% trans "Order summary" %}

+

+ {% trans "Product" %}:  + {{ request.session.template.name }} +

+
+
+

+ {% trans "Cores" %}: + {{vm.cpu|floatformat}} +

+

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

+

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

+

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

+
+
+
+
+
+
+ {% 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 %}.
+
+
+ +
+
+
+ {% endif %} +
-{% block submit_btn %} -
- {% 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 %}.
-
-
- -
-
-
-{% endblock submit_btn %} + + + + + +{%endblock%} \ No newline at end of file