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 ""
|
||||
"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,13 +295,21 @@ 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"
|
||||
"Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe Deiner "
|
||||
|
|
@ -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"
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
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);
|
||||
});
|
||||
|
||||
$('.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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<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/>
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
<div class="dashboard-subtitle"></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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue