From c09947ef124d93e7a243d7a99f932ab48cdd86e7 Mon Sep 17 00:00:00 2001
From: PCoder <purple.coder@yahoo.co.uk>
Date: Sun, 16 Jul 2017 21:29:42 +0530
Subject: [PATCH] Added the titles of the input fields

---
 hosting/static/hosting/css/landing-page.css | 34 ++++++++++-----------
 hosting/static/hosting/js/payment.js        | 10 +++---
 hosting/templates/hosting/payment.html      | 29 +++++++++++-------
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css
index c621f2c0..940d1bf8 100644
--- a/hosting/static/hosting/css/landing-page.css
+++ b/hosting/static/hosting/css/landing-page.css
@@ -524,29 +524,30 @@ a.unlink:hover {
 }
 
 .brand {
-    float: left;
-    width: 10%;
 }
 
 .brand #brand-icon {
-    vertical-align: bottom;
-    padding-top: 13px;
 }
 
 .card-number-element {
-    float: left;
-    width: 63%;
 }
 
 .card-expiry-element {
-    float: left;
-    width: 17%;
 }
 
 .card-cvc-element {
-    float: left;
-    width: 10%;
 }
+.card-element {
+    margin-bottom: 10px;
+    padding: 0;
+}
+.card-element label{
+    width:100%;
+    margin-bottom:0px;
+}
+.my-input {
+   border-bottom: 1px solid #ccc;
+ }
 
 #card-errors {
     clear: both;
@@ -604,21 +605,18 @@ a.unlink:hover {
         margin-bottom: 30px;
     }
 
-    .credit-card-element-with-brand {
-        width: 100%;
-        float: left;
-    }
-
     .brand {
-        width: 16%;
     }
 
     .card-expiry-element {
-        width: 40%;
+    padding-right: 10px;
     }
 
     .card-cvc-element {
-        width: 15%;
+    padding-left: 10px;
+    }
+    .hide-mobile{
+    display:none;
     }
 }
 
diff --git a/hosting/static/hosting/js/payment.js b/hosting/static/hosting/js/payment.js
index 60054c97..edae127c 100644
--- a/hosting/static/hosting/js/payment.js
+++ b/hosting/static/hosting/js/payment.js
@@ -68,7 +68,7 @@ $(document).ready(function () {
             base: {
                 iconColor: '#666EE8',
                 color: '#31325F',
-                lineHeight: '40px',
+                lineHeight: '25px',
                 fontWeight: 300,
                 fontFamily: "'lato-light', sans-serif",
                 fontSize: '14px',
@@ -79,7 +79,7 @@ $(document).ready(function () {
             invalid: {
                 iconColor: '#eb4d5c',
                 color: '#eb4d5c',
-                lineHeight: '40px',
+                lineHeight: '25px',
                 fontWeight: 300,
                 fontFamily: "'lato-regular', sans-serif",
                 fontSize: '14px',
@@ -93,7 +93,7 @@ $(document).ready(function () {
             base: {
                 iconColor: '#666EE8',
                 color: '#31325F',
-                lineHeight: '40px',
+                lineHeight: '25px',
                 fontWeight: 300,
                 fontFamily: "'lato-regular', sans-serif",
                 fontSize: '14px',
@@ -104,7 +104,7 @@ $(document).ready(function () {
             invalid: {
                 iconColor: '#eb4d5c',
                 color: '#eb4d5c',
-                lineHeight: '40px',
+                lineHeight: '25px',
                 fontWeight: 300,
                 fontFamily: "'lato-regular', sans-serif",
                 fontSize: '14px',
@@ -117,7 +117,7 @@ $(document).ready(function () {
 
         var cardNumberElement = elements.create('cardNumber', {
             style: credit_card_text_style,
-            placeholder: "____ ____ ____ ____"
+            placeholder: "Enter your credit card number"
         });
         cardNumberElement.mount('#card-number-element');
 
diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html
index 365a7b8f..54cf85fd 100644
--- a/hosting/templates/hosting/payment.html
+++ b/hosting/templates/hosting/payment.html
@@ -108,17 +108,24 @@
                             <form action="" id="payment-form-new" method="POST">
                                 <input type="hidden" name="token"/>
                                 <div class="group">
-                                    <div class="credit-card-element-with-brand">
-                                        <div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div>
-                                        <div class="card-number-element">
-                                            <div id="card-number-element" class="field"></div>
-                                        </div>
-                                    </div>
-                                    <div class="card-expiry-element">
-                                        <div id="card-expiry-element" class="field"></div>
-                                    </div>
-                                    <div class="card-cvc-element">
-                                        <div id="card-cvc-element" class="field"></div>
+                                    <div class="credit-card-goup">
+                                       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element card-number-element">
+                                           <label>Card Number</label>
+                                           <div id="card-number-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-6 col-sm-5 col-md-3 col-lg-3 card-element card-expiry-element">
+                                           <label>Expiry Date</label>
+                                           <div id="card-expiry-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-12 col-sm-2 col-md-6 col-lg-6 hide-mobile"></div>
+                                       <div class="col-xs-6 col-sm-5 col-md-3 col-lg-3 card-element card-cvc-element">
+                                           <label>CVC</label>
+                                           <div id="card-cvc-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element brand">
+                                           <label>Card Type</label>
+                                           <i class="pf pf-credit-card" id="brand-icon"></i>
+                                       </div>
                                     </div>
                                 </div>
                                 <div id="card-errors" role="alert"></div>