From: Steve Sutton <steve@gaslightmedia.com>
Date: Thu, 12 Feb 2015 16:51:08 +0000 (-0500)
Subject: Foundationize the Forms
X-Git-Tag: v1.0.0^2~39^2~3
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=1741eace5c01ee9b1c2ece978cf6fc2631045f71;p=web%2FTroutCreek.git

Foundationize the Forms

Bring in foundation form banrkup from stignacebudgethost and modify it
so the form is on one column.
---

diff --git a/Toolkit/Contacts/ContactUs.php b/Toolkit/Contacts/ContactUs.php
index daf22f8..56436ac 100755
--- a/Toolkit/Contacts/ContactUs.php
+++ b/Toolkit/Contacts/ContactUs.php
@@ -507,26 +507,28 @@ class Toolkit_Contacts_ContactUs
             'type'    => 'date',
             'req'     => false,
             'name'    => 'arrive_date',
-            'display' => 'Date Requested From:',
+            'display' => 'Date Requested From:<br>',
             'opts'    => array(
                     'language'       => 'en',
                     'format'         => 'mdY',
                     'minYear'        => date('Y'),
                     'maxYear'        => date('Y') + 3,
-                    'addEmptyOption' => true
+                    'addEmptyOption' => true,
+                    'emptyOptionText' => array('m' => '--Month--','d' => '--Day--','Y' => '--Year--')
                 )
         );
         $e[] = array(
             'type'    => 'date',
             'req'     => false,
             'name'    => 'depart_date',
-            'display' => 'Date Requested To:',
+            'display' => 'Date Requested To:<br>',
             'opts'    => array(
                     'language'       => 'en',
                     'format'         => 'mdY',
                     'minYear'        => date('Y'),
                     'maxYear'        => date('Y') + 3,
-                    'addEmptyOption' => true
+                    'addEmptyOption' => true,
+                    'emptyOptionText' => array('m' => '--Month--','d' => '--Day--','Y' => '--Year--')
                 )
         );
 $e[] = array(
@@ -608,7 +610,8 @@ $e[] = array(
             'type'    => 'submit',
             'req'     => false,
             'name'    => 'submit_rmv',
-            'display' => 'Submit Form'
+            'display' => 'Submit Form',
+            'opts'    => array('class' => 'button')
         );
 
         $this->setupElements($e);
diff --git a/Toolkit/Contacts/ENews.php b/Toolkit/Contacts/ENews.php
index 6e0a7ae..338609c 100755
--- a/Toolkit/Contacts/ENews.php
+++ b/Toolkit/Contacts/ENews.php
@@ -267,7 +267,8 @@ class Toolkit_Contacts_ENews
             'type'    => 'submit',
             'req'     => false,
             'name'    => 'submit_rmv',
-            'display' => 'Submit Form'
+            'display' => 'Submit Form',
+            'opts'    => array('class' => 'button')
         );
 
         $this->setupElements($e);
diff --git a/Toolkit/Contacts/templates/contactForm.html b/Toolkit/Contacts/templates/contactForm.html
index 2f2f84a..17e9eb8 100644
--- a/Toolkit/Contacts/templates/contactForm.html
+++ b/Toolkit/Contacts/templates/contactForm.html
@@ -3,69 +3,76 @@
     {form.outputHeader():h}
     {form.hidden:h}
     {hidden}
-    <table>
+
     {foreach:form.sections,sec}
-    <tr>
-        <td class="header" colspan="2">
-        <b>{sec.header:h}</b></td>
-    </tr>
+    {if:sec.header}
+    <fieldset>
+            <legend>{sec.header:h}</legend>
+    {end:}
+                    <div class="row">
         {foreach:sec.elements,elem}
             {if:elem.style}
               {elem.outputStyle():h}
             {else:}
                 {if:elem.isButton()}
                     {if:elem.notFrozen()}
-                    <tr>
-                        <td class="labelcell">&nbsp;</td>
-                        <td class="fieldcell">{elem.html:h}</td>
-                    </tr>
+                        <div class="small-12 columns">{elem.html:h}</div>
+
                     {end:}
                 {else:}
-                    <tr>
+                    {if:elem.error}
+                        <div class="small-12 columns error">
+                    {else:}
+                        <div class="small-12 columns">
+                        {end:}
                     {if:elem.isType(#textarea#)}
-                        <td colspan="2">
+                        {if:elem.required}<label class="req">{else:}<label>{end:}
+
                             {if:elem.required}<span class="req">*</span>{end:}
-                            {if:elem.error}<div class="req">{end:}
-                            {elem.label:h}<br>
-                            {if:elem.error}</div>{end:}
+                            {elem.label:h}
                     {else:}
                         {if:elem.isType(#CAPTCHA_Image#)}
-                            <td class="labelcell captcha">
+                                {if:elem.required}<label>{else:}<label class="req glmCaptchaImg">{end:}
                                 {if:elem.required}<span class="req">*</span>{end:}
-                                {if:elem.error}<div class="req">{end:}
-                                {elem.label:h}
-                                {if:elem.error}</div>{end:}
-                            </td>
-                            <td class="fieldcell">
+                            {elem.label:h}
+
                         {else:}
                             {if:elem.isType(#group#)}
-                                <td colspan="2">
+                                {if:element.isName(#interest#)}
+                                {else:}
+                                    {if:elem.required}<label class="req">{else:}<label>{end:}
                                     {if:elem.required}<span class="req">*</span>{end:}
-                                    {if:elem.error}<div class="req">{end:}
                                     {elem.label:h}<br>
-                                    {if:elem.error}</div>{end:}
+                                {end:}
                             {else:}
-                                <td class="labelcell">
+                                {if:!element.isType(select)}
+                                    {if:elem.required}<label class="req">{else:}<label>{end:}
+                                {end:}
                                     {if:elem.required}<span class="req">*</span>{end:}
-                                    {if:elem.error}<div class="req">{end:}
                                     {elem.label:h}
-                                    {if:elem.error}</div>{end:}
-                                </td>
+
                                 {if:elem.isName(#interest#)}
-                                    <td class="fieldcell checkbox">
+
                                 {else:}
-                                    <td class="fieldcell">
+
                                 {end:}
                             {end:}
                         {end:}
                     {end:}
-                    {if:elem.error}<div class="error">{elem.error}</div>{end:}
+
                     {if:elem.isType(#group#)}
-                        {foreach:elem.elements,gitem}
-                            {gitem.label:h}
-                            {gitem.html:h}{if:gitem.required}<div class="req">*</div>{end:}
-                            {if:elem.separator}{elem.separator:h}{end:}
-                        {end:}
+
+                        <div class="row collapse">
+
+                            {foreach:elem.elements,gitem}
+                            <div class="small-12 medium-6 columns">
+                                {gitem.html:h}{if:gitem.required}<div class="req">*</div>{end:}
+                                {if:elem.separator}{elem.separator:h}{end:}
+                            </div>
+                            {end:}
+
+                        </div>
+
                     {else:}
                         {elem.html:h}
                         {if:elem.isName(#captcha_rmv#)}
@@ -77,14 +84,22 @@
                             </span>
                         {end:}
                     {end:}
-                </td>
-              </tr>
+                                {if:!element.isType(select)}
+                                    </label>
+                                {end:}
+                            {if:elem.error}<small class="error">{elem.error}</small>{end:}
+                                </div> <!-- end for columns -->
                 {end:}
             {end:}
         {end:}  <!-- end for foreach:sec.element,elem -->
+                    </div> <!-- end for row -->
+
+    {if:sec.header}
+    </fieldset>
+    {end:}
     {end:} <!-- end for foreach:form.section,sec -->
 
-		</table>
+
 	</form>
 	{if:form.requirednote}
     <div>{form.requirednote:h}</div>
diff --git a/css/app.css b/css/app.css
index 7f3eeae..be059c9 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6143,6 +6143,9 @@ img {
 #toolbox #breadcrumbs {
   margin-left: 15px; }
 
+#home #toolbox {
+  padding: 0 45px; }
+
 .webform table {
   margin: 10px 0 0 0;
   clear: both; }
diff --git a/css/contactform.css b/css/contactform.css
index 59d8288..2750707 100644
--- a/css/contactform.css
+++ b/css/contactform.css
@@ -98,16 +98,22 @@ table tr.req td.instructioncell {
     border-width: 0;
     color: #000;
     }
-.glmCheckBox {
-    width: 200px;
-    float: left;
+#contact .glmCheckBox {
+    /*width: 200px;*/
+    /*float: left;*/
 }
-.single-checkbox label.glmCheckBox {
+#contact label.glmCheckBox {
     width: auto;
     float: none;
 }
+#contact label.glmCheckBox input[type="checkbox"] {
+    margin: 5px;
+}
 /* Additions for the foundation zurb */
-#contact table tr td select {
-    width: auto;
+#contact select[name$="]"] {
+    width: 33.3333%;
+}
+#contact {
+    max-width: 580px;
 }
 /* End Additions for the foundation zurb */
diff --git a/scss/_structure.scss b/scss/_structure.scss
index c9b07e5..33c0588 100755
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -88,6 +88,9 @@ img {
 #toolbox #breadcrumbs {
     margin-left: 15px;
 }
+#home #toolbox {
+    padding: 0 45px;
+}
 
 .webform table {
     margin: 10px 0 0 0;