ssh key flow styles fixed

This commit is contained in:
ARvind Tiwari 2017-07-27 17:21:22 +05:30
parent 4216d9911a
commit 8a9242d74d
4 changed files with 33 additions and 39 deletions

View file

@ -58,3 +58,6 @@
} }
} }
.btn:focus, .btn:active:focus {
outline: 0;
}

View file

@ -26,11 +26,13 @@ h2,h3,h4,h5{
text-align: justify; text-align: justify;
} }
.ssh-header-container{ .ssh-header-container{
display: flex; padding-top: 15px;
flex-direction: row-reverse; /* display: flex; */
vertical-align: middle; /* flex-direction: row-reverse; */
align-items: center; /* vertical-align: middle; */
justify-content: space-between; /* align-items: center; */
/* justify-content: space-between; */
text-align: right;
} }
.ssh-header-container p{ .ssh-header-container p{
@ -163,6 +165,9 @@ h2,h3,h4,h5{
.form_key_name{ .form_key_name{
width:60%; width:60%;
} }
.form_public_key{
resize: none;
}
.form_public_key, .form_public_key,
.form_key_name{ .form_key_name{
border:none; border:none;
@ -260,8 +265,12 @@ h2,h3,h4,h5{
.form_key_name:focus, .form_key_name:focus,
.form_public_key:focus, .form_public_key:focus,
.has-error .form_key_name, .has-error .form_key_name,
.has-error .form_public_key,
.has-error .form_key_name:focus, .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; box-shadow: none;
} }

View file

@ -6,7 +6,7 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="col-sm-12"> <div class="col-sm-12">
<h2><i class="fa fa-key" aria-hidden="true"></i>{% trans " SSH Key"%} </h2> <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> <h4>Choose a key option in order to access your VMs.</h4>
{% if messages %} {% if messages %}
<div class="alert alert-warning"> <div class="alert alert-warning">
@ -17,9 +17,7 @@
{% endif %} {% endif %}
<div class="choice-container"> <div class="choice-container">
<div class="left-choice-container"> <div class="left-choice-container">
<h3>{% trans "I want to generate a new key pair"%}. <h3>{% trans "I want to generate a new key pair"%}</h3>
<sup><sup><img src="{% static 'hosting/img/g222.png' %}"/></sup></sup>
</h3>
<form action="#" method="post"> <form action="#" method="post">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-success choice-button generate-btn"> <button type="submit" class="btn btn-success choice-button generate-btn">
@ -30,9 +28,7 @@
</div> </div>
<div class="choice-container-line"></div> <div class="choice-container-line"></div>
<div class="right-choice-container"> <div class="right-choice-container">
<h3>{% trans "I want to use my existing public key"%}. <h3>{% trans "I want to use my existing public key"%}</h3>
<sup><sup><img src="{% static 'hosting/img/g222.png' %}"/></sup></sup>
</h3>
<form action="{% url 'hosting:create_ssh_key' %}"> <form action="{% url 'hosting:create_ssh_key' %}">
<button type="submit" class="btn btn-primary choice-button upload-btn"> <button type="submit" class="btn btn-primary choice-button upload-btn">
{% trans "Upload"%} {% trans "Upload"%}

View file

@ -6,7 +6,7 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="col-sm-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 %} {% if messages %}
<div class="alert alert-warning"> <div class="alert alert-warning">
{% for message in messages %} {% for message in messages %}
@ -15,12 +15,9 @@
</div> </div>
{% endif %} {% endif %}
<div class="ssh-header-container"> <div class="ssh-header-container">
<p>
<a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" > <a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" >
<span class="button-plus"></span>&nbsp;&nbsp;{% trans "Add Key"%} <span class="button-plus"></span>&nbsp;&nbsp;{% trans "Add Key"%}
</a> </a>
</p>
<h5 class="ssh-key-header">To generate a new key pair or to upload your existing key, click "Add Key"</h5>
</div> </div>
<table class="table borderless table-hover ssh-keys-table"> <table class="table borderless table-hover ssh-keys-table">
@ -73,12 +70,9 @@
</div> </div>
</td> </td>
<td> <td>
<p type="button" data-toggle="modal" style="margin: 0" <p type="button" data-toggle="modal" style="margin: 0" data-target="#Modal_public_key{{ user_key.id }}">
data-target="#Modal_public_key{{ user_key.id }}"> <a href="#">{% trans "Show"%}</a>
<a href="#">
{% trans "Show"%}</a>
</p> </p>
<div class="modal fade" id="Modal_public_key{{user_key.id }}" tabindex="-1" role="dialog"> <div class="modal fade" id="Modal_public_key{{user_key.id }}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
@ -88,7 +82,6 @@
aria-hidden="true">&times;</span> aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public ssh key"%}</h4> <h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public ssh key"%}</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>{{ user_key.public_key }}</p> <p>{{ user_key.public_key }}</p>
@ -111,24 +104,17 @@
>{% trans "Download"%} >{% trans "Download"%}
</button> </button>
</form> </form>
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% if next_url %} {% if next_url %}