UI spring cleaning: animate company/spouse/contact hide/unhide

diff --git a/httemplate/edit/cust_main/basics.html b/httemplate/edit/cust_main/basics.html
index 2ca6f65..e484c73 100644 (file)
--- a/httemplate/edit/cust_main/basics.html
+++ b/httemplate/edit/cust_main/basics.html
@@ -25,15 +25,21 @@
 
   function rescom_changed(what) {
     if ( what.checked == (what.value == 'Commercial' ) ) {
-      document.getElementById('company_row').style.display = '';
-      document.getElementById('contacts_div').style.display = '';
-      document.getElementById('spouse_row').style.display = 'none';
+      $('#company_label').slideDown();
+      $('#company_input').slideDown();
+      $('#contacts_div').slideDown();
+      $('#spouse_label').slideUp();
+      $('#spouse_last_input').slideUp();
+      $('#spouse_first_input').slideUp();
     } else {
       if ( document.getElementById('company').value.length == 0 ) {
-        document.getElementById('company_row').style.display = 'none';
+        $('#company_label').slideUp();
+        $('#company_input').slideUp();
       }
-      document.getElementById('contacts_div').style.display = 'none';
-      document.getElementById('spouse_row').style.display = '';
+      $('#contacts_div').slideUp();
+      $('#spouse_label').slideDown();
+      $('#spouse_last_input').slideDown();
+      $('#spouse_first_input').slideDown();
     }
   }
 

diff --git a/httemplate/edit/cust_main/company.html b/httemplate/edit/cust_main/company.html
index 50c4f70..3341d80 100644 (file)
--- a/httemplate/edit/cust_main/company.html
+++ b/httemplate/edit/cust_main/company.html
@@ -1,7 +1,8 @@
 % my $cust_main = shift;
-<TR ID="company_row" <% $cust_main->company ? '' : 'STYLE="display:none"' %>>
-  <TH ALIGN="right"><% mt('Company') |h %></TD>
-  <TD COLSPAN=6><INPUT TYPE="text" NAME="company" ID="company" SIZE=60
+% my $style = $cust_main->company ? '' : 'STYLE="display:none"';
+<TR ID="company_row">
+  <TH ALIGN="right"><DIV ID="company_label" <%$style%>><% mt('Company') |h %></DIV></TD>
+  <TD COLSPAN=6><DIV ID="company_input" <%$style%>><INPUT TYPE="text" NAME="company" ID="company" SIZE=60
              VALUE="<% $cust_main->company |h %>">
-  </TD>
+  </DIV></TD>
 </TR>

diff --git a/httemplate/edit/cust_main/name.html b/httemplate/edit/cust_main/name.html
index bc55801..13bd097 100644 (file)
--- a/httemplate/edit/cust_main/name.html
+++ b/httemplate/edit/cust_main/name.html
@@ -1,6 +1,6 @@
 <%def .namepart>
 % my ($field, $value, $label, $extra) = @_;
-<DIV STYLE="display: inline-block">
+<DIV STYLE="display: inline-block" ID="<% $field %>_input">
   <INPUT TYPE="text" NAME="<% $field %>" VALUE="<% $value |h %>" <%$extra%>>
   <BR><FONT SIZE="-1" COLOR="#333333"><% mt($label) %></FONT>
 </DIV>
@@ -21,7 +21,7 @@
 </TR>
 % if ( $conf->exists('cust_main-enable_spouse') ) {
 <TR ID="spouse_row">
-  <TH CLASS="label"><% mt('Spouse\'s name') |h %></TD>
+  <TH CLASS="label" ALIGN="right"><DIV ID="spouse_label"><% mt('Spouse\'s name') |h %></DIV></TD>
   <TD COLSPAN=6>
         <& .namepart, 'spouse_last', $cust_main->spouse_last, 'Last', ',' &>
         <& .namepart, 'spouse_first', $cust_main->spouse_first, 'First' &>