added options to card details
This commit is contained in:
parent
5105b4583e
commit
f45ec16091
4 changed files with 48 additions and 5 deletions
|
@ -246,7 +246,8 @@
|
|||
|
||||
.settings-container h4 {
|
||||
margin-bottom: 15px;
|
||||
color: #999;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.settings-container .card-expiry-element,
|
||||
|
@ -287,4 +288,25 @@
|
|||
|
||||
.btn-wide {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.caps_link {
|
||||
font-weight: 600;
|
||||
color: #8da4c0;
|
||||
fill: #8da4c0;
|
||||
padding: 6px 0;
|
||||
display: block;
|
||||
}
|
||||
.caps_link:hover {
|
||||
color: #627388;
|
||||
fill: #627388;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.settings-container .credit-card-details-opt {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.caps_link .un-icon {
|
||||
margin-right: 5px;
|
||||
}
|
|
@ -568,6 +568,7 @@ a.unlink:hover {
|
|||
border: 1px solid #a1a1a1;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.card-warning-error {
|
||||
border: 1px solid #EB4D5C;
|
||||
|
@ -725,12 +726,12 @@ a.unlink:hover {
|
|||
|
||||
@media (min-width: 768px) {
|
||||
.dcl-billing {
|
||||
padding-right: 50px;
|
||||
padding-right: 65px;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
.dcl-creditcard {
|
||||
padding-left: 50px;
|
||||
padding-left: 65px;
|
||||
}
|
||||
|
||||
.tbl-tot {
|
||||
|
|
7
hosting/static/hosting/img/delete.svg
Normal file
7
hosting/static/hosting/img/delete.svg
Normal file
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
||||
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
|
||||
<g><path d="M185,150h630c19.3,0,35-15.7,35-35s-15.7-35-35-35H605c0-38.7-31.3-70-70-70h-70c-38.7,0-70,31.3-70,70H185c-19.3,0-35,15.7-35,35S165.7,150,185,150z"/><path d="M885,220h-69.9c-0.1,0-0.3,0-0.4,0H395.1c0,0-0.1,0-0.1,0H185.3c-0.1,0-0.2,0-0.3,0h-70c-19.3,0-35,15.7-35,35c0,19.3,15.7,35,35,35h39.9l100.5,670.2C258,977.3,272.7,990,290,990h139.9c0,0,0,0,0,0c0,0,0,0,0,0h140c0,0,0,0,0,0c0,0,0,0,0,0H710c17.3,0,32-12.7,34.6-29.8L845.1,290H885c19.3,0,35-15.7,35-35C920,235.7,904.3,220,885,220z M463.3,920l-31.5-630h136.4l-31.5,630H463.3z M225.6,290h136.1l31.5,630h-73.1L225.6,290z M679.9,920h-73.1l31.5-630h136.1L679.9,920z"/></g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
|
@ -27,14 +27,27 @@
|
|||
<hr>
|
||||
<div>
|
||||
<div>
|
||||
{% if credit_card_data.last4 %}
|
||||
{% if not credit_card_data.last4 %}
|
||||
<div class="credit-card-details">
|
||||
<h5 class="billing-head">{% trans "Credit Card" %}</h5>
|
||||
<h5 class="membership-lead">{% trans "Last" %} 4: *****{{credit_card_data.last4}}</h5>
|
||||
<h5 class="membership-lead">{% trans "Type" %}: {{credit_card_data.cc_brand}}</h5>
|
||||
<div class="credit-card-details-opt">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<a class="caps_link" href=""><img src="{% static 'hosting/img/delete.svg' %}" class="un-icon">REMOVE CARD</a>
|
||||
</div>
|
||||
<div class="col-xs-6 text-right">
|
||||
<a class="btn btn-sm btn-vm-contact" href="">{% trans "EDIT CARD" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<h4>{% trans "Add a new Card." %}</h4>
|
||||
<h4>
|
||||
{% trans "Add a new Card." %}<br>
|
||||
{% trans "We are using Stripe for payment and store your information in our database." %}
|
||||
</h4>
|
||||
<form action="" id="payment-form-new" class="credit-card-form" method="POST">
|
||||
<input type="hidden" name="token"/>
|
||||
<div class="credit-card-goup">
|
||||
|
|
Loading…
Reference in a new issue