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 {
 | 
			
		||||
    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>
 | 
			
		||||
            </div>
 | 
			
		||||
            <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>
 | 
			
		||||
              <p class="modal-text">{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
 | 
			
		||||
            </div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -870,3 +870,41 @@ a.list-group-item-danger.active:focus {
 | 
			
		|||
.panel-danger > .panel-heading .badge {
 | 
			
		||||
    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);
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    $('.modal-text').removeClass('hide');
 | 
			
		||||
    var create_vm_form = $('#virtual_machine_create_form');
 | 
			
		||||
    create_vm_form.submit(function () {
 | 
			
		||||
        $('#btn-create-vm').prop('disabled', true);
 | 
			
		||||
| 
						 | 
				
			
			@ -90,26 +89,28 @@ $(document).ready(function() {
 | 
			
		|||
            success: function (data) {
 | 
			
		||||
                if (data.status === true) {
 | 
			
		||||
                    fa_icon = $('.modal-icon > .fa');
 | 
			
		||||
                    fa_icon.attr('class', 'fa fa-check');
 | 
			
		||||
                    $('.modal-header > .close').attr('class', 'close');
 | 
			
		||||
                    fa_icon.attr('class', 'checkmark');
 | 
			
		||||
                    // $('.modal-header > .close').removeClass('hidden');
 | 
			
		||||
                    $('#createvm-modal-title').text(data.msg_title);
 | 
			
		||||
                    $('#createvm-modal-body').text(data.msg_body);
 | 
			
		||||
                    $('#createvm-modal').on('hidden.bs.modal', function () {
 | 
			
		||||
                        window.location = data.redirect;
 | 
			
		||||
                    })
 | 
			
		||||
                    $('#createvm-modal-done-btn').removeClass('hide');
 | 
			
		||||
                }
 | 
			
		||||
            },
 | 
			
		||||
            error: function (xmlhttprequest, textstatus, message) {
 | 
			
		||||
                    fa_icon = $('.modal-icon > .fa');
 | 
			
		||||
                    fa_icon.attr('class', 'fa fa-times');
 | 
			
		||||
                    $('.modal-header > .close').attr('class', 'close');
 | 
			
		||||
                    $('.modal-text').addClass('hide');
 | 
			
		||||
                    fa_icon.attr('class', 'fa fa-close');
 | 
			
		||||
                    // $('.modal-header > .close').attr('class', 'close');
 | 
			
		||||
                    // $('.modal-text').addClass('hide');
 | 
			
		||||
                    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);
 | 
			
		||||
                    $('#createvm-modal-close-btn').removeClass('hide');
 | 
			
		||||
            }
 | 
			
		||||
        });
 | 
			
		||||
        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-content">
 | 
			
		||||
                <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 class="modal-body">
 | 
			
		||||
                    <div class="modal-icon">
 | 
			
		||||
                        <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
 | 
			
		||||
                        <span class="sr-only">{% trans "Processing..." %}</span>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <h4 class="modal-title" id="createvm-modal-title">
 | 
			
		||||
                    </h4>
 | 
			
		||||
                    <h4 class="modal-title" id="createvm-modal-title"></h4>
 | 
			
		||||
                    <div class="modal-text" id="createvm-modal-body">
 | 
			
		||||
                        {% trans "Hold tight, we are processing your request" %}
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -123,8 +123,9 @@
 | 
			
		|||
				<div class="modal-header">
 | 
			
		||||
				</div>
 | 
			
		||||
        <div class="modal-body">
 | 
			
		||||
					<div class="modal-icon"><i class="fa fa-check" 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>
 | 
			
		||||
					<div class="modal-icon"><i class="checkmark" aria-hidden="true"></i></div>
 | 
			
		||||
					<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">
 | 
			
		||||
            <a href="{% url 'hosting:virtual_machines' %}"	class="btn btn-success btn-wide">{% trans "OK" %}</a>
 | 
			
		||||
          </div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -804,7 +804,6 @@ class OrdersHostingDetailView(LoginRequiredMixin,
 | 
			
		|||
 | 
			
		||||
        response = {
 | 
			
		||||
            'status': True,
 | 
			
		||||
            'redirect': reverse('hosting:virtual_machines'),
 | 
			
		||||
            'msg_title': str(_('Thank you for the order.')),
 | 
			
		||||
            'msg_body': str(_('Your VM will be up and running in a few moments.'
 | 
			
		||||
                              ' We will send you a confirmation email as soon as'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue