my orders page redesigned

This commit is contained in:
Arvind Tiwari 2017-08-20 21:40:17 +05:30
parent fb82ef6018
commit 395fa371db
5 changed files with 180 additions and 130 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-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"

View file

@ -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;
}
} }

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,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);
});
}); });

View file

@ -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">&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 %}
</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 %}