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 ""
"Project-Id-Version: PACKAGE VERSION\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"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
@ -245,31 +245,26 @@ msgstr "Gesamt"
msgid "Finish Configuration"
msgstr "Konfiguration beenden"
msgid "Order Nr."
msgstr "Bestellung Nr."
msgid "Amount"
msgstr "Betrag"
msgid "Status"
msgstr ""
msgid "Approved"
msgstr "Akzeptiert"
msgid "Declined"
msgstr "Abgelehnt"
msgid "See Invoice"
msgstr "Rechnung"
msgid "View Detail"
msgstr "Details anzeigen"
msgid "Cancel Order"
msgstr "Bestellung stornieren"
msgid "Page"
msgstr ""
#, 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 "Delete"
msgstr "Löschen"
msgid "of"
msgstr ""
msgid "Your Order"
msgstr "Deine Bestellung"
@ -300,12 +295,20 @@ msgstr ""
"\"https://stripe.com\" target=\"_blank\">Stripe</a> für die Bezahlung und "
"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 ""
"\n"
" You are not making any payment yet. "
"After submitting your card\n"
" information, you will be taken to "
"the Confirm Order Page.\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"
@ -328,19 +331,6 @@ msgstr ""
msgid "Card Type"
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"
msgstr "Weiter"
@ -390,6 +380,9 @@ msgstr ""
msgid "Private Key"
msgstr ""
msgid "Delete"
msgstr "Löschen"
msgid "Delete SSH Key"
msgstr "SSH Key löschen"
@ -441,12 +434,6 @@ msgstr ""
msgid "CREATE VM"
msgstr "NEUE VM"
msgid "Page"
msgstr ""
msgid "of"
msgstr ""
msgid "login"
msgstr "einloggen"
@ -474,6 +461,11 @@ msgstr "Du kannst dich nun"
msgid "Sorry. Your request is invalid."
msgstr "Entschuldigung, deine Anfrage ist ungültig."
#, fuzzy
#| msgid "Credit Card"
msgid "Invalid credit card"
msgstr "Invalid Kreditkarte"
msgid "Confirm Order"
msgstr "Bestellung Bestätigen"
@ -482,6 +474,33 @@ msgid ""
"contact Data Center Light Support."
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"
#~ msgstr "IPv4"

View file

@ -239,10 +239,10 @@
}
.dashboard-title-thin .un-icon {
height: 34px;
height: 30px;
margin-right: 5px;
margin-top: -1px;
width: 20px;
width: 30px;
}
.dashboard-subtitle {
@ -287,6 +287,24 @@
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 {
font-weight: 600;
}
@ -373,11 +391,28 @@
font-weight: 600;
position: absolute;
top: 5px;
left: 8px;
}
.table-switch .last-td {
position: absolute;
bottom: 20px;
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);
});
$('.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,70 +3,47 @@
{% load i18n %}
{% 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>
<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/>
<table class="table table-switch">
<thead>
<tr>
<th>#</th>
<th>{% trans "Date"%}</th>
<th>{% trans "Amount"%}</th>
<th>{% trans "Status"%}</th>
<th>{% trans "Order Nr." %}</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>
<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="text-danger strong">{% trans "Declined"%}</span>
<span class="vm-status-failed"><strong>Declined</strong></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 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>
<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>
{% for order in orders %}
<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>
@ -75,23 +52,16 @@
<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>
<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 }}.
{% 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>
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}