Better UI by removing the labels and replacing with placeholder

surajcm · Dec 15, 2021 · f414f8a · f414f8a
1 parent b4ebb36
commit f414f8a
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 60 deletions.
diff --git a/src/main/webapp/customer/CustomerList.jsp b/src/main/webapp/customer/CustomerList.jsp
@@ -36,16 +36,13 @@
  <div class="card-body">
  <div class="row g-3">
  <div class="col-md-2">
- <label for="customerId" class="form-label">Customer Id :</label>
- <form:input cssClass="form-control" path="searchCustomerVO.customerId" id="customerId"/>
+ <form:input cssClass="form-control" path="searchCustomerVO.customerId" id="customerId" placeholder="Customer Id" />
  </div>
  <div class="col-md-6">
- <label for="customerName" class="form-label">Customer Name :</label>
- <form:input cssClass="form-control" path="searchCustomerVO.customerName" id="customerName"/>
+ <form:input cssClass="form-control" path="searchCustomerVO.customerName" id="customerName" placeholder="Customer Name" />
  </div>
  <div class="col-md-4">
- <label for="mobile" class="form-label">Mobile :</label>
- <form:input cssClass="form-control" path="searchCustomerVO.mobile" id="mobile"/>
+ <form:input cssClass="form-control" path="searchCustomerVO.mobile" id="mobile" placeholder="Mobile" />
  </div>
  <div class="col-md-6">
  <div class="form-check">

diff --git a/src/main/webapp/invoice/ListInvoice.jsp b/src/main/webapp/invoice/ListInvoice.jsp
@@ -37,24 +37,19 @@
  <div class="card-body">
  <div class="row g-3">
  <div class="col-md-3">
- <label for="invoiceId" class="form-label"> Invoice Id :</label>
- <form:input cssClass="form-control" path="searchInvoiceVo.id" id="invoiceId"/>
+ <form:input cssClass="form-control" path="searchInvoiceVo.id" id="invoiceId" placeholder="Invoice Id" />
  </div>
  <div class="col-md-3">
- <label for="description" class="form-label">Description :</label>
- <form:input cssClass="form-control" path="searchInvoiceVo.description" id="description"/>
+ <form:input cssClass="form-control" path="searchInvoiceVo.description" id="description" placeholder="Description"/>
  </div>
  <div class="col-md-3">
- <label for="serialNo" class="form-label">Serial No :</label>
- <form:input cssClass="form-control" path="searchInvoiceVo.serialNo" id="serialNo"/>
+ <form:input cssClass="form-control" path="searchInvoiceVo.serialNo" id="serialNo" placeholder="Serial Number"/>
  </div>
  <div class="col-md-3">
- <label for="tagNo" class="form-label">Tag No :</label>
- <form:input cssClass="form-control" path="searchInvoiceVo.tagNo" id="tagNo"/>
+ <form:input cssClass="form-control" path="searchInvoiceVo.tagNo" id="tagNo" placeholder="Tag Number"/>
  </div>
  <div class="col-md-4">
- <label for="amount" class="form-label">Amount :</label>
- <form:input cssClass="form-control" path="searchInvoiceVo.amount" id="amount"/>
+ <form:input cssClass="form-control" path="searchInvoiceVo.amount" id="amount" placeholder="Amount"/>
  </div>
  <div class="col-md-4">
  <div class="form-check">

diff --git a/src/main/webapp/make/MakeList.jsp b/src/main/webapp/make/MakeList.jsp
@@ -38,16 +38,17 @@
  <div class="card-body">
  <div class="row g-3">
  <div class="col-md-6">
- <label for="makeName" class="form-label">Make Name :</label>
- <form:select id="makeName" path="searchMakeAndModelVO.makeName" cssClass="form-select" tabindex="1">
- <form:option value="0" label="-- Select --"/>
- <form:options items="${makeForm.makeVOs}"
- itemValue="id" itemLabel="makeName"/>
- </form:select>
+ <div class="input-group mb-3">
+ <label for="makeName" class="input-group-text">Make Name :</label>
+ <form:select id="makeName" path="searchMakeAndModelVO.makeName" cssClass="form-select" tabindex="1">
+ <form:option value="0" label="-- Select --"/>
+ <form:options items="${makeForm.makeVOs}"
+ itemValue="id" itemLabel="makeName"/>
+ </form:select>
+ </div>
  </div>
  <div class="col-md-6">
- <label for="modelName" class="form-label">Model Name :</label>
- <form:input path="searchMakeAndModelVO.modelName" cssClass="form-control" id="modelName"/>
+ <form:input path="searchMakeAndModelVO.modelName" cssClass="form-control" id="modelName" placeholder="Model Name"/>
  </div>
  <div class="col-md-6">
  <div class="form-check">

diff --git a/src/main/webapp/make/ModelList.jsp b/src/main/webapp/make/ModelList.jsp
@@ -36,17 +36,18 @@
  <div class="card-body">
  <div class="row g-3">
  <div class="col-md-6">
- <label for="makeName" class="form-label">Make Name :</label>
- <form:select cssClass="form-select" id="makeName" path="searchMakeAndModelVO.makeId" tabindex="1"
- onkeypress="handleEnter(event);" >
- <form:option value="0" label="-- Select --"/>
- <form:options items="${makeForm.makeVOs}"
- itemValue="id" itemLabel="makeName"/>
- </form:select>
+ <div class="input-group mb-3">
+ <label for="makeName" class="input-group-text">Make Name :</label>
+ <form:select cssClass="form-select" id="makeName" path="searchMakeAndModelVO.makeId" tabindex="1"
+ onkeypress="handleEnter(event);" >
+ <form:option value="0" label="-- Select --"/>
+ <form:options items="${makeForm.makeVOs}"
+ itemValue="id" itemLabel="makeName"/>
+ </form:select>
+ </div>
  </div>
  <div class="col-md-6">
- <label for="modelName" class="form-label">Model Name :</label>
- <form:input cssClass="form-control" path="searchMakeAndModelVO.modelName" id="modelName"/>
+ <form:input cssClass="form-control" path="searchMakeAndModelVO.modelName" id="modelName" placeholder="Model Name"/>
  </div>
  <div class="col-md-6">
  <div class="form-check">

diff --git a/src/main/webapp/txs/TransactionList.jsp b/src/main/webapp/txs/TransactionList.jsp
@@ -40,46 +40,55 @@
  <div class="card-body">
  <div class="row g-3">
  <div class="col-md-3">
- <label for="TagNo" class="form-label">Tag No :</label>
- <form:input cssClass="form-control" path="searchTransaction.TagNo" id="TagNo"/>
+ <form:input cssClass="form-control" path="searchTransaction.TagNo" id="TagNo" placeholder="Tag Number" />
  </div>
  <div class="col-md-3">
- <label for="CustomerName" class="form-label">Customer Name :</label>
- <form:input cssClass="form-control" path="searchTransaction.CustomerName" id="CustomerName"/>
+ <form:input cssClass="form-control" path="searchTransaction.CustomerName" id="CustomerName" placeholder="Customer Name" />
  </div>
  <div class="col-md-3">
- <label for="startDate" class="form-label">Reported Date (From) :<img src="/img/calendar3.svg" alt="" width="16" height="16" title="calendar" /></label>
- <form:input path="searchTransaction.startDate" cssClass="date-picker form-control" id="startDate" />
+ <div class="input-group mb-3">
+ <span class="input-group-text">Reported Date (From)</span>
+ <form:input path="searchTransaction.startDate" cssClass="date-picker form-control" id="startDate" />
+ <span class="input-group-text"><img src="/img/calendar3.svg" alt="" width="16" height="16" title="calendar" /></span>
+ </div>
  </div>
  <div class="col-md-3">
- <label for="endDate" class="form-label">Reported Date (To) :<img src="/img/calendar3.svg" alt="" width="16" height="16" title="calendar" /></label>
- <form:input path="searchTransaction.endDate" cssClass="date-picker form-control" id="endDate" />
+ <div class="input-group mb-3">
+ <span class="input-group-text">Reported Date (To)</span>
+ <form:input path="searchTransaction.endDate" cssClass="date-picker form-control" id="endDate" />
+ <span class="input-group-text"><img src="/img/calendar3.svg" alt="" width="16" height="16" title="calendar" /></span>
+ </div>
  </div>
  <div class="col-md-3">
- <label for="SerialNo" class="form-label">Serial No :</label>
- <form:input cssClass="form-control" path="searchTransaction.SerialNo" id="SerialNo"/>
+ <form:input cssClass="form-control" path="searchTransaction.SerialNo" id="SerialNo" placeholder="Serial Number"/>
  </div>
  <div class="col-md-3">
- <label for="makeId" class="form-label">Make :</label>
- <form:select id="makeId" cssClass="form-select" path="searchTransaction.makeId" tabindex="1" onchange="changeTheModel();">
- <form:option value=""><spring:message code="common.select" text="<-- Select -->"/></form:option>
- <form:options items="${transactionForm.makeVOs}" itemValue="Id" itemLabel="makeName"/>
- </form:select>
+ <div class="input-group mb-3">
+ <label for="makeId" class="input-group-text">Make</label>
+ <form:select id="makeId" cssClass="form-select" path="searchTransaction.makeId" tabindex="1" onchange="changeTheModel();">
+ <form:option value=""><spring:message code="common.select" text="<-- Select -->"/></form:option>
+ <form:options items="${transactionForm.makeVOs}" itemValue="Id" itemLabel="makeName"/>
+ </form:select>
+ </div>
  </div>
  <div class="col-md-3">
- <label for="modelId" class="form-label">Model Name :</label>
- <form:select id="modelId" cssClass="form-select" path="searchTransaction.modelId" tabindex="2" disabled="true">
- <form:option value=""><spring:message code="common.select" text="<-- Select -->"/></form:option>
- <form:options items="${transactionForm.makeAndModelVOs}"
- itemValue="modelId" itemLabel="modelName"/>
- </form:select>
+ <div class="input-group mb-3">
+ <label for="modelId" class="input-group-text">Model</label>
+ <form:select id="modelId" cssClass="form-select" path="searchTransaction.modelId" tabindex="2" disabled="true">
+ <form:option value=""><spring:message code="common.select" text="<-- Select -->"/></form:option>
+ <form:options items="${transactionForm.makeAndModelVOs}"
+ itemValue="modelId" itemLabel="modelName"/>
+ </form:select>
+ </div>
  </div>
  <div class="col-md-3">
- <label for="Status" class="form-label">Status :</label>
- <form:select id="Status" cssClass="form-select" path="searchTransaction.Status">
- <form:option value=""><spring:message code="common.select" text="<-- Select -->"/></form:option>
- <form:options items="${transactionForm.statusList}" />
- </form:select>
+ <div class="input-group mb-3">
+ <label for="Status" class="input-group-text">Status</label>
+ <form:select id="Status" cssClass="form-select" path="searchTransaction.Status">
+ <form:option value=""><spring:message code="common.select" text="<-- Select -->"/></form:option>
+ <form:options items="${transactionForm.statusList}" />
+ </form:select>
+ </div>
  </div>
  <div class="col-md-6">
  <div class="form-check">
@@ -185,7 +194,7 @@
  $(document).ready(function() {
  $(function() {
  $("#startDate").datepicker();
-  $("#endDate").datepicker();
+ $("#endDate").datepicker();
  });
  $('#makeId').change(function() {
  $("#modelId").prop("disabled", false);