Merge pull request #504 from tiwariav/task/3812/modal_weight_fix

Task/3812 modal font size and check icon weight fix
This commit is contained in:
Arvind Tiwari 2017-09-27 00:42:37 +05:30 committed by GitHub
commit ce63d397be
7 changed files with 75 additions and 21 deletions

View file

@ -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);
}

View file

@ -8,7 +8,7 @@
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><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-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>

View file

@ -388,7 +388,7 @@ msgid "Processing..."
msgstr "Abarbeitung..." msgstr "Abarbeitung..."
msgid "Hold tight, we are processing your request" msgid "Hold tight, we are processing your request"
msgstr "Bitte warten - wir verbeiten Deine Anfrage gerade" msgstr "Bitte warten - wir bearbeiten Deine Anfrage gerade"
msgid "Some problem encountered. Please try again later." msgid "Some problem encountered. Please try again later."
msgstr "Ein Problem ist aufgetreten. Bitte versuche es später noch einmal." msgstr "Ein Problem ist aufgetreten. Bitte versuche es später noch einmal."

View file

@ -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);
}

View file

@ -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')
window.location = data.redirect; .attr('href', data.redirect)
}) .removeClass('hide');
} }
}, },
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-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');
})
}); });

View file

@ -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">&times;</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>

View file

@ -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>