modal btn min width, modal width increased

This commit is contained in:
Arvind Tiwari 2017-09-01 23:56:01 +05:30
parent 17ca314808
commit 79cf5e416c
4 changed files with 28 additions and 32 deletions

View file

@ -109,7 +109,7 @@
text-align: center; text-align: center;
width: 100%; width: 100%;
float: left; float: left;
padding: 0px 40px 15px 30px; padding: 0px 30px 15px 30px;
} }
.modal-body .modal-icon i { .modal-body .modal-icon i {
font-size: 80px; font-size: 80px;
@ -117,7 +117,7 @@
color: #999; color: #999;
} }
.modal-body .modal-icon { .modal-body .modal-icon {
margin-bottom: 10px; margin-bottom: 15px;
} }
.modal-title { .modal-title {
margin: 0; margin: 0;
@ -128,9 +128,12 @@
font-weight: 300; font-weight: 300;
} }
.modal-text { .modal-text {
padding-top: 15px; padding-top: 5px;
font-size: 16px; font-size: 16px;
} }
.modal-text p:not(:last-of-type){
margin-bottom: 5px;
}
.modal-footer { .modal-footer {
border-top: 0px solid #e5e5e5; border-top: 0px solid #e5e5e5;
width: 100%; width: 100%;
@ -138,11 +141,8 @@
text-align: center; text-align: center;
padding: 15px 15px; padding: 15px 15px;
} }
.modal-footer button[type="submit"] {
min-width: 80px;
}
@media (min-width: 1300px) { @media (min-width: 1300px) {
.modal-dialog {/* top: 30%; */width: 35%;} .modal-dialog {/* top: 30%; */width: 40%;}
} }
@media (max-width: 1299px) { @media (max-width: 1299px) {
.modal-dialog { .modal-dialog {
@ -239,4 +239,8 @@
-webkit-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.btn-wide {
min-width: 100px;
} }

View file

@ -299,6 +299,7 @@
} }
.key_contain { .key_contain {
word-break: break-all; word-break: break-all;
margin-bottom: 15px;
} }
.custom_form_button{ .custom_form_button{
border-radius: 0; border-radius: 0;

View file

@ -33,8 +33,7 @@
<tr> <tr>
<td scope="row">{{user_key.name}}</td> <td scope="row">{{user_key.name}}</td>
<td> <td>
<button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal" <button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal" data-target="#Modal{{ user_key.id }}" style="color: #717274">
data-target="#Modal{{ user_key.id }}" style="color: #717274">
<span class="pc-only">{% trans "Delete" %}</span> <span class="pc-only">{% trans "Delete" %}</span>
<span class="mob-only"><i class="fa fa-trash"></i></span> <span class="mob-only"><i class="fa fa-trash"></i></span>
</button> </button>
@ -42,20 +41,18 @@
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">&times;</span></button>
aria-label="Confirm"><span
aria-hidden="true">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="modal-icon"><i class="fa fa-trash" 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> <h4 class="modal-title" id="ModalLabel">{% trans "Delete SSH Key"%}</h4>
<p class="modal-text">{% trans "Do you want to delete this key?"%}</p> <div class="modal-text">
<p>{% trans "Do you want to delete this key?"%}</p>
</div>
<form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}"> <form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
{% csrf_token %} {% csrf_token %}
<div class="modal-footer"> <div class="modal-footer">
<button type="submit" class="btn btn-danger">{% trans "Delete"%} <button type="submit" class="btn btn-danger btn-wide">{% trans "Delete"%}</button>
</button>
</div> </div>
</form> </form>
</div> </div>
@ -64,23 +61,18 @@
</div> </div>
</td> </td>
<td> <td>
<p type="button" data-toggle="modal" style="margin: 0" data-target="#Modal_public_key{{ user_key.id }}"> <p data-toggle="modal" style="margin: 0" 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">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal" aria-label="Confirm"><span aria-hidden="true">&times;</span></button>
aria-label="Confirm"><span
aria-hidden="true">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<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>
<p class="key_contain" style="margin-top: 10px;">{{ user_key.public_key }}</p> <p class="key_contain" style="margin-top: 10px;">{{ user_key.public_key }}</p>
<div class="modal-footer">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -90,10 +82,9 @@
<td> <td>
{% if user_key.private_key %} {% if user_key.private_key %}
<form action="{{ user_key.private_key.url }}"> <form action="{{ user_key.private_key.url }}">
<button style="color: #717274" type="submit" class="btn btn-default" data-toggle="modal" <button style="color: #717274" type="submit" class="btn btn-default">
> <span class="pc-only">{% trans "Download" %}</span>
<span class="pc-only">{% trans "Download" %}</span> <span class="mob-only"><i class="fa fa-download"></i></span>
<span class="mob-only"><i class="fa fa-download"></i></span>
</button> </button>
</form> </form>
{% endif %} {% endif %}

View file

@ -101,9 +101,9 @@
<p>{% trans "Do you want to cancel your Virtual Machine" %} ?</p> <p>{% trans "Do you want to cancel your Virtual Machine" %} ?</p>
<p><strong>{{virtual_machine.name}}</strong></p> <p><strong>{{virtual_machine.name}}</strong></p>
</div> </div>
</div> <div class="modal-footer">
<div class="modal-footer"> <a class="btn btn-danger btn-ok btn-wide">{% trans "OK" %}</a>
<a class="btn btn-danger btn-ok">{% trans "OK" %}</a> </div>
</div> </div>
</div> </div>
</div> </div>