Add some styles and do not let user remove card if he has only one
This commit is contained in:
		
					parent
					
						
							
								5cd62abc70
							
						
					
				
			
			
				commit
				
					
						0db4a113e6
					
				
			
		
					 4 changed files with 22 additions and 1 deletions
				
			
		| 
						 | 
				
			
			@ -171,4 +171,12 @@ footer .dcl-link-separator::before {
 | 
			
		|||
.credit-card-info .align-bottom {
 | 
			
		||||
    align-self: flex-end;
 | 
			
		||||
    padding-right: 0 !important;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.new-card-head {
 | 
			
		||||
    margin-top: 10px;
 | 
			
		||||
}
 | 
			
		||||
.new-card-button-margin button{
 | 
			
		||||
    margin-top: 5px;
 | 
			
		||||
    margin-bottom: 5px;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -130,7 +130,7 @@
 | 
			
		|||
                                        <div class="col-xs-6">
 | 
			
		||||
                                            <h4>{% trans "Add a new credit card" %}</h4>
 | 
			
		||||
                                        </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">
 | 
			
		||||
                                                <span class="fa fa-plus"></span>  {% trans "NEW CARD" %}
 | 
			
		||||
                                            </button>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -431,3 +431,12 @@
 | 
			
		|||
  margin-top: 10px;
 | 
			
		||||
  margin-bottom: 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.new-card-head {
 | 
			
		||||
    margin-top: 10px;
 | 
			
		||||
}
 | 
			
		||||
.new-card-button-margin button{
 | 
			
		||||
    margin-top: 5px;
 | 
			
		||||
    margin-bottom: 5px;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -31,6 +31,7 @@
 | 
			
		|||
                    <h3>{%trans "Credit Card" %}</h3>
 | 
			
		||||
                    <hr>
 | 
			
		||||
                    <div>
 | 
			
		||||
                        {% with card_list_len=cards_list|length %}
 | 
			
		||||
                        {% for card in cards_list %}
 | 
			
		||||
                            <div class="credit-card-details">
 | 
			
		||||
                                <h5 class="billing-head">{% trans "Credit Card" %}</h5>
 | 
			
		||||
| 
						 | 
				
			
			@ -38,6 +39,7 @@
 | 
			
		|||
                                <h5 class="membership-lead">{% trans "Type" %}: {{card.brand}}</h5>
 | 
			
		||||
                                <div class="credit-card-details-opt">
 | 
			
		||||
                                    <div class="row">
 | 
			
		||||
                                        {% if card_list_len > 1 %}
 | 
			
		||||
                                        <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>
 | 
			
		||||
                                            <div class="modal fade" id="Modal{{card.id }}" tabindex="-1" role="dialog">
 | 
			
		||||
| 
						 | 
				
			
			@ -63,6 +65,7 @@
 | 
			
		|||
                                                </div>
 | 
			
		||||
                                            </div>
 | 
			
		||||
                                        </div>
 | 
			
		||||
                                        {% endif %}
 | 
			
		||||
                                        <div class="col-xs-6 text-right">
 | 
			
		||||
                                            {% if card.preferred %}
 | 
			
		||||
                                            {% 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>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        {% endfor %}
 | 
			
		||||
                        {% endwith %}
 | 
			
		||||
 | 
			
		||||
                        <div class="new-card-head">
 | 
			
		||||
                            <div class="row">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue