Merge pull request #457 from tiwariav/task/3698/my_orders_page

task/3698 my orders page redesigned
This commit is contained in:
Arvind Tiwari 2017-08-24 01:02:24 +05:30 committed by GitHub
commit c0ce522dbe
5 changed files with 181 additions and 134 deletions

View file

@ -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-20 00:22+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,12 +295,20 @@ 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"
@ -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"
@ -479,14 +472,8 @@ 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"
msgid "" msgid ""
"Thank you for signing up. We have sent an email to you. Please follow the " "Thank you for signing up. We have sent an email to you. Please follow the "
@ -512,6 +499,9 @@ 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."
msgid "Invalid credit card"
msgstr "Ungültige Kreditkarte"
msgid "Confirm Order" msgid "Confirm Order"
msgstr "Bestellung Bestätigen" msgstr "Bestellung Bestätigen"
@ -520,6 +510,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 "Ip not assigned yet" #~ msgid "Ip not assigned yet"
#~ msgstr "Ip nicht zugewiesen" #~ msgstr "Ip nicht zugewiesen"

View file

@ -440,10 +440,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 {
@ -488,6 +488,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;
min-width: 155px;
/* 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;
} }
@ -556,8 +574,8 @@
position: relative; position: relative;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
/* margin-top: 15px; */ /* margin-top: 15px; */
padding-top: 5px; padding-top: 10px;
padding-bottom: 15px; padding-bottom: 13px;
} }
.table-switch tbody tr:last-child { .table-switch tbody tr:last-child {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
@ -574,11 +592,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: 13px;
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;
}
} }

View 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

View file

@ -13,6 +13,14 @@ $( 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);
});
}); });
function getScrollbarWidth() { function getScrollbarWidth() {

View file

@ -3,17 +3,23 @@
{% load i18n %} {% load i18n %}
{% block content %} {% block content %}
<div class="dashboard-container">
<div class="dashboard-container-head">
<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>
{% if messages %}
<div class="alert alert-warning">
{% for message in messages %}
<span>{{ message }}</span>
{% endfor %}
</div>
{% endif %}
<div class="dashboard-subtitle"></div>
</div>
<div> <table class="table table-switch">
<div class="orders-container">
<div class="row">
<div class="container-table col-md-8 col-md-offset-2">
<table class="table borderless table-hover">
<h3><i class="fa fa-credit-card fa-separate"></i>{% trans "My Orders"%}</h3>
<br/>
<thead> <thead>
<tr> <tr>
<th>#</th> <th>{% trans "Order Nr." %}</th>
<th>{% trans "Date" %}</th> <th>{% trans "Date" %}</th>
<th>{% trans "Amount" %}</th> <th>{% trans "Amount" %}</th>
<th>{% trans "Status" %}</th> <th>{% trans "Status" %}</th>
@ -23,50 +29,20 @@
<tbody> <tbody>
{% for order in orders %} {% for order in orders %}
<tr> <tr>
<td scope="row">{{ order.id }}</td> <td class="xs-td-inline" data-header="{% trans 'Order Nr.' %}">{{ order.id }}</td>
<td>{{ order.created_at | date:"M d, Y" }}</td> <td class="xs-td-bighalf" data-header="{% trans 'Date' %}">{{ order.created_at | date:"M d, Y" }}</td>
<td>{{ order.price }} CHF</td> <td class="xs-td-smallhalf" data-header="{% trans 'Amount' %}">{{ order.price }}</td>
<td>{% if order.approved %} <td data-header="{% trans 'Status' %}">
<span class="text-success strong">{% trans "Approved"%}</span> {% if order.approved %}
<span class="vm-status-active"><strong>Approved</strong></span>
{% else %} {% else %}
<span class="text-danger strong">{% trans "Declined"%}</span> <span class="vm-status-failed"><strong>Declined</strong></span>
{% endif %} {% endif %}
</td> </td>
<td> <td class="text-right last-td">
<a class="btn btn-default" <a class="btn btn-order-detail alt-text" href="{% url 'hosting:orders' order.pk %}" data-alt="{% trans 'See Invoice' %}">{% trans "View Detail" %}</a>
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> </td>
</tr> </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">&times;</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 %} {% endfor %}
</tbody> </tbody>
</table> </table>
@ -78,7 +54,7 @@
<a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a> <a href="{{request.path}}?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
{% endif %} {% endif %}
<span class="page-current"> <span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}. {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}.
</span> </span>
{% if page_obj.has_next %} {% if page_obj.has_next %}
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next" %}</a> <a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
@ -86,12 +62,5 @@
</span> </span>
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div>
</div>
</div>
{% endblock %} {% endblock %}