From 8a9242d74d3c697e2b71eee2a294e93bf0b5116b Mon Sep 17 00:00:00 2001
From: ARvind Tiwari <tiwariav@gmail.com>
Date: Thu, 27 Jul 2017 17:21:22 +0530
Subject: [PATCH] ssh key flow styles fixed

---
 hosting/static/hosting/css/commons.css        |  3 ++
 hosting/static/hosting/css/user_keys.css      | 23 +++++++++----
 .../templates/hosting/choice_ssh_keys.html    | 14 +++-----
 hosting/templates/hosting/user_keys.html      | 32 ++++++-------------
 4 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index 78bfd827..c6d0ac05 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -58,3 +58,6 @@
 	}
 }
 
+.btn:focus, .btn:active:focus {
+	outline: 0;
+}
\ 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 427ea960..268dd8e7 100644
--- a/hosting/static/hosting/css/user_keys.css
+++ b/hosting/static/hosting/css/user_keys.css
@@ -26,11 +26,13 @@ h2,h3,h4,h5{
     text-align: justify;
 }
 .ssh-header-container{
-    display: flex;
-    flex-direction: row-reverse;
-    vertical-align: middle;
-    align-items: center;
-    justify-content: space-between;
+    padding-top: 15px;
+    /*     display: flex; */
+    /*     flex-direction: row-reverse; */
+    /*     vertical-align: middle; */
+    /*     align-items: center; */
+    /*     justify-content: space-between; */
+    text-align: right;
 }
 
 .ssh-header-container p{
@@ -163,6 +165,9 @@ h2,h3,h4,h5{
 .form_key_name{
     width:60%;
 }
+.form_public_key{
+    resize: none;
+}
 .form_public_key,
 .form_key_name{
     border:none;
@@ -260,8 +265,12 @@ h2,h3,h4,h5{
 .form_key_name:focus,
 .form_public_key:focus,
 .has-error .form_key_name,
-.has-error .form_public_key,
 .has-error .form_key_name:focus,
-.has-error .form_public_key:focus {
+.has-error .form_public_key,
+.has-error .form_public_key:focus,
+.has-success .form_key_name,
+.has-success .form_key_name:focus,
+.has-success .form_public_key,
+.has-success .form_public_key:focus {
     box-shadow: none;
 }
\ No newline at end of file
diff --git a/hosting/templates/hosting/choice_ssh_keys.html b/hosting/templates/hosting/choice_ssh_keys.html
index e161db8f..b8a3566e 100644
--- a/hosting/templates/hosting/choice_ssh_keys.html
+++ b/hosting/templates/hosting/choice_ssh_keys.html
@@ -5,9 +5,9 @@
 	<div class="container virtual-machine-container dashboard-container dashboard-choice-container">
 		<div class="row">
 			<div class="col-md-12">
-				 <div  class="col-sm-12">
-                     <h2><i class="fa fa-key" aria-hidden="true"></i>{% trans " SSH Key"%} </h2>
-                     <h4>Choose a key option in order to access your VMs.</h4>
+				<div  class="col-sm-12">
+                    <h2><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans " SSH Key"%}</h2>
+                    <h4>Choose a key option in order to access your VMs.</h4>
                     {% if messages %}
                     <div class="alert alert-warning">
                         {% for message in messages %}
@@ -17,9 +17,7 @@
                     {% endif %}
                      <div class="choice-container">
                          <div class="left-choice-container">
-                             <h3>{% trans "I want to generate a new key pair"%}.
-                                 <sup><sup><img src="{% static 'hosting/img/g222.png' %}"/></sup></sup>
-                             </h3>
+                             <h3>{% trans "I want to generate a new key pair"%}</h3>
                              <form action="#" method="post">
                                  {% csrf_token %}
                                  <button type="submit" class="btn btn-success choice-button generate-btn">
@@ -30,9 +28,7 @@
                          </div>
                          <div class="choice-container-line"></div>
                          <div class="right-choice-container">
-                             <h3>{% trans "I want to use my existing public key"%}.
-                                 <sup><sup><img src="{% static 'hosting/img/g222.png' %}"/></sup></sup>
-                             </h3>
+                             <h3>{% trans "I want to use my existing public key"%}</h3>
                              <form action="{% url 'hosting:create_ssh_key' %}">
                                  <button type="submit" class="btn btn-primary choice-button upload-btn">
                                      {% trans "Upload"%}
diff --git a/hosting/templates/hosting/user_keys.html b/hosting/templates/hosting/user_keys.html
index a871ae86..22ef3f55 100644
--- a/hosting/templates/hosting/user_keys.html
+++ b/hosting/templates/hosting/user_keys.html
@@ -6,7 +6,7 @@
 		<div class="row">
 			<div class="col-md-12">
 				 <div  class="col-sm-12">
-                    <h2><i class="fa fa-key" aria-hidden="true"></i>{% trans "Your SSH Key"%} </h2>
+                    <h2><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "Your SSH Keys"%}</h2>
                     {% if messages %}
                     <div class="alert alert-warning">
                         {% for message in messages %}
@@ -15,12 +15,9 @@
                     </div>
                     {% endif %}
                      <div class="ssh-header-container">
-                         <p>
-                             <a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" >
-                                <span class="button-plus">✚</span>&nbsp;&nbsp;{% trans "Add Key"%}
-                             </a>
-                         </p>
-                         <h5 class="ssh-key-header">To generate a new key pair or to upload your existing key, click "Add Key"</h5>
+                        <a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" >
+                            <span class="button-plus">✚</span>&nbsp;&nbsp;{% trans "Add Key"%}
+                        </a>
                      </div>
 
                     <table class="table borderless table-hover ssh-keys-table">
@@ -73,12 +70,9 @@
                                     </div>
                                  </td>
                                 <td>
-                                    <p type="button"  data-toggle="modal" style="margin: 0"
-                                            data-target="#Modal_public_key{{ user_key.id }}">
-                                        <a href="#">
-                                            {% trans "Show"%}</a>
+                                    <p type="button"  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">
@@ -88,7 +82,6 @@
                                                             aria-hidden="true">&times;</span>
                                                     </button>
                                                     <h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public ssh key"%}</h4>
-
                                                 </div>
                                                 <div class="modal-body">
                                                     <p>{{ user_key.public_key }}</p>
@@ -111,24 +104,17 @@
                                                 >{% trans "Download"%}
                                         </button>
                                     </form>
-
                                     {% endif %}
-
                                 </td>
                             </tr>
                             {% endfor %}
-                                </tbody>
-                            </table>
-
-
-
-						<div class="clearfix"></div>
+                        </tbody>
+                    </table>
+					<div class="clearfix"></div>
 				</div>
 			</div>
-
 	    </div>
 	</div>
-
 </div>
 
 {% if next_url %}