svn commit: r1819128 [1/2] - in /ofbiz/ofbiz-plugins/trunk/ecommerce: template/cart/ template/customer/ webapp/ecommerce/css/ widget/

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

svn commit: r1819128 [1/2] - in /ofbiz/ofbiz-plugins/trunk/ecommerce: template/cart/ template/customer/ webapp/ecommerce/css/ widget/

Deepak Dixit-5
Author: deepak
Date: Sat Dec 23 09:41:28 2017
New Revision: 1819128

URL: http://svn.apache.org/viewvc?rev=1819128&view=rev
Log:
Improved: Update markup of party profile page according to standard markup given by Bootstrap v4.0.0 (OFBIZ-10043)
Thanks Parakh Maheshwari for your contribution

Modified:
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ChangePassword.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditContactMech.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditCreditCard.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditEftAccount.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditGiftCard.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditPerson.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MessageList.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ViewProfile.ftl
    ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css
    ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CartScreens.xml
    ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CustomerScreens.xml

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl Sat Dec 23 09:41:28 2017
@@ -96,11 +96,11 @@ under the License.
   <div>
     <div>
       <form method="post"
-          action="<@ofbizUrl>additem<#if requestAttributes._CURRENT_VIEW_?has_content>/${requestAttributes._CURRENT_VIEW_}</#if></@ofbizUrl>"
+          action="<@ofbizUrl>additem<#if requestAttributes._CURRENT_VIEW_?has_content>/${requestAttributes._CURRENT_VIEW_}</#if></@ofbizUrl>" class="form-inline"
           name="quickaddform">
-        <fieldset>
-          ${uiLabelMap.EcommerceProductNumber}
-          <input type="text" class="inputBox" name="add_product_id" value="${requestParameters.add_product_id!}" />
+        <div class="form-group mb-2">
+          <label for="add_product_id" class="mr-2"> ${uiLabelMap.EcommerceProductNumber} </label>
+          <input type="text" class="form-control form-control-sm" name="add_product_id" id="add_product_id" value="${requestParameters.add_product_id!}" />
           <#-- check if rental data present  insert extra fields in Quick Add-->
           <#if (product?? && "ASSET_USAGE" == product.getString("productTypeId")
               ) || (product?? && "ASSET_USAGE_OUT_IN" == product.getString("productTypeId"))>
@@ -116,14 +116,14 @@ under the License.
             <input type="text" class="inputBox" size="3" name="reservPersons"
                 value="${requestParameters.reservPersons?default("1")}" />
           </#if>
-          ${uiLabelMap.CommonQuantity}:
-          <input type="text" class="inputBox" size="5" name="quantity"
+          <label for="quantity" class="mx-2">${uiLabelMap.CommonQuantity}:</label>
+          <input type="text" class="form-control form-control-sm" name="quantity" id="quantity"
               value="${requestParameters.quantity?default("1")}" />
-          <input type="submit" class="smallSubmit" value="${uiLabelMap.OrderAddToCart}" />
-          <#-- <a href="javascript:document.quickaddform.submit()" class="button">
+          <input type="submit" class="btn btn-outline-secondary btn-sm btn-sm" value="${uiLabelMap.OrderAddToCart}" />
+          <#-- <a href="javascript:document.quickaddform.submit()" class="btn btn-outline-secondary btn-sm">
                  <span>[${uiLabelMap.OrderAddToCart}]</span>
                </a> -->
-        </fieldset>
+        </div>
       </form>
     </div>
   </div>
@@ -138,44 +138,57 @@ under the License.
 <div>
   <div>
     <div>
-      <div class="lightbuttontextdisabled">
+      <ul class="list-inline">
         <#--<a href="<@ofbizUrl>main</@ofbizUrl>" class="lightbuttontext">
               [${uiLabelMap.EcommerceContinueShopping}]
             </a>-->
         <#if (shoppingCartSize > 0)>
-          <a href="javascript:document.cartform.submit();" class="submenutext">
+          <li class="list-inline-item">
+          <a href=";">
             ${uiLabelMap.EcommerceRecalculateCart}
           </a>
-          <a href="<@ofbizUrl>emptycart</@ofbizUrl>" class="submenutext">
+          </li>
+          <li class="list-inline-item">
+          <a href="<@ofbizUrl>emptycart</@ofbizUrl>">
             ${uiLabelMap.EcommerceEmptyCart}
           </a>
-          <a href="javascript:removeSelected();" class="submenutext">
+          </li>
+          <li class="list-inline-item">
+          <a href="javascript:removeSelected();">
             ${uiLabelMap.EcommerceRemoveSelected}
           </a>
+          </li>
         <#else>
+          <li class="list-inline-item">
           <span class="submenutextdisabled">${uiLabelMap.EcommerceRecalculateCart}</span>
+          </li>
+          <li class="list-inline-item">
           <span class="submenutextdisabled">${uiLabelMap.EcommerceEmptyCart}</span>
+          </li>
+          <li class="list-inline-item">
           <span class="submenutextdisabled">${uiLabelMap.EcommerceRemoveSelected}</span>
+          </li>
         </#if>
+      </ul>
+    </div>
+    <br />
+    <div class="row mb-2">
+      <div class="col-xl-12">
+        <span class="h3">${uiLabelMap.OrderShoppingCart}</span>
         <#if (shoppingCartSize > 0)>
-          <a href="<@ofbizUrl>checkoutoptions</@ofbizUrl>" class="submenutextright">
-            ${uiLabelMap.OrderCheckout}
-          </a>
+          <a class="btn btn-primary float-right" href="<@ofbizUrl>checkoutoptions</@ofbizUrl>">${uiLabelMap.OrderCheckout}</a>
         <#else>
-          <span class="submenutextrightdisabled">${uiLabelMap.OrderCheckout}</span>
+          <a class="btn btn-primary disabled float-right" href="#">${uiLabelMap.OrderCheckout}</a>
         </#if>
       </div>
     </div>
-    <br />
-    <h2>&nbsp;${uiLabelMap.OrderShoppingCart}</h2>
   </div>
   <div>
     <#if (shoppingCartSize > 0)>
       <form method="post" action="<@ofbizUrl>modifycart</@ofbizUrl>" name="cartform">
-        <fieldset>
           <input type="hidden" name="removeSelected" value="false" />
-          <table>
-            <thead>
+          <table class="table  table-responsive-sm">
+            <thead class="thead-dark">
               <tr>
                 <th></th>
                 <th scope="row">${uiLabelMap.OrderProduct}</th>
@@ -232,15 +245,16 @@ under the License.
                     <#if cartLine.getShoppingListId()??>
                       <#assign itemsFromList = true />
                       <a href="<@ofbizUrl>editShoppingList?shoppingListId=${cartLine.getShoppingListId()}</@ofbizUrl>"
-                          class="linktext">L</a>&nbsp;&nbsp;
+                          >L</a>&nbsp;&nbsp;
                     <#elseif cartLine.getIsPromo()>
                       <#assign promoItems = true />
-                      <a href="<@ofbizUrl>view/showcart</@ofbizUrl>" class="button">P</a>&nbsp;&nbsp;
+                      <span class="badge badge-success">P</span>
                     <#else>
                       &nbsp;
                     </#if>
                   </td>
                   <td>
+                  <div class="media">
                     <#if cartLine.getProductId()??>
                       <#-- product item -->
                       <#-- start code to display a small image of the product -->
@@ -258,15 +272,20 @@ under the License.
                       <#if smallImageUrl?string?has_content>
                         <a href="<@ofbizCatalogAltUrl productId=parentProductId/>">
                           <img src="<@ofbizContentUrl>${requestAttributes.contentPathPrefix!}${smallImageUrl}</@ofbizContentUrl>"
-                              alt="Product Image" class="imageborder" />
+                              alt="Product Image" class="cart-image mr-3" />
                         </a>
                       </#if>
                       <#-- end code to display a small image of the product -->
                       <#-- ${cartLineIndex} - -->
+
+                    <div class="media-body">
+                      <h3 class="mt-0">
                       <a href="<@ofbizCatalogAltUrl productId=parentProductId/>"
-                          class="linktext">${cartLine.getProductId()} -
+                          >${cartLine.getProductId()} -
                         ${cartLine.getName(dispatcher)!}
-                      </a> : ${cartLine.getDescription(dispatcher)!}
+                      </a>
+                       </h3>
+                        ${cartLine.getDescription(dispatcher)!}
                       <#-- For configurable products, the selected options are shown -->
                       <#if cartLine.getConfigWrapper()??>
                         <#assign selectedOptions = cartLine.getConfigWrapper().getSelectedOptions()! />
@@ -331,12 +350,14 @@ under the License.
                             requestAttributes.locale) />
                         <li>
                           <a href="<@ofbizUrl>setDesiredAlternateGwpProductId?alternateGwpProductId=${alternativeOptionProductId}&alternateGwpLine=${cartLineIndex}</@ofbizUrl>"
-                              class="button">Select: ${alternativeOptionName?default(alternativeOptionProductId)}</a>
+                              class="btn btn-outline-secondary btn-sm">Select: ${alternativeOptionName?default(alternativeOptionProductId)}</a>
                         </li>
                       </#list>
                       </ul>
                       -->
                     </#if>
+                    </div>
+                    </div>
                   </td>
 
                   <#-- gift wrap option -->
@@ -346,7 +367,7 @@ under the License.
                     <#assign selectedOption = cartLine.getAdditionalProductFeatureAndAppl("GIFT_WRAP")! />
                     <#if giftWrapOption?has_content>
                       <select class="selectBox" name="option^GIFT_WRAP_${cartLineIndex}"
-                          onchange="javascript:document.cartform.submit()">
+                          onchange="">
                         <option value="NO^">${uiLabelMap.EcommerceNoGiftWrap}</option>
                         <#list giftWrapOption as option>
                           <option value="${option.productFeatureId}"
@@ -358,7 +379,7 @@ under the License.
                       </select>
                     <#elseif showNoGiftWrapOptions>
                       <select class="selectBox" name="option^GIFT_WRAP_${cartLineIndex}"
-                          onchange="javascript:document.cartform.submit()">
+                          onchange="">
                         <option value="">${uiLabelMap.EcommerceNoGiftWrap}</option>
                       </select>
                     <#else>
@@ -426,13 +447,13 @@ under the License.
                               <td>--</td>
                               <td>
                         </#if>
-                              <input size="6" class="inputBox" type="text" name="update_${cartLineIndex}"
+                              <input class="inputBox form-control" type="number" name="update_${cartLineIndex}"
                                   value="${cartLine.getQuantity()?string.number}" />
                               </td>
                             </tr>
                           </table>
                         <#else><#-- fixedAssetExist -->
-                          <input size="6" class="inputBox" type="text" name="update_${cartLineIndex}"
+                          <input class="inputBox form-control" type="number" name="update_${cartLineIndex}"
                               value="${cartLine.getQuantity()?string.number}" />
                         </#if>
                     </#if>
@@ -451,22 +472,27 @@ under the License.
               </#list>
             </tbody>
           </table>
-          <table>
+          <table class="table table-responsive-sm">
+            <thead class="thead-light">
+             <tr>
+               <th colspan="3">
+                 Summary:
+               </th>
+             </tr>
+            </thead>
             <#if shoppingCart.getAdjustments()?has_content>
               <tr>
                 <th>${uiLabelMap.CommonSubTotal}:</th>
-                <td>
+                <td colspan="3">
                   <@ofbizCurrency amount=shoppingCart.getDisplaySubTotal() isoCode=shoppingCart.getCurrency()/>
                 </td>
-                <td>&nbsp;</td>
               </tr>
               <#if (shoppingCart.getDisplayTaxIncluded() > 0.0)>
                 <tr>
                   <th>${uiLabelMap.OrderSalesTaxIncluded}:</th>
-                  <td>
+                  <td colspan="3">
                     <@ofbizCurrency amount=shoppingCart.getDisplayTaxIncluded() isoCode=shoppingCart.getCurrency()/>
                   </td>
-                  <td>&nbsp;</td>
                 </tr>
               </#if>
               <#list shoppingCart.getAdjustments() as cartAdjustment>
@@ -475,44 +501,42 @@ under the License.
                   <th>
                     ${uiLabelMap.EcommerceAdjustment} - ${adjustmentType.get("description",locale)!}
                     <#if cartAdjustment.productPromoId?has_content>
-                      <a href="<@ofbizUrl>showPromotionDetails?productPromoId=${cartAdjustment.productPromoId}</@ofbizUrl>"
-                          class="button">
+                      <a href="<@ofbizUrl>showPromotionDetails?productPromoId=${cartAdjustment.productPromoId}</@ofbizUrl>">
                         ${uiLabelMap.CommonDetails}
                       </a>
                     </#if>:
                   </th>
-                  <td>
+                  <td colspan="2">
                     <@ofbizCurrency amount=Static["org.apache.ofbiz.order.order.OrderReadHelper"]
                         .calcOrderAdjustment(cartAdjustment,
                         shoppingCart.getSubTotal()) isoCode=shoppingCart.getCurrency()/>
                   </td>
-                  <td>&nbsp;</td>
                 </tr>
               </#list>
             </#if>
             <tr>
-              <th>${uiLabelMap.EcommerceCartTotal}:</th>
+              <th colspan="2">${uiLabelMap.EcommerceCartTotal}:</th>
               <td>
                 <@ofbizCurrency amount=shoppingCart.getDisplayGrandTotal() isoCode=shoppingCart.getCurrency()/>
               </td>
             </tr>
             <#if itemsFromList>
               <tr>
-                <td>L - ${uiLabelMap.EcommerceItemsfromShopingList}.</td>
+                <td colspan="3">L - ${uiLabelMap.EcommerceItemsfromShopingList}.</td>
               </tr>
             </#if>
             <#if promoItems>
               <tr>
-                <td>P - ${uiLabelMap.EcommercePromotionalItems}.</td>
+                <td colspan="3"><span class="badge badge-success">P</span> - ${uiLabelMap.EcommercePromotionalItems}.</td>
               </tr>
             </#if>
             <#if !itemsFromList && !promoItems>
               <tr>
-                <td>&nbsp;</td>
+                <td colspan="3">&nbsp;</td>
               </tr>
             </#if>
             <tr>
-              <td>
+              <td colspan="3">
                 <#if sessionAttributes.userLogin?has_content && sessionAttributes.userLogin.userLoginId != "anonymous">
                   <select name="shoppingListId" class="selectBox">
                     <#if shoppingLists?has_content>
@@ -524,12 +548,12 @@ under the License.
                     <option value="">${uiLabelMap.OrderNewShoppingList}</option>
                   </select>
                   &nbsp;&nbsp;
-                  <a href="javascript:addToList();" class="button">
+                  <a href="javascript:addToList();" class="btn btn-outline-secondary btn-sm">
                     ${uiLabelMap.EcommerceAddSelectedtoList}
                   </a>&nbsp;&nbsp;
                 <#else>
                   ${uiLabelMap.OrderYouMust}
-                  <a href="<@ofbizUrl>checkLogin/showcart</@ofbizUrl>" class="button">
+                  <a href="<@ofbizUrl>checkLogin/showcart</@ofbizUrl>" class="btn btn-outline-secondary btn-sm">
                     ${uiLabelMap.CommonBeLogged}
                   </a>
                   ${uiLabelMap.OrderToAddSelectedItemsToShoppingList}.&nbsp;
@@ -537,17 +561,17 @@ under the License.
               </td>
             </tr>
             <tr>
-              <td>
+              <td colspan="3">
                 <#if sessionAttributes.userLogin?has_content && sessionAttributes.userLogin.userLoginId != "anonymous">
                   &nbsp;&nbsp;
-                  <a href="<@ofbizUrl>createCustRequestFromCart</@ofbizUrl>" class="button">
+                  <a href="<@ofbizUrl>createCustRequestFromCart</@ofbizUrl>" class="btn btn-outline-secondary btn-sm">
                     ${uiLabelMap.OrderCreateCustRequestFromCart}
                   </a>&nbsp;&nbsp;&nbsp;&nbsp;
-                  <a href="<@ofbizUrl>createQuoteFromCart</@ofbizUrl>" class="button">
+                  <a href="<@ofbizUrl>createQuoteFromCart</@ofbizUrl>" class="btn btn-outline-secondary btn-sm">
                     ${uiLabelMap.OrderCreateQuoteFromCart}</a>&nbsp;&nbsp;
                 <#else>
                   ${uiLabelMap.OrderYouMust}
-                  <a href="<@ofbizUrl>checkLogin/showcart</@ofbizUrl>" class="button">
+                  <a href="<@ofbizUrl>checkLogin/showcart</@ofbizUrl>" class="btn btn-outline-secondary btn-sm">
                     ${uiLabelMap.CommonBeLogged}
                   </a>
                   ${uiLabelMap.EcommerceToOrderCreateCustRequestFromCart}.&nbsp;
@@ -556,13 +580,14 @@ under the License.
             </tr>
             <tr>
               <td>
+              <label class="form-check-label">
                 <input type="checkbox" onclick="javascript:document.cartform.submit()"
                     name="alwaysShowcart" <#if shoppingCart.viewCartOnAdd()>checked="checked"</#if>/>
                 ${uiLabelMap.EcommerceAlwaysViewCartAfterAddingAnItem}.
+              </label>
               </td>
             </tr>
           </table>
-        </fieldset>
       </form>
     <#else>
       <h2>${uiLabelMap.EcommerceYourShoppingCartEmpty}.</h2>
@@ -571,7 +596,8 @@ under the License.
     </div>
 </div>
 
-<div>
+<div class="row">
+  <div class="col-xl-6">
   <div>
     <h2>${uiLabelMap.ProductPromoCodes}</h2>
   </div>
@@ -579,9 +605,12 @@ under the License.
     <div>
       <form method="post"
           action="<@ofbizUrl>addpromocode<#if requestAttributes._CURRENT_VIEW_?has_content>/${requestAttributes._CURRENT_VIEW_}</#if></@ofbizUrl>" name="addpromocodeform">
-        <fieldset>
-          <input type="text" class="inputBox" size="15" name="productPromoCodeId" value="" />
-          <input type="submit" class="smallSubmit" value="${uiLabelMap.OrderAddCode}" />
+        <div class="input-group">
+          <input type="text" class="form-control form-control-sm" size="15" name="productPromoCodeId" value="" />
+           <span class="input-group-btn">
+             <input type="submit" class="btn btn-outline-secondary btn-sm" value="${uiLabelMap.OrderAddCode}" />
+           </span>
+        </div>
           <#assign productPromoCodeIds = (shoppingCart.getProductPromoCodesEntered())! />
           <#if productPromoCodeIds?has_content>
             ${uiLabelMap.ProductPromoCodesEntered}
@@ -591,14 +620,14 @@ under the License.
               </#list>
             </ul>
           </#if>
-        </fieldset>
+
       </form>
     </div>
   </div>
-</div>
+  </div>
 
 <#if showPromoText?? && showPromoText>
-  <div>
+   <div class="col-xl-6">
     <div>
       <h2>${uiLabelMap.OrderSpecialOffers}</h2>
     </div>
@@ -608,17 +637,18 @@ under the License.
         <#list productPromos as productPromo>
           <li>
             <a href="<@ofbizUrl>showPromotionDetails?productPromoId=${productPromo.productPromoId}</@ofbizUrl>"
-                class="linktext">[${uiLabelMap.CommonDetails}]</a>
+                >[${uiLabelMap.CommonDetails}]</a>
               ${StringUtil.wrapString(productPromo.promoText!)}
           </li>
         </#list>
       </ul>
       <div>
-        <a href="<@ofbizUrl>showAllPromotions</@ofbizUrl>" class="button">${uiLabelMap.OrderViewAllPromotions}</a>
+        <a href="<@ofbizUrl>showAllPromotions</@ofbizUrl>" class="btn btn-outline-secondary btn-sm">${uiLabelMap.OrderViewAllPromotions}</a>
       </div>
     </div>
   </div>
 </#if>
+</div>
 
 <#if associatedProducts?has_content>
   <div>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ChangePassword.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ChangePassword.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ChangePassword.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ChangePassword.ftl Sat Dec 23 09:41:28 2017
@@ -16,41 +16,47 @@ KIND, either express or implied.  See th
 specific language governing permissions and limitations
 under the License.
 -->
-<div class="screenlet">
-  <div class="screenlet-title-bar">
+<div class="card">
+  <div class="card-header">
     <h3>${uiLabelMap.PartyChangePassword}</h3>
-  </div>&nbsp;
-  <a id="CommonGoBack1" href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>&nbsp;
-  <a id="CommonSave1" href="javascript:document.getElementById('changepasswordform').submit()" class="button">
+  </div>
+  <div class="card-body">
+    <a id="CommonGoBack1" href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+    <a id="CommonSave1" href="javascript:document.getElementById('changepasswordform').submit()" class="btn btn-outline-secondary">
     ${uiLabelMap.CommonSave}
-  </a>
-  <p/>  
-  <div class="screenlet-body">
+    </a>
     <form id="changepasswordform" method="post" action="<@ofbizUrl>updatePassword/${donePage}</@ofbizUrl>">
-      <fieldset>
-        <div>
-          <label for="currentPassword">${uiLabelMap.PartyOldPassword}</label>
-          <input type="password" class='inputBox' name="currentPassword" autocomplete="off" id="currentPassword" maxlength="20" />*
-        </div>
-        <div>
-          <label for="newPassword">${uiLabelMap.PartyNewPassword}</label>
-          <input type="password" class='inputBox' name="newPassword" autocomplete="off" id="newPassword" maxlength="20" />*
-        </div>
-        <div>
-          <label for="newPasswordVerify">${uiLabelMap.PartyNewPasswordVerify}</label>
-          <input type="password" class='inputBox' name="newPasswordVerify" autocomplete="off" id="newPasswordVerify" maxlength="20" />*
-        </div>
-        <div>
-          <label for="passwordHint">${uiLabelMap.PartyPasswordHint}</label>
-          <input type="text" class='inputBox' maxlength="100" name="passwordHint"
-              id="passwordHint" value="${userLoginData.passwordHint!}" />
+          <label class="mt-4 asteriskInput" for="currentPassword">${uiLabelMap.PartyOldPassword}</label>
+          <div class="row">
+            <div class="col-sm-6">
+              <input type="password" class="form-control" name="currentPassword" autocomplete="off" id="currentPassword"/>
+            </div>
+          </div>
+          <label  class="required" for="newPassword">${uiLabelMap.PartyNewPassword}</label>
+          <div class="row">
+            <div class="col-sm-6">
+              <input type="password" class="form-control" name="newPassword" autocomplete="off" id="newPassword"/>
+            </div>
+          </div>
+          <label class="required" for="newPasswordVerify">${uiLabelMap.PartyNewPasswordVerify}</label>
+          <div class="row">
+            <div class="col-sm-6">
+                <input type="password" class="form-control" name="newPasswordVerify" autocomplete="off" id="newPasswordVerify"/>
+            </div>
+          </div>
+          <label class="required" for="passwordHint">${uiLabelMap.PartyPasswordHint}</label>
+          <div class="row">
+            <div class="col-sm-6">
+                <input type="text" class="form-control" name="passwordHint" id="passwordHint" value="${userLoginData.passwordHint!}"/>
+            </div>
+          </div>
+        <div class="form-group">
+          <label>${uiLabelMap.CommonFieldsMarkedAreRequired}</label>
         </div>
-        <label>${uiLabelMap.CommonFieldsMarkedAreRequired}</label>
-      </fieldset>
     </form>
-    <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">[${uiLabelMap.CommonGoBack}]</a>
-    <a href="javascript:document.getElementById('changepasswordform').submit()" class="button">
-      [${uiLabelMap.CommonSave}]
+    <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+    <a href="javascript:document.getElementById('changepasswordform').submit()" class="btn btn-outline-secondary">
+      ${uiLabelMap.CommonSave}
     </a>
   </div>
 </div>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditContactMech.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditContactMech.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditContactMech.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditContactMech.ftl Sat Dec 23 09:41:28 2017
@@ -18,30 +18,22 @@ under the License.
 -->
 <#if canNotView>
 <h3>${uiLabelMap.PartyContactInfoNotBelongToYou}.</h3>
-<a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonBack}</a>
+<a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonBack}</a>
 <#else>
   <#if !contactMech??>
   <#-- When creating a new contact mech, first select the type, then actually create -->
     <#if !requestParameters.preContactMechTypeId?? && !preContactMechTypeId??>
     <h2>${uiLabelMap.PartyCreateNewContactInfo}</h2>
-    <form method="post" action='<@ofbizUrl>editcontactmechnosave</@ofbizUrl>' name="createcontactmechform">
-      <div>
-        <table width="90%" border="0" cellpadding="2" cellspacing="0">
-          <tr>
-            <td>${uiLabelMap.PartySelectContactType}:</td>
-            <td>
-              <select name="preContactMechTypeId" class='selectBox'>
+    <form method="post" class="form-inline" action='<@ofbizUrl>editcontactmechnosave</@ofbizUrl>' name="createcontactmechform">
+            <label class="mr-2">${uiLabelMap.PartySelectContactType}:</label>
+              <select name="preContactMechTypeId" class="form-control custom-select mr-2">
                 <#list contactMechTypes as contactMechType>
                   <option value='${contactMechType.contactMechTypeId}'>
                     ${contactMechType.get("description",locale)}
                   </option>
                 </#list>
-              </select>&nbsp;
-              <a href="javascript:document.createcontactmechform.submit()" class="button">${uiLabelMap.CommonCreate}</a>
-            </td>
-          </tr>
-        </table>
-      </div>
+              </select>
+              <a href="javascript:document.createcontactmechform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonCreate}</a>
     </form>
     <#-- <p><h3>ERROR: Contact information with ID "${contactMechId}" not found!</h3></p> -->
     </#if>
@@ -50,11 +42,10 @@ under the License.
   <#if contactMechTypeId??>
     <#if !contactMech??>
     <h2>${uiLabelMap.PartyCreateNewContactInfo}</h2>
-    <a href='<@ofbizUrl>${donePage}</@ofbizUrl>' class="button">${uiLabelMap.CommonGoBack}</a>
-    <a href="javascript:document.editcontactmechform.submit()" class="button">${uiLabelMap.CommonSave}</a>
+    <a href='<@ofbizUrl>${donePage}</@ofbizUrl>' class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+    <a href="javascript:document.editcontactmechform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
     <table width="90%" border="0" cellpadding="2" cellspacing="0">
     <form method="post" action='<@ofbizUrl>${reqName}</@ofbizUrl>' name="editcontactmechform" id="editcontactmechform">
-    <div>
       <input type='hidden' name='contactMechTypeId' value='${contactMechTypeId}'/>
       <#if contactMechPurposeType??>
         <div>(${uiLabelMap.PartyNewContactHavePurpose} "${contactMechPurposeType.get("description",locale)!}")</div>
@@ -70,137 +61,112 @@ under the License.
       </#if>
     <#else>
       <h2>${uiLabelMap.PartyEditContactInfo}</h2>
-      <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>
-      <a href="javascript:document.editcontactmechform.submit()" class="button">${uiLabelMap.CommonSave}</a>
-    <table width="90%" border="0" cellpadding="2" cellspacing="0">
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyContactPurposes}</td>
-        <td>&nbsp;</td>
-        <td>
-          <table border="0" cellspacing="1">
+      <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+      <a href="javascript:document.editcontactmechform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
+      <p class="my-2"><strong>${uiLabelMap.PartyContactPurposes}</strong></p>
+      <div class="row">
+        <div class="col-sm-6">
             <#list partyContactMechPurposes! as partyContactMechPurpose>
               <#assign contactMechPurposeType = partyContactMechPurpose.getRelatedOne("ContactMechPurposeType", true) />
-              <tr>
-                <td>
-                  <#if contactMechPurposeType??>
-                  ${contactMechPurposeType.get("description",locale)}
-                  <#else>
-                  ${uiLabelMap.PartyPurposeTypeNotFound}: "${partyContactMechPurpose.contactMechPurposeTypeId}"
-                  </#if>
-                  (${uiLabelMap.CommonSince}:${partyContactMechPurpose.fromDate.toString()})
-                  <#if partyContactMechPurpose.thruDate??>(${uiLabelMap.CommonExpires}
-                    :${partyContactMechPurpose.thruDate.toString()})</#if>
-                </td>
-                <td>
-                  <form name="deletePartyContactMechPurpose_${partyContactMechPurpose.contactMechPurposeTypeId}"
+                  <form name="deletePartyContactMechPurpose_${partyContactMechPurpose.contactMechPurposeTypeId}" class="my-2"
                         method="post" action="<@ofbizUrl>deletePartyContactMechPurpose</@ofbizUrl>">
-                    <div>
+                    <div class="form-group">
+                      <label class="my-2">
+                        <#if contactMechPurposeType??>
+                        ${contactMechPurposeType.get("description",locale)}
+                        <#else>
+                        ${uiLabelMap.PartyPurposeTypeNotFound}: "${partyContactMechPurpose.contactMechPurposeTypeId}"
+                        </#if>
+                        (${uiLabelMap.CommonSince}:${partyContactMechPurpose.fromDate.toString()})
+                        <#if partyContactMechPurpose.thruDate??>(${uiLabelMap.CommonExpires}
+                          :${partyContactMechPurpose.thruDate.toString()})</#if>
+                      </label>
                       <input type="hidden" name="contactMechId" value="${contactMechId}"/>
                       <input type="hidden" name="contactMechPurposeTypeId"
                              value="${partyContactMechPurpose.contactMechPurposeTypeId}"/>
                       <input type="hidden" name="fromDate" value="${partyContactMechPurpose.fromDate}"/>
                       <input type="hidden" name="useValues" value="true"/>
                       <a href='javascript:document.deletePartyContactMechPurpose_${partyContactMechPurpose.contactMechPurposeTypeId}.submit()'
-                         class='button'>&nbsp;${uiLabelMap.CommonDelete}&nbsp;</a>
+                         class="btn btn-outline-secondary">${uiLabelMap.CommonDelete}</a>
                     </div>
                   </form>
-                </td>
-              </tr>
             </#list>
             <#if purposeTypes?has_content>
-              <tr>
-                <td>
-                  <form method="post" action='<@ofbizUrl>createPartyContactMechPurpose</@ofbizUrl>'
+                  <form method="post" class="form-inline" action='<@ofbizUrl>createPartyContactMechPurpose</@ofbizUrl>'
                         name='newpurposeform'>
-                    <div>
                       <input type="hidden" name="contactMechId" value="${contactMechId}"/>
                       <input type="hidden" name="useValues" value="true"/>
-                      <select name='contactMechPurposeTypeId' class='selectBox'>
-                        <option></option>
+                      <select name='contactMechPurposeTypeId' class="custom-select form-control">
+                        <option>${uiLabelMap.CommonSelect}</option>
                         <#list purposeTypes as contactMechPurposeType>
                           <option value='${contactMechPurposeType.contactMechPurposeTypeId}'>
                             ${contactMechPurposeType.get("description",locale)}
                           </option>
                         </#list>
                       </select>
-                    </div>
+                    <a href='javascript:document.newpurposeform.submit()' class="btn btn-outline-secondary">${uiLabelMap.PartyAddPurpose}</a>
                   </form>
-                </td>
-                <td>
-                  <a href='javascript:document.newpurposeform.submit()' class='button'>${uiLabelMap.PartyAddPurpose}</a>
-                </td>
-              </tr>
             </#if>
-          </table>
-        </td>
-      </tr>
+          </div>
+        </div>
     <form method="post" action='<@ofbizUrl>${reqName}</@ofbizUrl>' name="editcontactmechform" id="editcontactmechform">
-    <div>
       <input type="hidden" name="contactMechId" value='${contactMechId}'/>
       <input type="hidden" name="contactMechTypeId" value='${contactMechTypeId}'/>
     </#if>
 
     <#if contactMechTypeId = "POSTAL_ADDRESS">
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyToName}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="30" maxlength="60" name="toName"
+      <div class="row">
+        <div class="col-sm-6">
+          <label class="my-2">${uiLabelMap.PartyToName}</label>
+          <input type="text" class="form-control" name="toName"
               value="${postalAddressData.toName!}"/>
-        </td>
-      </tr>
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyAttentionName}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="30" maxlength="60" name="attnName"
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <label class="my-2">${uiLabelMap.PartyAttentionName}</label>
+          <input type="text" class="form-control" name="attnName"
               value="${postalAddressData.attnName!}"/>
-        </td>
-      </tr>
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyAddressLine1}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="30" maxlength="30" name="address1"
-              value="${postalAddressData.address1!}"/>*
-        </td>
-      </tr>
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyAddressLine2}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="30" maxlength="30" name="address2"
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <label class="my-2">${uiLabelMap.PartyAddressLine1}</label>
+          <input type="text" class="form-control" name="address1"
+              value="${postalAddressData.address1!}"/>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <label class="my-2">${uiLabelMap.PartyAddressLine2}</label>
+          <input type="text" class="form-control" name="address2"
               value="${postalAddressData.address2!}"/>
-        </td>
-      </tr>
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyCity}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="30" maxlength="30" name="city" value="${postalAddressData.city!}"/>*
-        </td>
-      </tr>
-      <tr>
-        <td align="right" valign="top"> ${uiLabelMap.PartyState}
-        <td>&nbsp;</td>
-        <td>
-          <select name="stateProvinceGeoId" id="editcontactmechform_stateProvinceGeoId">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+        <label class="my-2">${uiLabelMap.PartyCity}</label>
+          <input type="text" class="form-control" name="city" value="${postalAddressData.city!}"/>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <label class="my-2"> ${uiLabelMap.PartyState}</label>
+          <select name="stateProvinceGeoId" id="editcontactmechform_stateProvinceGeoId" class="custom-select form-control">
           </select>
-        </td>
-      </tr>
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyZipCode}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="12" maxlength="10" name="postalCode"
-                 value="${postalAddressData.postalCode!}"/>*
-        </td>
-      </tr>
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.CommonCountry}</td>
-        <td>&nbsp;</td>
-        <td>
-          <select name="countryGeoId" id="editcontactmechform_countryGeoId">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <label class="my-2">${uiLabelMap.PartyZipCode}</label>
+          <input type="text" class="form-control" name="postalCode"
+                 value="${postalAddressData.postalCode!}"/>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <label class="my-2">${uiLabelMap.CommonCountry}</label>
+          <select name="countryGeoId" class="custom-select form-control" id="editcontactmechform_countryGeoId">
             ${screens.render("component://common/widget/CommonScreens.xml#countries")}
             <#if (postalAddress??) && (postalAddress.countryGeoId??)>
               <#assign defaultCountryGeoId = postalAddress.countryGeoId>
@@ -214,55 +180,54 @@ under the License.
               ${countryGeo.get("geoName",locale)}
             </option>
           </select>
-        </td>
-      </tr>
+        </div>
+      </div>
     <#elseif contactMechTypeId = "TELECOM_NUMBER">
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyPhoneNumber}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="4" maxlength="10" name="countryCode"
-              value="${telecomNumberData.countryCode!}"/>-&nbsp;
-          <input type="text" class='inputBox' size="4" maxlength="10" name="areaCode"
-              value="${telecomNumberData.areaCode!}"/>-&nbsp;
-          <input type="text" class='inputBox' size="15" maxlength="15" name="contactNumber"
-              value="${telecomNumberData.contactNumber!}"/>&nbsp;
-          ${uiLabelMap.PartyExtension}&nbsp;
-          <input type="text" class='inputBox' size="6" maxlength="10"
-              name="extension" value="${partyContactMechData.extension!}"/>
-        </td>
-      </tr>
-      <tr>
-        <td align="right" valign="top"></td>
-        <td>&nbsp;</td>
-        <td>[${uiLabelMap.CommonCountryCode}] [${uiLabelMap.PartyAreaCode}] [${uiLabelMap.PartyContactNumber}]
-          [${uiLabelMap.PartyExtension}]
-        </td>
-      </tr>
+    <div class="form-group">
+      <label class="my-2">${uiLabelMap.PartyPhoneNumber}</label>
+      <div class="row">
+        <div class="col-sm-2">
+          <input type="text" class="form-control" name="countryCode"
+              value="${telecomNumberData.countryCode!}" placeholder="${uiLabelMap.CommonCountryCode}"/>
+        </div>
+        <label class="my-2">-</label>
+        <div class="col-sm-2">
+          <input type="text" class="form-control" name="areaCode"
+              value="${telecomNumberData.areaCode!}" placeholder="${uiLabelMap.PartyAreaCode}"/>
+        </div>
+        <label class="my-2">-</label>
+        <div class="col-sm-2">
+          <input type="text" class="form-control" name="contactNumber"
+              value="${telecomNumberData.contactNumber!}" placeholder="${uiLabelMap.PartyContactNumber}"/>
+        </div>
+        <label class="my-2">-</label>
+        <div class="col-sm-2">
+          <input type="text" class="form-control"
+              name="extension" value="${partyContactMechData.extension!}" placeholder="${uiLabelMap.PartyExtension}"/>
+        </div>
+      </div>
+    </div>
     <#elseif contactMechTypeId = "EMAIL_ADDRESS">
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.PartyEmailAddress}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="60" maxlength="255" name="emailAddress"
-              value="<#if tryEntity>${contactMech.infoString!}<#else>${requestParameters.emailAddress!}</#if>"/>*
-        </td>
-      </tr>
+      <div class="row">
+        <div class="col-sm-6">
+          <label class="my-2">${uiLabelMap.PartyEmailAddress}</label >
+          <input type="text" class="form-control" name="emailAddress"
+              value="<#if tryEntity>${contactMech.infoString!}<#else>${requestParameters.emailAddress!}</#if>"/>
+        </div>
+      </div>
     <#else>
-      <tr>
-        <td align="right" valign="top">${contactMechType.get("description",locale)!}</td>
-        <td>&nbsp;</td>
-        <td>
-          <input type="text" class='inputBox' size="60" maxlength="255" name="infoString"
-              value="${contactMechData.infoString!}"/>*
-        </td>
-      </tr>
+      <div class="row">
+        <div class="col-sm-6">
+        <label class="my-2">${contactMechType.get("description",locale)!}</label>
+        <input type="text" class="form-control" name="infoString"
+              value="${contactMechData.infoString!}"/>
+        </div>
+      </div>
     </#if>
-    <tr>
-      <td align="right" valign="top">${uiLabelMap.PartyAllowSolicitation}?</td>
-      <td>&nbsp;</td>
-      <td>
-        <select name="allowSolicitation" class='selectBox'>
+    <div class="row">
+      <div class="col-sm-6">
+        <label class="my-2">${uiLabelMap.PartyAllowSolicitation}?</label>
+        <select name="allowSolicitation" class=" form-control custom-select mb-2">
           <#if ("Y" == ((partyContactMechData.allowSolicitation)!""))>
             <option value="Y">${uiLabelMap.CommonY}</option></#if>
           <#if ("N" == ((partyContactMechData.allowSolicitation)!""))>
@@ -271,14 +236,12 @@ under the License.
           <option value="Y">${uiLabelMap.CommonY}</option>
           <option value="N">${uiLabelMap.CommonN}</option>
         </select>
-      </td>
-    </tr>
-  </div>
+      </div>
+    </div>
   </form>
-  </table>
-  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>
-  <a href="javascript:document.editcontactmechform.submit()" class="button">${uiLabelMap.CommonSave}</a>
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary mr-1">${uiLabelMap.CommonGoBack}</a>
+  <a href="javascript:document.editcontactmechform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
   <#else>
-    <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>
+    <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary mt-2">${uiLabelMap.CommonGoBack}</a>
   </#if>
 </#if>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditCreditCard.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditCreditCard.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditCreditCard.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditCreditCard.ftl Sat Dec 23 09:41:28 2017
@@ -19,7 +19,7 @@ under the License.
 
 <#if canNotView>
   <h3>${uiLabelMap.AccountingCardInfoNotBelongToYou}.</h3>
-  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
 <#else>
   <#if !creditCard??>
     <h2>${uiLabelMap.AccountingAddNewCreditCard}</h2>
@@ -28,61 +28,47 @@ under the License.
   <#else>
     <h2>${uiLabelMap.AccountingEditCreditCard}</h2>
     <form method="post" action="<@ofbizUrl>updateCreditCard?DONE_PAGE=${donePage}</@ofbizUrl>" name="editcreditcardform">
-    <div>
       <input type="hidden" name="paymentMethodId" value="${paymentMethodId}"/>
-  </#if>&nbsp;
-  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>&nbsp;
-  <a href="javascript:document.editcreditcardform.submit()" class="button">${uiLabelMap.CommonSave}</a>
-  <p/>
-  <table width="90%" border="0" cellpadding="2" cellspacing="0">
-  ${screens.render("component://accounting/widget/CommonScreens.xml#creditCardFields")}
-    <tr>
-      <td align="right" valign="top">${uiLabelMap.PartyBillingAddress}</td>
-      <td>&nbsp;</td>
-      <td>
+  </#if>
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+  <a href="javascript:document.editcreditcardform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
+    ${screens.render("component://ecommerce/widget/CustomerScreens.xml#creditCardFields")}
+      <label class="mb-2">${uiLabelMap.PartyBillingAddress}</label>
       <#-- Removed because is confusing, can add but would have to come back here with all data populated as before...
       <a href="<@ofbizUrl>editcontactmech</@ofbizUrl>" class="buttontext">
         [Create New Address]</a>&nbsp;&nbsp;
       -->
-        <table width="100%" border="0" cellpadding="1">
           <#assign hasCurrent = false />
           <#if curPostalAddress?has_content>
             <#assign hasCurrent = true />
-            <tr>
-              <td align="right" valign="top">
+            <div class="row">
+              <div class="col-sm-6">
                 <input type="radio" name="contactMechId" value="${curContactMechId}" checked="checked"/>
-              </td>
-              <td valign="top">
-              ${uiLabelMap.PartyUseCurrentAddress}:
+                <label>${uiLabelMap.PartyUseCurrentAddress}:</label>
                 <#list curPartyContactMechPurposes as curPartyContactMechPurpose>
                   <#assign curContactMechPurposeType =
                       curPartyContactMechPurpose.getRelatedOne("ContactMechPurposeType", true) />
-                  <div>
                     ${curContactMechPurposeType.get("description",locale)!}
                     <#if curPartyContactMechPurpose.thruDate??>
                       ((${uiLabelMap.CommonExpire}:${curPartyContactMechPurpose.thruDate.toString()})
                     </#if>
-                  </div>
                 </#list>
-                <div>
                   <#if curPostalAddress.toName??>${uiLabelMap.CommonTo}: ${curPostalAddress.toName}<br/></#if>
                   <#if curPostalAddress.attnName??>${uiLabelMap.PartyAddrAttnName}: ${curPostalAddress.attnName}
-                    <br/>
                   </#if>
-                  ${curPostalAddress.address1!}<br/>
+                  ${curPostalAddress.address1!}
                   <#if curPostalAddress.address2??>${curPostalAddress.address2}<br/></#if>
                   ${curPostalAddress.city}
                   <#if curPostalAddress.stateProvinceGeoId?has_content>,&nbsp;
                     ${curPostalAddress.stateProvinceGeoId}
                   </#if>&nbsp;${curPostalAddress.postalCode}
-                  <#if curPostalAddress.countryGeoId??><br/>${curPostalAddress.countryGeoId}</#if>
+                  <#if curPostalAddress.countryGeoId??>${curPostalAddress.countryGeoId}</#if>
                   <div>(${uiLabelMap.CommonUpdated}:&nbsp;${(curPartyContactMech.fromDate.toString())!})</div>
                   <#if curPartyContactMech.thruDate??>
-                    <div>${uiLabelMap.CommonDelete}:&nbsp;${curPartyContactMech.thruDate.toString()}
+                    ${uiLabelMap.CommonDelete}:&nbsp;${curPartyContactMech.thruDate.toString()}
                   </#if>
-                </div>
-              </td>
-            </tr>
+              </div>
+            </div>
           <#else>
             <#-- <tr>
               <td valign="top" colspan="2">
@@ -102,62 +88,44 @@ under the License.
             <#assign partyContactMechPurposes = postalAddressInfo.partyContactMechPurposes />
             <#assign postalAddress = postalAddressInfo.postalAddress />
             <#assign partyContactMech = postalAddressInfo.partyContactMech />
-            <tr>
-              <td align="right" valign="top">
+                <div class="row">
+                <div class="col-sm-6">
                 <input type="radio" name="contactMechId" value="${contactMech.contactMechId}"/>
-              </td>
-              <td valign="middle">
                 <#list partyContactMechPurposes as partyContactMechPurpose>
                   <#assign contactMechPurposeType =
                       partyContactMechPurpose.getRelatedOne("ContactMechPurposeType", true) />
-                  <div>
                     ${contactMechPurposeType.get("description",locale)!}
                     <#if partyContactMechPurpose.thruDate??>
                       (${uiLabelMap.CommonExpire}:${partyContactMechPurpose.thruDate})
                     </#if>
-                  </div>
                 </#list>
-                <div>
-                  <#if postalAddress.toName??>${uiLabelMap.CommonTo}: ${postalAddress.toName}<br/></#if>
-                  <#if postalAddress.attnName??>${uiLabelMap.PartyAddrAttnName}: ${postalAddress.attnName}<br/></#if>
-                  ${postalAddress.address1!}<br/>
-                  <#if postalAddress.address2??>${postalAddress.address2}<br/></#if>
+                  <#if postalAddress.toName??><label>${uiLabelMap.CommonTo}: ${postalAddress.toName}</label></#if>
+                  <#if postalAddress.attnName??>${uiLabelMap.PartyAddrAttnName}: ${postalAddress.attnName}</#if>
+                  ${postalAddress.address1!}
+                  <#if postalAddress.address2??>${postalAddress.address2}</#if>
                   ${postalAddress.city}
                   <#if postalAddress.stateProvinceGeoId?has_content>
                     ,&nbsp;${postalAddress.stateProvinceGeoId}
-                  </#if>&nbsp;
+                  </#if>
                   ${postalAddress.postalCode}
                   <#if postalAddress.countryGeoId??><br/>${postalAddress.countryGeoId}</#if>
-                </div>
-                <div>(${uiLabelMap.CommonUpdated}:&nbsp;${(partyContactMech.fromDate.toString())!})</div>
+                (${uiLabelMap.CommonUpdated}:&nbsp;${(partyContactMech.fromDate.toString())!})
                 <#if partyContactMech.thruDate??>
-                  <div>${uiLabelMap.CommonDelete}:&nbsp;${partyContactMech.thruDate.toString()}</div>
+                  ${uiLabelMap.CommonDelete}:&nbsp;${partyContactMech.thruDate.toString()}
                 </#if>
-              </td>
-            </tr>
+                </div>
+                </div>
           </#list>
           <#if !postalAddressInfos?has_content && !curContactMech??>
-            <tr>
-              <td colspan="2">
-                <div>${uiLabelMap.PartyNoContactInformation}.</div>
-              </td>
-            </tr>
+                <label>${uiLabelMap.PartyNoContactInformation}.</label>
           </#if>
-          <tr>
-            <td align="right" valign="top">
-              <input type="radio" name="contactMechId" value="_NEW_" <#if !hasCurrent>checked="checked"</#if>/>
-            </td>
-            <td valign="middle">
-              <span>${uiLabelMap.PartyCreateNewBillingAddress}.</span>
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
+              <div class="input-group">
+              <input type="radio" class="mr-2" name="contactMechId" value="_NEW_" <#if !hasCurrent>checked="checked"</#if>/>
+              <label>${uiLabelMap.PartyCreateNewBillingAddress}.</label>
+              </div>
 </div>
 </form>
-  &nbsp;<a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>
-  &nbsp;<a href="javascript:document.editcreditcardform.submit()" class="button">${uiLabelMap.CommonSave}</a>
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+  <a href="javascript:document.editcreditcardform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
 </#if>
 

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditEftAccount.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditEftAccount.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditEftAccount.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditEftAccount.ftl Sat Dec 23 09:41:28 2017
@@ -18,147 +18,106 @@ under the License.
 -->
 
 <#if canNotView>
-  <p><h3>${uiLabelMap.AccountingEFTNotBelongToYou}.</h3></p>&nbsp;
-  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="buttontext">${uiLabelMap.CommonGoBack}</a>
+  <h3>${uiLabelMap.AccountingEFTNotBelongToYou}.</h3>
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
 <#else>
   <#if !eftAccount??>
     <h1>${uiLabelMap.AccountingAddNewEftAccount}</h1>
-    <form method="post" action="<@ofbizUrl>createEftAccount?DONE_PAGE=${donePage}</@ofbizUrl>" name="editeftaccountform"
-        style="margin: 0;">
+    <form method="post" action="<@ofbizUrl>createEftAccount?DONE_PAGE=${donePage}</@ofbizUrl>" name="editeftaccountform">
   <#else>
     <h1>${uiLabelMap.PageTitleEditEFTAccount}</h1>
-    <form method="post" action="<@ofbizUrl>updateEftAccount?DONE_PAGE=${donePage}</@ofbizUrl>" name="editeftaccountform"
-        style="margin: 0;">
+    <form method="post" action="<@ofbizUrl>updateEftAccount?DONE_PAGE=${donePage}</@ofbizUrl>" name="editeftaccountform">
     <input type="hidden" name="paymentMethodId" value="${paymentMethodId}"/>
-  </#if>&nbsp;
-  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>&nbsp;
-  <a href="javascript:document.editeftaccountform.submit()" class="button">${uiLabelMap.CommonSave}</a>
-  <p/>
-  <table width="90%" border="0" cellpadding="2" cellspacing="0">
-    <tr>
-      <td width="26%" align="right" valign="top">
-        <div>${uiLabelMap.AccountingNameOnAccount}</div>
-      </td>
-      <td width="5">&nbsp;</td>
-      <td width="74%">
-        <input type="text" class="inputBox" size="30" maxlength="60" name="nameOnAccount"
-            value="${eftAccountData.nameOnAccount!}"/>*
-      </td>
-    </tr>
-    <tr>
-      <td width="26%" align="right" valign="top">
-        <div>${uiLabelMap.AccountingCompanyNameOnAccount}</div>
-      </td>
-      <td width="5">&nbsp;</td>
-      <td width="74%">
-        <input type="text" class="inputBox" size="30" maxlength="60" name="companyNameOnAccount"
-            value="${eftAccountData.companyNameOnAccount!}"/>
-      </td>
-    </tr>
-    <tr>
-      <td width="26%" align="right" valign="top">
-        <div>${uiLabelMap.AccountingBankName}</div>
-      </td>
-      <td width="5">&nbsp;</td>
-      <td width="74%">
-        <input type="text" class="inputBox" size="30" maxlength="60"
-            name="bankName"value="${eftAccountData.bankName!}"/>*
-      </td>
-    </tr>
-    <tr>
-      <td width="26%" align="right" valign="top">
-        <div>${uiLabelMap.AccountingRoutingNumber}</div>
-      </td>
-      <td width="5">&nbsp;</td>
-      <td width="74%">
-        <input type="text" class="inputBox" size="10" maxlength="30"
-            name="routingNumber" value="${eftAccountData.routingNumber!}"/>*
-      </td>
-    </tr>
-    <tr>
-      <td width="26%" align="right" valign="top">
-        <div>${uiLabelMap.AccountingAccountType}</div>
-      </td>
-      <td width="5">&nbsp;</td>
-      <td width="74%">
-        <select name="accountType" class="selectBox">
-          <option>${eftAccountData.accountType!}</option>
-          <option></option>
-          <option>${uiLabelMap.CommonChecking}</option>
-          <option>${uiLabelMap.CommonSavings}</option>
-        </select>*
-      </td>
-    </tr>
-    <tr>
-      <td width="26%" align="right" valign="top">
-        <div>${uiLabelMap.AccountingAccountNumber}</div>
-      </td>
-      <td width="5">&nbsp;</td>
-      <td width="74%">
-        <input type="text" class="inputBox" size="20" maxlength="40" name="accountNumber"
-               value="${eftAccountData.accountNumber!}"/>*
-      </td>
-    </tr>
-    <tr>
-      <td width="26%" align="right" valign="top">
-        <div>${uiLabelMap.CommonDescription}</div>
-      </td>
-      <td width="5">&nbsp;</td>
-      <td width="74%">
-        <input type="text" class="inputBox" size="30" maxlength="60" name="description"
-            value="${paymentMethodData.description!}"/>
-      </td>
-    </tr>
-    <tr>
-      <td width="26%" align="right" valign="top">
-        <div>${uiLabelMap.PartyBillingAddress}</div>
-      </td>
-      <td width="5">&nbsp;</td>
-      <td width="74%">
+  </#if>
+  <div class="form-group">
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+  <a href="javascript:document.editeftaccountform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
+  </div>
+    <label class="required">${uiLabelMap.AccountingNameOnAccount}</label>
+    <div class="row">
+      <div class="col-sm-6">
+        <input type="text" class="form-control"name="nameOnAccount" value="${eftAccountData.nameOnAccount!}"/>
+      </div>
+    </div>
+    <label class="required">${uiLabelMap.AccountingCompanyNameOnAccount}</label>
+    <div class="row">
+      <div class="col-sm-6">
+        <input type="text" class="form-control" name="companyNameOnAccount" value="${eftAccountData.companyNameOnAccount!}"/>
+      </div>
+    </div>
+    <label class="required">${uiLabelMap.AccountingBankName}</label>
+    <div class="row">
+      <div class="col-sm-6">
+        <input type="text" class="form-control" name="bankName"value="${eftAccountData.bankName!}"/>
+      </div>
+    </div>
+    <label class="required">${uiLabelMap.AccountingRoutingNumber}</label>
+    <div class="row">
+      <div class="col-sm-6">
+        <input type="text" class="form-control" name="routingNumber" value="${eftAccountData.routingNumber!}"/>
+      </div>
+    </div>
+    <label class="required">${uiLabelMap.AccountingAccountType}</label>
+    <div class="row">
+      <div class="col-sm-6">
+         <select name="accountType" class="custom-select form-control">
+            <option>${uiLabelMap.CommonSelect}</option>
+            <option>${eftAccountData.accountType!}</option>
+            <option>${uiLabelMap.CommonChecking}</option>
+            <option>${uiLabelMap.CommonSavings}</option>
+         </select>
+      </div>
+    </div>
+    <label class="required">${uiLabelMap.AccountingAccountNumber}</label>
+    <div class="row">
+      <div class="col-sm-6">
+        <input type="text" class="form-control" name="accountNumber" value="${eftAccountData.accountNumber!}"/>
+      </div>
+    </div>
+    <label class="required">${uiLabelMap.CommonDescription}</label>
+    <div class="row">
+      <div class="col-sm-6">
+        <input type="text" class="form-control" name="description" value="${paymentMethodData.description!}"/>
+      </div>
+    </div>
+    <label class="mb-2"><strong>${uiLabelMap.PartyBillingAddress}</strong></label>
         <#-- Removed because is confusing, can add but would have to come back here with all data populated as before...
         <a href="<@ofbizUrl>editcontactmech</@ofbizUrl>" class="buttontext">
           [Create New Address]</a>&nbsp;&nbsp;
         -->
-        <table width="100%" border="0" cellpadding="1">
           <#if curPostalAddress??>
-            <tr>
-              <td align="right" valign="top" width="1%">
-                <input type="radio" name="contactMechId" value="${curContactMechId}" checked="checked"/>
-              </td>
-              <td valign="top" width="80%">
-                <div><b>${uiLabelMap.PartyUseCurrentAddress}:</b></div>
+          <div class="row">
+            <div class="col-sm-12">
+              <input type="radio" name="contactMechId" value="${curContactMechId}" checked="checked" class="form-control"/>
+                <label><strong>${uiLabelMap.PartyUseCurrentAddress}:</strong></label>
                 <#list curPartyContactMechPurposes as curPartyContactMechPurpose>
                   <#assign curContactMechPurposeType =
                       curPartyContactMechPurpose.getRelatedOne("ContactMechPurposeType", true)>
-                  <div>
-                    <b>${curContactMechPurposeType.get("description",locale)!}</b>
+                    <strong>${curContactMechPurposeType.get("description",locale)!}</strong>
                     <#if curPartyContactMechPurpose.thruDate??>
                       (${uiLabelMap.CommonExpire}:${curPartyContactMechPurpose.thruDate.toString()})
                     </#if>
-                  </div>
                 </#list>
-                <div>
                   <#if curPostalAddress.toName??>
-                    <b>${uiLabelMap.CommonTo}:</b> ${curPostalAddress.toName}<br/>
+                    <strong>${uiLabelMap.CommonTo}:</strong> ${curPostalAddress.toName}
                   </#if>
                   <#if curPostalAddress.attnName??>
-                    <b>${uiLabelMap.PartyAddrAttnName}:</b> ${curPostalAddress.attnName}<br/>
+                    <strong>${uiLabelMap.PartyAddrAttnName}:</strong> ${curPostalAddress.attnName}
                   </#if>
                   ${curPostalAddress.address1!}<br/>
                   <#if curPostalAddress.address2??>${curPostalAddress.address2}<br/></#if>
                   ${curPostalAddress.city}
                   <#if curPostalAddress.stateProvinceGeoId?has_content>,&nbsp;
                     ${curPostalAddress.stateProvinceGeoId}
-                  </#if>&nbsp;
+                  </#if>
                   ${curPostalAddress.postalCode}
                   <#if curPostalAddress.countryGeoId??><br/>${curPostalAddress.countryGeoId}</#if>
-                </div>
-                <div>(${uiLabelMap.CommonUpdated}:&nbsp;${(curPartyContactMech.fromDate.toString())!})</div>
+                  (${uiLabelMap.CommonUpdated}:${(curPartyContactMech.fromDate.toString())!})
                 <#if curPartyContactMech.thruDate??>
-                  <div><b>${uiLabelMap.CommonDelete}:&nbsp;${curPartyContactMech.thruDate.toString()}</b></div>
+                  ${uiLabelMap.CommonDelete}:${curPartyContactMech.thruDate.toString()}
                 </#if>
-              </td>
-            </tr>
+            </div>
+          </div>
           <#else>
             <#--
               <tr>
@@ -180,55 +139,42 @@ under the License.
             <#assign partyContactMechPurposes = postalAddressInfo.partyContactMechPurposes>
             <#assign postalAddress = postalAddressInfo.postalAddress>
             <#assign partyContactMech = postalAddressInfo.partyContactMech>
-            <tr>
-              <td align="right" valign="top" width="1%">
+              <div class="row">
+                <div class="col-sm-12">
                 <input type="radio" name="contactMechId" value="${contactMech.contactMechId}"/>
-              </td>
-              <td valign="top" width="80%">
                 <#list partyContactMechPurposes as partyContactMechPurpose>
                   <#assign contactMechPurposeType =
                       partyContactMechPurpose.getRelatedOne("ContactMechPurposeType", true)>
-                  <div>
-                    <b>${contactMechPurposeType.get("description",locale)!}</b>
+                    ${contactMechPurposeType.get("description",locale)!}
                     <#if partyContactMechPurpose.thruDate??>
                       (${uiLabelMap.CommonExpire}:${partyContactMechPurpose.thruDate})
                     </#if>
-                  </div>
                 </#list>
-                <div>
-                  <#if postalAddress.toName??><b>${uiLabelMap.CommonTo}:</b> ${postalAddress.toName}<br/></#if>
+                  <#if postalAddress.toName??><label><b>${uiLabelMap.CommonTo}:</b> ${postalAddress.toName}</label></#if>
                   <#if postalAddress.attnName??>
-                    <b>${uiLabelMap.PartyAddrAttnName}:</b> ${postalAddress.attnName}<br/>
+                    <strong>${uiLabelMap.PartyAddrAttnName}:</strong> ${postalAddress.attnName}<br/>
                   </#if>
                   ${postalAddress.address1!}<br/>
                   <#if postalAddress.address2??>${postalAddress.address2}<br/></#if>
                   ${postalAddress.city}
                   <#if postalAddress.stateProvinceGeoId?has_content>,&nbsp;
                     ${postalAddress.stateProvinceGeoId}
-                  </#if>&nbsp;
+                  </#if>
                   ${postalAddress.postalCode}
                   <#if postalAddress.countryGeoId??><br/>${postalAddress.countryGeoId}</#if>
-                </div>
                 <div>(${uiLabelMap.CommonUpdated}:&nbsp;${(partyContactMech.fromDate.toString())!})</div>
                 <#if partyContactMech.thruDate??>
                   <div><b>${uiLabelMap.CommonDelete}:&nbsp;${partyContactMech.thruDate.toString()}</b></div>
                 </#if>
-              </td>
-            </tr>
+              </div>
+            </div>
           </#list>
+
           <#if !postalAddressInfos?has_content && !curContactMech??>
-            <tr>
-              <td colspan="2">
-                <div>${uiLabelMap.PartyNoContactInformation}.</div>
-              </td>
-            </tr>
+            <label>${uiLabelMap.PartyNoContactInformation}.</label>
           </#if>
-        </table>
-      </td>
-    </tr>
-  </table>
 </form>
-  &nbsp;<a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>
-  &nbsp;<a href="javascript:document.editeftaccountform.submit()" class="button">${uiLabelMap.CommonSave}</a>
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary"><span class="glyphicon glyphicon-circle-arrow-left">${uiLabelMap.CommonGoBack}</span></a>
+  <a href="javascript:document.editeftaccountform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
 </#if>
 

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditGiftCard.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditGiftCard.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditGiftCard.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditGiftCard.ftl Sat Dec 23 09:41:28 2017
@@ -18,29 +18,23 @@ under the License.
 -->
 
 <#if canNotView>
-  <p><h3>${uiLabelMap.AccountingCardInfoNotBelongToYou}.</h3></p>&nbsp;
-  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="buttontext">[${uiLabelMap.CommonGoBack}]</a>
+  <h3>${uiLabelMap.AccountingCardInfoNotBelongToYou}.</h3>
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">[${uiLabelMap.CommonGoBack}]</a>
 <#else>
   <#if !giftCard??>
     <h1>${uiLabelMap.AccountingAddNewGiftCard}</h1>
     <form method="post" action="<@ofbizUrl>createGiftCard?DONE_PAGE=${donePage}</@ofbizUrl>"
-        name="editgiftcardform" style="margin: 0;">
+        name="editgiftcardform">
   <#else>
     <h1>${uiLabelMap.AccountingEditGiftCard}</h1>
-    <form method="post" action="<@ofbizUrl>updateGiftCard?DONE_PAGE=${donePage}</@ofbizUrl>" name="editgiftcardform"
-        style="margin: 0;">
+    <form method="post" action="<@ofbizUrl>updateGiftCard?DONE_PAGE=${donePage}</@ofbizUrl>" name="editgiftcardform">
       <input type="hidden" name="paymentMethodId" value="${paymentMethodId}"/>
-  </#if>&nbsp;
-      <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>&nbsp;
-      <a href="javascript:document.editgiftcardform.submit()" class="button">${uiLabelMap.CommonSave}</a>
-      <p/>
-      <table width="90%" border="0" cellpadding="2" cellspacing="0">
-        <tr>
-          <td width="26%" align="right" valign="top">
-            <div>${uiLabelMap.AccountingCardNumber}</div>
-          </td>
-          <td width="5">&nbsp;</td>
-          <td width="74%">
+  </#if>
+    <div class="form-group">
+      <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+      <a href="javascript:document.editgiftcardform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
+    </div>
+            <label>${uiLabelMap.AccountingCardNumber}</label>
             <#if giftCardData?has_content && giftCardData.cardNumber?has_content>
               <#assign pcardNumberDisplay = "">
               <#assign pcardNumber = giftCardData.cardNumber!>
@@ -56,25 +50,19 @@ under the License.
                 </#if>
               </#if>
             </#if>
-            <input type="text" class="inputBox" size="20" maxlength="60" name="cardNumber" value="${pcardNumberDisplay!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td width="26%" align="right" valign="top">
-            <div>${uiLabelMap.AccountingPINNumber}</div>
-          </td>
-          <td width="5">&nbsp;</td>
-          <td width="74%">
-            <input type="password" class="inputBox" size="10" maxlength="60" name="pinNumber"
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="text" class="form-control" name="cardNumber" value="${pcardNumberDisplay!}"/>
+              </div>
+            </div>
+            <label>${uiLabelMap.AccountingPINNumber}</label>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="password" class="form-control" name="pinNumber"
                 autocomplete="off" value="${giftCardData.pinNumber!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td width="26%" align="right" valign="top">
-            <div>${uiLabelMap.AccountingExpirationDate}</div>
-          </td>
-          <td width="5">&nbsp;</td>
-          <td width="74%">
+              </div>
+            </div>
+            <label>${uiLabelMap.AccountingExpirationDate}</label>
             <#assign expMonth = "">
             <#assign expYear = "">
             <#if giftCardData?? && giftCardData.expireDate??>
@@ -84,7 +72,10 @@ under the License.
                 <#assign expYear = expDate.substring(expDate.indexOf("/")+1)>
               </#if>
             </#if>
-            <select name="expMonth" class="selectBox" onchange="javascript:makeExpDate();">
+            <div class="row">
+            <div class="col-sm-3">
+            <select name="expMonth" class="custom-select form-control" onchange="javascript:makeExpDate();">
+              <option>${uiLabelMap.CommonSelect}</option>
               <#if giftCardData?has_content && expMonth?has_content>
                 <#assign ccExprMonth = expMonth>
               <#else>
@@ -95,7 +86,10 @@ under the License.
               </#if>
               ${screens.render("component://common/widget/CommonScreens.xml#ccmonths")}
             </select>
-            <select name="expYear" class="selectBox" onchange="javascript:makeExpDate();">
+            </div>
+            <div class="col-sm-3">
+            <select name="expYear" class="custom-select form-control" onchange="javascript:makeExpDate();">
+              <option>${uiLabelMap.CommonSelect}</option>
               <#if giftCard?has_content && expYear?has_content>
                 <#assign ccExprYear = expYear>
               <#else>
@@ -106,20 +100,16 @@ under the License.
               </#if>
               ${screens.render("component://common/widget/CommonScreens.xml#ccyears")}
             </select>
-          </td>
-        </tr>
-        <tr>
-          <td width="26%" align="right" valign="top">
-            <div>${uiLabelMap.CommonDescription}</div>
-          </td>
-          <td width="5">&nbsp;</td>
-          <td width="74%">
-            <input type="text" class="inputBox" size="30" maxlength="60" name="description"
+            </div>
+          </div>
+            <label>${uiLabelMap.CommonDescription}</label>
+            <div class="row">
+            <div class="col-sm-6">
+            <input type="text" class="inputBox form-control" maxlength="60" name="description"
                 value="${paymentMethodData.description!}"/>
-          </td>
-        </tr>
-      </table>
-    </form>&nbsp;
-  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="button">${uiLabelMap.CommonGoBack}</a>&nbsp;
-  <a href="javascript:document.editgiftcardform.submit()" class="button">${uiLabelMap.CommonSave}</a>
+            </div>
+            </div>
+    </form>
+  <a href="<@ofbizUrl>${donePage}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+  <a href="javascript:document.editgiftcardform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
 </#if>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditPerson.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditPerson.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditPerson.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/EditPerson.ftl Sat Dec 23 09:41:28 2017
@@ -18,22 +18,21 @@ under the License.
 -->
 <#if person??>
   <h2>${uiLabelMap.PartyEditPersonalInformation}</h2>&nbsp;
-  <form id="editpersonform1" method="post" action="<@ofbizUrl>updatePerson</@ofbizUrl>" name="editpersonform">
+  <form id="editpersonform1" class="mr-2" method="post" action="<@ofbizUrl>updatePerson</@ofbizUrl>" name="editpersonform">
 <#else>
   <h2>${uiLabelMap.PartyAddNewPersonalInformation}</h2>&nbsp;
-  <form id="editpersonform2" method="post" action="<@ofbizUrl>createPerson/${donePage}</@ofbizUrl>"
+  <form id="editpersonform2" class="mr-2" method="post" action="<@ofbizUrl>createPerson/${donePage}</@ofbizUrl>"
       name="editpersonform">
 </#if>
-    <div>
-      &nbsp;<a href='<@ofbizUrl>${donePage}</@ofbizUrl>' class="button">${uiLabelMap.CommonGoBack}</a>
-      &nbsp;<a href="javascript:document.editpersonform.submit()" class="button">${uiLabelMap.CommonSave}</a>
-      <p/>
+    <div class="form-group">
+      <a href='<@ofbizUrl>${donePage}</@ofbizUrl>' class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+      <a href="javascript:document.editpersonform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
+    </div>
       <input type="hidden" name="partyId" value="${person.partyId!}"/>
-      <table width="90%" border="0" cellpadding="2" cellspacing="0">
-        <tr>
-          <td align="right">${uiLabelMap.CommonTitle}</td>
-          <td>
-            <select name="personalTitle" class="selectBox">
+        <div class="row">
+          <div class="col-sm-6">
+            <label>${uiLabelMap.CommonTitle}</label>
+            <select name="personalTitle" class="form-control custom-select">
             <#if personData.personalTitle?has_content >
               <option>${personData.personalTitle}</option>
               <option value="${personData.personalTitle}"> --</option>
@@ -45,91 +44,43 @@ under the License.
               <option>${uiLabelMap.CommonTitleMs}</option>
               <option>${uiLabelMap.CommonTitleDr}</option>
             </select>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyFirstName}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="30" name="firstName"
-                value="${personData.firstName!}"/>*
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyMiddleInitial}</td>
-          <td>
-            <input type="text" class='inputBox' size="4" maxlength="4" name="middleName"
+          </div>
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyHeight}</label>
+            <input type="text" class="form-control" name="height" value="${personData.height!}"/>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+          <label>${uiLabelMap.PartyFirstName}</label>
+            <input type="text" class="form-control" name="firstName"
+                value="${personData.firstName!}"/>
+          </div>
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyWeight}</label>
+            <input type="text" class="form-control" name="weight" value="${personData.weight!}"/>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyMiddleInitial}</label>
+            <input type="text" class="form-control" name="middleName"
                 value="${personData.middleName!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyLastName}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="30" name="lastName" value="${personData.lastName!}"/>
-            *
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartySuffix}</td>
-          <td>
-            <input type="text" class='inputBox' size="10" maxlength="30" name="suffix" value="${personData.suffix!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyNickName}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="60" name="nickname" value="${personData.nickname!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyGender}</td>
-          <td>
-            <select name="gender" class='selectBox'>
-            <#if personData.gender?has_content >
-              <option value="${personData.gender}">
-                <#if "M" == personData.gender >${uiLabelMap.CommonMale}</#if>
-                  <#if "F" == personData.gender >${uiLabelMap.CommonFemale}</#if>
-              </option>
-              <option value="${personData.gender}"> --</option>
-            <#else>
-              <option value="">${uiLabelMap.CommonSelectOne}</option>
-            </#if>
-              <option value="M">${uiLabelMap.CommonMale}</option>
-              <option value="F">${uiLabelMap.CommonFemale}</option>
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyBirthDate}</td>
-          <td>
-            <input type="text" class='inputBox' size="11" maxlength="20" name="birthDate"
-                value="${(personData.birthDate.toString())!}"/>
-            <div>${uiLabelMap.CommonFormatDate}</div>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyHeight}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="60" name="height" value="${personData.height!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyWeight}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="60" name="weight" value="${personData.weight!}"/>
-          </td>
-        </tr>
-
-        <tr>
-          <td align="right">${uiLabelMap.PartyMaidenName}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="60" name="mothersMaidenName"
-                value="${personData.mothersMaidenName!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyMaritalStatus}</td>
-          <td>
-            <select name="maritalStatus" class='selectBox'>
+          </div>
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyMaidenName}</label>
+            <input type="text" class="form-control" name="mothersMaidenName"
+                   value="${personData.mothersMaidenName!}"/>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyLastName}</label>
+            <input type="text" class='form-control' name="lastName" value="${personData.lastName!}"/>
+          </div>
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyMaritalStatus}</label>
+            <select name="maritalStatus" class="form-control custom-select">
             <#if personData.maritalStatus?has_content>
               <option value="${personData.maritalStatus}">
                 <#if "S" == personData.maritalStatus>${uiLabelMap.PartySingle}</#if>
@@ -144,45 +95,68 @@ under the License.
               <option value="M">${uiLabelMap.PartyMarried}</option>
               <option value="D">${uiLabelMap.PartyDivorced}</option>
             </select>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartySocialSecurityNumber}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="60" name="socialSecurityNumber"
-                value="${personData.socialSecurityNumber!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyPassportNumber}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="60" name="passportNumber"
-                value="${personData.passportNumber!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyPassportExpireDate}</td>
-          <td>
-            <input type="text" class='inputBox' size="11" maxlength="20" name="passportExpireDate"
-                value="${personData.passportExpireDate!}"/>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+          <label>${uiLabelMap.PartySuffix}</label>
+          <input type="text" class="form-control" name="suffix" value="${personData.suffix!}"/>
+          </div>
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyPassportNumber}</label>
+            <input type="text" class="form-control" name="passportNumber"
+                   value="${personData.passportNumber!}"/>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyNickName}</label>
+            <input type="text" class='form-control' name="nickname" value="${personData.nickname!}"/>
+          </div>
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyPassportExpireDate}</label>
+            <input type="text" class="form-control" name="passportExpireDate"
+                   value="${personData.passportExpireDate!}"/>
             <div>${uiLabelMap.CommonFormatDate}</div>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.PartyTotalYearsWorkExperience}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="60" name="totalYearsWorkExperience"
-                value="${personData.totalYearsWorkExperience!}"/>
-          </td>
-        </tr>
-        <tr>
-          <td align="right">${uiLabelMap.CommonComment}</td>
-          <td>
-            <input type="text" class='inputBox' size="30" maxlength="60" name="comments" value="${personData.comments!}"/>
-          </td>
-        </tr>
-      </table>
-    </div>
-  </form>&nbsp;
-  <a href='<@ofbizUrl>${donePage}</@ofbizUrl>' class="button">${uiLabelMap.CommonGoBack}</a>&nbsp;
-  <a id="editpersonform3" href="javascript:document.editpersonform.submit()" class="button">${uiLabelMap.CommonSave}</a>
\ No newline at end of file
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyGender}</label>
+            <select name="gender" class="form-control custom-select">
+            <#if personData.gender?has_content >
+              <option value="${personData.gender}">
+                <#if "M" == personData.gender >${uiLabelMap.CommonMale}</#if>
+                  <#if "F" == personData.gender >${uiLabelMap.CommonFemale}</#if>
+              </option>
+              <option value="${personData.gender}"> --</option>
+            <#else>
+              <option value="">${uiLabelMap.CommonSelectOne}</option>
+            </#if>
+              <option value="M">${uiLabelMap.CommonMale}</option>
+              <option value="F">${uiLabelMap.CommonFemale}</option>
+            </select>
+          </div>
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyTotalYearsWorkExperience}</label>
+            <input type="text" class="form-control" name="totalYearsWorkExperience"
+                   value="${personData.totalYearsWorkExperience!}"/>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <label>${uiLabelMap.PartyBirthDate}</label>
+            <input type="text" class="form-control" name="birthDate"
+                value="${(personData.birthDate.toString())!}"/>
+            <div>${uiLabelMap.CommonFormatDate}</div>
+          </div>
+          <div class="col-sm-6">
+            <label>${uiLabelMap.CommonComment}</label>
+            <input type="text" class="form-control" name="comments" value="${personData.comments!}"/>
+          </div>
+        </div>
+  </form>
+  <div class="form-group">
+    <a href='<@ofbizUrl>${donePage}</@ofbizUrl>' class="btn btn-outline-secondary">${uiLabelMap.CommonGoBack}</a>
+    <a id="editpersonform3" href="javascript:document.editpersonform.submit()" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
+  </div>
\ No newline at end of file

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MessageList.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MessageList.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MessageList.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MessageList.ftl Sat Dec 23 09:41:28 2017
@@ -60,7 +60,7 @@ under the License.
   </tbody>
 </#macro>
 
-<div class="card m-3">
+<div class="card">
   <div class="card-header">
     <div class="boxlink">
       <#if "true" == parameters.showSent!>
@@ -76,7 +76,7 @@ under the License.
     <strong>${uiLabelMap.CommonMessages}</strong>
   </div>
   <div class="card-body">
-    <table class="table">
+    <table class="table table-responsive-sm">
     <#if (!receivedCommunicationEvents?has_content && !sentCommunicationEvents?has_content)>
       <div class="alert alert-light" role="alert">
         ${uiLabelMap.EcommerceNoMessages}.