From 0db4a113e6d1fa281ec0368297240dc254e81bb2 Mon Sep 17 00:00:00 2001
From: PCoder <purple.coder@yahoo.co.uk>
Date: Thu, 5 Jul 2018 23:06:47 +0200
Subject: [PATCH] Add some styles and do not let user remove card if he has
 only one

---
 datacenterlight/static/datacenterlight/css/common.css    | 8 ++++++++
 .../templates/datacenterlight/landing_payment.html       | 2 +-
 hosting/static/hosting/css/commons.css                   | 9 +++++++++
 hosting/templates/hosting/settings.html                  | 4 ++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/datacenterlight/static/datacenterlight/css/common.css b/datacenterlight/static/datacenterlight/css/common.css
index 4b3b7b41..28674b30 100644
--- a/datacenterlight/static/datacenterlight/css/common.css
+++ b/datacenterlight/static/datacenterlight/css/common.css
@@ -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;
 }
\ No newline at end of file
diff --git a/datacenterlight/templates/datacenterlight/landing_payment.html b/datacenterlight/templates/datacenterlight/landing_payment.html
index b774f4c2..4c43f41c 100644
--- a/datacenterlight/templates/datacenterlight/landing_payment.html
+++ b/datacenterlight/templates/datacenterlight/landing_payment.html
@@ -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>&nbsp;&nbsp;{% trans "NEW CARD" %}
                                             </button>
diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index 5de13353..292aeda9 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -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;
+}
\ No newline at end of file
diff --git a/hosting/templates/hosting/settings.html b/hosting/templates/hosting/settings.html
index 64057747..62dcc947 100644
--- a/hosting/templates/hosting/settings.html
+++ b/hosting/templates/hosting/settings.html
@@ -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">