From 918e13bf91be7380af15fd2477bdedde5d7184e8 Mon Sep 17 00:00:00 2001
From: ARvind Tiwari <tiwariav@gmail.com>
Date: Mon, 24 Jul 2017 18:52:23 +0530
Subject: [PATCH] modal close button thinner, some icons changed, vertical
 alignment changed to middle

---
 .../datacenterlight/beta_success.html         | 27 ++++---
 hosting/static/hosting/css/commons.css        | 73 +++++++++----------
 hosting/templates/hosting/base_short.html     |  8 +-
 hosting/templates/hosting/orders.html         |  2 +-
 hosting/templates/hosting/user_keys.html      | 32 ++++----
 .../hosting/virtual_machine_detail.html       | 26 +++----
 6 files changed, 83 insertions(+), 85 deletions(-)

diff --git a/datacenterlight/templates/datacenterlight/beta_success.html b/datacenterlight/templates/datacenterlight/beta_success.html
index 327198e7..2512a05c 100644
--- a/datacenterlight/templates/datacenterlight/beta_success.html
+++ b/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 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>
-			</div><!-- /.modal-content -->
-		</div>
-	</div>
+    <div class="modal-dialog">
+        <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>
+            </div>
+            <div class="modal-body">
+              <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><!-- /.modal -->
 <script>
 	// Show modal
@@ -22,7 +21,7 @@
 	// close the modal after 3 seconds
 	setTimeout(function() {
 	    $('#successModal').modal('hide');
-	}, 5000);	
+	}, 5000);
 </script>
 <style>
 .vertical-alignment-helper {
diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index 1129f621..aaa537e9 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -1,22 +1,22 @@
 .dashboard-container {
-	padding-top:70px; padding-bottom: 70px;
-	width: 90%;
-	margin: 0 auto;
-	max-width: 768px;
+  padding-top:70px; padding-bottom: 70px;
+  width: 90%;
+  margin: 0 auto;
+  max-width: 768px;
 }
 
 .content-dashboard{
-	min-height: 100vh;
-	width: 80%;
-	margin: 0 auto;
-	max-width: 1120px;
+  min-height: 100vh;
+  width: 80%;
+  margin: 0 auto;
+  max-width: 1120px;
 }
 .container-table{
-	margin-top: 35px;
-	overflow-y: hidden; 
+  margin-top: 35px;
+  overflow-y: hidden;
 }
 .container-table table{
-	overflow-y: auto; 
+  overflow-y: auto;
 }
 .borderless td {
     border: none !important;
@@ -36,38 +36,40 @@
 }
 
 .space-above {
-	margin-top: 4%;
+  margin-top: 4%;
 }
 
 .space-above-big {
-	margin-top: 20%;
+  margin-top: 20%;
 }
 
 .table>tbody>tr>td{
-	vertical-align: middle;
+  vertical-align: middle;
 }
 .fa-separate{
-	margin-right: 15px;
+  margin-right: 15px;
 }
 @media (max-width: 540px) {
     select {
-    	width: 280px; 
+      width: 280px;
     }
     .content-dashboard {
-	    width: 90%;
-	}
+      width: 90%;
+  }
 }
 
 /***********Styles for Model********************/
 .modal-content {
     border-radius: 0px;
-    font-family: 'Lato', sans-serif;
+    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
     width: 100%;
-	float: left;
+  float: left;
+  border-radius: 0;
+  font-weight: 300;
 }
 
 .modal-header {
-	min-height: 25px;
+  min-height: 25px;
 }
 
 .modal-header .close {
@@ -86,8 +88,8 @@
 .modal-body {
     text-align: center;
     width: 100%;
-	float: left;
-	padding: 0px 30px 15px 30px;
+  float: left;
+  padding: 0px 30px 15px 30px;
 }
 .modal-body .modal-icon i {
     font-size: 80px;
@@ -113,28 +115,31 @@
     padding: 15px 15px;
 }
 @media (min-width: 1300px) {
-    .modal-dialog {/*     top: 30%; */width: 30%;}
+    .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: '';
@@ -144,27 +149,21 @@
      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;
- }
- 
- .modal-content {
-     border-radius: 0;
-     font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-     font-weight: 300;
  }
\ No newline at end of file
diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html
index c3b19c8c..f20a55ff 100644
--- a/hosting/templates/hosting/base_short.html
+++ b/hosting/templates/hosting/base_short.html
@@ -27,7 +27,7 @@
     <!-- Custom Fonts -->
     <link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+    <link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="{% static 'hosting/css/owl.carousel.min.css' %}">
     <link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}">
@@ -46,7 +46,7 @@
 
 
     <!-- Navigation -->
-    
+
     <nav class="navbar navbar-default  navbar-fixed-top topnav" role="navigation">
         <div class="container topnav">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -90,7 +90,7 @@
                             <li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i>{% trans "Logout"%} </a></li>
                           </ul>
                         </li>
-                        <!-- 
+                        <!--
                         <li>
                             <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
                         </li>
@@ -105,7 +105,7 @@
                         </li>
                         <li>
                             <a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a>
-                        </li>  
+                        </li>
                         <li>
                             <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a>
                         </li>  -->
diff --git a/hosting/templates/hosting/orders.html b/hosting/templates/hosting/orders.html
index 99aab23e..6a703345 100644
--- a/hosting/templates/hosting/orders.html
+++ b/hosting/templates/hosting/orders.html
@@ -52,6 +52,7 @@
                                             </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 "Do You want to delete your order?"%}</h4>
 
                                             <form method="post"
@@ -71,7 +72,6 @@
                                 </div>
                             </div>
                         {% endfor %}
-
                         </tbody>
                     </table>
 
diff --git a/hosting/templates/hosting/user_keys.html b/hosting/templates/hosting/user_keys.html
index ad457a3e..0500d5cc 100644
--- a/hosting/templates/hosting/user_keys.html
+++ b/hosting/templates/hosting/user_keys.html
@@ -1,6 +1,6 @@
 {% extends "hosting/base_short.html" %}
 {% load staticfiles bootstrap3 i18n %}
-{% block content %} 
+{% block content %}
 <div>
 	<div class="container virtual-machine-container dashboard-container ">
 		<div class="row">
@@ -18,26 +18,26 @@
                         <a class="btn btn-success" href="{% url 'hosting:create_ssh_key' %}" >{% trans "Add Key"%} </a>
                     </p>
                     <h5> Use your created key to access to the machine. If you lost it, contact us. </h5>
-                    <table class="table borderless table-hover"> 
+                    <table class="table borderless table-hover">
                         <br/>
-                        <thead> 
-                        <tr> 
+                        <thead>
+                        <tr>
                             <th>{% trans "Name"%}</th>
                             <th>{% trans "Created at"%} </th>
                             <th>{% trans "Status"%} </th>
                             <th></th>
                         </tr>
                         </thead>
-                        <tbody> 
+                        <tbody>
                             {% for user_key in keys %}
-                            <tr> 
-                                <td scope="row">{{user_key.name}}</td> 
+                            <tr>
+                                <td scope="row">{{user_key.name}}</td>
 
-                                <td><span id="ssh-created_at-{{user_key.id}}">{{user_key.created_at|date:'Y-m-d H:i' }}</span></td> 
+                                <td><span id="ssh-created_at-{{user_key.id}}">{{user_key.created_at|date:'Y-m-d H:i' }}</span></td>
                                 <td>
                                     <span class="h3 label label-success"><strong>Active</strong></span>
-                                </td> 
-                                <td> 
+                                </td>
+                                <td>
                                 <button type="button" class="btn btn-default" data-toggle="modal"
                                         data-target="#Modal{{ user_key.id }}"><a
                                         href="#">{% trans "Delete Key"%}</a>
@@ -53,7 +53,7 @@
                     </button>
                 </div>
                 <div class="modal-body">
-                 <div class="modal-icon"><i class="fa fa-question" aria-hidden="true"></i></div>
+                 <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 %}">
@@ -70,7 +70,7 @@
                                  </td>
                             </tr>
                             {% endfor %}
-                                </tbody> 
+                                </tbody>
                             </table>
 
 
@@ -81,17 +81,17 @@
 
 	    </div>
 	</div>
-    
+
 </div>
 
 {% if next_url %}
-    <script type="text/javascript"> 
+    <script type="text/javascript">
         window.location.href = '{{next_url}}';
     </script>
 {% endif %}
 
- 
-<script type="text/javascript"> 
+
+<script type="text/javascript">
 
     window.onload = function () {
         {% for user_key in keys %}
diff --git a/hosting/templates/hosting/virtual_machine_detail.html b/hosting/templates/hosting/virtual_machine_detail.html
index ae2176f7..1ae26dc0 100644
--- a/hosting/templates/hosting/virtual_machine_detail.html
+++ b/hosting/templates/hosting/virtual_machine_detail.html
@@ -2,7 +2,7 @@
 {% load staticfiles bootstrap3 %}
 {% load i18n %}
 
-{% block content %} 
+{% block content %}
 <div>
 	<div class="virtual-machine-container dashboard-container ">
 		<div class="row">
@@ -46,19 +46,19 @@
 												<button type="link"
 					data-clipboard-text="{{virtual_machine.ipv4}}" id="copy_vm_id" class="to_copy btn btn-link"
 													data-toggle="tooltip"  data-placement="bottom" title="Copied"  data-trigger="click">
-														Ipv4: {{virtual_machine.ipv4}} <i class="fa fa-files-o" aria-hidden="true"></i> 
+														Ipv4: {{virtual_machine.ipv4}} <i class="fa fa-files-o" aria-hidden="true"></i>
 												</button>
 												<button type="link"
 					data-clipboard-text="{{virtual_machine.ipv6}}" id="copy_vm_id" class="to_copy btn btn-link"
 													data-toggle="tooltip"  data-placement="bottom" title="Copied"  data-trigger="click">
-														Ipv6: {{virtual_machine.ipv6}} <i class="fa fa-files-o" aria-hidden="true"></i> 
+														Ipv6: {{virtual_machine.ipv6}} <i class="fa fa-files-o" aria-hidden="true"></i>
 												</button>
 											</div>
 										{% else %}
 
 											<div class="pull-right right-place">
 												<span class="label label-warning"><strong>{% trans "Ip not assigned yet"%}</strong></span>
-												<i data-toggle="tooltip"  title="Your ip will be assigned soon" class="fa fa-info-circle" aria-hidden="true"></i> 
+												<i data-toggle="tooltip"  title="Your ip will be assigned soon" class="fa fa-info-circle" aria-hidden="true"></i>
 											</div>
 
 										{% endif %}
@@ -85,12 +85,12 @@
 								      </div>
 								      <div class="col-md-3">
 								        <div class="well text-center box-setting">
-								        	<i class="fa fa-hdd-o" aria-hidden="true"></i> 
+								        	<i class="fa fa-hdd-o" aria-hidden="true"></i>
 								        	<span>{% trans "Disk"%}</span>
 								        	<span class="label label-success">{{virtual_machine.disk_size|floatformat:2}} GB</span>
 								        </div>
 								      </div>
-								    </div><!--/row-->    
+								    </div><!--/row-->
 								  </div><!--/col-12-->
 								</div><!--/row-->
 								<div class="row">
@@ -106,7 +106,7 @@
 				            	<div class="row ">
 									<div class="col-md-12 inline-headers">
 										<h3>{% trans "Current pricing"%}</h3>
-										<span class="h3 pull-right"><strong>{{virtual_machine.price|floatformat}} CHF</strong>/month</span> 
+										<span class="h3 pull-right"><strong>{{virtual_machine.price|floatformat}} CHF</strong>/month</span>
 										<hr>
 									</div>
 				            	</div>
@@ -136,13 +136,13 @@
 										<div class="pull-right">
 											<form method="POST"
                  id="virtual_machine_cancel_form" class="cancel-form" action="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}">
-											{% csrf_token %} 
-											</form>	
-												
+											{% csrf_token %}
+											</form>
+
 												<button type="text" data-href="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}" data-toggle="modal" data-target="#confirm-cancel" class="btn btn-danger">{% trans "Terminate Virtual Machine"%}</button>
-																						
+
 										</div>
-    
+
 									</div>
                                     <div class="col-md-12">
                                         <br/>
@@ -166,7 +166,7 @@
 													</button>
 												</div>
 									            <div class="modal-body">
-													<div class="modal-icon"><i class="fa fa-question" aria-hidden="true"></i></div>
+													<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>