Merge pull request #410 from tiwariav/task/3354/modal_restyling

task/3354/modal_restyling

datacenterlight/templates/datacenterlight/beta_success.html

@@ -2,19 +2,18 @@
 {% load i18n %}
 
 <div class="modal fade bs-example-modal-sm" style="color:black;"  id="successModal" tabindex="-1" role="dialog">
-    <div class="vertical-alignment-helper">
+    <div class="modal-dialog">
-        <div class="modal-dialog vertical-align-center">
         <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-				<h4 class="modal-title">{% trans "Request Sent" %}</h4>
             </div>
             <div class="modal-body">
-				<p>{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
+              <div class="modal-icon"><i class="fa fa-check" aria-hidden="true"></i></div>
+              <h4 class="modal-title">{% trans "Request Sent" %}</h4>
+              <p class="modal-text">{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
             </div>
         </div><!-- /.modal-content -->
     </div>
-	</div>
 </div><!-- /.modal -->
 <script>
 	// Show modal

hosting/static/hosting/css/commons.css

@@ -1,5 +1,6 @@
 .dashboard-container {
-	padding-top:70px; padding-bottom: 70px;
+  padding-top:70px;
+  padding-bottom: 70px;
   width: 90%;
   margin: 0 auto;
   max-width: 768px;
@@ -58,3 +59,121 @@
   }
 }
 
+/***********Styles for Model********************/
+.modal-content {
+    border-radius: 0px;
+    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    width: 100%;
+  float: left;
+  border-radius: 0;
+  font-weight: 300;
+}
+
+.modal-header {
+  min-height: 25px;
+}
+
+.modal-header .close {
+    font-size: 75px;
+    font-weight: 300;
+    margin-top: 0;
+    position: absolute;
+    top: 0;
+    right: 15px;
+    z-index: 10;
+}
+
+.modal-header .close:focus {
+  outline: 0;
+}
+
+.modal-header {
+    border-bottom: 0px solid #e5e5e5;
+    padding: 0px 15px;
+    width: 100%;
+ }
+.modal-body {
+    text-align: center;
+    width: 100%;
+  float: left;
+  padding: 0px 30px 15px 30px;
+}
+.modal-body .modal-icon i {
+    font-size: 80px;
+    font-weight: 100;
+    color: #999;
+}
+.modal-title {
+    margin: 0;
+    line-height: 1.42857143;
+    font-size: 25px;
+    padding: 0;
+    font-family: 'Lato', sans-serif;
+}
+.modal-text {
+    padding-top: 15px;
+    font-size: 16px;
+}
+.modal-footer {
+    border-top: 0px solid #e5e5e5;
+    width: 100%;
+    float: left;
+    text-align: center;
+    padding: 15px 15px;
+}
+.modal-footer button[type="submit"] {
+  min-width: 80px;
+}
+@media (min-width: 1300px) {
+    .modal-dialog {/*     top: 30%; */width: 35%;}
+}
+@media (max-width: 1299px) {
+    .modal-dialog {
+/*     top: 20%; */
+    width: 43%;
+  }
+}
+@media (max-width: 900px) {
+    .modal-dialog {
+/*     top: 20%; */
+    width: 50%;
+  }
+}
+@media (max-width: 767px) {
+    .modal-dialog {
+/*     top: 30%; */
+    width: 90%;
+    margin: 0 auto !important;
+  }
+}
+
+
+
+/* ========= */
+@media(min-width: 320px) {
+   .modal:before {
+     content: '';
+     display: inline-block;
+     height: 100%;
+     vertical-align: middle;
+     margin-right: -4px;
+   }
+ }
+
+
+ @media (min-width: 768px) {
+   .modal-dialog {
+/*        width: 520px; */
+       margin: 15px auto;
+   }
+ }
+
+ .modal {
+   text-align: center;
+ }
+
+ .modal-dialog {
+   display: inline-block;
+   text-align: left;
+   vertical-align: middle;
+ }

hosting/templates/hosting/orders.html

@@ -52,16 +52,13 @@
                                             </button>
                                         </div>
                                         <div class="modal-body">
-                                            <h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete your order?"%}</h4>
+                                            <div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
+                                            <h4 class="modal-title" id="ModalLabel">{% trans "Do you want to delete your order?"%}</h4>
 
                                             <form method="post"
                                                   action="{% url 'hosting:delete_order' order.id %}">
                                                 {% csrf_token %}
                                                 <div class="modal-footer">
-                                                    <button type="button" class="btn btn-default"
-                                                            data-dismiss="modal">
-                                                        {% trans "Close"%}
-                                                    </button>
                                                     <button type="submit" class="btn btn-primary">{% trans "Delete"%}
                                                     </button>
                                                 </div>
@@ -71,7 +68,6 @@
                                 </div>
                             </div>
                         {% endfor %}
-
                         </tbody>
                     </table>
 

hosting/templates/hosting/user_keys.html

@@ -53,16 +53,13 @@
                     </button>
                 </div>
                 <div class="modal-body">
-                    <h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete this key?"%}</h4>
+                 <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>
                     <form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
                         {% csrf_token %}
                         <div class="modal-footer">
-                            <button type="button" class="btn btn-default"
+                            <button type="submit" class="btn btn-danger">{% trans "Delete"%}
-                                    data-dismiss="modal">
-                                {% trans "Close"%}
-                            </button>
-                            <button type="submit" class="btn btn-primary">{% trans "Delete"%}
                             </button>
                         </div>
                     </form>
@@ -98,7 +95,6 @@
 
     window.onload = function () {
         {% for user_key in keys %}
-            // var locale_date = new Date(document.getElementById("ssh-created_at-{{user_key.id}}").textContent).toISOString();
             var locale_date = moment.utc(document.getElementById("ssh-created_at-{{user_key.id}}").textContent,'YYYY-MM-DD HH:mm').toDate();
             locale_date =  moment(locale_date).format("YYYY-MM-DD h:mm:ss a");
             document.getElementById('ssh-created_at-{{user_key.id}}').innerHTML = locale_date;

hosting/templates/hosting/virtual_machine_detail.html

@@ -160,13 +160,17 @@
 									    <div class="modal-dialog">
 									        <div class="modal-content">
 												<div class="modal-header">
-									                {% trans "Terminate your Virtual Machine"%}
+													<button type="button" class="close" data-dismiss="modal"
+															aria-label="Confirm"><span
+															aria-hidden="true">&times;</span>
+													</button>
 												</div>
 									            <div class="modal-body">
-									                {% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?
+													<div class="modal-icon"><i class="fa fa-ban" aria-hidden="true"></i></div>
+													<h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine"%}</h4>
+									                <p class="modal-text">{% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?</p>
 									            </div>
 									            <div class="modal-footer">
-									                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel"%}</button>
 									                <a class="btn btn-danger btn-ok">OK</a>
 									            </div>
 									        </div>