modal check icon thinner, terminate modal text smaller
This commit is contained in:
parent
a646fef2c7
commit
f35c3dbc10
7 changed files with 74 additions and 21 deletions
|
@ -1653,3 +1653,20 @@ a.list-group-item-danger.active:focus {
|
||||||
.panel-danger > .panel-heading .badge {
|
.panel-danger > .panel-heading .badge {
|
||||||
background-color: #eb4d5c;
|
background-color: #eb4d5c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkmark {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.checkmark:after {
|
||||||
|
/*Add another block-level blank space*/
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
/*Make it a small rectangle so the border will create an L-shape*/
|
||||||
|
width: 25px;
|
||||||
|
height: 60px;
|
||||||
|
/*Add a white border on the bottom and left, creating that 'L' */
|
||||||
|
border: solid #777;
|
||||||
|
border-width: 0 3px 3px 0;
|
||||||
|
/*Rotate the L 45 degrees to turn it into a checkmark*/
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-icon"><i class="fa fa-check" aria-hidden="true"></i></div>
|
<div class="modal-icon"><i class="checkmark" aria-hidden="true"></i></div>
|
||||||
<h4 class="modal-title">{% trans "Request Sent" %}</h4>
|
<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>
|
<p class="modal-text">{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -870,3 +870,41 @@ a.list-group-item-danger.active:focus {
|
||||||
.panel-danger > .panel-heading .badge {
|
.panel-danger > .panel-heading .badge {
|
||||||
background-color: #eb4d5c;
|
background-color: #eb4d5c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkmark {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.checkmark:after {
|
||||||
|
/*Add another block-level blank space*/
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
/*Make it a small rectangle so the border will create an L-shape*/
|
||||||
|
width: 25px;
|
||||||
|
height: 60px;
|
||||||
|
/*Add a white border on the bottom and left, creating that 'L' */
|
||||||
|
border: solid #777;
|
||||||
|
border-width: 0 3px 3px 0;
|
||||||
|
/*Rotate the L 45 degrees to turn it into a checkmark*/
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.closemark {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.closemark:before, .closemark:after {
|
||||||
|
position: absolute;
|
||||||
|
left: 25px;
|
||||||
|
content: ' ';
|
||||||
|
height: 50px;
|
||||||
|
width: 2px;
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
.closemark:before {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.closemark:after {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
|
@ -79,7 +79,6 @@ $(document).ready(function() {
|
||||||
$('html,body').scrollTop(scrollmem);
|
$('html,body').scrollTop(scrollmem);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.modal-text').removeClass('hide');
|
|
||||||
var create_vm_form = $('#virtual_machine_create_form');
|
var create_vm_form = $('#virtual_machine_create_form');
|
||||||
create_vm_form.submit(function () {
|
create_vm_form.submit(function () {
|
||||||
$('#btn-create-vm').prop('disabled', true);
|
$('#btn-create-vm').prop('disabled', true);
|
||||||
|
@ -90,26 +89,28 @@ $(document).ready(function() {
|
||||||
success: function (data) {
|
success: function (data) {
|
||||||
if (data.status === true) {
|
if (data.status === true) {
|
||||||
fa_icon = $('.modal-icon > .fa');
|
fa_icon = $('.modal-icon > .fa');
|
||||||
fa_icon.attr('class', 'fa fa-check');
|
fa_icon.attr('class', 'checkmark');
|
||||||
$('.modal-header > .close').attr('class', 'close');
|
// $('.modal-header > .close').removeClass('hidden');
|
||||||
$('#createvm-modal-title').text(data.msg_title);
|
$('#createvm-modal-title').text(data.msg_title);
|
||||||
$('#createvm-modal-body').text(data.msg_body);
|
$('#createvm-modal-body').text(data.msg_body);
|
||||||
$('#createvm-modal').on('hidden.bs.modal', function () {
|
$('#createvm-modal-done-btn').removeClass('hide');
|
||||||
window.location = data.redirect;
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function (xmlhttprequest, textstatus, message) {
|
error: function (xmlhttprequest, textstatus, message) {
|
||||||
fa_icon = $('.modal-icon > .fa');
|
fa_icon = $('.modal-icon > .fa');
|
||||||
fa_icon.attr('class', 'fa fa-times');
|
fa_icon.attr('class', 'fa fa-close');
|
||||||
$('.modal-header > .close').attr('class', 'close');
|
// $('.modal-header > .close').attr('class', 'close');
|
||||||
$('.modal-text').addClass('hide');
|
// $('.modal-text').addClass('hide');
|
||||||
if (typeof(create_vm_error_message) !== 'undefined') {
|
if (typeof(create_vm_error_message) !== 'undefined') {
|
||||||
$('#createvm-modal-title').text(create_vm_error_message);
|
$('#createvm-modal-text').text(create_vm_error_message);
|
||||||
}
|
}
|
||||||
$('#btn-create-vm').prop('disabled', false);
|
$('#btn-create-vm').prop('disabled', false);
|
||||||
|
$('#createvm-modal-close-btn').removeClass('hide');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
$('#createvm-modal').on('hidden.bs.modal', function () {
|
||||||
|
$(this).find('.modal-footer .btn').addClass('hide');
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
|
|
@ -160,22 +160,19 @@
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close hidden" data-dismiss="modal"
|
|
||||||
aria-label="create-vm-close">
|
|
||||||
<span aria-hidden="true">×</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-icon">
|
<div class="modal-icon">
|
||||||
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
||||||
<span class="sr-only">{% trans "Processing..." %}</span>
|
<span class="sr-only">{% trans "Processing..." %}</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="modal-title" id="createvm-modal-title">
|
<h4 class="modal-title" id="createvm-modal-title"></h4>
|
||||||
</h4>
|
|
||||||
<div class="modal-text" id="createvm-modal-body">
|
<div class="modal-text" id="createvm-modal-body">
|
||||||
{% trans "Hold tight, we are processing your request" %}
|
{% trans "Hold tight, we are processing your request" %}
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
|
<a id="createvm-modal-done-btn" class="btn btn-danger btn-ok btn-wide hide" href="{% url 'hosting:virtual_machines' %}">{% trans "OK" %}</a>
|
||||||
|
<button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide hide" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -123,8 +123,9 @@
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-icon"><i class="fa fa-check" aria-hidden="true"></i></div>
|
<div class="modal-icon"><i class="checkmark" aria-hidden="true"></i></div>
|
||||||
<h4 class="modal-title" id="ModalLabel">{% blocktrans with machine_name=virtual_machine.name %}Your Virtual Machine <strong>{{machine_name}}</strong> is successfully terminated!{% endblocktrans %}</h4>
|
<h4 class="modal-title"></h4>
|
||||||
|
<div class="modal-text" id="ModalLabel">{% blocktrans with machine_name=virtual_machine.name %}Your Virtual Machine <strong>{{machine_name}}</strong> is successfully terminated!{% endblocktrans %}</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<a href="{% url 'hosting:virtual_machines' %}" class="btn btn-success btn-wide">{% trans "OK" %}</a>
|
<a href="{% url 'hosting:virtual_machines' %}" class="btn btn-success btn-wide">{% trans "OK" %}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -804,7 +804,6 @@ class OrdersHostingDetailView(LoginRequiredMixin,
|
||||||
|
|
||||||
response = {
|
response = {
|
||||||
'status': True,
|
'status': True,
|
||||||
'redirect': reverse('hosting:virtual_machines'),
|
|
||||||
'msg_title': str(_('Thank you for the order.')),
|
'msg_title': str(_('Thank you for the order.')),
|
||||||
'msg_body': str(_('Your VM will be up and running in a few moments.'
|
'msg_body': str(_('Your VM will be up and running in a few moments.'
|
||||||
' We will send you a confirmation email as soon as'
|
' We will send you a confirmation email as soon as'
|
||||||
|
|
Loading…
Reference in a new issue