From 686905d9a20e77045c80fc05988797ce42b7c20a Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Tue, 23 Dec 2014 14:13:37 -0500 Subject: [PATCH] ECOM-811 design and layout changes Copy clean up --- lms/djangoapps/verify_student/views.py | 115 ++---------------- .../js/verify_student/pay_and_verify.js | 10 +- .../verify_student/views/intro_step_view.js | 1 + .../views/make_payment_step_view.js | 1 + .../sass/views/_decoupled-verification.scss | 40 ++++++ .../enrollment_confirmation_step.underscore | 4 +- .../verify_student/face_photo_step.underscore | 7 +- .../verify_student/id_photo_step.underscore | 23 ++-- .../verify_student/intro_step.underscore | 14 +++ .../make_payment_step.underscore | 66 +++++++--- .../verify_student/pay_and_verify.html | 16 ++- .../payment_confirmation_step.underscore | 13 +- .../review_photos_step.underscore | 10 +- .../verify_student/webcam_photo.underscore | 18 ++- 14 files changed, 179 insertions(+), 159 deletions(-) diff --git a/lms/djangoapps/verify_student/views.py b/lms/djangoapps/verify_student/views.py index 5e1fec7ed7..2d978723d9 100644 --- a/lms/djangoapps/verify_student/views.py +++ b/lms/djangoapps/verify_student/views.py @@ -279,27 +279,27 @@ class PayAndVerifyView(View): template_name="intro_step" ), MAKE_PAYMENT_STEP: Step( - title=ugettext_lazy("Make Payment"), + title=ugettext_lazy("Make payment"), template_name="make_payment_step" ), PAYMENT_CONFIRMATION_STEP: Step( - title=ugettext_lazy("Payment Confirmation"), + title=ugettext_lazy("Payment confirmation"), template_name="payment_confirmation_step" ), FACE_PHOTO_STEP: Step( - title=ugettext_lazy("Take Photo"), + title=ugettext_lazy("Take photo"), template_name="face_photo_step" ), ID_PHOTO_STEP: Step( - title=ugettext_lazy("Take a Photo of Your ID"), + title=ugettext_lazy("Take a photo of your ID"), template_name="id_photo_step" ), REVIEW_PHOTOS_STEP: Step( - title=ugettext_lazy("Review Your Info"), + title=ugettext_lazy("Review your info"), template_name="review_photos_step" ), ENROLLMENT_CONFIRMATION_STEP: Step( - title=ugettext_lazy("Enrollment Confirmation"), + title=ugettext_lazy("Enrollment confirmation"), template_name="enrollment_confirmation_step" ), } @@ -318,55 +318,6 @@ class PayAndVerifyView(View): UPGRADE_MSG = 'upgrade' PAYMENT_CONFIRMATION_MSG = 'payment-confirmation' - Message = namedtuple( - 'Message', - [ - 'page_title', - 'top_level_msg', - 'status_msg', - 'intro_title', - 'intro_msg' - ] - ) - - MESSAGES = { - FIRST_TIME_VERIFY_MSG: Message( - page_title=ugettext_lazy("Enroll In {course_name}"), - top_level_msg=ugettext_lazy("Congrats! You are now enrolled in {course_name}."), - status_msg=ugettext_lazy("Enrolling as"), - intro_title=ugettext_lazy("What You Will Need To Enroll"), - intro_msg=ugettext_lazy("There are {num_requirements} things you will need to enroll in the {course_mode} track.") - ), - VERIFY_NOW_MSG: Message( - page_title=ugettext_lazy("Enroll In {course_name}"), - top_level_msg=ugettext_lazy("Congrats! You are now enrolled in {course_name}."), - status_msg=ugettext_lazy("Enrolled as"), - intro_title=ugettext_lazy("What You Will Need To Enroll"), - intro_msg=ugettext_lazy("There are {num_requirements} things you will need to enroll in the {course_mode} track.") - ), - VERIFY_LATER_MSG: Message( - page_title=ugettext_lazy("Enroll In {course_name}"), - top_level_msg=ugettext_lazy("Congrats! You are now enrolled in {course_name}."), - status_msg=ugettext_lazy("Enrolled as"), - intro_title=ugettext_lazy("What You Will Need To Verify"), - intro_msg=ugettext_lazy("There are {num_requirements} things you will need to complete verification.") - ), - UPGRADE_MSG: Message( - page_title=ugettext_lazy("Upgrade Your Enrollment For {course_name}."), - top_level_msg=ugettext_lazy("You are upgrading your enrollment for {course_name}."), - status_msg=ugettext_lazy("Upgrading to"), - intro_title=ugettext_lazy("What You Will Need To Upgrade"), - intro_msg=ugettext_lazy("There are {num_requirements} things you will need to complete upgrade to the {course_mode} track.") - ), - PAYMENT_CONFIRMATION_MSG: Message( - page_title=ugettext_lazy("Payment Confirmation"), - top_level_msg=ugettext_lazy("You are now enrolled in {course_name}."), - status_msg=ugettext_lazy("Enrolled as"), - intro_title="", - intro_msg="" - ) - } - # Requirements # # These explain to the user what he or she @@ -501,30 +452,24 @@ class PayAndVerifyView(View): # Render the top-level page context = { - 'user_full_name': full_name, + 'contribution_amount': contribution_amount, 'course': course, 'course_key': unicode(course_key), 'course_mode': course_mode, - 'verification_deadline': ( - get_default_time_display(course_mode.expiration_datetime) - if course_mode.expiration_datetime else "" - ), 'courseware_url': courseware_url, 'current_step': current_step, 'disable_courseware_js': True, 'display_steps': display_steps, - 'contribution_amount': contribution_amount, 'is_active': json.dumps(request.user.is_active), - 'messages': self._messages( - message, - course.display_name, - course_mode, - requirements - ), 'message_key': message, 'platform_name': settings.PLATFORM_NAME, 'purchase_endpoint': get_purchase_endpoint(), 'requirements': requirements, + 'user_full_name': full_name, + 'verification_deadline': ( + get_default_time_display(course_mode.expiration_datetime) + if course_mode.expiration_datetime else "" + ), } return render_to_response("verify_student/pay_and_verify.html", context) @@ -673,42 +618,6 @@ class PayAndVerifyView(View): return all_requirements - def _messages(self, message_key, course_name, course_mode, requirements): - """Construct messages based on how the user arrived at the page. - - Arguments: - message_key (string): One of the keys in `MESSAGES`. - course_name (unicode): The name of the course the user wants to enroll in. - course_mode (CourseMode): The course mode for the course. - requirements (dict): The requirements for verifying and/or paying. - - Returns: - `Message` (namedtuple) - - """ - messages = self.MESSAGES[message_key] - - # Count requirements - num_requirements = sum([ - 1 if requirement else 0 - for requirement in requirements.values() - ]) - - context = { - 'course_name': course_name, - 'course_mode': course_mode.name, - 'num_requirements': num_requirements - } - - # Interpolate the course name / mode into messaging strings - # Implicitly force lazy translations to unicode - return self.Message( - **{ - key: value.format(**context) - for key, value in messages._asdict().iteritems() # pylint: disable=protected-access - } - ) - def _check_already_verified(self, user): """Check whether the user has a valid or pending verification. diff --git a/lms/static/js/verify_student/pay_and_verify.js b/lms/static/js/verify_student/pay_and_verify.js index 8430c0749f..f5fe75c7d7 100644 --- a/lms/static/js/verify_student/pay_and_verify.js +++ b/lms/static/js/verify_student/pay_and_verify.js @@ -36,9 +36,9 @@ var edx = edx || {}; currentStep: el.data('current-step'), stepInfo: { 'intro-step': { + courseName: el.data('course-name'), + hasPaid: el.data('msg-key') === 'verify-now' || el.data('msg-key') === 'verify-later', isActive: el.data('is-active'), - introTitle: el.data('intro-title'), - introMsg: el.data('intro-msg'), platformName: el.data('platform-name'), requirements: el.data('requirements') }, @@ -47,7 +47,11 @@ var edx = edx || {}; requirements: el.data('requirements'), courseKey: el.data('course-key'), courseName: el.data('course-name'), - upgrade: el.data('data-msg-key') === 'upgrade', + hasVisibleReqs: _.some( + el.data('requirements'), + function( isVisible ) { return isVisible; } + ), + upgrade: el.data('msg-key') === 'upgrade', minPrice: el.data('course-mode-min-price'), contributionAmount: el.data('contribution-amount'), suggestedPrices: _.filter( diff --git a/lms/static/js/verify_student/views/intro_step_view.js b/lms/static/js/verify_student/views/intro_step_view.js index f9f6eac3c7..eaa4de4eb2 100644 --- a/lms/static/js/verify_student/views/intro_step_view.js +++ b/lms/static/js/verify_student/views/intro_step_view.js @@ -15,6 +15,7 @@ var edx = edx || {}; introTitle: '', introMsg: '', isActive: false, + hasPaid: false, platformName: '', requirements: {} }; diff --git a/lms/static/js/verify_student/views/make_payment_step_view.js b/lms/static/js/verify_student/views/make_payment_step_view.js index 3066c57957..037c816308 100644 --- a/lms/static/js/verify_student/views/make_payment_step_view.js +++ b/lms/static/js/verify_student/views/make_payment_step_view.js @@ -20,6 +20,7 @@ var edx = edx || {}; verificationDeadline: '', courseName: '', requirements: {}, + hasVisibleReqs: false, platformName: '' }; }, diff --git a/lms/static/sass/views/_decoupled-verification.scss b/lms/static/sass/views/_decoupled-verification.scss index 47b5f52422..5f6a4bf014 100644 --- a/lms/static/sass/views/_decoupled-verification.scss +++ b/lms/static/sass/views/_decoupled-verification.scss @@ -15,6 +15,14 @@ } } + .payment-info { + padding: 5px 0 30px; + + .copy { + margin: 20px 0; + } + } + .requirements-container { .list-reqs { @@ -74,6 +82,26 @@ } } + .photo-controls { + position: relative; + + .control { + &.control-do { + left: 45%; + left: calc( ( 50% ) - ( 69px / 2 ) ); + } + + &.control-retake { + left: 40%; + left: calc( ( 50% ) - ( 131px / 2 ) ); + } + + .action-redo { + line-height: 28px; + } + } + } + .retake-photos { color: $blue; @@ -98,6 +126,17 @@ margin-left: 0 !important; } + .photo-tip { + @extend %t-copy-sub1; + color: black; + margin-bottom: 20px; + } + + .list-help { + list-style: disc; + padding-left: 20px; + } + .wrapper-task { .msg-retake { margin-top: 0; @@ -115,6 +154,7 @@ } } } + .enrollment-status-footer { margin: 50px 0; diff --git a/lms/templates/verify_student/enrollment_confirmation_step.underscore b/lms/templates/verify_student/enrollment_confirmation_step.underscore index be9075b097..b0d2de9d96 100644 --- a/lms/templates/verify_student/enrollment_confirmation_step.underscore +++ b/lms/templates/verify_student/enrollment_confirmation_step.underscore @@ -2,7 +2,7 @@

<%- _.sprintf( gettext( "Congratulations! You are now verified on %(platformName)s!" ), { platformName: platformName } ) %>

-

<%- gettext( "You are now enrolled as an ID verified student for:" ) %>

+

<%- gettext( "You are now enrolled as a verified student for:" ) %>