VRFS-3359 : Styling, cleanup, more idiomatic react state management for input fields.

web/app/assets/javascripts/react-components/CheckBoxList.js.jsx.coffee

@@ -28,7 +28,7 @@ logger = context.JK.logger
     for object in this.props.sourceObjects
       nm = "check_#{object.id}"
       checkedStr = if @isChecked(object.id) then "checked" else ""
-      object_options.push `<div className='checkItem'><input type='checkbox' name={nm} data-object-id={object.id} defaultChecked={checkedStr}></input><label htmlFor={nm}>{object.description}</label></div>`
+      object_options.push `<div className='checkItem'><input type='checkbox' key={object.id} name={nm} data-object-id={object.id} defaultChecked={checkedStr}></input><label htmlFor={nm}>{object.description}</label></div>`
 
     `<div className="CheckBoxList react-component">
         <div className="checkbox-scroller left">

web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee

@@ -56,10 +56,7 @@ rest = window.JK.Rest()
     navTo = this.navDestination(e)
     teacherActions.change.trigger(this.state, {navTo: navTo})
 
-  render: () ->
-    instrumentsTaughtCheckboxes = []
-    #instrumentsTaughtCheckboxes.push(`<input />`)
-
+  render: () ->    
     # Render the following:
     # Instruments
     # Subjects

web/app/assets/javascripts/react-components/TeacherSetupIntroduction.js.jsx.coffee

@@ -21,7 +21,6 @@ rest = window.JK.Rest()
     logger.debug("onTeacherIntroStateChanged", changes, changes.errors?, changes.errors)
     unless this.handleErrors(changes)
       teacher = changes.teacher
-      logger.debug("@teacher", teacher)
       this.setState({
         biography: teacher.biography,
         introductory_video: teacher.introductory_video,
@@ -30,56 +29,45 @@ rest = window.JK.Rest()
         validate_introduction: true
       })
 
-  captureFormState: (changes) ->
-    $root = jQuery(this.getDOMNode())
-    this.setState({
-      biography: $root.find(".teacher-biography").val(),
-      introductory_video: $root.find(".teacher-introductory-video").val(),
-      years_teaching: $root.find(".years-teaching-experience").val(),
-      years_playing: $root.find(".years-playing-experience").val()
-    });
-    logger.debug("capturedFormState", this.state, changes)
+  handleTextChange: (e) ->
+    this.setState({"#{e.target.name}": e.target.value})
 
   navDestination: (instructions) ->
     navTo=null
     if instructions?
-      logger.debug("handling instructions", instructions)
       if instructions.direction=="cancel" || instructions.direction=="back"
         navTo = @teacherSetupSource()
       else if instructions.direction=="next"
-        logger.debug("redireing to basics")
         navTo = @teacherSetupDestination('basics')
     navTo
 
   handleNav: (e) ->
-    logger.debug("handleNav #{this.screenName()}: ", this.state, this, e)
     navTo = this.navDestination(e)
     teacherActions.change.trigger(this.state, {navTo: navTo})
 
   render: () ->
-    logger.debug("RENDERING TeacherSetupIntroduction", this.props, this.state)
     `<div className="TeacherSetupIntroduction TeacherSetupComponent" >
       <div className="teacher-big-column left">
         <div className="teacher-field" name="biography">
-          <label for="teacher-biography">Teacher Bio:</label>
-          <textarea className="teacher-biography" rows="12" value={this.state.biography} onChange={this.captureFormState} required/>
+          <label htmlFor="teacher-biography">Teacher Bio:</label>
+          <textarea className="teacher-biography" name="biography" ref="biography" rows="12" value={this.state.biography} onChange={this.handleTextChange} required/>
         </div>
       </div>
       <div className="teacher-small-column left">
         <div className="teacher-field" name="introductory_video">
-          <label for="teacher-introductory-video">Teacher Introductory Video:</label>
-          <input className="teacher-introductory-video youtube-video" type="url" maxLength="1024" value={this.state.introductory_video} onChange={this.captureFormState} required/>
+          <label htmlFor="teacher-introductory-video">Teacher Introductory Video:</label>
+          <input className="teacher-introductory-video name="introductory_video" ref="introductory_video" youtube-video" type="url" maxLength="1024" value={this.state.introductory_video} onChange={this.handleTextChange} required/>
           <em>(enter YouTube URL)</em>
         </div>
 
         <div className="teacher-field" name="years_teaching">
-          <label for="years-teaching-experience">Years Teaching Experience:</label>
-          <input className="years-teaching-experience" type="number" min="0" max="99" value={this.state.years_teaching} onChange={this.captureFormState} value="0" placeholder="Select" />
+          <label htmlFor="years-teaching-experience">Years Teaching Experience:</label>
+          <input className="years-teaching-experience" name="years_teaching_experience" ref ="years_teaching_experience" type="number" min="0" max="99" value={this.state.years_teaching} onChange={this.handleTextChange} value="0" placeholder="Select" />
         </div>
 
         <div className="teacher-field" name="years_playing">
-          <label for="teacher-playing-experience">Years Playing Experience:</label>
-          <input className="years-playing-experience" type="number" min="0" max="99" value={this.state.years_playing} onChange={this.captureFormState} value="0" placeholder="Select" />
+          <label htmlFor="teacher-playing-experience">Years Playing Experience:</label>
+          <input className="years-playing-experience" name="years_playing_experience" ref="years_playing_experience" type="number" min="0" max="99" value={this.state.years_playing} onChange={this.handleTextChange} value="0" placeholder="Select" />
         </div>
       </div>
       <TeacherSetupNav handleNav={this.handleNav}/>

web/app/assets/stylesheets/client/react-components/Profile.css.scss

@@ -1,6 +1,10 @@
 @import "client/common.css.scss";
 @import "client/screen_common.css.scss";
 
+.invisible {
+  visibility: hidden;
+}
+
 .react-component {
   width: 100%;
   em {
@@ -10,16 +14,13 @@
   .checkbox-scroller, .editable-scroller {
     overflow-x: hidden;
     overflow-y: scroll;
-    //position: relative;
     width: 100%;
-    
-    // min-height: 10em;
-    // max-height: 20em;
+    min-height: 5em;
+    max-height: 20em;
     @include border_box_sizing;
     text-align:left;
-    //border-right: 1px solid #4c4c4c;
-    margin-bottom:2em;
-    margin-top:2em;
+    margin-bottom:0.5em;
+    margin-top:0.5em;
     padding: 0.25em;
   }
 

web/app/assets/stylesheets/client/teachers.css.scss

@@ -4,21 +4,19 @@
 .teacher-setup {
   font-family: Raleway, Arial, Helvetica, verdana, arial, sans-serif;
 
+  h2 {
+    margin-bottom: 0.75em;
+  }
+
   .TeacherSetupComponent {
     @include border_box_sizing;
-    //float: left;
     position: relative;
-    //clear: both;
     height: 100%;
     .TeacherSetupNav {
       clear: both;
+      margin: 1em 0em 1em 0em;
       @include border_box_sizing;
-      float: left;
-      // margin-top:90%;
-      // position: absolute;
-      // bottom: 40px;
-      // right: 40px;
-
+      float: right;
     }
   }
 
@@ -57,6 +55,7 @@
 
     .teacher-third-column {
       @include border_box_sizing;
+      min-width: 1px;
       width: 33%;
       float: left;
       padding-right: 1em;
@@ -106,6 +105,8 @@
       input[type="checkbox"] {
         display: inline;
         width: auto;
+        vertical-align: center;
+        padding: 4px;
       }
 
       em {
@@ -113,11 +114,11 @@
       }
 
       label {
-        margin-bottom: 4px;
+        padding: 4px;
       }
 
       label.checkbox-label {
-        display: inline;
+        display: inline;        
       }
 
       textarea {