Merge branch 'master' into production

Several UI bugfixes

app/styles/modal/create-account-modal/basic-info-view.sass

@@ -15,6 +15,16 @@
 
     .form-group
       text-align: left
+      margin: 0
+      
+      input
+        max-height: 5vh
+    
+    .form-container
+      > .form-group, > .row
+        max-height: 84px
+        flex-grow: 1
+        align-self: flex-start
     
   .btn-illustrated img
     // Undo previous opacity-toggling hover behavior

app/styles/modal/create-account-modal/choose-account-type-view.sass

@@ -1,8 +1,16 @@
 @import "app/styles/style-flat-variables"
 
 #choose-account-type-view
+  .choose-type-title
+    display: flex
+    flex-direction: column
+    flex-grow: 0.5
+    justify-content: flex-end
+
+  h4
+    padding-bottom: 10px
+
   .path-cards
-    margin-top: 15px
     display: flex
     
   .path-card ~ .path-card
@@ -13,7 +21,8 @@
     flex-direction: column
     justify-content: space-between
     width: 235px
-    min-height: 340px
+    height: 340px
+    max-height: 42vh
     border-style: solid
     border-width: thin
     border-radius: 5px
@@ -35,6 +44,7 @@
       align-items: center
       justify-content: center
       height: 50px
+      max-height: 5vh
       color: white
       font-weight: bold
       text-align: center
@@ -43,7 +53,8 @@
       flex-grow: 1
       display: flex
       flex-direction: column
-      margin: 50px 20px 0
+      justify-content: center
+      margin: 0 20px
       
       ul
         align-self: center
@@ -55,14 +66,26 @@
             left: -5px
 
     .card-footer
-      margin: 20px
+      margin: 0 20px 20px
+      min-height: 62px
+      display: flex
+      flex-direction: column
+      justify-content: flex-end
   
   .individual-section
-    margin-top: 50px
+    display: flex
+    flex-grow: 1
+    flex-direction: column
+    align-items: center
+    justify-content: center
     max-width: 425px
 
   .individual-title
     font-weight: bold
     
+  .individual-description
+    margin: 0
+    flex-grow: 0.2
+
   .text-h6
     color: white

app/styles/modal/create-account-modal/create-account-modal.sass

@@ -17,6 +17,7 @@
     display: flex
     flex-direction: column
     height: 850px
+    max-height: 90vh
     width: 850px
     text-align: center
     padding: 0
@@ -44,6 +45,7 @@
     align-items: center
     justify-content: flex-end
     height: 100px
+    max-height: 10.5vh
     padding: 0
 
     background-color: $navy

app/templates/core/create-account-modal/choose-account-type-view.jade

@@ -1,5 +1,5 @@
 .modal-body-content
-  h4
+  h4.choose-type-title
     span(data-i18n="signup.choose_type")
   .path-cards
     .path-card.navy

app/templates/core/create-account-modal/confirmation-view.jade

@@ -10,7 +10,7 @@
       else
         p(data-i18n="signup.confirm_individual_blurb")
       
-    .signup-info-box-wrapper.m-y-3
+    .signup-info-box-wrapper
       .text-burgandy(data-i18n="signup.write_this_down")
       .signup-info-box.text-center
         if me.get('name')
@@ -32,4 +32,4 @@
                 span(data-i18n="general.email")
                 | : #{me.get('email')}
 
-    button#start-btn.btn.btn-navy.btn-lg.m-y-3(data-i18n="signup.start_playing")
+    button#start-btn.btn.btn-navy.btn-lg.m-t-3(data-i18n="signup.start_playing")

app/templates/courses/teacher-class-view.jade

@@ -182,7 +182,8 @@ mixin studentsTab
         th.checkbox-col.select-all.small.text-center
           span(data-i18n="teacher.select_all")
           .checkbox-flat
-            input(type='checkbox' id='checkbox-all-students')
+            - var allStudentsChecked = _.all(state.get('checkboxStates'))
+            input(type='checkbox', id='checkbox-all-students', checked=allStudentsChecked)
             label.checkmark(for='checkbox-all-students')
         th
           +sortButtons
@@ -201,7 +202,7 @@ mixin studentRow(student)
   tr.student-row.alternating-background
     td.checkbox-col.student-checkbox
       .checkbox-flat
-        input(type='checkbox' id='checkbox-student-' + student.id, data-student-id=student.id)
+        input(type='checkbox' id='checkbox-student-' + student.id, data-student-id=student.id, checked=state.get('checkboxStates')[student.id])
         label.checkmark(for='checkbox-student-' + student.id)
     td.student-info-col
       .student-info

app/views/core/CreateAccountModal/BasicInfoView.coffee

@@ -28,6 +28,7 @@ module.exports = class BasicInfoView extends CocoView
   events:
     'change input[name="email"]': 'onChangeEmail'
     'change input[name="name"]': 'onChangeName'
+    'change input[name="password"]': 'onChangePassword'
     'click .back-button': 'onClickBackButton'
     'submit form': 'onSubmitForm'
     'click .use-suggested-name-link': 'onClickUseSuggestedNameLink'
@@ -51,7 +52,14 @@ module.exports = class BasicInfoView extends CocoView
     @listenTo @signupState, 'change:facebookEnabled', -> @renderSelectors('.auth-network-logins')
     @listenTo @signupState, 'change:gplusEnabled', -> @renderSelectors('.auth-network-logins')
   
-  onChangeEmail: ->
+  # These values are passed along to AuthModal if the user clicks "Sign In" (handled by CreateAccountModal)
+  updateAuthModalInitialValues: (values) ->
+    @signupState.set {
+      authModalInitialValues: _.merge @signupState.get('authModalInitialValues'), values
+    }, { silent: true }
+    
+  onChangeEmail: (e) ->
+    @updateAuthModalInitialValues { email: @$(e.currentTarget).val() }
     @checkEmail()
     
   checkEmail: ->
@@ -85,7 +93,8 @@ module.exports = class BasicInfoView extends CocoView
     })
     return @state.get('checkEmailPromise')
 
-  onChangeName: ->
+  onChangeName: (e) ->
+    @updateAuthModalInitialValues { name: @$(e.currentTarget).val() }
     @checkName()
 
   checkName: ->
@@ -122,6 +131,9 @@ module.exports = class BasicInfoView extends CocoView
 
     return @state.get('checkNamePromise')
 
+  onChangePassword: (e) ->
+    @updateAuthModalInitialValues { password: @$(e.currentTarget).val() }
+
   checkBasicInfo: (data) ->
     # TODO: Move this to somewhere appropriate
     tv4.addFormat({

app/views/core/CreateAccountModal/CreateAccountModal.coffee

@@ -62,6 +62,7 @@ module.exports = class CreateAccountModal extends ModalView
       gplusEnabled: application.gplusHandler.apiLoaded
       classCode
       birthday: new Date('') # so that birthday.getTime() is NaN
+      authModalInitialValues: {}
     }
     
     { startOnPath } = options
@@ -112,5 +113,4 @@ module.exports = class CreateAccountModal extends ModalView
         document.location.reload()
   
   onClickLoginLink: ->
-    # TODO: Make sure the right information makes its way into the state.
-    @openModalView(new AuthModal({ initialValues: @signupState.pick(['email', 'name', 'password']) }))
+    @openModalView(new AuthModal({ initialValues: @signupState.get('authModalInitialValues') }))

app/views/courses/TeacherClassView.coffee

@@ -56,6 +56,7 @@ module.exports = class TeacherClassView extends RootView
         assigningToNobody: false
         assigningToUnenrolled: false
       selectedCourse: undefined
+      checkboxStates: {}
       classStats:
         averagePlaytime: ""
         totalPlaytime: ""
@@ -145,6 +146,10 @@ module.exports = class TeacherClassView extends RootView
       classStats = @calculateClassStats()
       @state.set classStats: classStats if classStats
       @state.set students: @students
+      checkboxStates = {}
+      for student in @students.models
+        checkboxStates[student.id] = @state.get('checkboxStates')[student.id] or false
+      @state.set { checkboxStates }
     @listenTo @students, 'sort', ->
       @state.set students: @students
     @listenTo @, 'course-select:change', ({ selectedCourse }) ->
@@ -291,8 +296,7 @@ module.exports = class TeacherClassView extends RootView
     @trigger 'course-select:change', { selectedCourse: @courses.get($(e.currentTarget).val()) }
 
   getSelectedStudentIDs: ->
-    @$('.student-row .checkbox-flat input:checked').map (index, checkbox) ->
-      $(checkbox).data('student-id')
+    Object.keys(_.pick @state.get('checkboxStates'), (checked) -> checked)
 
   ensureInstance: (courseID) ->
 
@@ -304,7 +308,7 @@ module.exports = class TeacherClassView extends RootView
     window.tracker?.trackEvent $(e.currentTarget).data('event-action'), category: 'Teachers', classroomID: @classroom.id, userID: userID, ['Mixpanel']
 
   onClickBulkEnroll: ->
-    userIDs = @getSelectedStudentIDs().toArray()
+    userIDs = @getSelectedStudentIDs()
     selectedUsers = new Users(@students.get(userID) for userID in userIDs)
     @enrollStudents(selectedUsers)
     window.tracker?.trackEvent 'Teachers Class Students Enroll Selected', category: 'Teachers', classroomID: @classroom.id, ['Mixpanel']
@@ -385,10 +389,9 @@ module.exports = class TeacherClassView extends RootView
   onClickBulkAssign: ->
     courseID = @$('.bulk-course-select').val()
     selectedIDs = @getSelectedStudentIDs()
-    members = selectedIDs.filter((index, userID) =>
+    members = selectedIDs.filter (userID) =>
       user = @students.get(userID)
       user.isEnrolled()
-    ).toArray()
     assigningToUnenrolled = _.any selectedIDs, (userID) =>
       not @students.get(userID).isEnrolled()
     assigningToNobody = selectedIDs.length is 0
@@ -417,23 +420,22 @@ module.exports = class TeacherClassView extends RootView
 
   onClickSelectAll: (e) ->
     e.preventDefault()
-    checkboxes = @$('.student-checkbox input')
-    if _.all(checkboxes, 'checked')
-      @$('.select-all input').prop('checked', false)
-      checkboxes.prop('checked', false)
+    checkboxStates = _.clone @state.get('checkboxStates')
+    if _.all(checkboxStates)
+      for studentID of checkboxStates
+        checkboxStates[studentID] = false
     else
-      @$('.select-all input').prop('checked', true)
-      checkboxes.prop('checked', true)
-    null
+      for studentID of checkboxStates
+        checkboxStates[studentID] = true
+    @state.set { checkboxStates }
 
   onClickStudentCheckbox: (e) ->
     e.preventDefault()
-    # $(e.target).$()
     checkbox = $(e.currentTarget).find('input')
-    checkbox.prop('checked', not checkbox.prop('checked'))
-    # checkboxes.prop('checked', false)
-    checkboxes = @$('.student-checkbox input')
-    @$('.select-all input').prop('checked', _.all(checkboxes, 'checked'))
+    studentID = checkbox.data('student-id')
+    checkboxStates = _.clone @state.get('checkboxStates')
+    checkboxStates[studentID] = not checkboxStates[studentID]
+    @state.set { checkboxStates }
 
   calculateClassStats: ->
     return {} unless @classroom.sessions?.loaded and @students.loaded