svn commit: r1819128 [2/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 [2/2] - in /ofbiz/ofbiz-plugins/trunk/ecommerce: template/cart/ template/customer/ webapp/ecommerce/css/ widget/

Deepak Dixit-5
Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ViewProfile.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ViewProfile.ftl?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ViewProfile.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/ViewProfile.ftl Sat Dec 23 09:41:28 2017
@@ -18,120 +18,164 @@ under the License.
 -->
 
 <#if party??>
-<#-- Main Heading -->
-<table width="100%" cellpadding="0" cellspacing="0" border="0">
-  <tr>
-    <td>
-      <h2>${uiLabelMap.PartyTheProfileOf}
-        <#if person??>
+<div class="d-flex justify-content-between">
+  <div class="p-2">
+    <h2>${uiLabelMap.PartyTheProfileOf}
+      <#if person??>
+      ${person.personalTitle!}
+      ${person.firstName!}
+      ${person.middleName!}
+      ${person.lastName!}
+      ${person.suffix!}
+      <#else>
+        "${uiLabelMap.PartyNewUser}"
+      </#if>
+    </h2>
+  </div>
+  <div class="p-2">
+    <#if showOld>
+      <a href="<@ofbizUrl>viewprofile</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.PartyHideOld}</a>
+    <#else>
+      <a href="<@ofbizUrl>viewprofile?SHOW_OLD=true</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.PartyShowOld}</a>
+    </#if>
+    <#if "Y" == (productStore.enableDigProdUpload)!>
+      <a href="<@ofbizUrl>digitalproductlist</@ofbizUrl>" class="btn btn-secondary-outline">${uiLabelMap.EcommerceDigitalProductUpload}</a>
+    </#if>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+    <div class="col-lg-3">
+      <strong>${uiLabelMap.PartyPersonalInformation}</strong>
+    </div>
+    <div class="col-lg-9 text-right">
+    <a href="<@ofbizUrl>editperson</@ofbizUrl>">
+    <#if person??>${uiLabelMap.CommonUpdate}<#else>${uiLabelMap.CommonCreate}</#if></a>
+    </div>
+    </div>
+  </div>
+  <div class="card-body">
+    <#if person??>
+    <div class="row">
+      <div class="col-lg-6">
+      <dl class="row">
+        <dt class="col-lg-2">${uiLabelMap.PartyName}</dt>
+        <dd class="col-lg-10">
           ${person.personalTitle!}
           ${person.firstName!}
           ${person.middleName!}
           ${person.lastName!}
           ${person.suffix!}
-        <#else>
-          "${uiLabelMap.PartyNewUser}"
+        </dd>
+        <#if person.nickname?has_content>
+          <dt class="col-lg-2">${uiLabelMap.PartyNickName}</dt>
+          <dd class="col-lg-10">${person.nickname}</dd>
         </#if>
-      </h2>
-    </td>
-    <td align="right">
-      <#if showOld>
-        <a href="<@ofbizUrl>viewprofile</@ofbizUrl>" class="button">${uiLabelMap.PartyHideOld}</a>
-      <#else>
-        <a href="<@ofbizUrl>viewprofile?SHOW_OLD=true</@ofbizUrl>" class="button">${uiLabelMap.PartyShowOld}</a>
+        <#if person.gender?has_content>
+          <dt class="col-lg-2">${uiLabelMap.PartyGender}</dt>
+          <dd class="col-lg-10">${person.gender}</dd>
+        </#if>
+      <#if person.birthDate??>
+        <dt class="col-lg-2">${uiLabelMap.PartyBirthDate}</dt>
+        <dd class="col-lg-10">${person.birthDate.toString()}</dd>
       </#if>
-      <#if "Y" == (productStore.enableDigProdUpload)!>
-        <a href="<@ofbizUrl>digitalproductlist</@ofbizUrl>" class="button">${uiLabelMap.EcommerceDigitalProductUpload}</a>
+      <#if person.height??>
+        <dt class="col-lg-2">${uiLabelMap.PartyHeight}</dt>
+        <dd class="col-lg-10">${person.height}</dd>
       </#if>
-    </td>
-  </tr>
-</table>
-
-<div class="screenlet">
-  <div class="boxlink">
-    <a href="<@ofbizUrl>editperson</@ofbizUrl>" class="submenutextright">
-    <#if person??>${uiLabelMap.CommonUpdate}<#else>${uiLabelMap.CommonCreate}</#if></a>
-  </div>
-  <h3>${uiLabelMap.PartyPersonalInformation}</h3>
-  <div class="screenlet-body">
-    <#if person??>
-    <div>
-      <table width="100%" border="0" cellpadding="0" cellspacing="0">
-        <tr>
-          <td align="right">${uiLabelMap.PartyName}</td>
-          <td>
-              ${person.personalTitle!}
-              ${person.firstName!}
-              ${person.middleName!}
-              ${person.lastName!}
-              ${person.suffix!}
-          </td>
-        </tr>
-      <#if person.nickname?has_content><tr><td align="right">${uiLabelMap.PartyNickName}</td><td>${person.nickname}</td></tr></#if>
-      <#if person.gender?has_content><tr><td align="right">${uiLabelMap.PartyGender}</td><td>${person.gender}</td></tr></#if>
-      <#if person.birthDate??><tr><td align="right">${uiLabelMap.PartyBirthDate}</td><td>${person.birthDate.toString()}</td></tr></#if>
-      <#if person.height??><tr><td align="right">${uiLabelMap.PartyHeight}</td><td>${person.height}</td></tr></#if>
-      <#if person.weight??><tr><td align="right">${uiLabelMap.PartyWeight}</td><td>${person.weight}</td></tr></#if>
-      <#if person.mothersMaidenName?has_content><tr><td align="right">${uiLabelMap.PartyMaidenName}</td><td>${person.mothersMaidenName}</td></tr></#if>
-      <#if person.maritalStatus?has_content><tr><td align="right">${uiLabelMap.PartyMaritalStatus}</td><td>${person.maritalStatus}</td></tr></#if>
-      <#if person.socialSecurityNumber?has_content><tr><td align="right">${uiLabelMap.PartySocialSecurityNumber}</td><td>${person.socialSecurityNumber}</td></tr></#if>
-      <#if person.passportNumber?has_content><tr><td align="right">${uiLabelMap.PartyPassportNumber}</td><td>${person.passportNumber}</td></tr></#if>
-      <#if person.passportExpireDate??><tr><td align="right">${uiLabelMap.PartyPassportExpireDate}</td><td>${person.passportExpireDate.toString()}</td></tr></#if>
-      <#if person.totalYearsWorkExperience??><tr><td align="right">${uiLabelMap.PartyYearsWork}</td><td>${person.totalYearsWorkExperience}</td></tr></#if>
-      <#if person.comments?has_content><tr><td align="right">${uiLabelMap.CommonComments}</td><td>${person.comments}</td></tr></#if>
-      </table>
+      <#if person.weight??>
+        <dt class="col-lg-2">${uiLabelMap.PartyWeight}</dt>
+        <dd class="col-lg-10">${person.weight}</dd>
+      </#if>
+      <#if person.maritalStatus?has_content>
+        <dt class="col-lg-2">${uiLabelMap.PartyMaritalStatus}</dt>
+        <dd class="col-lg-10">${person.maritalStatus}</dd>
+      </#if>
+    </dl>
+    </div>
+    <div class="col-lg-6">
+      <dl class="row">
+        <#if person.mothersMaidenName?has_content>
+          <dt class="col-lg-3">${uiLabelMap.PartyMaidenName}</dt>
+          <dd class="col-lg-9">${person.mothersMaidenName}</dd>
+        </#if>
+        <#if person.socialSecurityNumber?has_content>
+          <dt class="col-lg-3">${uiLabelMap.PartySocialSecurityNumber}</dt>
+          <dd class="col-lg-9">${person.socialSecurityNumber}</dd>
+        </#if>
+        <#if person.passportNumber?has_content>
+          <dt class="col-lg-3">${uiLabelMap.PartyPassportNumber}</dt>
+          <dd class="col-lg-9">${person.passportNumber}</dd>
+        </#if>
+        <#if person.passportExpireDate??>
+          <dt class="col-lg-3">${uiLabelMap.PartyPassportExpireDate}</dt>
+          <dd class="col-lg-9">${person.passportExpireDate.toString()}</dd>
+        </#if>
+        <#if person.totalYearsWorkExperience??>
+          <dt class="col-lg-3">${uiLabelMap.PartyYearsWork}</dt>
+          <dd class="col-lg-9">${person.totalYearsWorkExperience}</dd>
+        </#if>
+        <#if person.comments?has_content>
+          <dt class="col-lg-3">${uiLabelMap.CommonComments}</dt>
+          <dd class="col-lg-9">${person.comments}</dd>
+        </#if>
+      </dl>
+    </div>
     </div>
     <#else>
       <label>${uiLabelMap.PartyPersonalInformationNotFound}</label>
     </#if>
-  </div>
+    </div>
 </div>
 
 <#-- ============================================================= -->
 <#if monthsToInclude?? && totalSubRemainingAmount?? && totalOrders??>
-<div class="screenlet">
-  <h3>${uiLabelMap.EcommerceLoyaltyPoints}</h3>
-  <div class="screenlet-body">
+<div class="card">
+  <div class="card-header"><strong>${uiLabelMap.EcommerceLoyaltyPoints}</strong></div>
+  <div class="card-body">
     <label>${uiLabelMap.EcommerceYouHave} ${totalSubRemainingAmount} ${uiLabelMap.EcommercePointsFrom} ${totalOrders} ${uiLabelMap.EcommerceOrderInLast} ${monthsToInclude} ${uiLabelMap.EcommerceMonths}</label>
   </div>
 </div>
 </#if>
 
 <#-- ============================================================= -->
-<div class="screenlet">
-  <div class="boxlink">
-    <a href="<@ofbizUrl>editcontactmech</@ofbizUrl>" class="submenutextright">${uiLabelMap.CommonCreateNew}</a>
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+      <div class="col-lg-3"><strong>${uiLabelMap.PartyContactInformation}</strong></div>
+      <div class="col-lg-9 text-right"><a href="<@ofbizUrl>editcontactmech</@ofbizUrl>" class="card-link">${uiLabelMap.CommonCreateNew}</a></div>
+    </div>
   </div>
-  <h3>${uiLabelMap.PartyContactInformation}</h3>
-  <div class="screenlet-body">
+
+  <div class="card-body">
   <#if partyContactMechValueMaps?has_content>
-    <table width="100%" border="0" cellpadding="0">
-      <tr valign="bottom">
+    <table class="table table-responsive-sm">
+      <thead class="thead-dark">
+      <tr>
         <th>${uiLabelMap.PartyContactType}</th>
-        <th></th>
         <th>${uiLabelMap.CommonInformation}</th>
-        <th colspan="2">${uiLabelMap.PartySolicitingOk}?</th>
-        <th></th>
+        <th>${uiLabelMap.PartySolicitingOk}?</th>
         <th></th>
       </tr>
+      </thead>
       <#list partyContactMechValueMaps as partyContactMechValueMap>
         <#assign contactMech = partyContactMechValueMap.contactMech! />
         <#assign contactMechType = partyContactMechValueMap.contactMechType! />
         <#assign partyContactMech = partyContactMechValueMap.partyContactMech! />
-          <tr><td colspan="7"></td></tr>
+          <tbody>
           <tr>
-            <td align="right" valign="top">
+            <td>
               ${contactMechType.get("description",locale)}
             </td>
-            <td>&nbsp;</td>
-            <td valign="top">
+            <td>
               <#list partyContactMechValueMap.partyContactMechPurposes! as partyContactMechPurpose>
                 <#assign contactMechPurposeType = partyContactMechPurpose.getRelatedOne("ContactMechPurposeType", true) />
-                <div>
                   <#if contactMechPurposeType??>
                     ${contactMechPurposeType.get("description",locale)}
                     <#if "SHIPPING_LOCATION" == contactMechPurposeType.contactMechPurposeTypeId && (profiledefs.defaultShipAddr)?default("") == contactMech.contactMechId>
-                      <span class="buttontextdisabled">${uiLabelMap.EcommerceIsDefault}</span>
+                      <label>${uiLabelMap.EcommerceIsDefault}</label>
                     <#elseif "SHIPPING_LOCATION" == contactMechPurposeType.contactMechPurposeTypeId>
                       <form name="defaultShippingAddressForm" method="post" action="<@ofbizUrl>setprofiledefault/viewprofile</@ofbizUrl>">
                         <input type="hidden" name="productStoreId" value="${productStoreId}" />
@@ -144,7 +188,6 @@ under the License.
                     ${uiLabelMap.PartyPurposeTypeNotFound}: "${partyContactMechPurpose.contactMechPurposeTypeId}"
                   </#if>
                   <#if partyContactMechPurpose.thruDate??>(${uiLabelMap.CommonExpire}:${partyContactMechPurpose.thruDate.toString()})</#if>
-                </div>
               </#list>
               <#if contactMech.contactMechTypeId! = "POSTAL_ADDRESS">
                 <#assign postalAddress = partyContactMechValueMap.postalAddress! />
@@ -199,41 +242,40 @@ under the License.
               <div>(${uiLabelMap.CommonUpdated}:&nbsp;${partyContactMech.fromDate.toString()})</div>
               <#if partyContactMech.thruDate??><div>${uiLabelMap.CommonDelete}:&nbsp;${partyContactMech.thruDate.toString()}</div></#if>
             </td>
-            <td align="center" valign="top"><div>(${partyContactMech.allowSolicitation!})</div></td>
-            <td>&nbsp;</td>
-            <td align="right" valign="top">
-              <a href="<@ofbizUrl>editcontactmech?contactMechId=${contactMech.contactMechId}</@ofbizUrl>" class="button">${uiLabelMap.CommonUpdate}</a>
-            </td>
-            <td align="right" valign="top">
+            <td>(${partyContactMech.allowSolicitation!})</td>
+            <td>
               <form name= "deleteContactMech_${contactMech.contactMechId}" method= "post" action= "<@ofbizUrl>deleteContactMech</@ofbizUrl>">
-                <div>
                 <input type= "hidden" name= "contactMechId" value= "${contactMech.contactMechId}"/>
-                <a href='javascript:document.deleteContactMech_${contactMech.contactMechId}.submit()' class='button'>${uiLabelMap.CommonExpire}</a>
-              </div>
+                <a href="<@ofbizUrl>editcontactmech?contactMechId=${contactMech.contactMechId}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonUpdate}</a>
+                <a href='javascript:document.deleteContactMech_${contactMech.contactMechId}.submit()' class='btn btn-outline-secondary'>${uiLabelMap.CommonExpire}</a>
               </form>
             </td>
           </tr>
+          </tbody>
       </#list>
     </table>
   <#else>
-    <label>${uiLabelMap.PartyNoContactInformation}.</label><br />
+    <label>${uiLabelMap.PartyNoContactInformation}.</label>
   </#if>
   </div>
 </div>
 
 <#-- ============================================================= -->
 
-<div class="screenlet">
-  <div class="boxlink">
-    <a href="<@ofbizUrl>editcreditcard</@ofbizUrl>" class="submenutext">${uiLabelMap.PartyCreateNewCreditCard}</a><a href="<@ofbizUrl>editgiftcard</@ofbizUrl>" class="submenutext">${uiLabelMap.PartyCreateNewGiftCard}</a><a href="<@ofbizUrl>editeftaccount</@ofbizUrl>" class="submenutextright">${uiLabelMap.PartyCreateNewEftAccount}</a>
-  </div>
-  <h3>${uiLabelMap.AccountingPaymentMethodInformation}</h3>
-  <div class="screenlet-body">
-    <table width="100%" border="0" cellpadding="1">
-      <tr>
-        <td>
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+      <div class="col-lg-3">
+        <strong>${uiLabelMap.AccountingPaymentMethodInformation}</strong>
+      </div>
+      <div class="col-lg-9 text-right">
+        <a href="<@ofbizUrl>editcreditcard</@ofbizUrl>" class="mr-2">${uiLabelMap.PartyCreateNewCreditCard}</a><a href="<@ofbizUrl>editgiftcard</@ofbizUrl>" class="mr-2">${uiLabelMap.PartyCreateNewGiftCard}</a><a href="<@ofbizUrl>editeftaccount</@ofbizUrl>" class="mr-2">${uiLabelMap.PartyCreateNewEftAccount}</a>
+      </div>
+    </div>
+  </div>
+  <div class="card-body">
           <#if paymentMethodValueMaps?has_content>
-          <table width="100%" cellpadding="2" cellspacing="0" border="0">
+          <table class="table table-responsive-sm">
             <#list paymentMethodValueMaps as paymentMethodValueMap>
               <#assign paymentMethod = paymentMethodValueMap.paymentMethod! />
               <#assign creditCard = paymentMethodValueMap.creditCard! />
@@ -241,24 +283,26 @@ under the License.
               <#assign eftAccount = paymentMethodValueMap.eftAccount! />
               <tr>
                 <#if "CREDIT_CARD" == paymentMethod.paymentMethodTypeId!>
-                <td valign="top">
-                  <div>
-                    ${uiLabelMap.AccountingCreditCard}:
-                    <#if creditCard.companyNameOnCard?has_content>${creditCard.companyNameOnCard}&nbsp;</#if>
-                    <#if creditCard.titleOnCard?has_content>${creditCard.titleOnCard}&nbsp;</#if>
-                    ${creditCard.firstNameOnCard}&nbsp;
-                    <#if creditCard.middleNameOnCard?has_content>${creditCard.middleNameOnCard}&nbsp;</#if>
-                    ${creditCard.lastNameOnCard}
-                    <#if creditCard.suffixOnCard?has_content>&nbsp;${creditCard.suffixOnCard}</#if>
-                    &nbsp;${Static["org.apache.ofbiz.party.contact.ContactHelper"].formatCreditCard(creditCard)}
+                <td>
+                  <dl>
+                    <dt>
+                    ${uiLabelMap.AccountingCreditCard}</dt>
+                    <dd><#if creditCard.companyNameOnCard?has_content>${creditCard.companyNameOnCard}</#if></dd>
+                    <dd><#if creditCard.titleOnCard?has_content>${creditCard.titleOnCard}</#if>
+                    ${creditCard.firstNameOnCard}
+                    <#if creditCard.middleNameOnCard?has_content>${creditCard.middleNameOnCard}</#if>
+                    ${creditCard.lastNameOnCard}</dd>
+                    <dd>
+                    <#if creditCard.suffixOnCard?has_content>${creditCard.suffixOnCard}</#if>
+                    ${Static["org.apache.ofbiz.party.contact.ContactHelper"].formatCreditCard(creditCard)}
                     <#if paymentMethod.description?has_content>(${paymentMethod.description})</#if>
                     <#if paymentMethod.fromDate?has_content>(${uiLabelMap.CommonUpdated}:&nbsp;${paymentMethod.fromDate.toString()})</#if>
-                    <#if paymentMethod.thruDate??>(${uiLabelMap.CommonDelete}:&nbsp;${paymentMethod.thruDate.toString()})</#if>
-                  </div>
+                    <#if paymentMethod.thruDate??>(${uiLabelMap.CommonDelete}:${paymentMethod.thruDate.toString()})</#if>
+                    </dd>
+                  </dl>
                 </td>
-                <td>&nbsp;</td>
-                <td align="right" valign="top">
-                  <a href="<@ofbizUrl>editcreditcard?paymentMethodId=${paymentMethod.paymentMethodId}</@ofbizUrl>" class="button">
+                <td>
+                  <a href="<@ofbizUrl>editcreditcard?paymentMethodId=${paymentMethod.paymentMethodId}</@ofbizUrl>" class="btn btn-outline-secondary">
                             ${uiLabelMap.CommonUpdate}</a>
                 </td>
                 <#elseif "GIFT_CARD" == paymentMethod.paymentMethodTypeId!>
@@ -277,50 +321,46 @@ under the License.
                       </#if>
                     </#if>
                   </#if>
-
-                  <td valign="top">
-                    <div>
-                      ${uiLabelMap.AccountingGiftCard}: ${giftCardNumber}
+                  <td>
+                    <dt>${uiLabelMap.AccountingGiftCard}</dt><dd>${giftCardNumber}
                       <#if paymentMethod.description?has_content>(${paymentMethod.description})</#if>
                       <#if paymentMethod.fromDate?has_content>(${uiLabelMap.CommonUpdated}:&nbsp;${paymentMethod.fromDate.toString()})</#if>
-                      <#if paymentMethod.thruDate??>(${uiLabelMap.CommonDelete}:&nbsp;${paymentMethod.thruDate.toString()})</#if>
-                    </div>
+                      <#if paymentMethod.thruDate??>(${uiLabelMap.CommonDelete}:&nbsp;${paymentMethod.thruDate.toString()})</#if></dd>
                   </td>
-                  <td >&nbsp;</td>
-                  <td align="right" valign="top">
-                    <a href="<@ofbizUrl>editgiftcard?paymentMethodId=${paymentMethod.paymentMethodId}</@ofbizUrl>" class="button">
+                  <td>
+                    <a href="<@ofbizUrl>editgiftcard?paymentMethodId=${paymentMethod.paymentMethodId}</@ofbizUrl>" class="btn btn-outline-secondary">
                             ${uiLabelMap.CommonUpdate}</a>
                   </td>
                   <#elseif "EFT_ACCOUNT" == paymentMethod.paymentMethodTypeId!>
-                  <td valign="top">
-                    <div>
-                      ${uiLabelMap.AccountingEFTAccount}: ${eftAccount.nameOnAccount!} - <#if eftAccount.bankName?has_content>${uiLabelMap.AccountingBank}: ${eftAccount.bankName}</#if> <#if eftAccount.accountNumber?has_content>${uiLabelMap.AccountingAccount} #: ${eftAccount.accountNumber}</#if>
-                      <#if paymentMethod.description?has_content>(${paymentMethod.description})</#if>
-                      <#if paymentMethod.fromDate?has_content>(${uiLabelMap.CommonUpdated}:&nbsp;${paymentMethod.fromDate.toString()})</#if>
-                      <#if paymentMethod.thruDate??>(${uiLabelMap.CommonDelete}:&nbsp;${paymentMethod.thruDate.toString()})</#if>
-                    </div>
+                  <td>
+                    <dt>${uiLabelMap.AccountingEFTAccount}</dt> <dd>${eftAccount.nameOnAccount!}</dd><dd><#if eftAccount.bankName?has_content>${uiLabelMap.AccountingBank}: ${eftAccount.bankName}</#if></dd><dd> <#if eftAccount.accountNumber?has_content>${uiLabelMap.AccountingAccount} #: ${eftAccount.accountNumber}</#if></dd>
+                      <dd><#if paymentMethod.description?has_content>(${paymentMethod.description})</#if>
+                      <#if paymentMethod.fromDate?has_content>(${uiLabelMap.CommonUpdated}:${paymentMethod.fromDate.toString()})</#if>
+                      <#if paymentMethod.thruDate??>(${uiLabelMap.CommonDelete}:${paymentMethod.thruDate.toString()})</#if></dd>
                   </td>
-                  <td>&nbsp;</td>
-                  <td align="right" valign="top">
-                    <a href="<@ofbizUrl>editeftaccount?paymentMethodId=${paymentMethod.paymentMethodId}</@ofbizUrl>" class="button">
+                  <td>
+                    <a href="<@ofbizUrl>editeftaccount?paymentMethodId=${paymentMethod.paymentMethodId}</@ofbizUrl>" class="btn btn-outline-secondary">
                             ${uiLabelMap.CommonUpdate}</a>
                   </td>
                 </#if>
-                <td align="right" valign="top">
-                 <a href="<@ofbizUrl>deletePaymentMethod/viewprofile?paymentMethodId=${paymentMethod.paymentMethodId}</@ofbizUrl>" class="button">
+                <td>
+                  <div class="input-group">
+                 <a href="<@ofbizUrl>deletePaymentMethod/viewprofile?paymentMethodId=${paymentMethod.paymentMethodId}</@ofbizUrl>" class="btn btn-outline-secondary mr-2">
                         ${uiLabelMap.CommonExpire}</a>
-                </td>
-                <td align="right" valign="top">
                   <#if (profiledefs.defaultPayMeth)?default("") == paymentMethod.paymentMethodId>
-                    <span class="buttontextdisabled">${uiLabelMap.EcommerceIsDefault}</span>
+                    <label>${uiLabelMap.EcommerceIsDefault}</label>
                   <#else>
                     <form name="defaultPaymentMethodForm" method="post" action="<@ofbizUrl>setprofiledefault/viewprofile</@ofbizUrl>">
                       <input type="hidden" name="productStoreId" value="${productStoreId}" />
                       <input type="hidden" name="defaultPayMeth" value="${paymentMethod.paymentMethodId}" />
                       <input type="hidden" name="partyId" value="${party.partyId}" />
-                      <input type="submit" value="${uiLabelMap.EcommerceSetDefault}" class="button" />
+                      <input type="submit" value="${uiLabelMap.EcommerceSetDefault}" class="btn btn-outline-secondary" />
                     </form>
                   </#if>
+                  </div>
+                </td>
+                <td>
+
                 </td>
               </tr>
             </#list>
@@ -328,128 +368,130 @@ under the License.
           <#else>
             ${uiLabelMap.AccountingNoPaymentMethodInformation}.
           </#if>
-        </td>
-      </tr>
-    </table>
   </div>
 </div>
 
 <#-- ============================================================= -->
-<div class="screenlet">
-  <div class="boxlink">
-    <a href="<@ofbizUrl>changepassword</@ofbizUrl>" class="submenutextright">${uiLabelMap.PartyChangePassword}</a>
-  </div>
-  <h3>${uiLabelMap.CommonUsername} &amp; ${uiLabelMap.CommonPassword}</h3>
-  <div class="screenlet-body">
-    <table width="100%" border="0" cellpadding="1">
-      <tr>
-        <td align="right" valign="top">${uiLabelMap.CommonUsername}</td>
-        <td>&nbsp;</td>
-        <td valign="top">${userLogin.userLoginId}</td>
-      </tr>
-    </table>
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+      <div class="col-lg-3">
+        <strong>${uiLabelMap.CommonUsername} &amp; ${uiLabelMap.CommonPassword}</strong>
+      </div>
+      <div class="col-lg-9 text-right">
+        <a href="<@ofbizUrl>changepassword</@ofbizUrl>">${uiLabelMap.PartyChangePassword}</a>
+      </div>
+    </div>
+  </div>
+  <div class="card-body">
+    <dl>
+    <dt>${uiLabelMap.CommonUsername}</dt>
+    <dd>${userLogin.userLoginId}</dd>
+    </dl>
   </div>
 </div>
 
 <#-- ============================================================= -->
 <form name="setdefaultshipmeth" action="<@ofbizUrl>setprofiledefault/viewprofile</@ofbizUrl>" method="post">
-<div>
   <input type="hidden" name="productStoreId" value="${productStoreId}" />
-  <div class="screenlet">
-    <div class="boxlink">
+  <div class="card">
+    <div class="card-header">
       <#if profiledefs?has_content && profiledefs.defaultShipAddr?has_content && carrierShipMethods?has_content><a href="javascript:document.setdefaultshipmeth.submit();" class="submenutextright">${uiLabelMap.EcommerceSetDefault}</a></#if>
+      <strong>${uiLabelMap.EcommerceDefaultShipmentMethod}</strong>
     </div>
-    <h3>${uiLabelMap.EcommerceDefaultShipmentMethod}</h3>
-    <div class="screenlet-body">
-      <table width="100%" border="0" cellpadding="1">
+    <div class="card-body">
+      <table class="table table-responsive-sm">
         <#if profiledefs?has_content && profiledefs.defaultShipAddr?has_content && carrierShipMethods?has_content>
           <#list carrierShipMethods as shipMeth>
             <#assign shippingMethod = shipMeth.shipmentMethodTypeId + "@" + shipMeth.partyId />
             <tr>
-              <td>&nbsp;</td>
+              <td></td>
               <td>
-                <div><span style="white-space:;"><#if shipMeth.partyId != "_NA_">${shipMeth.partyId!}&nbsp;</#if>${shipMeth.get("description",locale)!}</span></div>
+                <#if shipMeth.partyId != "_NA_">${shipMeth.partyId!}</#if>${shipMeth.get("description",locale)!}
               </td>
-              <td><input type="radio" name="defaultShipMeth" value="${shippingMethod}" <#if profiledefs.defaultShipMeth?default("") == shippingMethod>checked="checked"</#if> /></td>
             </tr>
           </#list>
         <#else>
-        <tr><td>${uiLabelMap.EcommerceDefaultShipmentMethodMsg}</td></tr>
+        <tr>
+          <td><input type="radio" name="defaultShipMeth" value="${shippingMethod!}" <#if (profiledefs.defaultShipMeth)! == shippingMethod!>checked="checked"</#if> /></td>
+          <td>${uiLabelMap.EcommerceDefaultShipmentMethodMsg}</td>
+        </tr>
         </#if>
       </table>
     </div>
   </div>
-</div>
 </form>
 
 <#-- ============================================================= -->
-<div class="screenlet">
-  <h3>${uiLabelMap.EcommerceFileManager}</h3>
-  <div class="screenlet-body">
-    <table width="100%" border="0" cellpadding="1">
+<div class="card">
+  <div class="card-header">
+  <strong>${uiLabelMap.EcommerceFileManager}</strong>
+  </div>
+  <div class="card-body">
       <#if partyContent?has_content>
-        <#list partyContent as contentRole>
+        <table class="table table-responsive-sm">
+          <#list partyContent as contentRole>
         <#assign content = contentRole.getRelatedOne("Content", false) />
         <#assign contentType = content.getRelatedOne("ContentType", true) />
         <#assign mimeType = content.getRelatedOne("MimeType", true)! />
         <#assign status = content.getRelatedOne("StatusItem", true) />
           <tr>
-            <td><a href="<@ofbizUrl>img?imgId=${content.dataResourceId!}</@ofbizUrl>" class="button">${content.contentId}</a></td>
+            <td><a href="<@ofbizUrl>img?imgId=${content.dataResourceId!}</@ofbizUrl>" class="btn btn-link">${content.contentId}</a></td>
             <td>${content.contentName!}</td>
             <td>${(contentType.get("description",locale))!}</td>
             <td>${(mimeType.description)!}</td>
             <td>${(status.get("description",locale))!}</td>
             <td>${contentRole.fromDate!}</td>
-            <td align="right">
+            <td>
               <form name="removeContent_${contentRole.contentId}" method="post" action="removePartyAsset">
                 <input name="partyId" type="hidden" value="${userLogin.partyId}"/>
                 <input name="contentId" type="hidden" value="${contentRole.contentId}"/>
                 <input name="roleTypeId" type="hidden" value="${contentRole.roleTypeId}"/>
               </form>
-              <a href="<@ofbizUrl>img?imgId=${content.dataResourceId!}</@ofbizUrl>" class="button">${uiLabelMap.CommonView}</a>
-              <a href="javascript:document.removeContent_${contentRole.contentId}.submit();" class="button">${uiLabelMap.CommonRemove}</a>
+              <a href="<@ofbizUrl>img?imgId=${content.dataResourceId!}</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.CommonView}</a>
+              <a href="javascript:document.removeContent_${contentRole.contentId}.submit();" class="btn btn-outline-secondary">${uiLabelMap.CommonRemove}</a>
             </td>
           </tr>
         </#list>
+      </table>
       <#else>
-         <tr><td>${uiLabelMap.EcommerceNoFiles}</td></tr>
+        <p class="card-text">${uiLabelMap.EcommerceNoFiles}</p>
       </#if>
-    </table>
-    <div>&nbsp;</div>
-    <label>${uiLabelMap.EcommerceUploadNewFile}</label>
-    <div>
-      <form method="post" enctype="multipart/form-data" action="<@ofbizUrl>uploadPartyContent</@ofbizUrl>">
-      <div>
+      <form method="post" class="form-inline" enctype="multipart/form-data" action="<@ofbizUrl>uploadPartyContent</@ofbizUrl>">
         <input type="hidden" name="partyId" value="${party.partyId}"/>
         <input type="hidden" name="dataCategoryId" value="PERSONAL"/>
         <input type="hidden" name="contentTypeId" value="DOCUMENT"/>
         <input type="hidden" name="statusId" value="CTNT_PUBLISHED"/>
         <input type="hidden" name="roleTypeId" value="OWNER"/>
-        <input type="file" name="uploadedFile" size="50" class="inputBox"/>
-        <select name="partyContentTypeId" class="selectBox">
+        <label class="mr-2">${uiLabelMap.EcommerceUploadNewFile}</label>
+        <label class="custom-file mr-2">
+          <input type="file" name="uploadedFile" class="custom-file-input"/>
+          <span class="custom-file-control"></span>
+        </label>
+        <select name="partyContentTypeId" class="custom-select mr-2">
           <option value="">${uiLabelMap.PartySelectPurpose}</option>
           <#list partyContentTypes as partyContentType>
             <option value="${partyContentType.partyContentTypeId}">${partyContentType.get("description", locale)?default(partyContentType.partyContentTypeId)}</option>
           </#list>
         </select>
-        <select name="mimeTypeId" class="selectBox">
+        <select name="mimeTypeId" class="custom-select mr-2">
           <option value="">${uiLabelMap.PartySelectMimeType}</option>
           <#list mimeTypes as mimeType>
             <option value="${mimeType.mimeTypeId}">${mimeType.get("description", locale)?default(mimeType.mimeTypeId)}</option>
           </#list>
         </select>
-        <input type="submit" value="${uiLabelMap.CommonUpload}" class="smallSubmit"/>
-        </div>
+        <input type="submit" value="${uiLabelMap.CommonUpload}" class="btn btn-primary"/>
       </form>
-    </div>
   </div>
 </div>
 
 <#-- ============================================================= -->
-<div class="screenlet">
-  <h3>${uiLabelMap.PartyContactLists}</h3>
-  <div class="screenlet-body">
-    <table width="100%" border="0" cellpadding="1" cellspacing="0">
+<div class="card">
+  <div class="card-header">
+  <strong>${uiLabelMap.PartyContactLists}</strong>
+  </div>
+  <div class="card-body">
+    <table class="table table-responsive-sm">
       <tr>
         <th>${uiLabelMap.EcommerceListName}</th>
         <#-- <th >${uiLabelMap.OrderListType}</th> -->
@@ -457,15 +499,14 @@ under the License.
         <th>${uiLabelMap.CommonThruDate}</th>
         <th>${uiLabelMap.CommonStatus}</th>
         <th>${uiLabelMap.CommonEmail}</th>
-        <th>&nbsp;</th>
-        <th>&nbsp;</th>
+        <th></th>
+        <th></th>
       </tr>
       <#list contactListPartyList as contactListParty>
       <#assign contactList = contactListParty.getRelatedOne("ContactList", false)! />
       <#assign statusItem = contactListParty.getRelatedOne("StatusItem", true)! />
       <#assign emailAddress = contactListParty.getRelatedOne("PreferredContactMech", true)! />
       <#-- <#assign contactListType = contactList.getRelatedOne("ContactListType", true)/> -->
-      <tr><td colspan="7"></td></tr>
       <tr>
         <td>${contactList.contactListName!}<#if contactList.description?has_content>&nbsp;-&nbsp;${contactList.description}</#if></td>
         <#-- <td><div>${contactListType.get("description",locale)!}</div></td> -->
@@ -473,11 +514,9 @@ under the License.
         <td>${contactListParty.thruDate!}</td>
         <td>${(statusItem.get("description",locale))!}</td>
         <td>${emailAddress.infoString!}</td>
-        <td>&nbsp;</td>
         <td>
           <#if ("CLPT_ACCEPTED" == contactListParty.statusId!)>
-            <form method="post" action="<@ofbizUrl>updateContactListParty</@ofbizUrl>" name="clistRejectForm${contactListParty_index}">
-            <div>
+            <form method="post" class="form-inline" action="<@ofbizUrl>updateContactListParty</@ofbizUrl>" name="clistRejectForm${contactListParty_index}">
               <#assign productStoreId = Static["org.apache.ofbiz.product.store.ProductStoreWorker"].getProductStoreId(request) />
               <input type="hidden" name="productStoreId" value="${productStoreId!}" />
               <input type="hidden" name="partyId" value="${party.partyId}"/>
@@ -485,77 +524,70 @@ under the License.
               <input type="hidden" name="preferredContactMechId" value="${contactListParty.preferredContactMechId}"/>
               <input type="hidden" name="fromDate" value="${contactListParty.fromDate}"/>
               <input type="hidden" name="statusId" value="CLPT_REJECTED"/>
-              <input type="submit" value="${uiLabelMap.EcommerceUnsubscribe}" class="smallSubmit"/>
-              </div>
+              <input type="submit" value="${uiLabelMap.EcommerceUnsubscribe}" class="btn btn-outline-secondary"/>
             </form>
           <#elseif ("CLPT_PENDING" == contactListParty.statusId!)>
-            <form method="post" action="<@ofbizUrl>updateContactListParty</@ofbizUrl>" name="clistAcceptForm${contactListParty_index}">
-            <div>
+            <form method="post" class="form-inline" action="<@ofbizUrl>updateContactListParty</@ofbizUrl>" name="clistAcceptForm${contactListParty_index}">
               <input type="hidden" name="partyId" value="${party.partyId}"/>
               <input type="hidden" name="contactListId" value="${contactListParty.contactListId}"/>
               <input type="hidden" name="preferredContactMechId" value="${contactListParty.preferredContactMechId}"/>
               <input type="hidden" name="fromDate" value="${contactListParty.fromDate}"/>
               <input type="hidden" name="statusId" value="CLPT_ACCEPTED"/>
-              <input type="text" size="10" name="optInVerifyCode" value="" class="inputBox"/>
-              <input type="submit" value="${uiLabelMap.EcommerceVerifySubscription}" class="smallSubmit"/>
+              <div class="btn-group">
+              <input type="text" class="form-control mr-2" name="optInVerifyCode" value=""/>
+              <input type="submit" value="${uiLabelMap.EcommerceVerifySubscription}" class="btn btn-outline-secondary"/>
               </div>
             </form>
           <#elseif ("CLPT_REJECTED" == contactListParty.statusId!)>
-            <form method="post" action="<@ofbizUrl>updateContactListParty</@ofbizUrl>" name="clistPendForm${contactListParty_index}">
-            <div>
+            <form method="post" class="form-inline" action="<@ofbizUrl>updateContactListParty</@ofbizUrl>" name="clistPendForm${contactListParty_index}">
               <input type="hidden" name="partyId" value="${party.partyId}"/>
               <input type="hidden" name="contactListId" value="${contactListParty.contactListId}"/>
               <input type="hidden" name="preferredContactMechId" value="${contactListParty.preferredContactMechId}"/>
               <input type="hidden" name="fromDate" value="${contactListParty.fromDate}"/>
               <input type="hidden" name="statusId" value="CLPT_PENDING"/>
-              <input type="submit" value="${uiLabelMap.EcommerceSubscribe}" class="smallSubmit"/>
-              </div>
+              <input type="submit" value="${uiLabelMap.EcommerceSubscribe}" class="btn btn-outline-secondary"/>
             </form>
           </#if>
         </td>
       </tr>
       </#list>
     </table>
-    <div>
-      <form method="post" action="<@ofbizUrl>createContactListParty</@ofbizUrl>" name="clistPendingForm">
-        <div>
+      <form method="post" class="form-inline" action="<@ofbizUrl>createContactListParty</@ofbizUrl>" name="clistPendingForm">
         <input type="hidden" name="partyId" value="${party.partyId}"/>
+        <label class="mr-2">${uiLabelMap.EcommerceNewListSubscription}: </label>
         <input type="hidden" name="statusId" value="CLPT_PENDING"/>
-        <span class="tableheadtext">${uiLabelMap.EcommerceNewListSubscription}: </span>
-        <select name="contactListId" class="selectBox">
+        <select name="contactListId" class="custom-select mr-2">
           <#list publicContactLists as publicContactList>
             <#-- <#assign publicContactListType = publicContactList.getRelatedOne("ContactListType", true)> -->
             <#assign publicContactMechType = publicContactList.getRelatedOne("ContactMechType", true)! />
             <option value="${publicContactList.contactListId}">${publicContactList.contactListName!} <#-- ${publicContactListType.get("description",locale)} --> <#if publicContactMechType?has_content>[${publicContactMechType.get("description",locale)}]</#if></option>
           </#list>
         </select>
-        <select name="preferredContactMechId" class="selectBox">
+        <select name="preferredContactMechId" class="custom-select mr-2">
         <#-- <option></option> -->
           <#list partyAndContactMechList as partyAndContactMech>
             <option value="${partyAndContactMech.contactMechId}"><#if partyAndContactMech.infoString?has_content>${partyAndContactMech.infoString}<#elseif partyAndContactMech.tnContactNumber?has_content>${partyAndContactMech.tnCountryCode!}-${partyAndContactMech.tnAreaCode!}-${partyAndContactMech.tnContactNumber}<#elseif partyAndContactMech.paAddress1?has_content>${partyAndContactMech.paAddress1}, ${partyAndContactMech.paAddress2!}, ${partyAndContactMech.paCity!}, ${partyAndContactMech.paStateProvinceGeoId!}, ${partyAndContactMech.paPostalCode!}, ${partyAndContactMech.paPostalCodeExt!} ${partyAndContactMech.paCountryGeoId!}</#if></option>
           </#list>
         </select>
-        <input type="submit" value="${uiLabelMap.EcommerceSubscribe}" class="smallSubmit"/>
-        </div>
+        <input type="submit" value="${uiLabelMap.EcommerceSubscribe}" class="btn btn-outline-secondary"/>
       </form>
-    </div>
-    <label>${uiLabelMap.EcommerceListNote}</label>
+    <label class="mt-2">${uiLabelMap.EcommerceListNote}</label>
   </div>
 </div>
 
 <#-- ============================================================= -->
 <#if surveys?has_content>
-<div class="screenlet">
-  <h3>${uiLabelMap.EcommerceSurveys}</h3>
-  <div class="screenlet-body">
-    <table width="100%" border="0" cellpadding="1">
+<div class="card">
+  <div class="card-header">
+    <strong>${uiLabelMap.EcommerceSurveys}</strong>
+  </div>
+  <div class="card-body">
+    <table class="table table-responsive-sm">
       <#list surveys as surveyAppl>
         <#assign survey = surveyAppl.getRelatedOne("Survey", false) />
         <tr>
-          <td>&nbsp;</td>
-          <td valign="top"><div>${survey.surveyName!}&nbsp;-&nbsp;${survey.description!}</div></td>
-          <td>&nbsp;</td>
-          <td valign="top">
+          <td>${survey.surveyName!}&nbsp;-&nbsp;${survey.description!}</td>
+          <td>
             <#assign responses = Static["org.apache.ofbiz.product.store.ProductStoreWorker"].checkSurveyResponse(request, survey.surveyId)?default(0)>
             <#if (responses < 1)>${uiLabelMap.EcommerceNotCompleted}<#else>${uiLabelMap.EcommerceCompleted}</#if>
           </td>
@@ -564,9 +596,7 @@ under the License.
             <#if (responses > 0 && "Y"  == survey.allowUpdate?default("N"))>
               <#assign surveyLabel = uiLabelMap.EcommerceUpdateSurvey />
             </#if>
-            <td align="right"><a href="<@ofbizUrl>takesurvey?productStoreSurveyId=${surveyAppl.productStoreSurveyId}</@ofbizUrl>" class="button">${surveyLabel}</a></td>
-          <#else>
-          &nbsp;
+            <td><a href="<@ofbizUrl>takesurvey?productStoreSurveyId=${surveyAppl.productStoreSurveyId}</@ofbizUrl>" class="btn btn-outline-secondary">${surveyLabel}</a></td>
           </#if>
         </tr>
       </#list>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css Sat Dec 23 09:41:28 2017
@@ -33,10 +33,6 @@
     height: 140px;
 }
 
-.products-card.col-md-3 {
-    margin-bottom: 30px !important;
-}
-
 .products-card .card-title a {
     white-space: normal;
 }
@@ -53,9 +49,26 @@
  }
 
 .quick-links a, #paginationBox a {
-color: #000000;
+    color: #000000;
 }
 
 .footer-block {
     background: #f8f9fa;
 }
+
+.cart-image {
+    width:100px;
+    height:100%;
+}
+
+label.required:after {
+    content:"*";
+    color: #ff0000;
+    font-size: larger;
+    margin-left:2px;
+}
+
+/*TODO: We will remove this when we eliminate ecommain.css.*/
+.card .card-body dl.row > dd {
+    margin-left: 0;
+}
\ No newline at end of file

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CartScreens.xml
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CartScreens.xml?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CartScreens.xml (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CartScreens.xml Sat Dec 23 09:41:28 2017
@@ -57,7 +57,7 @@ under the License.
     <screen name="promoUseDetailsInline">
         <section>
             <widgets>
-                <platform-specific><html><html-template location="component://order/template/entry/cart/PromoUseDetailsInline.ftl"/></html></platform-specific>
+                <platform-specific><html><html-template location="component://ecommerce/template/cart/PromoUseDetailsInline.ftl"/></html></platform-specific>
             </widgets>
         </section>
     </screen>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CustomerScreens.xml
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CustomerScreens.xml?rev=1819128&r1=1819127&r2=1819128&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CustomerScreens.xml (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/widget/CustomerScreens.xml Sat Dec 23 09:41:28 2017
@@ -675,5 +675,13 @@ under the License.
         </section>
     </screen>
 
+    <screen name="creditCardFields">
+        <section>
+            <widgets>
+                <platform-specific><html><html-template location="component://ecommerce/template/customer/CreditCardFields.ftl"/></html></platform-specific>
+            </widgets>
+        </section>
+    </screen>
+
 
 </screens>