svn commit: r1822395 - /ofbiz/ofbiz-plugins/trunk/ecommerce/template/shoppinglist/EditShoppingList.ftl

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

svn commit: r1822395 - /ofbiz/ofbiz-plugins/trunk/ecommerce/template/shoppinglist/EditShoppingList.ftl

Deepak Dixit-5
Author: deepak
Date: Sat Jan 27 11:47:08 2018
New Revision: 1822395

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

Modified:
    ofbiz/ofbiz-plugins/trunk/ecommerce/template/shoppinglist/EditShoppingList.ftl

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/shoppinglist/EditShoppingList.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/shoppinglist/EditShoppingList.ftl?rev=1822395&r1=1822394&r2=1822395&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/shoppinglist/EditShoppingList.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/shoppinglist/EditShoppingList.ftl Sat Jan 27 11:47:08 2018
@@ -57,9 +57,8 @@ under the License.
 <#macro paginationControls>
   <#assign viewIndexMax = Static["java.lang.Math"].ceil((listSize)?double / viewSize?double)>
   <#if (viewIndexMax?int > 0)>
-    <div class="product-prevnext">
         <#-- Start Page Select Drop-Down -->
-        <select name="pageSelect" onchange="callDocumentByPaginate(this[this.selectedIndex].value);">
+        <select name="pageSelect" class="custom-select float-right mb-2" onchange="callDocumentByPaginate(this[this.selectedIndex].value);">
             <option value="#">${uiLabelMap.CommonPage} ${viewIndex?int} ${uiLabelMap.CommonOf} ${viewIndexMax}</option>
             <#if (viewIndex?int > 1)>
                 <#list 0..viewIndexMax as curViewNum>
@@ -68,33 +67,35 @@ under the License.
             </#if>
         </select>
         <#-- End Page Select Drop-Down -->
-        
+
         <#if (viewIndex?int > 1)>
-            <a href="javascript: void(0);" onclick="callDocumentByPaginate('${shoppingListId!}~${viewSize}~${viewIndex?int - 1}');" class="buttontext">${uiLabelMap.CommonPrevious}</a> |
+          <a href="javascript: void(0);" onclick="callDocumentByPaginate('${shoppingListId!}~${viewSize}~${viewIndex?int - 1}');" class="btn btn-outline-secondary">${uiLabelMap.CommonPrevious}</a>
         </#if>
         <#if ((listSize?int - viewSize?int) > 0)>
             <span>${lowIndex} - ${highIndex} ${uiLabelMap.CommonOf} ${listSize}</span>
         </#if>
         <#if highIndex?int < listSize?int>
-         | <a href="javascript: void(0);" onclick="callDocumentByPaginate('${shoppingListId!}~${viewSize}~${viewIndex?int + 1}');" class="buttontext">${uiLabelMap.CommonNext}</a>
+          <a href="javascript: void(0);" onclick="callDocumentByPaginate('${shoppingListId!}~${viewSize}~${viewIndex?int + 1}');" class="btn btn-outline-secondary">${uiLabelMap.CommonNext}</a>
         </#if>
-    </div>
 </#if>
 </#macro>
 
-<div class="screenlet">
-        <div class="boxlink">
+<div class="card">
+  <div class="card-header">
+    <strong>${uiLabelMap.EcommerceShoppingLists}</strong>
+    <div class="boxlink">
             <form id="createEmptyShoppingList" action="<@ofbizUrl>createEmptyShoppingList</@ofbizUrl>" method="post">
                <input type="hidden" name="productStoreId" value="${productStoreId!}" />
-               <a href="javascript:document.getElementById('createEmptyShoppingList').submit();" class="submenutextright">${uiLabelMap.CommonCreateNew}</a>
+               <a href="javascript:document.getElementById('createEmptyShoppingList').submit();">${uiLabelMap.CommonCreateNew}</a>
             </form>
         </div>
-    <h3>${uiLabelMap.EcommerceShoppingLists}</h3>
-    <div class="screenlet-body">
+  </div>
+    <div class="card-body">
         <#if shoppingLists?has_content>
           <form id="selectShoppingList" method="post" action="<@ofbizUrl>editShoppingList</@ofbizUrl>">
-            <fieldset>
-                <select name="shoppingListId">
+            <div class="row">
+              <div class="col-sm-6">
+                <select name="shoppingListId" class="custom-select form-control">
                   <#if shoppingList?has_content>
                     <option value="${shoppingList.shoppingListId}">${shoppingList.listName}</option>
                     <option value="${shoppingList.shoppingListId}">--</option>
@@ -103,14 +104,17 @@ under the License.
                     <option value="${list.shoppingListId}">${list.listName}</option>
                   </#list>
                 </select>
-                <a href="javascript:$('#selectShoppingList').submit();" class="button">${uiLabelMap.CommonEdit}</a>
-            </fieldset>  
+              </div>
+              <div class="col-sm-6">
+                <a href="javascript:$('#selectShoppingList').submit();" class="btn btn-outline-secondary">${uiLabelMap.CommonEdit}</a>
+              </div>
+            </div>
           </form>
         <#else>
-          <label>${uiLabelMap.EcommerceNoShoppingListsCreate}.</label>
+          <label class="mb-2">${uiLabelMap.EcommerceNoShoppingListsCreate}.</label>
           <form id="createEmptyShoppingList" action="<@ofbizUrl>createEmptyShoppingList</@ofbizUrl>" method="post">
              <input type="hidden" name="productStoreId" value="${productStoreId!}" />
-             <input type="submit" name="submit" class="smallSubmit" value="${uiLabelMap.CommonCreateNew}"/>
+             <input type="submit" name="submit" class="btn btn-primary" value="${uiLabelMap.CommonCreateNew}"/>
           </form>
         </#if>
     </div>
@@ -119,41 +123,39 @@ under the License.
 <#if shoppingList?has_content>
     <#if canView>
 
-<div class="screenlet">
-    <div class="screenlet-title-bar">
-        <div class="boxlink">
-          <a class='submenutext' href='javascript:document.createCustRequestFromShoppingList.submit();'>${uiLabelMap.OrderCreateCustRequestFromShoppingList}</a>
-          <a class='submenutext' href='javascript:document.createQuoteFromShoppingList.submit();'>${uiLabelMap.OrderCreateQuoteFromShoppingList}</a>
-          <a href="javascript:document.updateList.submit();" class="submenutextright">${uiLabelMap.CommonSave}</a>
-        </div>
-        <h3>${uiLabelMap.EcommerceShoppingListDetail} - ${shoppingList.listName}</h3>
-    </div>
-    <div class="screenlet-body">
+<div class="card">
+  <div class="card-header">
+    <strong>${uiLabelMap.EcommerceShoppingListDetail} - ${shoppingList.listName}</strong>
+          <a class="float-right ml-2" href='javascript:document.createCustRequestFromShoppingList.submit();'>${uiLabelMap.OrderCreateCustRequestFromShoppingList}</a>
+          <a class="float-right ml-2" href='javascript:document.createQuoteFromShoppingList.submit();'>${uiLabelMap.OrderCreateQuoteFromShoppingList}</a>
+          <a href="javascript:document.updateList.submit();" class="float-right ml-2">${uiLabelMap.CommonSave}</a>
+  </div>
+    <div class="card-body">
       <form name= "createCustRequestFromShoppingList" method= "post" action= "<@ofbizUrl>createCustRequestFromShoppingList</@ofbizUrl>">
-        <fieldset>
           <input type= "hidden" name= "shoppingListId" value= "${shoppingList.shoppingListId}"/>
-        </fieldset>
       </form>
       <form name="createQuoteFromShoppingList" method="post" action="<@ofbizUrl>createQuoteFromShoppingList</@ofbizUrl>">
-        <fieldset>
           <input type="hidden" name="shoppingListId" value="${shoppingList.shoppingListId}"/>
-        </fieldset>
       </form>
       <form name="updateList" method="post" action="<@ofbizUrl>updateShoppingList</@ofbizUrl>">
-        <fieldset class="inline">
           <input type="hidden" class="inputBox" name="shoppingListId" value="${shoppingList.shoppingListId}" />
           <input type="hidden" class="inputBox" name="partyId" value="${shoppingList.partyId?if_exists}" />
-            <div>
+            <div class="row">
+              <div class="col-sm-6">
               <label for="listName">${uiLabelMap.EcommerceListName}</label>
-              <input type="text" size="25" name="listName" id="listName" value="${shoppingList.listName}" />
+              <input type="text" class="form-control" name="listName" id="listName" value="${shoppingList.listName}" />
+              </div>
             </div>
-            <div>
+            <div class="row">
+              <div class="col-sm-6">
               <label for="description">${uiLabelMap.CommonDescription}</label>
-              <input type="text" size="70" name="description" id="description" value="${shoppingList.description?if_exists}" />
+              <input type="text" class="form-control" name="description" id="description" value="${shoppingList.description?if_exists}" />
+            </div>
             </div>
-            <div>
+            <div class="row">
+              <div class="col-sm-6">
               <label for="shoppingListTypeId">${uiLabelMap.OrderListType}</label>
-              <select name="shoppingListTypeId" id="shoppingListTypeId">
+              <select name="shoppingListTypeId" id="shoppingListTypeId" class="form-control custom-select">
                 <#if shoppingListType??>
                   <option value="${shoppingListType.shoppingListTypeId}">${shoppingListType.get("description",locale)?default(shoppingListType.shoppingListTypeId)}</option>
                   <option value="${shoppingListType.shoppingListTypeId}">--</option>
@@ -163,19 +165,23 @@ under the License.
                 </#list>
               </select>
             </div>
-            <div>
+            </div>
+            <div class="row">
+              <div class="col-sm-6">
               <label for="isPublic">${uiLabelMap.EcommercePublic}?</label>
-              <select name="isPublic" id="isPublic">
+              <select name="isPublic" id="isPublic" class="form-control custom-select">
                 <#if ("Y" == ((shoppingList.isPublic)!""))><option value="Y">${uiLabelMap.CommonY}</option></#if>
                 <#if ("N" == ((shoppingList.isPublic)!""))><option value="N">${uiLabelMap.CommonN}</option></#if>
                 <option></option>
                 <option value="Y">${uiLabelMap.CommonY}</option>
                 <option value="N">${uiLabelMap.CommonN}</option>
               </select>
+              </div>
             </div>
-            <div>
+            <div class="row">
+              <div class="col-sm-6">
               <label for="isActive">${uiLabelMap.EcommerceActive}?</label>
-              <select name="isActive" id="isActive">
+              <select name="isActive" id="isActive" class="form-control custom-select">
                 <#if ("Y" == ((shoppingList.isActive)!""))><option value="Y">${uiLabelMap.CommonY}</option></#if>
                 <#if ("N" == ((shoppingList.isActive)!""))><option value="N">${uiLabelMap.CommonN}</option></#if>
                 <option></option>
@@ -183,9 +189,11 @@ under the License.
                 <option value="N">${uiLabelMap.CommonN}</option>
               </select>
             </div>
-            <div>
+            </div>
+            <div class="row">
+              <div class="col-sm-6">
               <label for="parentShoppingListId">${uiLabelMap.EcommerceParentList}</label>
-              <select name="parentShoppingListId" id="parentShoppingListId">
+              <select name="parentShoppingListId" id="parentShoppingListId" class="form-control custom-select">
                 <#if parentShoppingList??>
                   <option value="${parentShoppingList.shoppingListId}">${parentShoppingList.listName?default(parentShoppingList.shoppingListId)}</option>
                 </#if>
@@ -195,42 +203,37 @@ under the License.
                 </#list>
               </select>
               <#if parentShoppingList??>
-                <a href="<@ofbizUrl>editShoppingList?shoppingListId=${parentShoppingList.shoppingListId}</@ofbizUrl>" class="buttontext">${uiLabelMap.CommonGotoParent} (${parentShoppingList.listName?default(parentShoppingList.shoppingListId)})</a>
+                <a href="<@ofbizUrl>editShoppingList?shoppingListId=${parentShoppingList.shoppingListId}</@ofbizUrl>" class="btn btn-link mt-2">${uiLabelMap.CommonGotoParent} (${parentShoppingList.listName?default(parentShoppingList.shoppingListId)})</a>
               </#if>
+              </div>
             </div>
-            <div>
-              <a href="javascript:document.updateList.submit();" class="button">${uiLabelMap.CommonSave}</a>
-            </div>
-          </fieldset>
+              <a href="javascript:document.updateList.submit();" class="btn btn-outline-secondary mt-2">${uiLabelMap.CommonSave}</a>
         </form>
     </div>
 </div>
 
 <#if shoppingListType?? && "SLT_AUTO_REODR" == shoppingListType.shoppingListTypeId>
   <#assign nowTimestamp = Static["org.apache.ofbiz.base.util.UtilDateTime"].monthBegin()>
-<div class="screenlet">
-    <div class="screenlet-title-bar">
-        <div class="boxlink">
-            <a href="javascript:document.reorderinfo.submit();" class="submenutextright">${uiLabelMap.CommonSave}</a>
-        </div>
-        <h3>
+<div class="card">
+    <div class="card-header">
+        <strong>
             ${uiLabelMap.EcommerceShoppingListReorder} - ${shoppingList.listName}
             <#if "N" == shoppingList.isActive?default("N")>
                 ${uiLabelMap.EcommerceOrderNotActive}
             </#if>
-        </h3>
+        </strong>
+      <a href="javascript:document.reorderinfo.submit();" class="float-right">${uiLabelMap.CommonSave}</a>
     </div>
-    <div class="screenlet-body">
+    <div class="card-body">
         <form name="reorderinfo" method="post" action="<@ofbizUrl>updateShoppingList</@ofbizUrl>">
-          <fieldset class="inline">
             <input type="hidden" name="shoppingListId" value="${shoppingList.shoppingListId}" />
-            <div>
-              <span>
                 <label>${uiLabelMap.EcommerceRecurrence}</label>
                 <#if recurrenceInfo?has_content>
                   <#assign recurrenceRule = recurrenceInfo.getRelatedOne("RecurrenceRule", false)!>
                 </#if>
-                <select name="intervalNumber" class="selectBox">
+          <div class="row">
+            <div class="col-sm-6">
+            <select name="intervalNumber" class="custom-select mt-2">
                   <option value="">${uiLabelMap.EcommerceSelectInterval}</option>
                   <option value="1" <#if (recurrenceRule.intervalNumber)?default(0) == 1>selected="selected"</#if>>${uiLabelMap.EcommerceEveryDay}</option>
                   <option value="2" <#if (recurrenceRule.intervalNumber)?default(0) == 2>selected="selected"</#if>>${uiLabelMap.EcommerceEveryOther}</option>
@@ -238,26 +241,35 @@ under the License.
                   <option value="6" <#if (recurrenceRule.intervalNumber)?default(0) == 6>selected="selected"</#if>>${uiLabelMap.EcommerceEvery6th}</option>
                   <option value="9" <#if (recurrenceRule.intervalNumber)?default(0) == 9>selected="selected"</#if>>${uiLabelMap.EcommerceEvery9th}</option>
                 </select>
-                <select name="frequency" class="selectBox">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-6">
+            <select name="frequency" class="custom-select my-2">
                   <option value="">${uiLabelMap.EcommerceSelectFrequency}</option>
                   <option value="4" <#if "DAILY" == (recurrenceRule.frequency)?default("")>selected="selected"</#if>>${uiLabelMap.CommonDay}</option>
                   <option value="5" <#if "WEEKLY" == (recurrenceRule.frequency)?default("")>selected="selected"</#if>>${uiLabelMap.CommonWeek}</option>
                   <option value="6" <#if "MONTHLY" == (recurrenceRule.frequency)?default("")>selected="selected"</#if>>${uiLabelMap.CommonMonth}</option>
                   <option value="7" <#if "YEARLY" == (recurrenceRule.frequency)?default("")>selected="selected"</#if>>${uiLabelMap.CommonYear}</option>
                 </select>
-              </span>
-              <span>
+            </div>
+          </div>
+              <div class="row">
+                <div class="col-sm-6">
                   <label>${uiLabelMap.CommonStartDate}</label>
-                   <@htmlTemplate.renderDateTimeField name="startDateTime" className="" event="" action="" alert="" title="Format: yyyy-MM-dd HH:mm:ss.SSS" value="${(recurrenceInfo.startDateTime)!}" size="25" maxlength="30" id="startDateTime1" dateType="date" shortDateInput=false timeDropdownParamName="" defaultDateTimeString="" localizedIconTitle="" timeDropdown="" timeHourName="" classString="" hour1="" hour2="" timeMinutesName="" minutes="" isTwelveHour="" ampmName="" amSelected="" pmSelected="" compositeType="" formName=""/>
-              </span>
-              <span>
+                  <@htmlTemplate.renderDateTimeField name="startDateTime" className="form-control" event="" action="" alert="" title="Format: yyyy-MM-dd HH:mm:ss.SSS" value="${(recurrenceInfo.startDateTime)!}" size="25" maxlength="30" id="startDateTime1" dateType="date" shortDateInput=false timeDropdownParamName="" defaultDateTimeString="" localizedIconTitle="" timeDropdown="" timeHourName="" classString="" hour1="" hour2="" timeMinutesName="" minutes="" isTwelveHour="" ampmName="" amSelected="" pmSelected="" compositeType="" formName=""/>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-6">
                 <label>${uiLabelMap.CommonEndDate}</label>
-                <@htmlTemplate.renderDateTimeField name="endDateTime" className="textBox" event="" action="" alert="" title="Format: yyyy-MM-dd HH:mm:ss.SSS" value="${(recurrenceRule.untilDateTime)!}" size="25" maxlength="30" id="endDateTime1" dateType="date" shortDateInput=false timeDropdownParamName="" defaultDateTimeString="" localizedIconTitle="" timeDropdown="" timeHourName="" classString="" hour1="" hour2="" timeMinutesName="" minutes="" isTwelveHour="" ampmName="" amSelected="" pmSelected="" compositeType="" formName=""/>
-              </span>
-            </div>
-            <div>
-              <span><label>${uiLabelMap.OrderShipTo}</label>
-                <select name="contactMechId" class="selectBox" onchange="javascript:document.reorderinfo.submit()">
+                  <@htmlTemplate.renderDateTimeField name="endDateTime" className="textBox form-control" event="" action="" alert="" title="Format: yyyy-MM-dd HH:mm:ss.SSS" value="${(recurrenceRule.untilDateTime)!}" size="25" maxlength="30" id="endDateTime1" dateType="date" shortDateInput=false timeDropdownParamName="" defaultDateTimeString="" localizedIconTitle="" timeDropdown="" timeHourName="" classString="" hour1="" hour2="" timeMinutesName="" minutes="" isTwelveHour="" ampmName="" amSelected="" pmSelected="" compositeType="" formName=""/>
+                </div>
+              </div>
+            <div class="row">
+              <div class="col-sm-6">
+              <label>${uiLabelMap.OrderShipTo}</label>
+                <select name="contactMechId" class="custom-select form-control" onchange="javascript:document.reorderinfo.submit()">
                   <option value="">${uiLabelMap.OrderSelectAShippingAddress}</option>
                   <#if shippingContactMechList?has_content>
                     <#list shippingContactMechList as shippingContactMech>
@@ -268,9 +280,12 @@ under the License.
                     <option value="">${uiLabelMap.OrderNoAddressesAvailable}</option>
                   </#if>
                 </select>
-                </span>
-                <span><label>${uiLabelMap.OrderShipVia}</label>
-                  <select name="shippingMethodString" class="selectBox">
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-6">
+                <label>${uiLabelMap.OrderShipVia}</label>
+                  <select name="shippingMethodString" class="custom-select form-control">
                     <option value="">${uiLabelMap.OrderSelectShippingMethod}</option>
                     <#if carrierShipMethods?has_content>
                       <#list carrierShipMethods as shipMeth>
@@ -295,9 +310,12 @@ under the License.
                       <option value="">${uiLabelMap.OrderSelectAddressFirst}</option>
                     </#if>
                   </select>
-                </span>
-                <span><label>${uiLabelMap.OrderPayBy}</label>
-                  <select name="paymentMethodId" class="selectBox">
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-6">
+                <label>${uiLabelMap.OrderPayBy}</label>
+                  <select name="paymentMethodId" class="custom-select form-control">
                     <option value="">${uiLabelMap.OrderSelectPaymentMethod}</option>
                     <#list paymentMethodList as paymentMethod>
                       <#if "CREDIT_CARD" == paymentMethod.paymentMethodTypeId>
@@ -309,14 +327,16 @@ under the License.
                       </#if>
                     </#list>
                   </select>
-                </span>
-              </div>
-              <div>
-                <a href="javascript:document.reorderinfo.submit();" class="buttontext">${uiLabelMap.CommonSave}</a>
-                <a href="<@ofbizUrl>editcontactmech?preContactMechTypeId=POSTAL_ADDRESS&amp;contactMechPurposeTypeId=SHIPPING_LOCATION&amp;DONE_PAGE=editShoppingList</@ofbizUrl>" class="buttontext">${uiLabelMap.PartyAddNewAddress}</a>
-                <a href="<@ofbizUrl>editcreditcard?DONE_PAGE=editShoppingList</@ofbizUrl>" class="buttontext">${uiLabelMap.EcommerceNewCreditCard}</a>
-                <a href="<@ofbizUrl>editeftaccount?DONE_PAGE=editShoppingList</@ofbizUrl>" class="buttontext">${uiLabelMap.EcommerceNewEFTAccount}</a>
               </div>
+            </div>
+          <div class="row mt-3">
+            <div class="col-sm-12">
+                <a href="javascript:document.reorderinfo.submit();" class="btn btn-outline-secondary">${uiLabelMap.CommonSave}</a>
+                <a href="<@ofbizUrl>editcontactmech?preContactMechTypeId=POSTAL_ADDRESS&amp;contactMechPurposeTypeId=SHIPPING_LOCATION&amp;DONE_PAGE=editShoppingList</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.PartyAddNewAddress}</a>
+                <a href="<@ofbizUrl>editcreditcard?DONE_PAGE=editShoppingList</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.EcommerceNewCreditCard}</a>
+                <a href="<@ofbizUrl>editeftaccount?DONE_PAGE=editShoppingList</@ofbizUrl>" class="btn btn-outline-secondary">${uiLabelMap.EcommerceNewEFTAccount}</a>
+            </div>
+          </div>
               <#if "Y" == shoppingList.isActive?default("N")>
                 <div>
                   <#assign nextTime = recInfo.next(lastSlOrderTime)?if_exists />
@@ -353,15 +373,13 @@ under the License.
 </#if>
 
 <#if childShoppingListDatas?has_content>
-<div class="screenlet">
-    <div class="screenlet-title-bar">
-        <div class="boxlink">
-            <a href="<@ofbizUrl>addListToCart?shoppingListId=${shoppingList.shoppingListId}&amp;includeChild=yes</@ofbizUrl>" class="submenutextright">${uiLabelMap.EcommerceAddChildListsToCart}</a>
-        </div>
-        <h3>&nbsp;${uiLabelMap.EcommerceChildShoppingList} - ${shoppingList.listName}</h3>
+<div class="card">
+    <div class="card-header">
+      <strong>${uiLabelMap.EcommerceChildShoppingList} - ${shoppingList.listName}</strong>
+      <a href="<@ofbizUrl>addListToCart?shoppingListId=${shoppingList.shoppingListId}&amp;includeChild=yes</@ofbizUrl>" class="float-right">${uiLabelMap.EcommerceAddChildListsToCart}</a>
     </div>
-    <div class="screenlet-body">
-        <table>
+    <div class="card-body">
+        <table class="table">
           <thead>
               <tr>
                 <th>${uiLabelMap.EcommerceListName}</th>
@@ -382,13 +400,12 @@ under the License.
                   <@ofbizCurrency amount=totalPrice isoCode=currencyUomId/>
                 </td>
                 <td>
-                  <a href="<@ofbizUrl>editShoppingList?shoppingListId=${childShoppingList.shoppingListId}</@ofbizUrl>" class="button">${uiLabelMap.EcommerceGoToList}</a>
-                  <a href="<@ofbizUrl>addListToCart?shoppingListId=${childShoppingList.shoppingListId}</@ofbizUrl>" class="button">${uiLabelMap.EcommerceAddListToCart}</a>
+                  <a href="<@ofbizUrl>editShoppingList?shoppingListId=${childShoppingList.shoppingListId}</@ofbizUrl>" class="btn btn-link">${uiLabelMap.EcommerceGoToList}</a>
+                  <a href="<@ofbizUrl>addListToCart?shoppingListId=${childShoppingList.shoppingListId}</@ofbizUrl>" class="btn btn-link">${uiLabelMap.EcommerceAddListToCart}</a>
                 </td>
               </tr>
             </form>
           </#list>
-          <tr><td colspan="6"><hr /></td></tr>
           <tr>
             <td>&nbsp;</td>
             <td>
@@ -396,31 +413,30 @@ under the License.
             </td>
             <td>&nbsp;</td>
           </tr>
+          </tbody>
         </table>
     </div>
 </div>
 </#if>
 
-<div class="screenlet">
-    <div class="screenlet-title-bar">
-        <div class="boxlink">
-            <a href="<@ofbizUrl>addListToCart?shoppingListId=${shoppingList.shoppingListId}</@ofbizUrl>" class="submenutextright">${uiLabelMap.EcommerceAddListToCart}</a>
-        </div>
-        <h3>${uiLabelMap.EcommerceListItems} - ${shoppingList.listName}</h3>
-    </div>
-    <div class="screenlet-body">
-        <#if shoppingListItemDatas?has_content>
-            <#-- Pagination -->
-            <@paginationControls/>
-            <table width="100%">
-              <thead>
+<div class="card">
+    <div class="card-header">
+      <strong>${uiLabelMap.EcommerceListItems} - ${shoppingList.listName}</strong>
+            <a href="<@ofbizUrl>addListToCart?shoppingListId=${shoppingList.shoppingListId}</@ofbizUrl>" class="float-right">${uiLabelMap.EcommerceAddListToCart}</a>
+    </div>
+    <div class="card-body">
+    <@paginationControls/>
+      <#if shoppingListItemDatas?has_content>
+        <#-- Pagination -->
+            <table class="table table-responsive-sm">
+              <thead class="thead-dark">
                   <tr>
                     <th>${uiLabelMap.OrderProduct}</th>
-                    <th><table><tr><th>- ${uiLabelMap.EcommerceStartdate} -</th><th>- ${uiLabelMap.EcommerceNbrOfDays} -</th></tr><tr><th>- ${uiLabelMap.EcommerceNbrOfPersons} -</th><th>- ${uiLabelMap.CommonQuantity} -</th></tr></table></th>
+                    <th>Reservation</th>
                     <#-- <td nowrap="nowrap" align="center"><div><b>Purchased</b></div></td> -->
                     <th>${uiLabelMap.EcommercePrice}</th>
                     <th>${uiLabelMap.OrderTotal}</th>
-                    <th>&nbsp;</th>
+                    <th></th>
                   </tr>
                 </thead>
                 <tbody>
@@ -434,45 +450,34 @@ under the License.
                 <#assign isVirtual = product.isVirtual?? && product.isVirtual.equals("Y")/>
                   <tr>
                     <td>
-                      <a href="<@ofbizUrl>product?product_id=${shoppingListItem.productId}</@ofbizUrl>" class="button">${shoppingListItem.productId} -
-                      ${productContentWrapper.get("PRODUCT_NAME", "html")?default("No Name")}</a> : ${productContentWrapper.get("DESCRIPTION", "html")!}
+                      <a href="<@ofbizUrl>product?product_id=${shoppingListItem.productId}</@ofbizUrl>" class="btn btn-link">${shoppingListItem.productId}
+                      ${productContentWrapper.get("PRODUCT_NAME", "html")?default("No Name")}</a> <p class="ml-4"><small> ${productContentWrapper.get("DESCRIPTION", "html")!} </small></p>
                     </td>
                     <td>
                       <form method="post" action="<@ofbizUrl>updateShoppingListItem</@ofbizUrl>" name="listform_${shoppingListItem.shoppingListItemSeqId}">
-                        <fieldset>
                           <input type="hidden" name="shoppingListId" value="${shoppingListItem.shoppingListId}" />
                           <input type="hidden" name="shoppingListItemSeqId" value="${shoppingListItem.shoppingListItemSeqId}" />
                           <input type="hidden" name="reservStart" />
+                        <dl>
                           <#if "ASSET_USAGE" == product.productTypeId>
-                           <table>
-                             <tr>
-                               <td>&nbsp;</td>
-                               <td>
-                                 <input type="text" class="inputBox" size="10" name="reservStartStr" value="${shoppingListItem.reservStart?if_exists}" />
-                               </td>
-                               <td>
-                                 <input type="text" class="inputBox" size="2" name="reservLength" value="${shoppingListItem.reservLength?if_exists}" />
-                               </td>
-                             </tr>
-                             <tr>
-                               <td>&nbsp;</td>
-                               <td>
-                                 <input type="text" class="inputBox" size="3" name="reservPersons" value="${shoppingListItem.reservPersons?if_exists}" />
-                               </td>
-                               <td>
+                            <dt>${uiLabelMap.EcommerceStartdate}</dt>
+                            <dd><input type="text" class="inputBox" size="10" name="reservStartStr" value="${shoppingListItem.reservStart?if_exists}" /></dd>
+                            <dt>${uiLabelMap.EcommerceNbrOfDays}</dt>
+                            <dd><input type="text" class="inputBox" size="2" name="reservLength" value="${shoppingListItem.reservLength?if_exists}" /></dd>
+                            <dt>${uiLabelMap.EcommerceNbrOfPersons}</dt>
+                            <dd><input type="text" class="inputBox" size="3" name="reservPersons" value="${shoppingListItem.reservPersons?if_exists}" /></dd>
                           <#else>
-                            <table>
-                              <tr>
-                                <td>--</td>
-                                <td>--</td>
-                              </tr>
-                              <tr>
-                                <td>--</td>
-                                <td><input type="hidden" name="reservStartStr" value="" />
+                              <dt>${uiLabelMap.EcommerceStartdate}</dt>
+                              <dd>--</dd>
+                              <dt>${uiLabelMap.EcommerceNbrOfDays}</dt>
+                              <dd>--</dd>
+                              <dt>${uiLabelMap.EcommerceNbrOfPersons}</dt>
+                              <dd>--</dd>
+                                <input type="hidden" name="reservStartStr" value="" />
                           </#if>
-                          <input size="6" class="inputBox" type="text" name="quantity" value="${shoppingListItem.quantity?string.number}" />
-                          </td></tr></table>
-                        </fieldset>
+                          <dt>${uiLabelMap.CommonQuantity}</dt>
+                          <dd><input size="6" class="inputBox" type="text" name="quantity" value="${shoppingListItem.quantity?string.number}" /></dd>
+                        </dl>
                       </form>
                     </td>
                     <#--
@@ -480,62 +485,65 @@ under the License.
                       <div>${shoppingListItem.quantityPurchased?default(0)?string.number}</div>
                     </td>
                     -->
-                    <td>
+                    <td class="amount">
                       <@ofbizCurrency amount=unitPrice isoCode=currencyUomId/>
                     </td>
-                    <td>
+                    <td class="amount">
                       <@ofbizCurrency amount=totalPrice isoCode=currencyUomId/>
                     </td>
                     <td>
-                        <a href="javascript:TimestampSubmit(listform_${shoppingListItem.shoppingListItemSeqId});" class="button">${uiLabelMap.CommonUpdate}</a>
-                        <a href="javascript:document.removeFromShoppingList.submit();" class="button">${uiLabelMap.CommonRemove}</a>
+                      <div class="btn-group">
+                        <a href="javascript:TimestampSubmit(listform_${shoppingListItem.shoppingListItemSeqId});" class="btn btn-outline-secondary">${uiLabelMap.CommonUpdate}</a>
+                      </div>
+                      <div class="btn-group">
+                        <a href="javascript:document.removeFromShoppingList.submit();" class="btn btn-outline-secondary">${uiLabelMap.CommonRemove}</a>
+                      </div>
                         <form name="removeFromShoppingList" method="post" action="<@ofbizUrl>removeFromShoppingList</@ofbizUrl>">
-                          <fieldset>
                             <input type="hidden" name="shoppingListId" value="${shoppingListItem.shoppingListId!}">
                             <input type="hidden" name="shoppingListItemSeqId" value="${shoppingListItem.shoppingListItemSeqId}">
-                          </fieldset>
                         </form>
                       <#if isVirtual && productVariantAssocs?has_content>
                         <#assign replaceItemAction = "/replaceShoppingListItem/" + requestAttributes._CURRENT_VIEW_?if_exists />
                         <#assign addToCartAction = "/additem/" + requestAttributes._CURRENT_VIEW_?if_exists />
                         <form method="post" action="<@ofbizUrl>${addToCartAction}</@ofbizUrl>" name="listreplform_${shoppingListItem.shoppingListItemSeqId}">
-                          <fieldset>
                             <input type="hidden" name="shoppingListId" value="${shoppingListItem.shoppingListId}" />
                             <input type="hidden" name="shoppingListItemSeqId" value="${shoppingListItem.shoppingListItemSeqId}" />
                             <input type="hidden" name="quantity" value="${shoppingListItem.quantity}" />
-                            <select name="add_product_id" class="selectBox">
+                          <div class="btn-group">
+                          <select name="add_product_id" class="selectBox custom-select mt-2">
                               <#list productVariantAssocs as productVariantAssoc>
                                 <#assign variantProduct = productVariantAssoc.getRelatedOne("AssocProduct", true) />
                                 <#if variantProduct??>
                                 <#assign variantProductContentWrapper = Static["org.apache.ofbiz.product.product.ProductContentWrapper"].makeProductContentWrapper(variantProduct, request) />
-                                  <option value="${variantProduct.productId}">${variantproductContentWrapper.get("PRODUCT_NAME", "html")?default("No Name")} [${variantProduct.productId}]</option>
+                                  <option value="${variantProduct.productId}">${productContentWrapper.get("PRODUCT_NAME", "html")?default("No Name")} [${variantProduct.productId}]</option>
                                 </#if>
                               </#list>
                             </select>
-                            <div>
-                              <a href="javascript:document.listreplform_${shoppingListItem.shoppingListItemSeqId}.action='<@ofbizUrl>${replaceItemAction}</@ofbizUrl>';document.listreplform_${shoppingListItem.shoppingListItemSeqId}.submit();" class="button">${uiLabelMap.EcommerceReplaceWithVariation}</a>
-                            </div>
-                            <div>
-                              <a href="javascript:document.listreplform_${shoppingListItem.shoppingListItemSeqId}.action='<@ofbizUrl>${addToCartAction}</@ofbizUrl>';document.listreplform_${shoppingListItem.shoppingListItemSeqId}.submit();" class="button">${uiLabelMap.CommonAdd}&nbsp;${shoppingListItem.quantity?string}&nbsp;${uiLabelMap.EcommerceVariationToCart}</a>
-                            </div>
-                          </fieldset>
+                          </div>
+                          <div class="btn-group">
+                            <a href="javascript:document.listreplform_${shoppingListItem.shoppingListItemSeqId}.action='<@ofbizUrl>${addToCartAction}</@ofbizUrl>';document.listreplform_${shoppingListItem.shoppingListItemSeqId}.submit();" class="btn btn-primary mt-2">${uiLabelMap.CommonAdd}&nbsp;${shoppingListItem.quantity?string}${uiLabelMap.EcommerceVariationToCart}</a>
+                          </div>
+                          <div class="btn-group">
+                            <a href="javascript:document.listreplform_${shoppingListItem.shoppingListItemSeqId}.action='<@ofbizUrl>${replaceItemAction}</@ofbizUrl>';document.listreplform_${shoppingListItem.shoppingListItemSeqId}.submit();" class="btn btn-outline-secondary mt-2">${uiLabelMap.EcommerceReplaceWithVariation}</a>
+                          </div>
                         </form>
                       <#else>
-                        <a href="<@ofbizUrl>additem<#if requestAttributes._CURRENT_VIEW_?exists>/${requestAttributes._CURRENT_VIEW_}</#if>?shoppingListId=${shoppingListItem.shoppingListId}&amp;shoppingListItemSeqId=${shoppingListItem.shoppingListItemSeqId}&amp;quantity=${shoppingListItem.quantity}&amp;reservStart=${shoppingListItem.reservStart?if_exists}&amp;reservPersons=${shoppingListItem.reservPersons?if_exists}&amp;reservLength=${shoppingListItem.reservLength?if_exists}&amp;configId=${shoppingListItem.configId?if_exists}&amp;add_product_id=${shoppingListItem.productId}</@ofbizUrl>" class="button">${uiLabelMap.CommonAdd}&nbsp;${shoppingListItem.quantity?string}&nbsp;${uiLabelMap.OrderToCart}</a>
+                      <div class="btn-group">
+                        <a href="<@ofbizUrl>additem<#if requestAttributes._CURRENT_VIEW_?exists>/${requestAttributes._CURRENT_VIEW_}</#if>?shoppingListId=${shoppingListItem.shoppingListId}&amp;shoppingListItemSeqId=${shoppingListItem.shoppingListItemSeqId}&amp;quantity=${shoppingListItem.quantity}&amp;reservStart=${shoppingListItem.reservStart?if_exists}&amp;reservPersons=${shoppingListItem.reservPersons?if_exists}&amp;reservLength=${shoppingListItem.reservLength?if_exists}&amp;configId=${shoppingListItem.configId?if_exists}&amp;add_product_id=${shoppingListItem.productId}</@ofbizUrl>" class="btn btn-primary mt-2">${uiLabelMap.CommonAdd} ${shoppingListItem.quantity?string}&nbsp;${uiLabelMap.OrderToCart}</a>
+                      </div>
                       </#if>
                     </td>
                   </tr>
               </#list>
-              <tr><td><hr /></td></tr>
               <tr>
-                <td>&nbsp;</td>
-                <td>&nbsp;</td>
+                <td></td>
+                <td></td>
                 <#--<td><div>&nbsp;</div></td>-->
-                <td>&nbsp;</td>
-                <td>
+                <td></td>
+                <td class="amount">
                   <@ofbizCurrency amount=shoppingListItemTotal isoCode=currencyUomId/>
                 </td>
-                <td>&nbsp;</td>
+                <td></td>
               </tr>
               </tbody>
             </table>
@@ -545,35 +553,34 @@ under the License.
     </div>
 </div>
 
-<div class="screenlet">
-    <h3>${uiLabelMap.EcommerceShoppingListPriceTotals} - ${shoppingList.listName}</h3>
-    <div class="screenlet-body">
-      <div>
-        <label>${uiLabelMap.EcommerceChildListTotalPrice}</label>
-        <@ofbizCurrency amount=shoppingListChildTotal isoCode=currencyUomId/>
-      </div>
-      <div>
-        <label>${uiLabelMap.EcommerceListItemsTotalPrice}</label>
-        <@ofbizCurrency amount=shoppingListItemTotal isoCode=currencyUomId/>
-      </div>
-      <div>
-        <label>${uiLabelMap.OrderGrandTotal}</label>
-        <@ofbizCurrency amount=shoppingListTotalPrice isoCode=currencyUomId/>
-      </div>
+<div class="card">
+  <div class="card-header">
+    <strong>${uiLabelMap.EcommerceShoppingListPriceTotals} - ${shoppingList.listName}</strong>
+  </div>
+    <div class="card-body">
+      <dl class="row">
+        <dt class="col-sm-2">${uiLabelMap.EcommerceChildListTotalPrice}</dt>
+        <dd class="col-sm-10 amount"><@ofbizCurrency amount=shoppingListChildTotal isoCode=currencyUomId/></dd>
+        <dt class="col-sm-2">${uiLabelMap.EcommerceListItemsTotalPrice}</dt>
+        <dd class="col-sm-10 amount"><@ofbizCurrency amount=shoppingListItemTotal isoCode=currencyUomId/></dd>
+        <dt class="col-sm-2">${uiLabelMap.OrderGrandTotal}</dt>
+        <dd class="col-sm-10 amount"><@ofbizCurrency amount=shoppingListTotalPrice isoCode=currencyUomId/></dd>
+      </dl>
     </div>
 </div>
 
-<div class="screenlet">
-    <h3>${uiLabelMap.CommonQuickAddList}</h3>
-    <div class="screenlet-body">
-        <form name="addToShoppingList" method="post" action="<@ofbizUrl>addItemToShoppingList</@ofbizUrl>">
-          <fieldset class="inline>
+<div class="card">
+  <div class="card-header">
+    <strong>${uiLabelMap.CommonQuickAddList}</strong>
+  </div>
+    <div class="card-body">
+        <form name="addToShoppingList" class="form-inline" method="post" action="<@ofbizUrl>addItemToShoppingList</@ofbizUrl>">
             <input type="hidden" name="shoppingListId" value="${shoppingList.shoppingListId}" />
-            <input type="text" class="inputBox" name="productId" value="${requestParameters.add_product_id?if_exists}" />
-            <#if reservStart?exists><label>${uiLabelMap.EcommerceStartDate}</label><input type="text" class="inputBox" size="10" name="reservStart" value="${requestParameters.reservStart?default("")}" /><label> ${uiLabelMap.EcommerceLength}:</label><input type="text" class="inputBox" size="2" name="reservLength" value="${requestParameters.reservLength?default("")}" ><label>${uiLabelMap.OrderNbrPersons}:</label><input type="text" class="inputBox" size="3" name="reservPersons" value="${requestParameters.reservPersons?default("1")}" /></#if> <label>${uiLabelMap.CommonQuantity} :</label><input type="text" class="inputBox" size="5" name="quantity" value="${requestParameters.quantity?default("1")}" />
+
+            <input type="text" class="form-control mr-2" name="productId" value="${requestParameters.add_product_id?if_exists}" />
+            <#if reservStart?exists><label class="mr-2">${uiLabelMap.EcommerceStartDate}</label><input type="text" class="form-control mr-2" name="reservStart" value="${requestParameters.reservStart?default("")}" /><label class="mr-2"> ${uiLabelMap.EcommerceLength}:</label><input type="text" class="form-control mr-2" name="reservLength" value="${requestParameters.reservLength?default("")}" ><label>${uiLabelMap.OrderNbrPersons}:</label><input type="text" class="inputBox" size="3" name="reservPersons" value="${requestParameters.reservPersons?default("1")}" /></#if> <label class="mr-2">${uiLabelMap.CommonQuantity} :</label><input type="text" class="form-control mr-2" name="quantity" value="${requestParameters.quantity?default("1")}" />
             <!-- <input type="text" class="inputBox" size="5" name="quantity" value="${requestParameters.quantity?default("1")}" />-->
-            <input type="submit" class="smallSubmit" value="${uiLabelMap.OrderAddToShoppingList}" />
-          </fieldset>
+            <input type="submit" class="btn btn-outline-secondary" value="${uiLabelMap.OrderAddToShoppingList}" />
         </form>
     </div>
 </div>