From 3b9c970ce5a6fd60ddf790dc0b00671372adce4d Mon Sep 17 00:00:00 2001 From: Chris Rodriguez Date: Tue, 13 Sep 2016 15:43:08 -0400 Subject: [PATCH] AC-582 progress page markup corrections --- common/test/acceptance/pages/lms/progress.py | 14 +- lms/static/sass/course/_profile.scss | 44 +-- lms/templates/courseware/progress.html | 312 +++++++++---------- 3 files changed, 182 insertions(+), 188 deletions(-) diff --git a/common/test/acceptance/pages/lms/progress.py b/common/test/acceptance/pages/lms/progress.py index e923994403..07fbcbac20 100644 --- a/common/test/acceptance/pages/lms/progress.py +++ b/common/test/acceptance/pages/lms/progress.py @@ -13,14 +13,14 @@ class ProgressPage(CoursePage): def is_browser_on_page(self): is_present = ( - self.q(css='div.course-info').present and - self.q(css='div#grade-detail-graph').present + self.q(css='.course-info').present and + self.q(css='#grade-detail-graph').present ) return is_present @property def grading_formats(self): - return [label.replace(' Scores:', '') for label in self.q(css="div.scores h3").text] + return [label.replace(' Scores:', '') for label in self.q(css=".scores dt").text] def section_score(self, chapter, section): """ @@ -79,7 +79,7 @@ class ProgressPage(CoursePage): Return the CSS index of the chapter with `title`. Returns `None` if it cannot find such a chapter. """ - chapter_css = 'div.chapters section h2' + chapter_css = '.chapters section .hd' chapter_titles = self.q(css=chapter_css).map(lambda el: el.text.lower().strip()).results try: @@ -98,7 +98,7 @@ class ProgressPage(CoursePage): # This is a hideous CSS selector that means: # Get the links containing the section titles in `chapter_index`. # The link text is the section title. - section_css = 'div.chapters>section:nth-of-type({0}) div.sections div h3 a'.format(chapter_index) + section_css = '.chapters>section:nth-of-type({0}) .sections div .hd a'.format(chapter_index) section_titles = self.q(css=section_css).map(lambda el: el.text.lower().strip()).results # The section titles also contain "n of m possible points" on the second line @@ -120,7 +120,7 @@ class ProgressPage(CoursePage): Return a tuple of the form `(points, max_points)` representing the aggregate score for the specified chapter and section. """ - score_css = "div.chapters>section:nth-of-type({0}) div.sections>div:nth-of-type({1}) h3>span".format( + score_css = ".chapters>section:nth-of-type({0}) .sections>div:nth-of-type({1}) .hd>span".format( chapter_index, section_index ) @@ -147,7 +147,7 @@ class ProgressPage(CoursePage): # This is CSS selector means: # Get the scores for the chapter at `chapter_index` and the section at `section_index` # Example text of the retrieved elements: "0/1" - score_css = "div.chapters>section:nth-of-type({0}) div.sections>div:nth-of-type({1}) div.scores>ol>li".format( + score_css = ".chapters>section:nth-of-type({0}) .sections>div:nth-of-type({1}) .scores>dd".format( chapter_index, section_index ) diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss index 7f92381ed3..465d0e7138 100644 --- a/lms/static/sass/course/_profile.scss +++ b/lms/static/sass/course/_profile.scss @@ -17,7 +17,7 @@ margin: 0; padding: lh(0.5); - h1 { + .hd { margin: 0; padding-right: 30px; } @@ -138,7 +138,7 @@ @extend h1.top-header; margin-bottom: lh(); - h1 { + .hd { @include float(left); font-size: 1em; font-weight: 100; @@ -174,7 +174,7 @@ } } - #grade-detail-graph { + .grade-detail-graph { min-height: 400px; width: 100%; } @@ -257,7 +257,7 @@ border-bottom: 0px; } - h2 { + .hd { @include border-right(1px dashed #ddd); @include box-sizing(border-box); display: table-cell; @@ -267,10 +267,11 @@ padding-right: flex-gutter(9); text-transform: none; width: flex-grid(2, 9); + vertical-align: top; } .sections { - display: table-cell; + display: inline-block; @include padding-left(flex-gutter(9)); width: flex-grid(7, 9); @@ -285,7 +286,7 @@ border-bottom: 0; } - h3 { + .hd { color: $gray-d1; span { @@ -296,30 +297,33 @@ } p { - color: $gray-d2;; + margin: lh(0.5) 0; + color: $gray-d1;; font-size: em(14); + font-weight: 600; } .scores { margin: lh(0.5) 0; - h3 { - font-size: em(14); + dt { display: inline-block; + width: auto; + margin: initial; + @include margin-right($baseline); + border: initial; + padding: initial; + font-size: em(14); } - ol { - list-style: none; - margin: 0; - padding: 0; + dd { display: inline-block; - - li { - display: inline-block; - font-size: em(14); - font-weight: normal; - padding-right: 1em; - } + margin: 0; + @include margin-right($baseline); + @include padding-right(1em); + font-size: em(14); + font-weight: normal; + color: $gray-d2; } } } diff --git a/lms/templates/courseware/progress.html b/lms/templates/courseware/progress.html index b51a1717da..da4be72103 100644 --- a/lms/templates/courseware/progress.html +++ b/lms/templates/courseware/progress.html @@ -29,181 +29,171 @@ from django.utils.http import urlquote_plus - <%include file="/courseware/course_navigation.html" args="active_page='progress'" />
-
-
- % if staff_access and studio_url is not None: -
- ${_("View Grading in studio")} -
- % endif +
+
+ % if staff_access and studio_url is not None: +
+ ${_("View Grading in studio")} +
+ % endif +

+ ${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email) | h} +

-
-

${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email) | h}

-
-
- %if certificate_data: -
- %if passed: -
-
- <% post_url = reverse('generate_user_cert', args=[unicode(course.id)]) %> -
-

${certificate_data.title | h}

-

${certificate_data.msg | h}

-
-
- %if certificate_data.cert_web_view_url: - - ${_("View Certificate")} - - %elif certificate_data.cert_status == CertificateStatuses.downloadable and certificate_data.download_url: - - ${_("Download Your Certificate")} - - %elif certificate_data.cert_status == CertificateStatuses.requesting: - - %endif -
-
-
- %endif - %endif -
- - - %if not course.disable_progress_graph: - - %endif - - % if credit_course_requirements: -
-
-
-

${_("Requirements for Course Credit")}

-
- %if credit_course_requirements['eligibility_status'] == 'not_eligible': - ${_("{student_name}, you are no longer eligible for credit in this course.").format(student_name=student.profile.name) | h} - %elif credit_course_requirements['eligibility_status'] == 'eligible': - ${_("{student_name}, you have met the requirements for credit in this course.").format(student_name=student.profile.name) | h} - ${_("{a_start}Go to your dashboard{a_end} to purchase course credit.").format( - a_start=u"".format(url=reverse('dashboard')), - a_end="" - )} - - %elif credit_course_requirements['eligibility_status'] == 'partial_eligible': - ${_("{student_name}, you have not yet met the requirements for credit.").format(student_name=student.profile.name) | h} - %endif - ${_("Information about course credit requirements")}
-
- %for requirement in credit_course_requirements['requirements']: -
-
- ${_(requirement['display_name']) | h} - %if requirement['namespace'] == 'grade': - ${int(requirement['criteria']['min_grade'] * 100) | h}% - %endif + %if certificate_data: +
+
+ %if passed: +
+
+ <% post_url = reverse('generate_user_cert', args=[unicode(course.id)]) %> +
+

${certificate_data.title | h}

+

${certificate_data.msg | h}

-
- %if requirement['status']: - %if requirement['status'] == 'submitted': - ${_("Verification Submitted")} - %elif requirement['status'] == 'failed': - - ${_("Verification Failed" )} - %elif requirement['status'] == 'declined': - - ${_("Verification Declined" )} - %elif requirement['status'] == 'satisfied': - - ${_("Completed by")} ${get_time_display(requirement['status_date'], DEFAULT_SHORT_DATE_FORMAT, settings.TIME_ZONE)} - %endif - %else: - ${_("Upcoming")} +
+ %if certificate_data.cert_web_view_url: + ${_("View Certificate")} ${_("Opens in a new browser window")} + %elif certificate_data.cert_status == CertificateStatuses.downloadable and certificate_data.download_url: + ${_("Download Your Certificate")} ${_("Opens in a new browser window")} + %elif certificate_data.cert_status == CertificateStatuses.requesting: + %endif
- %endfor -
- +
+ %endif
+ %endif + + %if not course.disable_progress_graph: +
+ %endif + + % if credit_course_requirements: +
+

${_("Requirements for Course Credit")}

+
+ %if credit_course_requirements['eligibility_status'] == 'not_eligible': + ${_("{student_name}, you are no longer eligible for credit in this course.").format(student_name=student.profile.name) | h} + %elif credit_course_requirements['eligibility_status'] == 'eligible': + ${_("{student_name}, you have met the requirements for credit in this course.").format(student_name=student.profile.name) | h} + ${_("{a_start}Go to your dashboard{a_end} to purchase course credit.").format( + a_start=u"".format(url=reverse('dashboard')), + a_end="" + )} + + %elif credit_course_requirements['eligibility_status'] == 'partial_eligible': + ${_("{student_name}, you have not yet met the requirements for credit.").format(student_name=student.profile.name) | h} + %endif + + + + ${_("Information about course credit requirements")} +
+ +
+ %for requirement in credit_course_requirements['requirements']: +
+
+ ${_(requirement['display_name']) | h} + %if requirement['namespace'] == 'grade': + ${int(requirement['criteria']['min_grade'] * 100) | h}% + %endif +
+
+ %if requirement['status']: + %if requirement['status'] == 'submitted': + ${_("Verification Submitted")} + %elif requirement['status'] == 'failed': + + ${_("Verification Failed" )} + %elif requirement['status'] == 'declined': + + ${_("Verification Declined" )} + %elif requirement['status'] == 'satisfied': + + ${_("Completed by")} ${get_time_display(requirement['status_date'], DEFAULT_SHORT_DATE_FORMAT, settings.TIME_ZONE)} + %endif + %else: + ${_("Upcoming")} + %endif +
+
+ %endfor +
+ +
+
+ %endif + + %if courseware_summary: +
+

${_('Details for each chapter')}

+ %for chapter in courseware_summary: + %if not chapter['display_name'] == "hidden": +
+

${ chapter['display_name'] | h}

+
+ %for section in chapter['sections']: +
+ <% + earned = section.all_total.earned + total = section.all_total.possible + percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 and total > 0 else "" + %> +
+ + ${ section.display_name | h} + %if total > 0 or earned > 0: + + ${_("{earned} of {total} possible points").format(earned='{:.3n}'.format(float(earned)), total='{:.3n}'.format(float(total))) | h} + + %endif + + %if total > 0 or earned > 0: + ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString ) | h} + %endif +
+ %if section.due is not None: +

+ <% + formatted_string = get_time_display(section.due, course.due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES) + due_date = '' if len(formatted_string)==0 else _(u'due {date}').format(date=formatted_string) + %> + ${due_date | h} +

+ %endif + %if len(section.scores) > 0: +
+
${ _("Problem Scores: ") if section.graded else _("Practice Scores: ")}
+ %for score in section.scores: +
${"{0:.3n}/{1:.3n}".format(float(score.earned),float(score.possible)) | h}
+ %endfor +
+ %else: +

${_("No problem scores in this section")}

+ %endif +
+ %endfor +
+
+ %endif + %endfor +
+ %endif
- %endif - -
- %for chapter in courseware_summary: - %if not chapter['display_name'] == "hidden": -
-

${ chapter['display_name'] | h}

- -
- %for section in chapter['sections']: -
- <% - earned = section.all_total.earned - total = section.all_total.possible - percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 and total > 0 else "" - %> - -

- ${ section.display_name | h} - %if total > 0 or earned > 0: - - ${_("{earned} of {total} possible points").format(earned='{:.3n}'.format(float(earned)), total='{:.3n}'.format(float(total))) | h} - - %endif - - %if total > 0 or earned > 0: - ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString ) | h} - %endif -

-

- ${section.format | h} - - %if section.due is not None: - <% - formatted_string = get_time_display(section.due, course.due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES) - due_date = '' if len(formatted_string)==0 else _(u'due {date}').format(date=formatted_string) - %> - - ${due_date | h} - - %endif -

- -
- %if len(section.scores) > 0: -

${ _("Problem Scores: ") if section.graded else _("Practice Scores: ")}

-
    - %for score in section.scores: -
  1. ${"{0:.3n}/{1:.3n}".format(float(score.earned),float(score.possible)) | h}
    2. - %endfor -
- %else: -

${_("No problem scores in this section")}

- %endif -
- - -
- %endfor -
-
- %endif - %endfor -
-
-