my orders page redesigned
This commit is contained in:
Arvind Tiwari
parent
fb82ef6018
commit
395fa371db
5 changed files with 180 additions and 130 deletions
|
|
@ -8,7 +8,7 @@ msgid ""
|
||||||
msgstr ""
|
msgstr ""
|
||||||
"Project-Id-Version: PACKAGE VERSION\n"
|
"Project-Id-Version: PACKAGE VERSION\n"
|
||||||
"Report-Msgid-Bugs-To: \n"
|
"Report-Msgid-Bugs-To: \n"
|
||||||
"POT-Creation-Date: 2017-08-16 04:19+0530\n"
|
"POT-Creation-Date: 2017-08-20 21:37+0530\n"
|
||||||
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
||||||
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
||||||
"Language-Team: LANGUAGE <LL@li.org>\n"
|
"Language-Team: LANGUAGE <LL@li.org>\n"
|
||||||
|
|
@ -245,31 +245,26 @@ msgstr "Gesamt"
|
||||||
msgid "Finish Configuration"
|
msgid "Finish Configuration"
|
||||||
msgstr "Konfiguration beenden"
|
msgstr "Konfiguration beenden"
|
||||||
|
|
||||||
|
msgid "Order Nr."
|
||||||
|
msgstr "Bestellung Nr."
|
||||||
|
|
||||||
msgid "Amount"
|
msgid "Amount"
|
||||||
msgstr "Betrag"
|
msgstr "Betrag"
|
||||||
|
|
||||||
msgid "Status"
|
msgid "Status"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
msgid "Approved"
|
msgid "See Invoice"
|
||||||
msgstr "Akzeptiert"
|
msgstr "Rechnung"
|
||||||
|
|
||||||
msgid "Declined"
|
|
||||||
msgstr "Abgelehnt"
|
|
||||||
|
|
||||||
msgid "View Detail"
|
msgid "View Detail"
|
||||||
msgstr "Details anzeigen"
|
msgstr "Details anzeigen"
|
||||||
|
|
||||||
msgid "Cancel Order"
|
msgid "Page"
|
||||||
msgstr "Bestellung stornieren"
|
msgstr ""
|
||||||
|
|
||||||
#, fuzzy
|
msgid "of"
|
||||||
#| msgid "Do You want to delete your order?"
|
msgstr ""
|
||||||
msgid "Do you want to delete your order?"
|
|
||||||
msgstr "Willst du deine Bestellung löschen?"
|
|
||||||
|
|
||||||
msgid "Delete"
|
|
||||||
msgstr "Löschen"
|
|
||||||
|
|
||||||
msgid "Your Order"
|
msgid "Your Order"
|
||||||
msgstr "Deine Bestellung"
|
msgstr "Deine Bestellung"
|
||||||
|
|
@ -300,13 +295,21 @@ msgstr ""
|
||||||
"\"https://stripe.com\" target=\"_blank\">Stripe</a> für die Bezahlung und "
|
"\"https://stripe.com\" target=\"_blank\">Stripe</a> für die Bezahlung und "
|
||||||
"speichern keine Informationen in unserer Datenbank."
|
"speichern keine Informationen in unserer Datenbank."
|
||||||
|
|
||||||
|
#, fuzzy
|
||||||
|
#| msgid ""
|
||||||
|
#| "\n"
|
||||||
|
#| " You are not making any "
|
||||||
|
#| "payment yet. After submitting your card\n"
|
||||||
|
#| " information, you will be "
|
||||||
|
#| "taken to the Confirm Order Page.\n"
|
||||||
|
#| " "
|
||||||
msgid ""
|
msgid ""
|
||||||
"\n"
|
"\n"
|
||||||
" You are not making any payment yet. "
|
" You are not making any "
|
||||||
"After submitting your card\n"
|
"payment yet. After submitting your card\n"
|
||||||
" information, you will be taken to "
|
" information, you will be "
|
||||||
"the Confirm Order Page.\n"
|
"taken to the Confirm Order Page.\n"
|
||||||
" "
|
" "
|
||||||
msgstr ""
|
msgstr ""
|
||||||
"\n"
|
"\n"
|
||||||
"Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe Deiner "
|
"Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe Deiner "
|
||||||
|
|
@ -328,19 +331,6 @@ msgstr ""
|
||||||
msgid "Card Type"
|
msgid "Card Type"
|
||||||
msgstr "Kartentyp"
|
msgstr "Kartentyp"
|
||||||
|
|
||||||
msgid ""
|
|
||||||
"\n"
|
|
||||||
" You are not making any payment "
|
|
||||||
"yet. After submitting your card\n"
|
|
||||||
" information, you will be taken "
|
|
||||||
"to the Confirm Order Page.\n"
|
|
||||||
" "
|
|
||||||
msgstr ""
|
|
||||||
"\n"
|
|
||||||
"Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe Deiner "
|
|
||||||
"Kreditkateninformationen wirst du auf die Bestellbestätigungsseite "
|
|
||||||
"weitergeleitet."
|
|
||||||
|
|
||||||
msgid "Processing"
|
msgid "Processing"
|
||||||
msgstr "Weiter"
|
msgstr "Weiter"
|
||||||
|
|
||||||
|
|
@ -390,6 +380,9 @@ msgstr ""
|
||||||
msgid "Private Key"
|
msgid "Private Key"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
msgid "Delete"
|
||||||
|
msgstr "Löschen"
|
||||||
|
|
||||||
msgid "Delete SSH Key"
|
msgid "Delete SSH Key"
|
||||||
msgstr "SSH Key löschen"
|
msgstr "SSH Key löschen"
|
||||||
|
|
||||||
|
|
@ -441,12 +434,6 @@ msgstr ""
|
||||||
msgid "CREATE VM"
|
msgid "CREATE VM"
|
||||||
msgstr "NEUE VM"
|
msgstr "NEUE VM"
|
||||||
|
|
||||||
msgid "Page"
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
msgid "of"
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
msgid "login"
|
msgid "login"
|
||||||
msgstr "einloggen"
|
msgstr "einloggen"
|
||||||
|
|
||||||
|
|
@ -474,6 +461,11 @@ msgstr "Du kannst dich nun"
|
||||||
msgid "Sorry. Your request is invalid."
|
msgid "Sorry. Your request is invalid."
|
||||||
msgstr "Entschuldigung, deine Anfrage ist ungültig."
|
msgstr "Entschuldigung, deine Anfrage ist ungültig."
|
||||||
|
|
||||||
|
#, fuzzy
|
||||||
|
#| msgid "Credit Card"
|
||||||
|
msgid "Invalid credit card"
|
||||||
|
msgstr "Invalid Kreditkarte"
|
||||||
|
|
||||||
msgid "Confirm Order"
|
msgid "Confirm Order"
|
||||||
msgstr "Bestellung Bestätigen"
|
msgstr "Bestellung Bestätigen"
|
||||||
|
|
||||||
|
|
@ -482,6 +474,33 @@ msgid ""
|
||||||
"contact Data Center Light Support."
|
"contact Data Center Light Support."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
#~ msgid "Approved"
|
||||||
|
#~ msgstr "Akzeptiert"
|
||||||
|
|
||||||
|
#~ msgid "Declined"
|
||||||
|
#~ msgstr "Abgelehnt"
|
||||||
|
|
||||||
|
#~ msgid "Cancel Order"
|
||||||
|
#~ msgstr "Bestellung stornieren"
|
||||||
|
|
||||||
|
#, fuzzy
|
||||||
|
#~| msgid "Do You want to delete your order?"
|
||||||
|
#~ msgid "Do you want to delete your order?"
|
||||||
|
#~ msgstr "Willst du deine Bestellung löschen?"
|
||||||
|
|
||||||
|
#~ msgid ""
|
||||||
|
#~ "\n"
|
||||||
|
#~ " You are not making any payment "
|
||||||
|
#~ "yet. After submitting your card\n"
|
||||||
|
#~ " information, you will be taken to "
|
||||||
|
#~ "the Confirm Order Page.\n"
|
||||||
|
#~ " "
|
||||||
|
#~ msgstr ""
|
||||||
|
#~ "\n"
|
||||||
|
#~ "Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe Deiner "
|
||||||
|
#~ "Kreditkateninformationen wirst du auf die Bestellbestätigungsseite "
|
||||||
|
#~ "weitergeleitet."
|
||||||
|
|
||||||
#~ msgid "Ipv4"
|
#~ msgid "Ipv4"
|
||||||
#~ msgstr "IPv4"
|
#~ msgstr "IPv4"
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -239,10 +239,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-title-thin .un-icon {
|
.dashboard-title-thin .un-icon {
|
||||||
height: 34px;
|
height: 30px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
width: 20px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-subtitle {
|
.dashboard-subtitle {
|
||||||
|
|
@ -287,6 +287,24 @@
|
||||||
color: #3770CC;
|
color: #3770CC;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-order-detail {
|
||||||
|
background: #87B6EA;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 2px solid #87B6EA;
|
||||||
|
padding: 4px 20px;
|
||||||
|
width: 125px;
|
||||||
|
/* padding-bottom: 7px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-order-detail:hover, .btn-order-detail:focus, .btn-order-detail:active {
|
||||||
|
background: #fff;
|
||||||
|
color: #87B6EA;
|
||||||
|
}
|
||||||
|
|
||||||
.vm-status, .vm-status-active, .vm-status-failed {
|
.vm-status, .vm-status-active, .vm-status-failed {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
@ -373,11 +391,28 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
|
left: 8px;
|
||||||
}
|
}
|
||||||
.table-switch .last-td {
|
.table-switch .last-td {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
.table-switch tbody tr .xs-td-inline {
|
||||||
|
text-align: right;
|
||||||
|
padding-top: 6px;
|
||||||
|
}
|
||||||
|
.table-switch tbody tr .xs-td-bighalf {
|
||||||
|
width: 52%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.table-switch tbody tr .xs-td-smallhalf {
|
||||||
|
width: 47%;
|
||||||
|
text-align: right;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.table-switch tbody tr .xs-td-smallhalf:before {
|
||||||
|
left: auto;
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
18
hosting/static/hosting/img/shopping-cart.svg
Normal file
18
hosting/static/hosting/img/shopping-cart.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<polygon points="447.992,336 181.555,336 69.539,80 0.008,80 0.008,48 90.477,48 202.492,304 447.992,304 "/>
|
||||||
|
</g>
|
||||||
|
<path d="M287.992,416c0,26.5-21.5,48-48,48s-48-21.5-48-48s21.5-48,48-48S287.992,389.5,287.992,416z"/>
|
||||||
|
<path d="M447.992,416c0,26.5-21.5,48-48,48s-48-21.5-48-48s21.5-48,48-48S447.992,389.5,447.992,416z"/>
|
||||||
|
<g>
|
||||||
|
<polygon points="499.18,144 511.992,112 160.008,112 172.805,144 "/>
|
||||||
|
<polygon points="211.195,240 223.992,272 447.992,272 460.805,240 "/>
|
||||||
|
<polygon points="486.398,176 185.602,176 198.398,208 473.586,208 "/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1 KiB |
|
|
@ -13,4 +13,12 @@ $( document ).ready(function() {
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('.alt-text').on('mouseenter mouseleave', function(e){
|
||||||
|
var $this = $(this);
|
||||||
|
var txt = $this.text();
|
||||||
|
var alt = $this.attr('data-alt');
|
||||||
|
$this.text(alt);
|
||||||
|
$this.attr('data-alt', txt);
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
@ -3,95 +3,65 @@
|
||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<div class="dashboard-container">
|
||||||
<div>
|
<div class="dashboard-container-head">
|
||||||
<div class="orders-container">
|
<h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/shopping-cart.svg' %}" class="un-icon" style="margin-top: -4px; width: 30px;"> {% trans "My Orders" %}</h3>
|
||||||
<div class="row">
|
{% if messages %}
|
||||||
<div class="container-table col-md-8 col-md-offset-2">
|
<div class="alert alert-warning">
|
||||||
<table class="table borderless table-hover">
|
{% for message in messages %}
|
||||||
<h3><i class="fa fa-credit-card fa-separate"></i>{% trans "My Orders"%}</h3>
|
<span>{{ message }}</span>
|
||||||
<br/>
|
{% endfor %}
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>#</th>
|
|
||||||
<th>{% trans "Date"%}</th>
|
|
||||||
<th>{% trans "Amount"%}</th>
|
|
||||||
<th>{% trans "Status"%}</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for order in orders %}
|
|
||||||
<tr>
|
|
||||||
<td scope="row">{{ order.id }}</td>
|
|
||||||
<td>{{ order.created_at | date:"M d, Y" }}</td>
|
|
||||||
<td>{{ order.price }} CHF</td>
|
|
||||||
<td>{% if order.approved %}
|
|
||||||
<span class="text-success strong">{% trans "Approved"%}</span>
|
|
||||||
{% else %}
|
|
||||||
<span class="text-danger strong">{% trans "Declined"%}</span>
|
|
||||||
{% endif %}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a class="btn btn-default"
|
|
||||||
href="{% url 'hosting:orders' order.id %}">{% trans "View Detail"%}</a>
|
|
||||||
<button type="button" class="btn btn-default" data-toggle="modal"
|
|
||||||
data-target="#Modal{{ order.id }}"><a
|
|
||||||
href="#">{% trans "Cancel Order"%}</a>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<div class="modal fade" id="Modal{{ order.id }}" tabindex="-1" role="dialog"
|
|
||||||
aria-labelledby="exampleModalLabel">
|
|
||||||
<div class="modal-dialog" role="document">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<button type="button" class="close" data-dismiss="modal"
|
|
||||||
aria-label="Confirm"><span
|
|
||||||
aria-hidden="true">×</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
|
|
||||||
<h4 class="modal-title" id="ModalLabel">{% trans "Do you want to delete your order?"%}</h4>
|
|
||||||
|
|
||||||
<form method="post"
|
|
||||||
action="{% url 'hosting:delete_order' order.id %}">
|
|
||||||
{% csrf_token %}
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="submit" class="btn btn-danger">{% trans "Delete"%}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{% if is_paginated %}
|
|
||||||
<div class="pagination">
|
|
||||||
<span class="page-links">
|
|
||||||
{% if page_obj.has_previous %}
|
|
||||||
<a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">{% trans "previous"%}</a>
|
|
||||||
{% endif %}
|
|
||||||
<span class="page-current">
|
|
||||||
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
|
|
||||||
</span>
|
|
||||||
{% if page_obj.has_next %}
|
|
||||||
<a href="{{ request.path }}?page={{ page_obj.next_page_number }}">{% trans "next"%}</a>
|
|
||||||
{% endif %}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% endif %}
|
||||||
|
<div class="dashboard-subtitle"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<table class="table table-switch">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{% trans "Order Nr." %}</th>
|
||||||
|
<th>{% trans "Date" %}</th>
|
||||||
|
<th>{% trans "Amount" %}</th>
|
||||||
|
<th>{% trans "Status" %}</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="xs-td-inline" data-header="{% trans 'Order Nr.' %}">{{ order.id }}</td>
|
||||||
|
<td class="xs-td-bighalf" data-header="{% trans 'Date' %}">{{ order.created_at | date:"M d, Y" }}</td>
|
||||||
|
<td class="xs-td-smallhalf" data-header="{% trans 'Amount' %}">{{ order.price }}</td>
|
||||||
|
<td data-header="{% trans 'Status' %}">
|
||||||
|
{% if order.approved %}
|
||||||
|
<span class="vm-status-active"><strong>Approved</strong></span>
|
||||||
|
{% else %}
|
||||||
|
<span class="vm-status-failed"><strong>Declined</strong></span>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
<td class="text-right last-td">
|
||||||
|
<a class="btn btn-order-detail alt-text" href="{% url 'hosting:orders' %}" data-alt="{% trans 'See Invoice' %}">{% trans "View Detail" %}</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% for order in orders %}
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{% if is_paginated %}
|
||||||
|
<div class="pagination">
|
||||||
|
<span class="page-links">
|
||||||
|
{% if page_obj.has_previous %}
|
||||||
|
<a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
|
||||||
|
{% endif %}
|
||||||
|
<span class="page-current">
|
||||||
|
{% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}.
|
||||||
|
</span>
|
||||||
|
{% if page_obj.has_next %}
|
||||||
|
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
|
||||||
|
{% endif %}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue