From c09947ef124d93e7a243d7a99f932ab48cdd86e7 Mon Sep 17 00:00:00 2001 From: PCoder 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 @@
-
-
-
-
-
-
-
-
-
-
-
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ + +