From ed6e0b0fe87943a67bfaa710e8519f4ef3c20a21 Mon Sep 17 00:00:00 2001
From: Ramon Gutierrez <arcticzero@gmail.com>
Date: Sun, 4 Feb 2018 18:46:19 +0800
Subject: [PATCH] Update battery form layout to remove tabs

---
 templates/battery/form.html.twig | 343 +++++++++++++++----------------
 1 file changed, 169 insertions(+), 174 deletions(-)

diff --git a/templates/battery/form.html.twig b/templates/battery/form.html.twig
index a1801412..f7dfe2ca 100644
--- a/templates/battery/form.html.twig
+++ b/templates/battery/form.html.twig
@@ -32,183 +32,178 @@
 							</div>
 						</div>
 					</div>
-                    <form id="row-form" class="m-form m-form--label-align-right" method="post" action="{{ mode == 'update' ? url('battery_update_submit', {'id': obj.getId()}) : url('battery_create_submit') }}">
+                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right" method="post" action="{{ mode == 'update' ? url('battery_update_submit', {'id': obj.getId()}) : url('battery_create_submit') }}">
 						<div class="m-portlet__body">	
-							<ul class="nav nav-tabs" role="tablist">
-								<li class="nav-item">
-									<a class="nav-link active" data-toggle="tab" href="#product-info">Product Information</a>
-								</li>
-								<li class="nav-item">
-									<a class="nav-link" data-toggle="tab" href="#vehicle-compatibility">Vehicle Compatibility</a>
-								</li>
-							</ul>
-							<div class="tab-content">
-								<div class="tab-pane active" id="product-info" role="tabpanel">
-									<div class="m-form__section m-form__section--first">
-										<div class="m-form__heading">
-											<h3 class="m-form__heading-title">
-												Product Details
-											</h3>
-										</div>
-										<div class="form-group m-form__group row">
-                                            <div class="col-lg-4">
-                                                <label data-field="prod_code">
-                                                    Product Code
-                                                </label>
-                                                <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>
-                                            <div class="col-lg-4">
-                                                <label data-field="sell_price">
-                                                    Selling Price
-                                                </label>
-                                                <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>
-										</div>
-										<div class="form-group m-form__group row">
-                                            <div class="col-lg-4">
-                                                <label data-field="manufacturer">
-                                                    Manufacturer
-                                                </label>
-                                                <select class="form-control m-input" id="manufacturer" name="manufacturer">
-                                                    <option value=""></option>
-                                                    {% for manufacturer in bmfgs %}
-                                                        <option value="{{ manufacturer.getID() }}"{{ obj.getManufacturer() and manufacturer.getID() == obj.getManufacturer().getID() ? ' selected' }}>{{ manufacturer.getName() }}</option>
-                                                    {% endfor %}
-                                                </select>
-                                                <div class="form-control-feedback hide" data-field="manufacturer"></div>
-											</div>
-                                            <div class="col-lg-4">
-                                                <label data-field="model">
-                                                    Model
-                                                </label>
-												<select class="form-control m-input" id="model" name="model">
-													<option value=""></option>
-													{% for model in models %}
-														<option value="{{ model.getID() }}"{{ obj.getModel() and obj.getModel().getID() ? ' selected' }}>{{ model.getName() }}</option>
-													{% endfor %}
-												</select>
-												<div class="form-control-feedback hide" data-field="model"></div>
-											</div>
-                                            <div class="col-lg-4">
-                                                <label data-field="size">
-                                                    Size
-                                                </label>
-												<select class="form-control m-input" id="size" name="size">
-													<option value=""></option>
-													{% for size in sizes %}
-														<option value="{{ size.getID() }}"{{ obj.getSize() and obj.getSize().getID() ? ' selected' }}>{{ size.getName() }}</option>
-													{% endfor %}
-												</select>
-												<div class="form-control-feedback hide" data-field="size"></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">
-												Warranty
-											</h3>
-										</div>
-										<div class="form-group m-form__group row">
-                                            <div class="col-lg-4">
-                                                <label data-field="warr_private">
-                                                    Personal
-                                                </label>
-												<input type="number" name="warr_private" class="form-control m-input" value="{{ obj.getWarrantyPrivate() }}">
-												<div class="form-control-feedback hide" data-field="warr_private"></div>
-												<span class="m-form__help">In months</span>
-											</div>
-                                            <div class="col-lg-4">
-                                                <label data-field="warr_commercial">
-                                                    Commercial
-                                                </label>
-												<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>
-                                                    <span class="m-form__help">In months</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="m-form__section">
-                                            <div class="m-form__heading">
-                                                <h3 class="m-form__heading-title">
-                                                    Specifications
-                                                </h3>
-                                            </div>
-                                            <div class="form-group m-form__group row">
-                                                <div class="col-lg-4">
-                                                    <label data-field="length">
-                                                        Length
-                                                    </label>
-                                                    <input type="number" name="length" class="form-control m-input" value="{{ obj.getLength() }}">
-                                                    <div class="form-control-feedback hide" data-field="length"></div>
-                                                    <span class="m-form__help">In millimeters (mm)</span>
-                                                </div>
-                                                <div class="col-lg-4">
-                                                    <label data-field="width">
-                                                        Width
-                                                    </label>
-                                                    <input type="number" name="width" class="form-control m-input" value="{{ obj.getWidth() }}">
-                                                    <div class="form-control-feedback hide" data-field="width"></div>
-                                                    <span class="m-form__help">In millimeters (mm)</span>
-                                                </div>
-                                                <div class="col-lg-4">
-                                                    <label data-field="height">
-                                                        Height
-                                                    </label>
-                                                    <input type="number" name="height" class="form-control m-input" value="{{ obj.getHeight() }}">
-                                                    <div class="form-control-feedback hide" data-field="height"></div>
-                                                    <span class="m-form__help">In millimeters (mm)</span>
-                                                </div>
-                                            </div>
-                                            <div class="form-group m-form__group row">
-                                                <div class="col-lg-4">
-                                                    <label data-field="total_height">
-                                                        Total Height
-                                                    </label>
-                                                    <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>
-                                                    <span class="m-form__help">In millimeters (mm)</span>
-                                                </div>
-                                                <div class="col-lg-4">
-                                                    <label data-field="res_capacity">
-                                                        Reserve Capacity
-                                                    </label>
-                                                    <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>
-                                                    <span class="m-form__help">In minutes</span>
-                                                </div>
-                                            </div>
-                                        </div>
+							<div class="m-form__section m-form__section--first">
+								<div class="m-form__heading">
+									<h3 class="m-form__heading-title">
+										Product Details
+									</h3>
+								</div>
+								<div class="form-group m-form__group row">
+                                    <div class="col-lg-4">
+                                        <label data-field="prod_code">
+                                            Product Code
+                                        </label>
+                                        <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>
-                                    <div class="tab-pane" id="vehicle-compatibility" role="tabpanel">
-									<div class="form-group m-form__group row form-group-inner">
-										<div class="col-lg-12">
-											<div id="data-vehicles"></div>
-										</div>
+                                    <div class="col-lg-4">
+                                        <label data-field="sell_price">
+                                            Selling Price
+                                        </label>
+                                        <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>
+								</div>
+								<div class="form-group m-form__group row">
+                                    <div class="col-lg-4">
+                                        <label data-field="manufacturer">
+                                            Manufacturer
+                                        </label>
+                                        <select class="form-control m-input" id="manufacturer" name="manufacturer">
+                                            <option value=""></option>
+                                            {% for manufacturer in bmfgs %}
+                                                <option value="{{ manufacturer.getID() }}"{{ obj.getManufacturer() and manufacturer.getID() == obj.getManufacturer().getID() ? ' selected' }}>{{ manufacturer.getName() }}</option>
+                                            {% endfor %}
+                                        </select>
+                                        <div class="form-control-feedback hide" data-field="manufacturer"></div>
 									</div>
-									<div class="form-group m-form__group row form-group-inner">
-										<label class="col-lg-1 col-form-label" data-field="vehicle_list">
-											Add Vehicle:
-										</label>
-										<div class="col-lg-3">
-											<select name="vmfg_list" class="form-control m-input" id="vmfg">
-												<option value="">Select a manufacturer</option>
-												{% for manufacturer in vmfgs %}
-													<option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
-												{% endfor %}
-											</select>
-										</div>
-										<div class="col-lg-3">
-											<select name="vehicle_list" class="form-control m-input" id="vehicle" disabled>
-												<option value="">Select a manufacturer first</option>
-											</select>
-										</div>
-										<div class="col-lg-3">
-											<button type="button" class="btn btn-primary" id="btn-add-vehicle" disabled>Add to List</button>
-										</div>
+                                    <div class="col-lg-4">
+                                        <label data-field="model">
+                                            Model
+                                        </label>
+										<select class="form-control m-input" id="model" name="model">
+											<option value=""></option>
+											{% for model in models %}
+												<option value="{{ model.getID() }}"{{ obj.getModel() and obj.getModel().getID() ? ' selected' }}>{{ model.getName() }}</option>
+											{% endfor %}
+										</select>
+										<div class="form-control-feedback hide" data-field="model"></div>
+									</div>
+                                    <div class="col-lg-4">
+                                        <label data-field="size">
+                                            Size
+                                        </label>
+										<select class="form-control m-input" id="size" name="size">
+											<option value=""></option>
+											{% for size in sizes %}
+												<option value="{{ size.getID() }}"{{ obj.getSize() and obj.getSize().getID() ? ' selected' }}>{{ size.getName() }}</option>
+											{% endfor %}
+										</select>
+										<div class="form-control-feedback hide" data-field="size"></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">
+										Warranty
+									</h3>
+								</div>
+								<div class="form-group m-form__group row">
+                                    <div class="col-lg-4">
+                                        <label data-field="warr_private">
+                                            Personal
+                                        </label>
+										<input type="number" name="warr_private" class="form-control m-input" value="{{ obj.getWarrantyPrivate() }}">
+										<div class="form-control-feedback hide" data-field="warr_private"></div>
+										<span class="m-form__help">In months</span>
+									</div>
+                                    <div class="col-lg-4">
+                                        <label data-field="warr_commercial">
+                                            Commercial
+                                        </label>
+										<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>
+                                        <span class="m-form__help">In months</span>
+                                    </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">
+                                        Specifications
+                                    </h3>
+                                </div>
+                                <div class="form-group m-form__group row">
+                                    <div class="col-lg-4">
+                                        <label data-field="length">
+                                            Length
+                                        </label>
+                                        <input type="number" name="length" class="form-control m-input" value="{{ obj.getLength() }}">
+                                        <div class="form-control-feedback hide" data-field="length"></div>
+                                        <span class="m-form__help">In millimeters (mm)</span>
+                                    </div>
+                                    <div class="col-lg-4">
+                                        <label data-field="width">
+                                            Width
+                                        </label>
+                                        <input type="number" name="width" class="form-control m-input" value="{{ obj.getWidth() }}">
+                                        <div class="form-control-feedback hide" data-field="width"></div>
+                                        <span class="m-form__help">In millimeters (mm)</span>
+                                    </div>
+                                    <div class="col-lg-4">
+                                        <label data-field="height">
+                                            Height
+                                        </label>
+                                        <input type="number" name="height" class="form-control m-input" value="{{ obj.getHeight() }}">
+                                        <div class="form-control-feedback hide" data-field="height"></div>
+                                        <span class="m-form__help">In millimeters (mm)</span>
+                                    </div>
+                                </div>
+                                <div class="form-group m-form__group row">
+                                    <div class="col-lg-4">
+                                        <label data-field="total_height">
+                                            Total Height
+                                        </label>
+                                        <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>
+                                        <span class="m-form__help">In millimeters (mm)</span>
+                                    </div>
+                                    <div class="col-lg-4">
+                                        <label data-field="res_capacity">
+                                            Reserve Capacity
+                                        </label>
+                                        <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>
+                                        <span class="m-form__help">In minutes</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <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">
+										Vehicle Compatibility
+									</h3>
+								</div>
+								<div class="form-group m-form__group row">
+									<div class="col-lg-12">
+										<div id="data-vehicles"></div>
+									</div>
+								</div>
+								<div class="form-group m-form__group row">
+									<label class="col-lg-1 col-form-label" data-field="vehicle_list">
+										Add Vehicle:
+									</label>
+									<div class="col-lg-3">
+										<select name="vmfg_list" class="form-control m-input" id="vmfg">
+											<option value="">Select a manufacturer</option>
+											{% for manufacturer in vmfgs %}
+												<option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
+											{% endfor %}
+										</select>
+									</div>
+									<div class="col-lg-3">
+										<select name="vehicle_list" class="form-control m-input" id="vehicle" disabled>
+											<option value="">Select a manufacturer first</option>
+										</select>
+									</div>
+									<div class="col-lg-3">
+										<button type="button" class="btn btn-primary" id="btn-add-vehicle" disabled>Add to List</button>
 									</div>
 								</div>
 							</div>