From b96d13772e3df8a9ae0b7461749df5869f86983a Mon Sep 17 00:00:00 2001
From: Siarhei Puhach <siarhei.puhach@itechart-group.com>
Date: Tue, 4 Jul 2017 17:55:43 +0300
Subject: [PATCH] SSH keys list template changed

---
 hosting/static/hosting/css/user_keys.css | 57 +++++++++++++++++++++++-
 hosting/templates/hosting/user_keys.html | 43 ++++++++++++++----
 2 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/hosting/static/hosting/css/user_keys.css b/hosting/static/hosting/css/user_keys.css
index 3b3c9c63..0c3d2187 100644
--- a/hosting/static/hosting/css/user_keys.css
+++ b/hosting/static/hosting/css/user_keys.css
@@ -1,5 +1,58 @@
+.ssh-keys-table thead tr th,
+.ssh-keys-table tbody tr td{
+    color: #717274;
+    text-align: center;
+    border-bottom: 1px solid #cbcbcb;
+
+}
+.ssh-keys-table tbody tr{
+    border-bottom: 1px solid #cbcbcb;
+}
+.ssh-keys-table thead tr th:first-of-type,
+.ssh-keys-table tbody tr td:first-of-type{
+    text-align: left;
+}
+.ssh-keys-table thead tr th:last-of-type,
+.ssh-keys-table tbody tr td:last-of-type{
+    width: 20%;
+}
 .ssh-key-header {
-    line-height: 35px;
+    color: #717274;
+    font-size: 16px;
+    font-weight: 300;
 }
-.ssh-container{
+.ssh-header-container{
+    display: flex;
+    flex-direction: row-reverse;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: space-between;
+}
+.ssh-header-container p{
+    margin: 0;
+    padding: 0;
+}
+
+.borderless tbody:before {
+    display: none !important;
+}
+.btn-custom-download{
+    background-color: #337ab7;
+    margin-top: auto;
+    margin-bottom: auto;
+    font-weight: 600;
+    vertical-align: middle;
+    margin-right: 25px;
+}
+.btn-custom-delete{
+    width: 100px;
+    background-color: #f1f0f0;
+}
+.btn-custom-delete a, .btn-custom-download a{
+    text-decoration: none;
+}
+.modal-body p{
+    width: 85%;
+    word-wrap: break-word;
+    text-align: left;
 }
diff --git a/hosting/templates/hosting/user_keys.html b/hosting/templates/hosting/user_keys.html
index f8a75616..27e12d34 100644
--- a/hosting/templates/hosting/user_keys.html
+++ b/hosting/templates/hosting/user_keys.html
@@ -14,16 +14,16 @@
                         {% endfor %}
                     </div>
                     {% endif %}
-                     <div class="ssh-container">
-                         <p class="pull-right">
-                             <a class="btn btn-primary" href="{% url 'hosting:create_ssh_key' %}" >
-                                 <b>+</b> {% trans "Add Key"%}
+                     <div class="ssh-header-container">
+                         <p>
+                             <a class="btn btn-primary btn-custom-download" href="{% url 'hosting:create_ssh_key' %}" >
+                                 <span class="button-plus">✚</span> {% 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>
                      </div>
 
-                    <table class="table borderless table-hover">
+                    <table class="table borderless table-hover ssh-keys-table">
                         <br/>
                         <thead>
                         <tr>
@@ -39,7 +39,7 @@
                                 <td scope="row">{{user_key.name}}</td>
 
                                 <td>
-                                    <button type="button" class="btn btn-default" data-toggle="modal"
+                                    <button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal"
                                             data-target="#Modal{{ user_key.id }}">
                                         <a href="#">
                                             {% trans "Delete"%}</a>
@@ -56,7 +56,6 @@
                                                 </div>
                                                 <div class="modal-body">
                                                     <h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete this key?"%}</h4>
-
                                                     <form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
                                                         {% csrf_token %}
                                                         <div class="modal-footer">
@@ -74,7 +73,35 @@
                                     </div>
                                  </td>
                                 <td>
-                                    <span class="h3">Show</span>
+                                    <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">
+                                                <div class="modal-header">
+                                                    <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>{{ user_key.public_key }}</p>
+                                                    <div class="modal-footer">
+                                                        <button type="button" class="btn btn-default"
+                                                                data-dismiss="modal">
+                                                            {% trans "Close"%}
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                 </td>
                                 </td>
                                 <td>
                                     <button type="button" class="btn btn-default" data-toggle="modal"