From 395fa371db6b7fc62d5eba6b2479a1e03f68906c Mon Sep 17 00:00:00 2001 From: Arvind Tiwari Date: Sun, 20 Aug 2017 21:40:17 +0530 Subject: [PATCH] my orders page redesigned --- hosting/locale/de/LC_MESSAGES/django.po | 97 +++++++----- .../static/hosting/css/virtual-machine.css | 41 ++++- hosting/static/hosting/img/shopping-cart.svg | 18 +++ hosting/static/hosting/js/initial.js | 8 + hosting/templates/hosting/orders.html | 146 +++++++----------- 5 files changed, 180 insertions(+), 130 deletions(-) create mode 100644 hosting/static/hosting/img/shopping-cart.svg diff --git a/hosting/locale/de/LC_MESSAGES/django.po b/hosting/locale/de/LC_MESSAGES/django.po index 3cc30292..b53124bb 100644 --- a/hosting/locale/de/LC_MESSAGES/django.po +++ b/hosting/locale/de/LC_MESSAGES/django.po @@ -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 \n" "Language-Team: LANGUAGE \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 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" diff --git a/hosting/static/hosting/css/virtual-machine.css b/hosting/static/hosting/css/virtual-machine.css index 420a9452..ee7cb2a3 100644 --- a/hosting/static/hosting/css/virtual-machine.css +++ b/hosting/static/hosting/css/virtual-machine.css @@ -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; + } } \ No newline at end of file diff --git a/hosting/static/hosting/img/shopping-cart.svg b/hosting/static/hosting/img/shopping-cart.svg new file mode 100644 index 00000000..19e70e1d --- /dev/null +++ b/hosting/static/hosting/img/shopping-cart.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + diff --git a/hosting/static/hosting/js/initial.js b/hosting/static/hosting/js/initial.js index da2887c6..ea391ce2 100644 --- a/hosting/static/hosting/js/initial.js +++ b/hosting/static/hosting/js/initial.js @@ -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); + }); + }); \ No newline at end of file diff --git a/hosting/templates/hosting/orders.html b/hosting/templates/hosting/orders.html index 9699cbaa..97164dfe 100644 --- a/hosting/templates/hosting/orders.html +++ b/hosting/templates/hosting/orders.html @@ -3,95 +3,65 @@ {% load i18n %} {% block content %} - -
-
-
-
- -

{% trans "My Orders"%}

-
- - - - - - - - - - - {% for order in orders %} - - - - - - - - - {% endfor %} - -
#{% trans "Date"%}{% trans "Amount"%}{% trans "Status"%}
{{ order.id }}{{ order.created_at | date:"M d, Y" }}{{ order.price }} CHF{% if order.approved %} - {% trans "Approved"%} - {% else %} - {% trans "Declined"%} - {% endif %} - - {% trans "View Detail"%} - -
- - {% if is_paginated %} - - {% endif %} - -
- +
+
+

{% trans "My Orders" %}

+ {% if messages %} +
+ {% for message in messages %} + {{ message }} + {% endfor %}
-
- + {% endif %} +
+ + + + + + + + + + + + + + + + + + + {% for order in orders %} + + {% endfor %} + +
{% trans "Order Nr." %}{% trans "Date" %}{% trans "Amount" %}{% trans "Status" %}
{{ order.id }}{{ order.created_at | date:"M d, Y" }}{{ order.price }} + {% if order.approved %} + Approved + {% else %} + Declined + {% endif %} + + {% trans "View Detail" %} +
+ + {% if is_paginated %} + + {% endif %} +
{% endblock %}