Change customer form layout to remove tabs, remove min height from datatables
This commit is contained in:
Ramon Gutierrez
parent
729be1c084
commit
dabb9c2f8b
2 changed files with 119 additions and 100 deletions
|
|
@ -142,6 +142,14 @@ span.has-danger,
|
|||
color: #fff !important;
|
||||
}
|
||||
|
||||
.m-datatable.m-datatable--default > .m-datatable__table {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.m-datatable.m-datatable--default > .m-datatable__table > .m-datatable__body .m-datatable__row > .m-datatable__cell {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media (min-width: 995px) {
|
||||
.modal-lg {
|
||||
max-width: 1024px;
|
||||
|
|
|
|||
|
|
@ -32,112 +32,123 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form id="row-form" class="m-form m-form--label-align-right" method="post" action="{{ mode == 'update' ? url('customer_update_submit', {'id': obj.getId()}) : url('customer_create_submit') }}">
|
||||
<div class="m-portlet__body">
|
||||
<ul id="customer-tabs" class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#customer-info">Customer Info</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#mobile-numbers">Mobile Numbers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#vehicles">Vehicles</a>
|
||||
</li>
|
||||
{% if mode == 'update' %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#tickets">Tickets</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="customer-info" role="tabpanel">
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-6">
|
||||
<label data-field="customer_classification">
|
||||
Customer Classification
|
||||
</label>
|
||||
<select name="customer_classification" class="form-control m-input">
|
||||
{% for key, classification in classifications %}
|
||||
<option value="{{ key }}"{{ obj.getCustomerClassification == key ? ' selected' }}>{{ classification }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="form-control-feedback hide" data-field="customer_classification"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-6">
|
||||
<label data-field="first_name">
|
||||
First Name
|
||||
</label>
|
||||
<input type="text" name="first_name" class="form-control m-input" value="{{ obj.getFirstName() }}" data-name="first_name">
|
||||
<div class="form-control-feedback hide" data-field="first_name"></div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label data-field="last_name">
|
||||
Last Name
|
||||
</label>
|
||||
<input type="text" name="last_name" class="form-control m-input" value="{{ obj.getLastName() }}" data-name="last_name">
|
||||
<div class="form-control-feedback hide" data-field="last_name"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-6">
|
||||
<label data-field="customer_notes">
|
||||
Customer Notes
|
||||
</label>
|
||||
<textarea name="customer_notes" class="form-control m-input" data-name="customer_notes" rows="4">{{ obj.getCustomerNotes() }}</textarea>
|
||||
<div class="form-control-feedback hide" data-field="customer_notes"></div>
|
||||
</div>
|
||||
</div>
|
||||
<form id="row-form" class="m-form m-form--fit m-form--label-align-right" method="post" action="{{ mode == 'update' ? url('customer_update_submit', {'id': obj.getId()}) : url('customer_create_submit') }}">
|
||||
<div class="m-portlet__body">
|
||||
<div class="m-form__section m-form__section--first">
|
||||
<div class="m-form__heading">
|
||||
<h3 class="m-form__heading-title">
|
||||
Customer Info
|
||||
</h3>
|
||||
</div>
|
||||
<div class="tab-pane" id="mobile-numbers" role="tabpanel">
|
||||
<div class="form-group m-form__group row form-group-inner row">
|
||||
<div class="col-lg-12">
|
||||
<div id="data-mobile-numbers"></div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-6">
|
||||
<label data-field="customer_classification">
|
||||
Customer Classification
|
||||
</label>
|
||||
<select name="customer_classification" class="form-control m-input">
|
||||
{% for key, classification in classifications %}
|
||||
<option value="{{ key }}"{{ obj.getCustomerClassification == key ? ' selected' }}>{{ classification }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="form-control-feedback hide" data-field="customer_classification"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-6">
|
||||
<label data-field="first_name">
|
||||
First Name
|
||||
</label>
|
||||
<input type="text" name="first_name" class="form-control m-input" value="{{ obj.getFirstName() }}" data-name="first_name">
|
||||
<div class="form-control-feedback hide" data-field="first_name"></div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<label data-field="last_name">
|
||||
Last Name
|
||||
</label>
|
||||
<input type="text" name="last_name" class="form-control m-input" value="{{ obj.getLastName() }}" data-name="last_name">
|
||||
<div class="form-control-feedback hide" data-field="last_name"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-6">
|
||||
<label data-field="customer_notes">
|
||||
Customer Notes
|
||||
</label>
|
||||
<textarea name="customer_notes" class="form-control m-input" data-name="customer_notes" rows="4">{{ obj.getCustomerNotes() }}</textarea>
|
||||
<div class="form-control-feedback hide" data-field="customer_notes"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-form__seperator m-form__seperator--dashed"></div>
|
||||
|
||||
<div class="m-form__section">
|
||||
<div class="m-form__heading">
|
||||
<h3 class="m-form__heading-title">
|
||||
Mobile Numbers
|
||||
</h3>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-12">
|
||||
<div id="data-mobile-numbers"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-4">
|
||||
<input type="text" class="form-control m-input" placeholder="Mobile number" id="mobile-number">
|
||||
<div class="form-control-feedback hide" data-field="mobile-number"></div>
|
||||
<span class="m-form__help">Use the format <span class="text-info">63xxxxxxxxxx</span></span>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="input-group date dtp">
|
||||
<input type="text" id="date-confirmed" class="form-control m-input" readonly placeholder="Date confirmed">
|
||||
<span class="input-group-addon">
|
||||
<i class="la la-calendar glyphicon-th"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group m-form__group row form-group-inner row">
|
||||
<div class="col-lg-4">
|
||||
<input type="text" class="form-control m-input" placeholder="Mobile number" id="mobile-number">
|
||||
<div class="form-control-feedback hide" data-field="mobile-number"></div>
|
||||
<span class="m-form__help">Use the format <span class="text-info">63xxxxxxxxxx</span></span>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="input-group date dtp">
|
||||
<input type="text" id="date-confirmed" class="form-control m-input" readonly placeholder="Date confirmed">
|
||||
<span class="input-group-addon">
|
||||
<i class="la la-calendar glyphicon-th"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<button type="button" class="btn btn-primary" id="btn-add-mobile-number">Add to List</button>
|
||||
<div class="col-lg-4">
|
||||
<button type="button" class="btn btn-primary" id="btn-add-mobile-number">Add to List</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-form__seperator m-form__seperator--dashed"></div>
|
||||
|
||||
<div class="m-form__section{{ mode == 'create' ? ' m-form__section--last' }}">
|
||||
<div class="m-form__heading">
|
||||
<h3 class="m-form__heading-title">
|
||||
Vehicles
|
||||
</h3>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-12">
|
||||
<div class="m_datatable" id="data-vehicles"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-12">
|
||||
<button type="button" class="btn btn-primary" id="add-vehicle">Add Vehicle</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if mode == 'update' %}
|
||||
<div class="m-form__seperator m-form__seperator--dashed"></div>
|
||||
|
||||
<div class="m-form__section m-form__section--last">
|
||||
<div class="m-form__heading">
|
||||
<h3 class="m-form__heading-title">
|
||||
Tickets
|
||||
</h3>
|
||||
</div>
|
||||
<div class="form-group m-form__group row">
|
||||
<div class="col-lg-12">
|
||||
<div class="m_datatable" id="data-tickets"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="vehicles" role="tabpanel">
|
||||
<div class="form-group m-form__group row form-group-inner row">
|
||||
<div class="col-lg-12">
|
||||
<div class="m_datatable" id="data-vehicles"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group m-form__group row form-group-inner row">
|
||||
<div class="col-lg-12">
|
||||
<button type="button" class="btn btn-primary" id="add-vehicle">Add Vehicle</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if mode == 'update' %}
|
||||
<div class="tab-pane" id="tickets" role="tabpanel">
|
||||
<div class="form-group m-form__group row form-group-inner row">
|
||||
<div class="col-lg-12">
|
||||
<div class="m_datatable" id="data-tickets"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="m-portlet__foot m-portlet__foot--fit">
|
||||
<div class="m-form__actions m-form__actions--solid m-form__actions--right">
|
||||
|
|
|
|||
Loading…
Reference in a new issue