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
				
			
		|  | @ -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; | ||||||
|  | } | ||||||
|  | @ -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>  {% trans "NEW CARD" %} |                                                 <span class="fa fa-plus"></span>  {% trans "NEW CARD" %} | ||||||
|                                             </button> |                                             </button> | ||||||
|  |  | ||||||
|  | @ -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; | ||||||
|  | } | ||||||
|  | @ -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"> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue