Add some styles and do not let user remove card if he has only one

This commit is contained in:
PCoder 2018-07-05 23:06:47 +02:00
parent 5cd62abc70
commit 0db4a113e6
4 changed files with 22 additions and 1 deletions

View file

@ -172,3 +172,11 @@ footer .dcl-link-separator::before {
align-self: flex-end; align-self: flex-end;
padding-right: 0 !important; padding-right: 0 !important;
} }
.new-card-head {
margin-top: 10px;
}
.new-card-button-margin button{
margin-top: 5px;
margin-bottom: 5px;
}

View file

@ -130,7 +130,7 @@
<div class="col-xs-6"> <div class="col-xs-6">
<h4>{% trans "Add a new credit card" %}</h4> <h4>{% trans "Add a new credit card" %}</h4>
</div> </div>
<div class="col-xs-6 text-right"> <div class="col-xs-6 text-right new-card-button-margin">
<button data-toggle="collapse" data-target="#newcard" class="btn choice-btn"> <button data-toggle="collapse" data-target="#newcard" class="btn choice-btn">
<span class="fa fa-plus"></span>&nbsp;&nbsp;{% trans "NEW CARD" %} <span class="fa fa-plus"></span>&nbsp;&nbsp;{% trans "NEW CARD" %}
</button> </button>

View file

@ -431,3 +431,12 @@
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.new-card-head {
margin-top: 10px;
}
.new-card-button-margin button{
margin-top: 5px;
margin-bottom: 5px;
}

View file

@ -31,6 +31,7 @@
<h3>{%trans "Credit Card" %}</h3> <h3>{%trans "Credit Card" %}</h3>
<hr> <hr>
<div> <div>
{% with card_list_len=cards_list|length %}
{% for card in cards_list %} {% for card in cards_list %}
<div class="credit-card-details"> <div class="credit-card-details">
<h5 class="billing-head">{% trans "Credit Card" %}</h5> <h5 class="billing-head">{% trans "Credit Card" %}</h5>
@ -38,6 +39,7 @@
<h5 class="membership-lead">{% trans "Type" %}: {{card.brand}}</h5> <h5 class="membership-lead">{% trans "Type" %}: {{card.brand}}</h5>
<div class="credit-card-details-opt"> <div class="credit-card-details-opt">
<div class="row"> <div class="row">
{% if card_list_len > 1 %}
<div class="col-xs-6"> <div class="col-xs-6">
<a class="caps-link" href="" data-toggle="modal" data-target="#Modal{{ card.id }}"><img src="{% static 'hosting/img/delete.svg' %}" class="svg-img">{% trans "REMOVE CARD" %}</a> <a class="caps-link" href="" data-toggle="modal" data-target="#Modal{{ card.id }}"><img src="{% static 'hosting/img/delete.svg' %}" class="svg-img">{% trans "REMOVE CARD" %}</a>
<div class="modal fade" id="Modal{{card.id }}" tabindex="-1" role="dialog"> <div class="modal fade" id="Modal{{card.id }}" tabindex="-1" role="dialog">
@ -63,6 +65,7 @@
</div> </div>
</div> </div>
</div> </div>
{% endif %}
<div class="col-xs-6 text-right"> <div class="col-xs-6 text-right">
{% if card.preferred %} {% if card.preferred %}
{% trans "DEFAULT" %} {% trans "DEFAULT" %}
@ -83,6 +86,7 @@
<p>{% blocktrans %}We are using <a href="https://stripe.com">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}</p> <p>{% blocktrans %}We are using <a href="https://stripe.com">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}</p>
</div> </div>
{% endfor %} {% endfor %}
{% endwith %}
<div class="new-card-head"> <div class="new-card-head">
<div class="row"> <div class="row">