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

task/3698 my orders page redesigned

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-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"
 "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"
+msgid "See Invoice"
-msgstr "Akzeptiert"
+msgstr "Rechnung"
-
-msgid "Declined"
-msgstr "Abgelehnt"
 
 msgid "View Detail"
 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"
 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. "
+"                                                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 ""
 "\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"
 
@@ -479,14 +472,8 @@ msgstr ""
 msgid "CREATE VM"
 msgstr "NEUE VM"
 
-msgid "Page"
-msgstr ""
-
-msgid "of"
-msgstr ""
-
 msgid "login"
-msgstr "einloggen"
+msgstr "Einloggen"
 
 msgid ""
 "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."
 msgstr "Entschuldigung, deine Anfrage ist ungültig."
 
+msgid "Invalid credit card"
+msgstr "Ungültige Kreditkarte"
+
 msgid "Confirm Order"
 msgstr "Bestellung Bestätigen"
 
@@ -520,6 +510,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 "Ip not assigned yet"
 #~ msgstr "Ip nicht zugewiesen"
 

hosting/static/hosting/css/virtual-machine.css

@@ -440,10 +440,10 @@
 }
 
 .dashboard-title-thin .un-icon {
-  height: 34px;
+  height: 30px;
   margin-right: 5px;
   margin-top: -1px;
-  width: 20px;
+  width: 30px;
 }
 
 .dashboard-subtitle {
@@ -488,6 +488,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;
+  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 {
   font-weight: 600;
 }
@@ -556,8 +574,8 @@
     position: relative;
     border-top: 1px solid #ddd;
     /* margin-top: 15px; */
-    padding-top: 5px;
+    padding-top: 10px;
-    padding-bottom: 15px;
+    padding-bottom: 13px;
   }
   .table-switch tbody tr:last-child {
     border-bottom: 1px solid #ddd;
@@ -574,11 +592,28 @@
     font-weight: 600;
     position: absolute;
     top: 5px;
-
+    left: 8px;
   }
   .table-switch .last-td {
     position: absolute;
-    bottom: 20px;
+    bottom: 13px;
     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;
+  }
 }

hosting/static/hosting/img/shopping-cart.svg

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

hosting/static/hosting/js/initial.js

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

hosting/templates/hosting/orders.html

@@ -3,95 +3,64 @@
 {% load i18n %}
 
 {% 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>
+        {% 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>
+            {% for order in orders %}
+                <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' order.pk %}" data-alt="{% trans 'See Invoice' %}">{% trans "View Detail" %}</a>
+                    </td>
+                </tr>
+            {% 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 %}