Improve usability of battery and customer forms

This commit is contained in:
Kendrick Chan 2018-01-17 15:09:57 +08:00
parent 929187f45c
commit 84784a850f
2 changed files with 114 additions and 115 deletions

View file

@ -51,27 +51,26 @@
</h3> </h3>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="prod_code"> <div class="col-lg-4">
<label data-field="prod_code">
Product Code: Product Code:
</label> </label>
<div class="col-lg-3">
<input type="text" name="prod_code" class="form-control m-input" value="{{ obj.getProductCode() }}"> <input type="text" name="prod_code" class="form-control m-input" value="{{ obj.getProductCode() }}">
<div class="form-control-feedback hide" data-field="prod_code"></div> <div class="form-control-feedback hide" data-field="prod_code"></div>
<span class="m-form__help">Unique identifier for this product</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="sell_price"> <div class="col-lg-4">
<label data-field="sell_price">
Selling Price: Selling Price:
</label> </label>
<div class="col-lg-3">
<input type="text" name="sell_price" class="form-control m-input" value="{{ obj.getSellingPrice() }}"> <input type="text" name="sell_price" class="form-control m-input" value="{{ obj.getSellingPrice() }}">
<div class="form-control-feedback hide" data-field="sell_price"></div> <div class="form-control-feedback hide" data-field="sell_price"></div>
</div> </div>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="manufacturer"> <div class="col-lg-4">
<label data-field="manufacturer">
Manufacturer: Manufacturer:
</label> </label>
<div class="col-lg-3">
<select class="form-control m-input" id="manufacturer" name="manufacturer"> <select class="form-control m-input" id="manufacturer" name="manufacturer">
<option value=""></option> <option value=""></option>
{% for manufacturer in bmfgs %} {% for manufacturer in bmfgs %}
@ -80,10 +79,10 @@
</select> </select>
<div class="form-control-feedback hide" data-field="manufacturer"></div> <div class="form-control-feedback hide" data-field="manufacturer"></div>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="model"> <div class="col-lg-4">
<label data-field="model">
Model: Model:
</label> </label>
<div class="col-lg-3">
<select class="form-control m-input" id="model" name="model"> <select class="form-control m-input" id="model" name="model">
<option value=""></option> <option value=""></option>
{% for model in models %} {% for model in models %}
@ -92,10 +91,10 @@
</select> </select>
<div class="form-control-feedback hide" data-field="model"></div> <div class="form-control-feedback hide" data-field="model"></div>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="size"> <div class="col-lg-4">
<label data-field="size">
Size: Size:
</label> </label>
<div class="col-lg-3">
<select class="form-control m-input" id="size" name="size"> <select class="form-control m-input" id="size" name="size">
<option value=""></option> <option value=""></option>
{% for size in sizes %} {% for size in sizes %}
@ -114,18 +113,18 @@
</h3> </h3>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="warr_personal"> <div class="col-lg-4">
<label data-field="warr_personal">
Personal: Personal:
</label> </label>
<div class="col-lg-3">
<input type="number" name="warr_personal" class="form-control m-input" value="{{ obj.getWarrantyPersonal() }}"> <input type="number" name="warr_personal" class="form-control m-input" value="{{ obj.getWarrantyPersonal() }}">
<div class="form-control-feedback hide" data-field="warr_personal"></div> <div class="form-control-feedback hide" data-field="warr_personal"></div>
<span class="m-form__help">In months</span> <span class="m-form__help">In months</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="warr_commercial"> <div class="col-lg-4">
<label data-field="warr_commercial">
Commercial: Commercial:
</label> </label>
<div class="col-lg-3">
<input type="number" name="warr_commercial" class="form-control m-input" value="{{ obj.getWarrantyCommercial() }}"> <input type="number" name="warr_commercial" class="form-control m-input" value="{{ obj.getWarrantyCommercial() }}">
<div class="form-control-feedback hide" data-field="warr_commercial"></div> <div class="form-control-feedback hide" data-field="warr_commercial"></div>
<span class="m-form__help">In months</span> <span class="m-form__help">In months</span>
@ -139,44 +138,44 @@
</h3> </h3>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="length"> <div class="col-lg-4">
<label data-field="length">
Length: Length:
</label> </label>
<div class="col-lg-3">
<input type="number" name="length" class="form-control m-input" value="{{ obj.getLength() }}"> <input type="number" name="length" class="form-control m-input" value="{{ obj.getLength() }}">
<div class="form-control-feedback hide" data-field="length"></div> <div class="form-control-feedback hide" data-field="length"></div>
<span class="m-form__help">In millimeters (mm)</span> <span class="m-form__help">In millimeters (mm)</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="width"> <div class="col-lg-4">
<label data-field="width">
Width: Width:
</label> </label>
<div class="col-lg-3">
<input type="number" name="width" class="form-control m-input" value="{{ obj.getWidth() }}"> <input type="number" name="width" class="form-control m-input" value="{{ obj.getWidth() }}">
<div class="form-control-feedback hide" data-field="width"></div> <div class="form-control-feedback hide" data-field="width"></div>
<span class="m-form__help">In millimeters (mm)</span> <span class="m-form__help">In millimeters (mm)</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="height"> <div class="col-lg-4">
<label data-field="height">
Height: Height:
</label> </label>
<div class="col-lg-3">
<input type="number" name="height" class="form-control m-input" value="{{ obj.getHeight() }}"> <input type="number" name="height" class="form-control m-input" value="{{ obj.getHeight() }}">
<div class="form-control-feedback hide" data-field="height"></div> <div class="form-control-feedback hide" data-field="height"></div>
<span class="m-form__help">In millimeters (mm)</span> <span class="m-form__help">In millimeters (mm)</span>
</div> </div>
</div> </div>
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-1 col-form-label" data-field="total_height"> <div class="col-lg-4">
<label data-field="total_height">
Total Height: Total Height:
</label> </label>
<div class="col-lg-3">
<input type="number" name="total_height" class="form-control m-input" value="{{ obj.getTotalHeight() }}"> <input type="number" name="total_height" class="form-control m-input" value="{{ obj.getTotalHeight() }}">
<div class="form-control-feedback hide" data-field="total_height"></div> <div class="form-control-feedback hide" data-field="total_height"></div>
<span class="m-form__help">In millimeters (mm)</span> <span class="m-form__help">In millimeters (mm)</span>
</div> </div>
<label class="col-lg-1 col-form-label" data-field="res_capacity"> <div class="col-lg-4">
<label data-field="res_capacity">
Reserve Capacity Reserve Capacity
</label> </label>
<div class="col-lg-3">
<input type="number" name="res_capacity" class="form-control m-input" value="{{ obj.getReserveCapacity() }}"> <input type="number" name="res_capacity" class="form-control m-input" value="{{ obj.getReserveCapacity() }}">
<div class="form-control-feedback hide" data-field="res_capacity"></div> <div class="form-control-feedback hide" data-field="res_capacity"></div>
<span class="m-form__help">In minutes</span> <span class="m-form__help">In minutes</span>

View file

@ -48,17 +48,17 @@
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="customer-info" role="tabpanel"> <div class="tab-pane active" id="customer-info" role="tabpanel">
<div class="form-group m-form__group row"> <div class="form-group m-form__group row">
<label class="col-lg-2 col-form-label" data-field="first_name"> <div class="col-lg-6">
First Name: <label data-field="first_name">
First Name
</label> </label>
<div class="col-lg-3">
<input type="text" name="first_name" class="form-control m-input" value="{{ obj.getFirstName() }}" data-name="first_name"> <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 class="form-control-feedback hide" data-field="first_name"></div>
</div> </div>
<label class="col-lg-2 col-form-label" data-field="last_name"> <div class="col-lg-6">
Last Name: <label data-field="last_name">
Last Name
</label> </label>
<div class="col-lg-3">
<input type="text" name="last_name" class="form-control m-input" value="{{ obj.getLastName() }}" data-name="last_name"> <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 class="form-control-feedback hide" data-field="last_name"></div>
</div> </div>