From 79cf5e416c372890e3066fca9933d79abd33ed9b Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 1 Sep 2017 23:56:01 +0530
Subject: [PATCH] modal btn min width, modal width increased

---
 hosting/static/hosting/css/commons.css        | 18 ++++++----
 hosting/static/hosting/css/user_keys.css      |  1 +
 hosting/templates/hosting/user_keys.html      | 35 +++++++------------
 .../hosting/virtual_machine_detail.html       |  6 ++--
 4 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index cb7cdd8e..699f417c 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -109,7 +109,7 @@
     text-align: center;
     width: 100%;
     float: left;
-    padding: 0px 40px 15px 30px;
+    padding: 0px 30px 15px 30px;
 }
 .modal-body .modal-icon i {
     font-size: 80px;
@@ -117,7 +117,7 @@
     color: #999;
 }
 .modal-body .modal-icon {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 }
 .modal-title {
     margin: 0;
@@ -128,9 +128,12 @@
     font-weight: 300;
 }
 .modal-text {
-    padding-top: 15px;
+    padding-top: 5px;
     font-size: 16px;
 }
+.modal-text p:not(:last-of-type){
+	margin-bottom: 5px;
+}
 .modal-footer {
     border-top: 0px solid #e5e5e5;
     width: 100%;
@@ -138,11 +141,8 @@
     text-align: center;
     padding: 15px 15px;
 }
-.modal-footer button[type="submit"] {
-  min-width: 80px;
-}
 @media (min-width: 1300px) {
-    .modal-dialog {/*     top: 30%; */width: 35%;}
+    .modal-dialog {/*     top: 30%; */width: 40%;}
 }
 @media (max-width: 1299px) {
     .modal-dialog {
@@ -239,4 +239,8 @@
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
+}
+
+.btn-wide {
+	min-width: 100px;
 }
\ No newline at end of file
diff --git a/hosting/static/hosting/css/user_keys.css b/hosting/static/hosting/css/user_keys.css
index 4b788da6..6039ae0e 100644
--- a/hosting/static/hosting/css/user_keys.css
+++ b/hosting/static/hosting/css/user_keys.css
@@ -299,6 +299,7 @@
 }
 .key_contain {
     word-break: break-all;
+    margin-bottom: 15px;
 }
 .custom_form_button{
     border-radius: 0;
diff --git a/hosting/templates/hosting/user_keys.html b/hosting/templates/hosting/user_keys.html
index 31332929..1cfb880c 100644
--- a/hosting/templates/hosting/user_keys.html
+++ b/hosting/templates/hosting/user_keys.html
@@ -33,8 +33,7 @@
                 <tr>
                     <td scope="row">{{user_key.name}}</td>
                     <td>
-                        <button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal"
-                                data-target="#Modal{{ user_key.id }}" style="color: #717274">
+                        <button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal" data-target="#Modal{{ user_key.id }}" style="color: #717274">
                             <span class="pc-only">{% trans "Delete" %}</span>
                             <span class="mob-only"><i class="fa fa-trash"></i></span>
                         </button>
@@ -42,20 +41,18 @@
                             <div class="modal-dialog" role="document">
                                 <div class="modal-content">
                                     <div class="modal-header">
-                                        <button type="button" class="close" data-dismiss="modal"
-                                                aria-label="Confirm"><span
-                                                aria-hidden="true">&times;</span>
-                                        </button>
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">&times;</span></button>
                                     </div>
                                     <div class="modal-body">
-                                     <div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
-                                      <h4 class="modal-title" id="ModalLabel">{% trans "Delete SSH Key"%}</h4>
-                                        <p class="modal-text">{% trans "Do you want to delete this key?"%}</p>
+                                        <div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
+                                        <h4 class="modal-title" id="ModalLabel">{% trans "Delete SSH Key"%}</h4>
+                                        <div class="modal-text">
+                                            <p>{% trans "Do you want to delete this key?"%}</p>
+                                        </div>
                                         <form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
                                             {% csrf_token %}
                                             <div class="modal-footer">
-                                                <button type="submit" class="btn btn-danger">{% trans "Delete"%}
-                                                </button>
+                                                <button type="submit" class="btn btn-danger btn-wide">{% trans "Delete"%}</button>
                                             </div>
                                         </form>
                                     </div>
@@ -64,23 +61,18 @@
                         </div>
                      </td>
                     <td>
-                        <p type="button"  data-toggle="modal" style="margin: 0" data-target="#Modal_public_key{{ user_key.id }}">
+                        <p data-toggle="modal" style="margin: 0" data-target="#Modal_public_key{{ user_key.id }}">
                             <a href="#">{% trans "Show" %}</a>
                         </p>
                         <div class="modal fade" id="Modal_public_key{{user_key.id }}" tabindex="-1" role="dialog">
                             <div class="modal-dialog" role="document">
                                 <div class="modal-content">
                                     <div class="modal-header">
-                                        <button type="button" class="close" data-dismiss="modal"
-                                                aria-label="Confirm"><span
-                                                aria-hidden="true">&times;</span>
-                                        </button>
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">&times;</span></button>
                                     </div>
                                     <div class="modal-body">
                                         <h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public SSH Key" %}</h4>
                                         <p class="key_contain" style="margin-top: 10px;">{{ user_key.public_key }}</p>
-                                        <div class="modal-footer">
-                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -90,10 +82,9 @@
                     <td>
                         {% if user_key.private_key %}
                         <form action="{{ user_key.private_key.url }}">
-                            <button style="color: #717274" type="submit" class="btn btn-default" data-toggle="modal"
-                                    >
-                                    <span class="pc-only">{% trans "Download" %}</span>
-                                    <span class="mob-only"><i class="fa fa-download"></i></span>
+                            <button style="color: #717274" type="submit" class="btn btn-default">
+                                <span class="pc-only">{% trans "Download" %}</span>
+                                <span class="mob-only"><i class="fa fa-download"></i></span>
                             </button>
                         </form>
                         {% endif %}
diff --git a/hosting/templates/hosting/virtual_machine_detail.html b/hosting/templates/hosting/virtual_machine_detail.html
index 59a36bdc..6243c309 100644
--- a/hosting/templates/hosting/virtual_machine_detail.html
+++ b/hosting/templates/hosting/virtual_machine_detail.html
@@ -101,9 +101,9 @@
 						<p>{% trans "Do you want to cancel your Virtual Machine" %} ?</p>
 						<p><strong>{{virtual_machine.name}}</strong></p>
 					</div>
-	            </div>
-	            <div class="modal-footer">
-	                <a class="btn btn-danger btn-ok">{% trans "OK" %}</a>
+		            <div class="modal-footer">
+		                <a class="btn btn-danger btn-ok btn-wide">{% trans "OK" %}</a>
+		            </div>
 	            </div>
 	        </div>
 	    </div>