order details page
This commit is contained in:
Arvind Tiwari
parent
fb6ddd3512
commit
a374421963
3 changed files with 267 additions and 34 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -591,3 +584,129 @@ 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;
|
||||
}
|
||||
|
|
@ -73,6 +73,9 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Moment -->
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.js"></script>
|
||||
{% addtoblock "vendor_js" %}
|
||||
<!-- jQuery -->
|
||||
<script src="{% static 'hosting/js/jquery.js' %}"></script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,79 @@
|
|||
{% extends "datacenterlight/base_hosting.html" %}
|
||||
{% load i18n %}
|
||||
{% load staticfiles bootstrap3 i18n custom_tags %}
|
||||
|
||||
{% block navbar %}
|
||||
{% include "datacenterlight/includes/_navbar.html" %}
|
||||
{% endblock navbar %}
|
||||
|
||||
{% block submit_btn %}
|
||||
{% block content %}
|
||||
<div id="order-detail{{order.pk}}" class="order-detail-container">
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if not error %}
|
||||
<div class="dashboard-container-head">
|
||||
<h1 class="dashboard-title-thin">
|
||||
<img src="{% static 'hosting/img/billing.svg' %}" class="un-icon">{% blocktrans with page_header_text=page_header_text|default:"Invoice" %}{{page_header_text}}{% endblocktrans %}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="order-details">
|
||||
<p>
|
||||
<strong>{% trans "Date" %}:</strong>
|
||||
<span class="locale_date">
|
||||
{% now "Y-m-d h:i a" %}
|
||||
</span>
|
||||
</p>
|
||||
<hr>
|
||||
<div>
|
||||
<address>
|
||||
<h4>{% trans "Billed to" %}:</h4>
|
||||
<p>
|
||||
{% with request.session.billing_address_data as billing_address %}
|
||||
{{billing_address.cardholder_name}}<br>
|
||||
{{billing_address.street_address}}, {{billing_address.postal_code}}<br>
|
||||
{{billing_address.city}}, {{billing_address.country}}
|
||||
{% endwith %}
|
||||
</p>
|
||||
</address>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h4>{% trans "Payment method" %}:</h4>
|
||||
<p>
|
||||
{{cc_brand|default:_('Credit Card')}} {% trans "ending in" %} ****{{cc_last4}}<br>
|
||||
{{request.user.email}}
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h4>{% trans "Order summary" %}</h4>
|
||||
<p>
|
||||
<strong>{% trans "Product" %}:</strong>
|
||||
{{ request.session.template.name }}
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<p>
|
||||
<span>{% trans "Cores" %}: </span>
|
||||
<span class="pull-right">{{vm.cpu|floatformat}}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{% trans "Memory" %}: </span>
|
||||
<span class="pull-right">{{vm.memory}} GB</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{% trans "Disk space" %}: </span>
|
||||
<span class="pull-right">{{vm.disk_size}} GB</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{% trans "Total" %}</span>
|
||||
<span class="pull-right">{{vm.price}} CHF</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<form id="virtual_machine_create_form" action="" method="POST">
|
||||
{% csrf_token %}
|
||||
<div class="row">
|
||||
|
|
@ -13,12 +81,55 @@
|
|||
<div class="dcl-place-order-text">{% 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 %}.</div>
|
||||
</div>
|
||||
<div class="col-sm-4 order-confirm-btn text-right">
|
||||
<button class="btn choice-btn" id="btn-create-vm"
|
||||
data-toggle="modal" data-target="#createvm-modal">
|
||||
<button class="btn choice-btn" id="btn-create-vm" data-toggle="modal" data-target="#createvm-modal">
|
||||
{% trans "Place order" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock submit_btn %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Create VM Modal -->
|
||||
<div class="modal fade" id="createvm-modal" tabindex="-1" role="dialog"
|
||||
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-icon">
|
||||
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">{% trans "Processing..." %}</span>
|
||||
</div>
|
||||
<h4 class="modal-title" id="createvm-modal-title"></h4>
|
||||
<div class="modal-text" id="createvm-modal-body">
|
||||
{% trans "Hold tight, we are processing your request" %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="createvm-modal-done-btn" class="btn btn-success btn-ok btn-wide hide" href="{% url 'hosting:virtual_machines' %}">{% trans "OK" %}</a>
|
||||
<button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide hide" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / Create VM Modal -->
|
||||
|
||||
<script type="text/javascript">
|
||||
{% trans "Some problem encountered. Please try again later." as err_msg %}
|
||||
var create_vm_error_message = '{{err_msg|safe}}';
|
||||
window.onload = function () {
|
||||
var locale_dates = document.getElementsByClassName("locale_date");
|
||||
var formats = ['YYYY-MM-DD hh:mm a']
|
||||
var i;
|
||||
for (i = 0; i < locale_dates.length; i++) {
|
||||
var oldDate = moment.utc(locale_dates[i].textContent, formats);
|
||||
var outputFormat = locale_dates[i].getAttribute('data-format') || oldDate._f;
|
||||
locale_dates[i].innerHTML = oldDate.local().format(outputFormat);
|
||||
locale_dates[i].className += ' done';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{%endblock%}
|
||||
Loading…
Reference in a new issue