From 436d120c2963b2d6e6edd7c078fce271f270aa92 Mon Sep 17 00:00:00 2001
From: Guanhuan Chen <oooomic@gmail.com>
Date: Tue, 1 Dec 2015 18:11:13 +0000
Subject: [PATCH] Add crm-public-form-item class to contribution page and add
 possibility to style profiles consistently

---
 .../CRM/Contribute/Form/Contribution/Main.tpl | 67 +++++++++++--------
 .../Form/Contribution/OnBehalfOf.tpl          |  6 +-
 2 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/templates/CRM/Contribute/Form/Contribution/Main.tpl b/templates/CRM/Contribute/Form/Contribution/Main.tpl
index 52e4f25a94..8189db7bb7 100644
--- a/templates/CRM/Contribute/Form/Contribution/Main.tpl
+++ b/templates/CRM/Contribute/Form/Contribution/Main.tpl
@@ -25,8 +25,9 @@
 *}
 {* Callback snippet: On-behalf profile *}
 {if $snippet and !empty($isOnBehalfCallback)}
-  {include file="CRM/Contribute/Form/Contribution/OnBehalfOf.tpl" context="front-end"}
-
+  <div class="crm-public-form-item crm-section">
+    {include file="CRM/Contribute/Form/Contribution/OnBehalfOf.tpl" context="front-end"}
+  </div>
 {else}
   {literal}
   <script type="text/javascript">
@@ -75,7 +76,7 @@
     </div>
   {/if}
 
-  <div id="intro_text" class="crm-section intro_text-section">
+  <div id="intro_text" class="crm-public-form-item crm-section intro_text-section">
     {$intro_text}
   </div>
   {include file="CRM/common/cidzero.tpl"}
@@ -84,7 +85,9 @@
   {/if}
 
   {if !empty($useForMember)}
-  {include file="CRM/Contribute/Form/Contribution/MembershipBlock.tpl" context="makeContribution"}
+  <div class="crm-public-form-item crm-section">
+    {include file="CRM/Contribute/Form/Contribution/MembershipBlock.tpl" context="makeContribution"}
+  </div>
     {else}
   <div id="priceset-div">
   {include file="CRM/Price/Form/PriceSet.tpl" extends="Contribution"}
@@ -93,13 +96,13 @@
 
   {if $pledgeBlock}
     {if $is_pledge_payment}
-    <div class="crm-section {$form.pledge_amount.name}-section">
+    <div class="crm-public-form-item crm-section {$form.pledge_amount.name}-section">
       <div class="label">{$form.pledge_amount.label}&nbsp;<span class="crm-marker">*</span></div>
       <div class="content">{$form.pledge_amount.html}</div>
       <div class="clear"></div>
     </div>
       {else}
-    <div class="crm-section {$form.is_pledge.name}-section">
+    <div class="crm-public-form-item crm-section {$form.is_pledge.name}-section">
       <div class="label">&nbsp;</div>
       <div class="content">
         {$form.is_pledge.html}&nbsp;
@@ -114,7 +117,7 @@
   {/if}
 
   {if $form.is_recur}
-  <div class="crm-section {$form.is_recur.name}-section">
+  <div class="crm-public-form-item crm-section {$form.is_recur.name}-section">
     <div class="label">&nbsp;</div>
     <div class="content">
       {$form.is_recur.html} {$form.is_recur.label} {ts}every{/ts}
@@ -145,14 +148,14 @@
   </div>
   {/if}
   {if $pcpSupporterText}
-  <div class="crm-section pcpSupporterText-section">
+  <div class="crm-public-form-item crm-section pcpSupporterText-section">
     <div class="label">&nbsp;</div>
     <div class="content">{$pcpSupporterText}</div>
     <div class="clear"></div>
   </div>
   {/if}
   {assign var=n value=email-$bltID}
-  <div class="crm-section {$form.$n.name}-section">
+  <div class="crm-public-form-item crm-section {$form.$n.name}-section">
     <div class="label">{$form.$n.label}</div>
     <div class="content">
       {$form.$n.html}
@@ -160,21 +163,27 @@
     <div class="clear"></div>
   </div>
 
-  {include file="CRM/Contribute/Form/Contribution/OnBehalfOf.tpl"}
+  <div class="crm-public-form-item crm-section">
+    {include file="CRM/Contribute/Form/Contribution/OnBehalfOf.tpl"}
+  </div>
 
   {* User account registration option. Displays if enabled for one of the profiles on this page. *}
-  {include file="CRM/common/CMSUser.tpl"}
-  {include file="CRM/Contribute/Form/Contribution/PremiumBlock.tpl" context="makeContribution"}
+  <div class="crm-public-form-item crm-section cms_user-section">
+    {include file="CRM/common/CMSUser.tpl"}
+  </div>
+  <div class="crm-public-form-item crm-section premium_block-section">
+    {include file="CRM/Contribute/Form/Contribution/PremiumBlock.tpl" context="makeContribution"}
+  </div>
 
   {if $honoreeProfileFields|@count}
-    <fieldset class="crm-group honor_block-group">
+    <fieldset class="crm-public-form-item crm-group honor_block-group">
       {crmRegion name="contribution-soft-credit-block"}
         <legend>{$honor_block_title}</legend>
-        <div class="crm-section honor_block_text-section">
+        <div class="crm-public-form-item crm-section honor_block_text-section">
           {$honor_block_text}
         </div>
         {if $form.soft_credit_type_id.html}
-          <div class="crm-section {$form.soft_credit_type_id.name}-section">
+          <div class="crm-public-form-item crm-section {$form.soft_credit_type_id.name}-section">
             <div class="content" >
               {$form.soft_credit_type_id.html}
               <div class="description">{ts}Select an option to reveal honoree information fields.{/ts}</div>
@@ -188,34 +197,34 @@
     </fieldset>
   {/if}
 
-  <div class="crm-group custom_pre_profile-group">
+  <div class="crm-public-form-item crm-group custom_pre_profile-group">
   {include file="CRM/UF/Form/Block.tpl" fields=$customPre}
   </div>
 
   {if $isHonor}
-  <fieldset class="crm-group pcp-group">
-    <div class="crm-section pcp-section">
-      <div class="crm-section display_in_roll-section">
+  <fieldset class="crm-public-form-item crm-group pcp-group">
+    <div class="crm-public-form-item crm-section pcp-section">
+      <div class="crm-public-form-item crm-section display_in_roll-section">
         <div class="content">
           {$form.pcp_display_in_roll.html} &nbsp;
           {$form.pcp_display_in_roll.label}
         </div>
         <div class="clear"></div>
       </div>
-      <div id="nameID" class="crm-section is_anonymous-section">
+      <div id="nameID" class="crm-public-form-item crm-section is_anonymous-section">
         <div class="content">
           {$form.pcp_is_anonymous.html}
         </div>
         <div class="clear"></div>
       </div>
-      <div id="nickID" class="crm-section pcp_roll_nickname-section">
+      <div id="nickID" class="crm-public-form-item crm-section pcp_roll_nickname-section">
         <div class="label">{$form.pcp_roll_nickname.label}</div>
         <div class="content">{$form.pcp_roll_nickname.html}
           <div class="description">{ts}Enter the name you want listed with this contribution. You can use a nick name like 'The Jones Family' or 'Sarah and Sam'.{/ts}</div>
         </div>
         <div class="clear"></div>
       </div>
-      <div id="personalNoteID" class="crm-section pcp_personal_note-section">
+      <div id="personalNoteID" class="crm-public-form-item crm-section pcp_personal_note-section">
         <div class="label">{$form.pcp_personal_note.label}</div>
         <div class="content">
           {$form.pcp_personal_note.html}
@@ -229,9 +238,9 @@
 
   {if $form.payment_processor_id.label}
   {* PP selection only works with JS enabled, so we hide it initially *}
-  <fieldset class="crm-group payment_options-group" style="display:none;">
+  <fieldset class="crm-public-form-item crm-group payment_options-group" style="display:none;">
     <legend>{ts}Payment Options{/ts}</legend>
-    <div class="crm-section payment_processor-section">
+    <div class="crm-public-form-item crm-section payment_processor-section">
       <div class="label">{$form.payment_processor_id.label}</div>
       <div class="content">{$form.payment_processor_id.html}</div>
       <div class="clear"></div>
@@ -240,9 +249,9 @@
   {/if}
 
   {if $is_pay_later}
-  <fieldset class="crm-group pay_later-group">
+  <fieldset class="crm-public-form-item crm-group pay_later-group">
     <legend>{ts}Payment Options{/ts}</legend>
-    <div class="crm-section pay_later_receipt-section">
+    <div class="crm-public-form-item crm-section pay_later_receipt-section">
       <div class="label">&nbsp;</div>
       <div class="content">
         [x] {$pay_later_text}
@@ -257,13 +266,13 @@
   </div>
   {include file="CRM/common/paymentBlock.tpl"}
 
-  <div class="crm-group custom_post_profile-group">
+  <div class="crm-public-form-item crm-group custom_post_profile-group">
   {include file="CRM/UF/Form/Block.tpl" fields=$customPost}
   </div>
 
   {if $is_monetary and $form.bank_account_number}
   <div id="payment_notice">
-    <fieldset class="crm-group payment_notice-group">
+    <fieldset class="crm-public-form-item crm-group payment_notice-group">
       <legend>{ts}Agreement{/ts}</legend>
       {ts}Your account data will be used to charge your bank account via direct debit. While submitting this form you agree to the charging of your bank account via direct debit.{/ts}
     </fieldset>
@@ -277,7 +286,7 @@
   {include file="CRM/common/formButtons.tpl" location="bottom"}
   </div>
   {if $footer_text}
-  <div id="footer_text" class="crm-section contribution_footer_text-section">
+  <div id="footer_text" class="crm-public-form-item crm-section contribution_footer_text-section">
     <p>{$footer_text}</p>
   </div>
   {/if}
diff --git a/templates/CRM/Contribute/Form/Contribution/OnBehalfOf.tpl b/templates/CRM/Contribute/Form/Contribution/OnBehalfOf.tpl
index 56ab65c912..cf2ac04fe2 100644
--- a/templates/CRM/Contribute/Form/Contribution/OnBehalfOf.tpl
+++ b/templates/CRM/Contribute/Form/Contribution/OnBehalfOf.tpl
@@ -30,7 +30,7 @@
  * FIXME: Why are we not just using the dynamic form tpl to display this profile?
  *}
 {if $form.is_for_organization}
-  <div class="crm-section {$form.is_for_organization.name}-section">
+  <div class="crm-public-form-item crm-section {$form.is_for_organization.name}-section">
     <div class="label">&nbsp;</div>
     <div class="content">
       {$form.is_for_organization.html}&nbsp;{$form.is_for_organization.label}
@@ -39,13 +39,13 @@
   </div>
 {/if}
 
-<div id="on-behalf-block">
+<div class="crm-public-form-item" id="on-behalf-block">
   {crmRegion name="onbehalf-block"}
     {if $onBehalfOfFields|@count}
       <fieldset>
       <legend>{$fieldSetTitle}</legend>
       {if $form.org_option}
-        <div id='orgOptions' class="section crm-section">
+        <div id='orgOptions' class="section crm-public-form-item crm-section">
           <div class="content">
             {$form.org_option.html}
           </div>
-- 
2.25.1