From 1b8d3ed02351676e13eec20ec8b1b824a0234d1b Mon Sep 17 00:00:00 2001 From: phoenixeliot Date: Fri, 8 Jul 2016 15:00:19 -0700 Subject: [PATCH 1/3] Improve spacing for CreateAccountModal on chromebooks Improve spacing for type-select screen on chromebooks Improve spacing for basic-info screen on chromebooks Improve spacing for confirmation screen on chromebooks tweak spacing --- .../create-account-modal/basic-info-view.sass | 10 ++++++ .../choose-account-type-view.sass | 33 ++++++++++++++++--- .../create-account-modal.sass | 2 ++ .../choose-account-type-view.jade | 2 +- .../confirmation-view.jade | 4 +-- 5 files changed, 43 insertions(+), 8 deletions(-) diff --git a/app/styles/modal/create-account-modal/basic-info-view.sass b/app/styles/modal/create-account-modal/basic-info-view.sass index a344ea89e..cf4a202d0 100644 --- a/app/styles/modal/create-account-modal/basic-info-view.sass +++ b/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 diff --git a/app/styles/modal/create-account-modal/choose-account-type-view.sass b/app/styles/modal/create-account-modal/choose-account-type-view.sass index 555f3970a..4e7a3408d 100644 --- a/app/styles/modal/create-account-modal/choose-account-type-view.sass +++ b/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 diff --git a/app/styles/modal/create-account-modal/create-account-modal.sass b/app/styles/modal/create-account-modal/create-account-modal.sass index f40cb6f46..34607c9f4 100644 --- a/app/styles/modal/create-account-modal/create-account-modal.sass +++ b/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 diff --git a/app/templates/core/create-account-modal/choose-account-type-view.jade b/app/templates/core/create-account-modal/choose-account-type-view.jade index af9917379..67a827854 100644 --- a/app/templates/core/create-account-modal/choose-account-type-view.jade +++ b/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 diff --git a/app/templates/core/create-account-modal/confirmation-view.jade b/app/templates/core/create-account-modal/confirmation-view.jade index 2ab37d834..cd38a0eaf 100644 --- a/app/templates/core/create-account-modal/confirmation-view.jade +++ b/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") From b25782f2b6702fb8473599b7e6f37e20c4bb8e87 Mon Sep 17 00:00:00 2001 From: phoenixeliot Date: Fri, 8 Jul 2016 10:31:40 -0700 Subject: [PATCH 2/3] Pass username/password from CreateAccountModal to AuthModal --- .../CreateAccountModal/BasicInfoView.coffee | 18 +++++++++++++++--- .../CreateAccountModal.coffee | 4 ++-- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/app/views/core/CreateAccountModal/BasicInfoView.coffee b/app/views/core/CreateAccountModal/BasicInfoView.coffee index 4f95533b2..d33993706 100644 --- a/app/views/core/CreateAccountModal/BasicInfoView.coffee +++ b/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' @@ -50,8 +51,15 @@ module.exports = class BasicInfoView extends CocoView @listenTo @state, 'change:error', -> @renderSelectors('.error-area') @listenTo @signupState, 'change:facebookEnabled', -> @renderSelectors('.auth-network-logins') @listenTo @signupState, 'change:gplusEnabled', -> @renderSelectors('.auth-network-logins') + + # 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: -> + 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: -> @@ -120,7 +129,10 @@ module.exports = class BasicInfoView extends CocoView ) }) - return @state.get('checkNamePromise') + return @state.get('checkNamePromise') + + onChangePassword: (e) -> + @updateAuthModalInitialValues { password: @$(e.currentTarget).val() } checkBasicInfo: (data) -> # TODO: Move this to somewhere appropriate diff --git a/app/views/core/CreateAccountModal/CreateAccountModal.coffee b/app/views/core/CreateAccountModal/CreateAccountModal.coffee index 690d7ca45..9a86d979e 100644 --- a/app/views/core/CreateAccountModal/CreateAccountModal.coffee +++ b/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') })) From 6fb4cbd9ac45d014d711672bb00a2274261ffe41 Mon Sep 17 00:00:00 2001 From: phoenixeliot Date: Thu, 7 Jul 2016 13:06:15 -0700 Subject: [PATCH 3/3] Remember checkbox state in TeacherClassView --- app/templates/courses/teacher-class-view.jade | 5 +-- app/views/courses/TeacherClassView.coffee | 36 ++++++++++--------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/app/templates/courses/teacher-class-view.jade b/app/templates/courses/teacher-class-view.jade index 8faf7e7a4..e6e025574 100644 --- a/app/templates/courses/teacher-class-view.jade +++ b/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 diff --git a/app/views/courses/TeacherClassView.coffee b/app/views/courses/TeacherClassView.coffee index 53f3ce9ba..05318572a 100644 --- a/app/views/courses/TeacherClassView.coffee +++ b/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