amal/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added the titles of the input fields

Browse source
This commit is contained in:
PCoder 2017-07-16 21:29:42 +05:30
parent f4d3d53d0c
commit c09947ef12
3 changed files with 39 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
hosting/static/hosting/css/landing-page.css
View file

@ -524,29 +524,30 @@ a.unlink:hover {
} }
.brand { .brand {
float: left;
width: 10%;
} }
.brand #brand-icon { .brand #brand-icon {
vertical-align: bottom;
padding-top: 13px;
} }
.card-number-element { .card-number-element {
float: left;
width: 63%;
} }
.card-expiry-element { .card-expiry-element {
float: left;
width: 17%;
} }
.card-cvc-element { .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 { #card-errors {
clear: both; clear: both;
@ -604,21 +605,18 @@ a.unlink:hover {
margin-bottom: 30px; margin-bottom: 30px;
} }
.credit-card-element-with-brand {
width: 100%;
float: left;
}
.brand { .brand {
width: 16%;
} }
.card-expiry-element { .card-expiry-element {
width: 40%; padding-right: 10px;
} }
.card-cvc-element { .card-cvc-element {
width: 15%; padding-left: 10px;
}
.hide-mobile{
display:none;
} }
} }

10
hosting/static/hosting/js/payment.js
View file

@ -68,7 +68,7 @@ $(document).ready(function () {
base: { base: {
iconColor: '#666EE8', iconColor: '#666EE8',
color: '#31325F', color: '#31325F',
lineHeight: '40px', lineHeight: '25px',
fontWeight: 300, fontWeight: 300,
fontFamily: "'lato-light', sans-serif", fontFamily: "'lato-light', sans-serif",
fontSize: '14px', fontSize: '14px',
@ -79,7 +79,7 @@ $(document).ready(function () {
invalid: { invalid: {
iconColor: '#eb4d5c', iconColor: '#eb4d5c',
color: '#eb4d5c', color: '#eb4d5c',
lineHeight: '40px', lineHeight: '25px',
fontWeight: 300, fontWeight: 300,
fontFamily: "'lato-regular', sans-serif", fontFamily: "'lato-regular', sans-serif",
fontSize: '14px', fontSize: '14px',
@ -93,7 +93,7 @@ $(document).ready(function () {
base: { base: {
iconColor: '#666EE8', iconColor: '#666EE8',
color: '#31325F', color: '#31325F',
lineHeight: '40px', lineHeight: '25px',
fontWeight: 300, fontWeight: 300,
fontFamily: "'lato-regular', sans-serif", fontFamily: "'lato-regular', sans-serif",
fontSize: '14px', fontSize: '14px',
@ -104,7 +104,7 @@ $(document).ready(function () {
invalid: { invalid: {
iconColor: '#eb4d5c', iconColor: '#eb4d5c',
color: '#eb4d5c', color: '#eb4d5c',
lineHeight: '40px', lineHeight: '25px',
fontWeight: 300, fontWeight: 300,
fontFamily: "'lato-regular', sans-serif", fontFamily: "'lato-regular', sans-serif",
fontSize: '14px', fontSize: '14px',
@ -117,7 +117,7 @@ $(document).ready(function () {
var cardNumberElement = elements.create('cardNumber', { var cardNumberElement = elements.create('cardNumber', {
style: credit_card_text_style, style: credit_card_text_style,
placeholder: "____ ____ ____ ____" placeholder: "Enter your credit card number"
}); });
cardNumberElement.mount('#card-number-element'); cardNumberElement.mount('#card-number-element');

23
hosting/templates/hosting/payment.html
View file

@ -108,17 +108,24 @@
<form action="" id="payment-form-new" method="POST"> <form action="" id="payment-form-new" method="POST">
<input type="hidden" name="token"/> <input type="hidden" name="token"/>
<div class="group"> <div class="group">
<div class="credit-card-element-with-brand"> <div class="credit-card-goup">
<div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element card-number-element">
<div class="card-number-element"> <label>Card Number</label>
<div id="card-number-element" class="field"></div> <div id="card-number-element" class="field my-input"></div>
</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>
<div class="card-expiry-element"> <div class="col-xs-12 col-sm-2 col-md-6 col-lg-6 hide-mobile"></div>
<div id="card-expiry-element" class="field"></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 class="card-cvc-element">
<div id="card-cvc-element" class="field"></div>
</div> </div>
</div> </div>
<div id="card-errors" role="alert"></div> <div id="card-errors" role="alert"></div>