From 09b80467b947b17a5390575fdac14015734b5886 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 5 Sep 2017 00:24:18 +0530
Subject: [PATCH] landing payment page cleanup

---
 .../datacenterlight/landing_payment.html      | 66 ++++++++-----------
 hosting/static/hosting/css/landing-page.css   |  2 +-
 hosting/templates/hosting/base_short.html     |  2 +
 hosting/templates/hosting/payment.html        |  5 +-
 4 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/datacenterlight/templates/datacenterlight/landing_payment.html b/datacenterlight/templates/datacenterlight/landing_payment.html
index f4974a56..2a3f500c 100644
--- a/datacenterlight/templates/datacenterlight/landing_payment.html
+++ b/datacenterlight/templates/datacenterlight/landing_payment.html
@@ -1,54 +1,44 @@
 {% extends "hosting/base_short.html" %}
 {% load staticfiles bootstrap3 i18n %}
 
+{% block css_extra %}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css"/>
+{% endblock css_extra %}
+
 {% block navbar %}
     {% include "datacenterlight/includes/_navbar.html" %}
 {% endblock navbar %}
 
 {% block content %}
 <!-- Credit card form -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css"/>
 <div class="dcl-order-container">
     <div class="payment-container">
         <div class="row">
-            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-sec">
-                <h3><strong>{%trans "Your Order" %}</strong></h3>
-                <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-header">
-                    <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-header">
-                        {%trans "Cores" %}
+            <div class="col-sm-6">
+
+            </div>
+            <div class="col-sm-6">
+                <div class="dcl-order-sec row">
+                    <h3>{%trans "Your Order" %}</h3>
+                    <hr>
+                    <div class="content">
+                        <p><b>{% trans "Cores"%}</b> <span class="pull-right">{{vm.cores}}</span></p>
+                        <hr>
+                        <p><b>{% trans "Memory"%}</b> <span class="pull-right">{{vm.memory}} GB</span></p>
+                        <hr>
+                        <p><b>{% trans "Disk space"%}</b> <span class="pull-right">{{vm.disk_size}} GB</span></p>
+                        <hr>
                     </div>
-                    <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-header">
-                        {%trans "Memory" %}
-                    </div>
-                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-header">
-                        {%trans "Disk space" %}
-                    </div>
-                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header">
-                        {%trans "Configuration" %}
-                    </div>
-                </div>
-                <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-content">
-                    <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-content">
-                        {{request.session.specs.cpu|floatformat}}
-                    </div>
-                    <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-content">
-                        {{request.session.specs.memory|floatformat}} GB
-                    </div>
-                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-content">
-                        {{request.session.specs.disk_size|floatformat}} GB
-                    </div>
-                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content">
-                        {{request.session.template.name}}
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-table-total">
-                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-tot tbl-no-padding">
-                        {%trans "Total" %} <span>{%trans "including VAT" %}</span>
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-no-padding">
-                        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div>
-                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 tbl-total">{{request.session.specs.price}}
-                            CHF<span class="dcl-price-month">/{% trans "Month" %}</span>
+                    <br/>
+                    {% url 'hosting:payment' as payment_url %}
+                    <div class="dcl-order-table-total row">
+                        <div class="col-xs-6 tbl-tot tbl-no-padding">
+                            {%trans "Total" %} <span>{%trans "including VAT" %}</span>
+                        </div>
+                        <div class="col-xs-6 tbl-no-padding">
+                            <div class="tbl-total">{{request.session.specs.price}}
+                                CHF<span class="dcl-price-month">/{% trans "Month" %}</span>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css
index b69f1b8f..b84d6177 100644
--- a/hosting/static/hosting/css/landing-page.css
+++ b/hosting/static/hosting/css/landing-page.css
@@ -579,7 +579,7 @@ a.unlink:hover {
 }
 
 .dcl-order-table-total .tbl-total {
-    text-align: center;
+    text-align: right;
     color: #000;
     padding-left: 44px;
 }
diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html
index 5030d9ab..f02f4e0c 100644
--- a/hosting/templates/hosting/base_short.html
+++ b/hosting/templates/hosting/base_short.html
@@ -25,6 +25,8 @@
     <link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
     <link href="{% static 'hosting/css/virtual-machine.css' %}" rel="stylesheet">
     <link href="{% static 'hosting/css/dashboard.css' %}" rel="stylesheet">
+    {% block css_extra %}
+    {% endblock css_extra %}
 
     <!-- Custom Fonts -->
     <link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html
index b9a04e43..9b1c9e45 100644
--- a/hosting/templates/hosting/payment.html
+++ b/hosting/templates/hosting/payment.html
@@ -1,9 +1,12 @@
 {% extends "hosting/base_short.html" %}
 {% load staticfiles bootstrap3 i18n %}
 
+{% block css_extra %}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css"/>
+{% endblock css_extra %}
+
 {% block content %}
 <!-- Credit card form -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css"/>
 <div class="dcl-order-container">
     <div class="payment-container">
         <div class="row">