VRFS-3359 : Styling and markup for react components, incremental.

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

@@ -0,0 +1,20 @@
+context = window
+logger = context.JK.logger
+
+@InstrumentSelectorList = React.createClass({
+
+  componentDidMount: () ->
+    logger.debug("InstrumentSelectorList INIT", this.state, this.props, this.ref)
+
+  onItemChecked: (e) ->
+    e.preventDefault()
+    logger.debug("onItemChecked!!!!", this.state, this.props)    
+
+  render: () ->
+    logger.debug("RENDER InstrumentSelectorList: this.props", this.state, this.ref, this.props.handleNav)
+    `<div className="InstrumentSelectorList react-component">
+        <div className="checkbox-scroller left">
+          <input type="checkbox" name="example"></input><label htmlFor="example">Example</label>
+        </div>
+    </div>`
+})

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

@@ -56,37 +56,38 @@ rest = window.JK.Rest()
     instrumentsTaughtCheckboxes = []
     #instrumentsTaughtCheckboxes.push(`<input />`)
 
+    # Render the following:
+    # Instruments
+    # Subjects
+    # Genres
+    # Languages
+    # All lists will take a list of selected keys,
+    # and will otherwise self-render the available
     `<div className="TeacherSetupBasics TeacherSetupComponent">
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments_taught">
           <strong>Instruments Taught</strong>
-          <div className="checkbox-scroller left">
-
-          </div>
+          
+            <InstrumentSelectorList value={this.state.instruments_taught}/>
+          
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments_taught">
           <strong>Music Subjects Taught</strong>
-          <div className="checkbox-scroller left">
-
-          </div>
+          
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments_taught">
           <strong>Genres Taught</strong>
-          <div className="checkbox-scroller left">
-
-          </div>
+          
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments_taught">
           <strong>Languages Spoken</strong>
-          <div className="checkbox-scroller left">
-
-          </div>
+          
         </div>
       </div>
       <TeacherSetupNav handleNav={this.handleNav}></TeacherSetupNav>

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

@@ -64,8 +64,8 @@ rest = window.JK.Rest()
     #instrumentsTaughtCheckboxes.push(`<input />`)
 
     `<div className="TeacherSetupExperience TeacherSetupComponent">      
-      
-      <TeacherSetupNav handleNav={this.handleNav}></>
+
+      <TeacherSetupNav handleNav={this.handleNav}/>
     </div>`
 
 

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

@@ -15,6 +15,7 @@
  *= require jquery.bt
  *= require easydropdown
  *= require easydropdown_jk
+ *= require ./react_components
  *= require ./jamkazam
  *= require ./content
  *= require ./paginator

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

@@ -0,0 +1,30 @@
+@import "client/common.css.scss";
+@import "client/screen_common.css.scss";
+
+.react-component {
+  .checkbox-scroller {
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+    min-height: 10em;
+    @include border_box_sizing;
+    text-align:left;
+    border-right: 1px solid #4c4c4c;
+    margin-bottom:10px;
+    margin-top:10px;
+    background-color: #c5c5c5;
+    label {
+      clear: both;
+      color: black;
+      display: inline;
+      float: left;      
+    }
+    input {
+      width: auto;
+      clear: both;
+      text-align: left;
+      float: left;
+      display: inline;
+    }
+  }
+}

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

@@ -22,19 +22,6 @@
       @extend .w25;
     }
 
-    .checkbox-scroller {
-      overflow-x: hidden;
-      overflow-y: auto;
-      width: 100%;
-      min-height: 10em;
-      @include border_box_sizing;
-      text-align:left;
-      border-right: 1px solid #4c4c4c;
-      margin-bottom:10px;
-      margin-top:10px;
-      background-color: #c5c5c5;
-    }
-
     .teacher-field {
       padding: 1em;
       @include border_box_sizing;