Merge pull request #753 from mewtaylor/issue/gh-749

Fix GH-749: Fix formatting for a few form elements

src/components/card/card.scss

@@ -21,25 +21,6 @@
         }
     }
 
-    .form {
-        position: relative;
-        padding: 3rem 4rem;
-
-        .card-button {
-            margin: 0 0 -3rem -4rem;
-        }
-
-        .form-group {        
-            margin-bottom: 1.2rem;
-
-            &.has-error {
-                .input {
-                    border: 1px solid $ui-orange;
-                }
-            }
-        }
-    }
-
     .validation-message {
         $arrow-border-width: 1rem;
         display: block;
@@ -77,6 +58,31 @@
         }
     }
 
+    .checkbox-row,
+    .textarea-row {
+        .validation-message {
+            transform: translate(20rem, 0);  
+        }
+    }
+
+    .form {
+        position: relative;
+        padding: 3rem 4rem;
+
+        .card-button {
+            margin: 0 0 -3rem -4rem;
+        }
+
+        .row {        
+            margin-bottom: 1.2rem;
+
+            &.has-error {
+                .input {
+                    border: 1px solid $ui-orange;
+                }
+            }
+        }
+    }
 }
 
 @media only screen and (max-width: $mobile - 1) {

src/components/forms/checkbox.jsx

@@ -15,9 +15,7 @@ var Checkbox = React.createClass({
             this.props.className
         );
         return (
-            <div className={classes}>
-                <FRCCheckbox {... this.props} />
-            </div>
+            <FRCCheckbox rowClassName={classes} {... this.props} />
         );
     }
 });

src/components/forms/input.jsx

@@ -29,14 +29,14 @@ var Input = React.createClass({
     },
     render: function () {
         var classes = classNames(
-            'input',
             this.state.status,
-            this.props.className
+            this.props.className,
+            {'no-label': (typeof this.props.label === 'undefined')}
         );
-        return (this.props.type === 'submit' || this.props.noformsy ?
-            <input {... this.props} className={classes} /> :
+        return (
             <FRCInput {... this.props}
-                      className={classes}
+                      className="input"
+                      rowClassName={classes}
                       onValid={this.onValid}
                       onInvalid={this.onInvalid} />
         );

src/components/forms/input.scss

@@ -12,7 +12,7 @@ $pass-bg: lighten($ui-aqua, 35%);
 
 .input {
     transition: all .5s ease;
-    margin: .75rem 0;
+    margin-bottom: .75rem;
     border: 1px solid $active-gray;
     border-radius: 5px;
     background-color: $base-bg;

src/components/forms/phone-input.jsx

@@ -42,7 +42,7 @@ var PhoneInput = React.createClass({
         return (
             <Row {... this.getRowProperties()}
                  htmlFor={this.getId()}
-                 className={classNames('phone-input', this.props.className)}
+                 rowClassName={classNames('phone-input', this.props.className)}
             >
                 <div className="input-group">
                     <ReactPhoneInput className="form-control"
@@ -53,9 +53,9 @@ var PhoneInput = React.createClass({
                                      label={null}
                                      disabled={this.isFormDisabled() || this.props.disabled}
                     />
+                    {this.renderHelp()}
+                    {this.renderErrorMessage()}
                 </div>
-                {this.renderHelp()}
-                {this.renderErrorMessage()}
             </Row>
         );
     }

src/components/forms/phone-input.scss

 @import "../../colors";
 
 .input-group {
-    margin: .75rem 0;
     width: 100%;
 }
 
 .react-tel-input {
+    margin-bottom: .75rem;
     width: 100%;
 
     input {

src/components/forms/row.scss

@@ -4,8 +4,19 @@
  * the formsy-react-components
  */
 
-.form-group {
+.row {
     .required-symbol {
         display: none;
     }
+
+    label {
+        display: inline-block;
+        margin-bottom: .75rem;
+    }
+
+    &.no-label {
+        label {
+            display: none;
+        }
+    }
 }

src/components/forms/select.scss

@@ -8,7 +8,7 @@
 
     select {
         transition: all .5s ease;
-        margin: .75rem 0;
+        margin-bottom: .75rem;
         border: 1px solid $active-gray;
         border-radius: 5px;
         background: $ui-light-gray url("../../../static/svgs/forms/carot.svg") no-repeat right center;

src/components/forms/textarea.jsx

@@ -11,11 +11,13 @@ var TextArea = React.createClass({
     type: 'TextArea',
     render: function () {
         var classes = classNames(
-            'textarea',
+            'textarea-row',
             this.props.className
         );
         return (
-            <FRCTextarea {... this.props} className={classes} />
+            <FRCTextarea {... this.props}
+                         className="textarea"
+                         rowClassName={classes} />
         );
     }
 });

src/components/forms/textarea.scss

@@ -2,7 +2,7 @@
 
 .textarea {
     transition: all 1s ease;
-    margin: .75rem 0;
+    margin-bottom: .75rem;
     border: 1px solid $active-gray;
     border-radius: 5px;
     background-color: $ui-light-gray;

src/components/navigation/www/navigation.jsx

@@ -11,6 +11,7 @@ var api = require('../../../lib/api');
 var Avatar = require('../../avatar/avatar.jsx');
 var Button = require('../../forms/button.jsx');
 var Dropdown = require('../../dropdown/dropdown.jsx');
+var Form = require('../../forms/form.jsx');
 var Input = require('../../forms/input.jsx');
 var log = require('../../../lib/log.js');
 var Login = require('../../login/login.jsx');
@@ -170,6 +171,9 @@ var Navigation = React.createClass({
         this.props.dispatch(sessionActions.refreshSession());
         this.closeRegistration();
     },
+    onSearchSubmit: function (formData) {
+        window.location.href = '/search/projects?q=' + formData.q;
+    },
     render: function () {
         var classes = classNames({
             'logged-in': this.props.session.session.user
@@ -216,14 +220,13 @@ var Navigation = React.createClass({
                     </li>
 
                     <li className="search">
-                        <form action="/search/projects" method="get">
+                        <Form onSubmit={this.onSearchSubmit}>
                             <Button type="submit" className="btn-search" />
                             <Input type="text"
                                    aria-label={formatMessage({id: 'general.search'})}
                                    placeholder={formatMessage({id: 'general.search'})}
-                                   name="q"
-                                   noformsy />
-                        </form>
+                                   name="q" />
+                        </Form>
                     </li>
                     {this.props.session.status === sessionActions.Status.FETCHED ? (
                         this.props.session.session.user ? [

src/components/navigation/www/navigation.scss

@@ -47,12 +47,18 @@
                 width: 100%;
             }
 
-            form {
+            .form {
                 margin: 0;
             }
 
-            input,
-            button {
+            .row {
+                .help-block {
+                    display: none;
+                }
+            }
+
+            .input,
+            .button {
                 display: inline-block;
                 margin-top: 5px;
                 outline: none;

src/components/registration/steps.scss

@@ -66,26 +66,12 @@
                 margin-bottom: 1.25rem;
             }
         }
-
-        .validation-message {
-            margin-top: .5rem;
-        }
-
-        .checkbox-row {
-            .validation-message {
-                margin-top: 0;
-            }
-        }
     }
 
     &.organization-step {
-        .validation-message {
-            transform: translate(16rem, -4rem);
-        }
-
         .checkbox-group {
             .validation-message {
-                transform: translate(16rem, -16rem);
+                transform: translate(20rem, -16rem);
             }
         }
 
@@ -103,7 +89,7 @@
     &.address-step {
         .select {
             .validation-message {
-                transform: translate(0, .5rem);
+                transform: translate(20rem, .5rem);
             }
         }
     }
@@ -119,12 +105,6 @@
                     }
                 }
             }
-
-
-        }
-
-        .validation-message {
-            margin-top: .75rem;
         }
 
         p {