svn commit: r1855090 - in /ofbiz/ofbiz-plugins/trunk/ecommerce/template: customer/CreditCardFields.ftl order/OnePageCheckoutProcess.ftl order/OrderItems.ftl

[Deepak Dixit-5]

Author: deepak
Date: Sat Mar  9 06:41:12 2019
New Revision: 1855090

URL: http://svn.apache.org/viewvc?rev=1855090&view=rev
Log:
Improved: UI improvement at checkout page
(OFBIZ-10578)
Thanks  Nitish Mishra and Parakh Maheshwari for your contribution

Modified:
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/CreditCardFields.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OrderItems.ftl

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/CreditCardFields.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/CreditCardFields.ftl?rev=1855090&r1=1855089&r2=1855090&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/CreditCardFields.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/CreditCardFields.ftl Sat Mar  9 06:41:12 2019
@@ -25,8 +25,8 @@ under the License.
   <#assign paymentMethod = requestParameters>
 </#if>
 
-<label class="mt-2">${uiLabelMap.AccountingCompanyNameCard}</label>
-<div class="row">
+<label class="mt-2 d-block">${uiLabelMap.AccountingCompanyNameCard}</label>
+<div class="row my-2">
   <div class="col-sm-6">
     <input type="text" class="form-control" maxlength="60" name="companyNameOnCard" value="${creditCard.companyNameOnCard!}"/>
   </div>
@@ -34,7 +34,7 @@ under the License.
 <label>${uiLabelMap.AccountingPrefixCard}</label>
 <div class="row">
   <div class="col-sm-6">
-    <select name="titleOnCard" class="form-control custom-select">
+    <select name="titleOnCard" class="form-control custom-select mb-2">
       <option value="">${uiLabelMap.CommonSelectOne}</option>
       <option<#if ("${uiLabelMap.CommonTitleMr}" == (creditCard.titleOnCard)?default(""))> selected="selected"</#if>>${uiLabelMap.CommonTitleMr}</option>
       <option<#if ("Mrs." == (creditCard.titleOnCard)?default(""))> selected="selected"</#if>>${uiLabelMap.CommonTitleMrs}</option>
@@ -46,27 +46,27 @@ under the License.
 <label class="required">${uiLabelMap.AccountingFirstNameCard}</label>
 <div class="row">
   <div class="col-sm-6">
-    <input type="text" class="form-control" maxlength="60" name="firstNameOnCard" value="${(creditCard.firstNameOnCard)!}"/>
+    <input type="text" class="form-control mb-2" maxlength="60" name="firstNameOnCard" value="${(creditCard.firstNameOnCard)!}"/>
   <#if showToolTip?has_content><span class="tooltip">${uiLabelMap.CommonRequired}</span></#if></td>
   </div>
 </div>
 <label>${uiLabelMap.AccountingMiddleNameCard}</label>
 <div class="row">
   <div class="col-sm-6">
-    <input type="text" class="form-control" maxlength="60" name="middleNameOnCard" value="${(creditCard.middleNameOnCard)!}"/>
+    <input type="text" class="form-control mb-2" maxlength="60" name="middleNameOnCard" value="${(creditCard.middleNameOnCard)!}"/>
   </div>
 </div>
 <label class="required">${uiLabelMap.AccountingLastNameCard}</label>
 <div class="row">
   <div class="col-sm-6">
-    <input type="text" class="form-control" maxlength="60" name="lastNameOnCard" value="${(creditCard.lastNameOnCard)!}"/>
+    <input type="text" class="form-control mb-2" maxlength="60" name="lastNameOnCard" value="${(creditCard.lastNameOnCard)!}"/>
   <#if showToolTip?has_content><span class="tooltip">${uiLabelMap.CommonRequired}</span></#if>
   </div>
 </div>
 <label>${uiLabelMap.AccountingSuffixCard}</label>
 <div class="row">
   <div class="col-sm-6">
-    <select name="suffixOnCard" class="form-control custom-select">
+    <select name="suffixOnCard" class="form-control custom-select mb-2">
       <option value="">${uiLabelMap.CommonSelectOne}</option>
       <option<#if ("Jr." == (creditCard.suffixOnCard)?default(""))> selected="selected"</#if>>Jr.</option>
       <option<#if ("Sr." == (creditCard.suffixOnCard)?default(""))> selected="selected"</#if>>Sr.</option>
@@ -81,7 +81,7 @@ under the License.
 <label class="required">${uiLabelMap.AccountingCardType}</label>
 <div class="row">
   <div class="col-sm-6">
-    <select name="cardType" class="custom-select form-control">
+    <select name="cardType" class="custom-select form-control mb-2">
     <#if creditCard.cardType??>
       <option>${creditCard.cardType}</option>
       <option value="${creditCard.cardType}">---</option>
@@ -111,12 +111,12 @@ under the License.
           <#assign cardNumberDisplay = cardNumber>
         </#if>
       </#if>
-      <input type="text" class="required form-control"maxlength="30" name="cardNumber" onfocus="javascript:this.value = '';" value="${cardNumberDisplay!}" />
+      <input type="text" class="required form-control mb-2"maxlength="30" name="cardNumber" onfocus="javascript:this.value = '';" value="${cardNumberDisplay!}" />
     <#else>
-      <input type="text" class="form-control" maxlength="30" name="cardNumber" value="${creditCard.cardNumber!}"/>
+      <input type="text" class="form-control mb-2" maxlength="30" name="cardNumber" value="${creditCard.cardNumber!}"/>
     </#if>
   <#else>
-    <input type="text" class="form-control" maxlength="30" name="cardNumber" value="${creditCard.cardNumber!}"/>
+    <input type="text" class="form-control mb-2" maxlength="30" name="cardNumber" value="${creditCard.cardNumber!}"/>
   </#if>
   <#if showToolTip?has_content><span class="tooltip">${uiLabelMap.CommonRequired}</span></#if>
   </div>
@@ -131,7 +131,7 @@ under the License.
       <#assign expYear = expDate.substring(expDate.indexOf("/")+1)>
     </#if>
   </#if>
-<div class="row">
+<div class="row mb-2">
   <div class="col-sm-3">
   <select name="expMonth" class="custom-select form-control">
     <option>${uiLabelMap.CommonSelect}</option>
@@ -163,7 +163,7 @@ under the License.
 </div>
 </div>
 <label>${uiLabelMap.CommonDescription}</label>
-<div class="row">
+<div class="row mb-2">
   <div class="col-sm-6">
     <input type="text" size="20" class="form-control" name="description" value="${paymentMethod.description!}"/>
   </div>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl?rev=1855090&r1=1855089&r2=1855090&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl Sat Mar  9 06:41:12 2019
@@ -34,13 +34,13 @@ under the License.
         <div id="shippingSummaryPanel" class="card-body" style="display: none;">
           <div id="shippingCompleted">
             <h4>${uiLabelMap.OrderShipTo}</h4>
-            <ul>
+            <ul class="list-unstyled">
               <li id="completedShipToAttn"></li>
               <li id="completedShippingContactNumber"></li>
               <li id="completedEmailAddress"></li>
             </ul>
             <h4>${uiLabelMap.EcommerceLocation}</h4>
-            <ul>
+            <ul class="list-unstyled">
               <li id="completedShipToAddress1"></li>
               <li id="completedShipToAddress2"></li>
               <li id="completedShipToGeo"></li>
@@ -562,7 +562,7 @@ under the License.
           <form id="orderSubmitForm" action="<@ofbizUrl>onePageProcessOrder</@ofbizUrl>" method="post">
               <input type="button" id="processOrderButton" class="btn btn-primary" name="processOrderButton"
                   value="${uiLabelMap.OrderSubmitOrder}"/>
-              <input type="button" style="display: none;" id="processingOrderButton" name="processingOrderButton"
+              <input type="button" style="display: none;" class="btn btn-info" id="processingOrderButton" name="processingOrderButton"
                   value="${uiLabelMap.OrderSubmittingOrder}"/>
           </form>
         </div>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OrderItems.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OrderItems.ftl?rev=1855090&r1=1855089&r2=1855090&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OrderItems.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OrderItems.ftl Sat Mar  9 06:41:12 2019
@@ -249,19 +249,20 @@ under the License.
         <#-- now cancel reason and comment field -->
         <#if "Y" == maySelectItems?default("N") && (orderHeader.statusId != "ORDER_SENT" && orderItem.statusId != "ITEM_COMPLETED" && orderItem.statusId != "ITEM_CANCELLED" && pickedQty == 0)>
           <tr>
-            <td colspan="7">${uiLabelMap.OrderReturnReason}
-              <select name="irm_${orderItem.orderItemSeqId}" class="selectBox">
+            <td class="row"><label class="col-sm-3 col-form-label">${uiLabelMap.OrderReturnReason}</label>
+              <select name="irm_${orderItem.orderItemSeqId}" class="form-control custom-select col-sm-4">
                 <option value=""></option>
                 <#list orderItemChangeReasons as reason>
                   <option value="${reason.enumId}">${reason.get("description",locale)?default(reason.enumId)}</option>
                 </#list>
               </select>
-            ${uiLabelMap.CommonComments}
-              <input class="inputBox" type="text" name="icm_${orderItem.orderItemSeqId}" value="" size="30" maxlength="60"/>
+              <label class="col-sm-3 col-form-label">${uiLabelMap.CommonComments}</label>
+              <input class="form-control col-sm-2" type="text" name="icm_${orderItem.orderItemSeqId}" value="" size="30" maxlength="60"/>
             </td>
-            <td colspan="4"><a
+            <td>
+              <a
                 href="javascript:document.addCommonToCartForm.action='<@ofbizUrl>cancelOrderItem</@ofbizUrl>';document.addCommonToCartForm.submit()"
-                class="buttontext">${uiLabelMap.CommonCancel}</a>
+                class="d-inline-block mt-2">${uiLabelMap.CommonCancel}</a>
               <input type="hidden" name="orderItemSeqId" value="${orderItem.orderItemSeqId}"/>
             </td>
           </tr>