Skip to content

E
edx-platform
Commit 3b9c970c by Chris Rodriguez Committed by cahrens
Options

AC-582 progress page markup corrections

parent 07990336
Showing with 168 additions and 174 deletions
common/test/acceptance/pages/lms/progress.py
...@@ -13,14 +13,14 @@ class ProgressPage(CoursePage): ...@@ -13,14 +13,14 @@ class ProgressPage(CoursePage):
def is_browser_on_page(self): def is_browser_on_page(self):
is_present = ( is_present = (
self.q(css='div.course-info').present and self.q(css='.course-info').present and
self.q(css='div#grade-detail-graph').present self.q(css='#grade-detail-graph').present
) )
return is_present return is_present
@property @property
def grading_formats(self): 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): def section_score(self, chapter, section):
""" """
...@@ -79,7 +79,7 @@ class ProgressPage(CoursePage): ...@@ -79,7 +79,7 @@ class ProgressPage(CoursePage):
Return the CSS index of the chapter with `title`. Return the CSS index of the chapter with `title`.
Returns `None` if it cannot find such a chapter. 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 chapter_titles = self.q(css=chapter_css).map(lambda el: el.text.lower().strip()).results
try: try:
...@@ -98,7 +98,7 @@ class ProgressPage(CoursePage): ...@@ -98,7 +98,7 @@ class ProgressPage(CoursePage):
# This is a hideous CSS selector that means: # This is a hideous CSS selector that means:
# Get the links containing the section titles in `chapter_index`. # Get the links containing the section titles in `chapter_index`.
# The link text is the section title. # 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 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 # The section titles also contain "n of m possible points" on the second line
...@@ -120,7 +120,7 @@ class ProgressPage(CoursePage): ...@@ -120,7 +120,7 @@ class ProgressPage(CoursePage):
Return a tuple of the form `(points, max_points)` representing Return a tuple of the form `(points, max_points)` representing
the aggregate score for the specified chapter and section. 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 chapter_index, section_index
) )
...@@ -147,7 +147,7 @@ class ProgressPage(CoursePage): ...@@ -147,7 +147,7 @@ class ProgressPage(CoursePage):
# This is CSS selector means: # This is CSS selector means:
# Get the scores for the chapter at `chapter_index` and the section at `section_index` # Get the scores for the chapter at `chapter_index` and the section at `section_index`
# Example text of the retrieved elements: "0/1" # 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 chapter_index, section_index
) )
......
lms/static/sass/course/_profile.scss
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
margin: 0; margin: 0;
padding: lh(0.5); padding: lh(0.5);
h1 { .hd {
margin: 0; margin: 0;
padding-right: 30px; padding-right: 30px;
} }
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
@extend h1.top-header; @extend h1.top-header;
margin-bottom: lh(); margin-bottom: lh();
h1 { .hd {
@include float(left); @include float(left);
font-size: 1em; font-size: 1em;
font-weight: 100; font-weight: 100;
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
} }
} }
#grade-detail-graph { .grade-detail-graph {
min-height: 400px; min-height: 400px;
width: 100%; width: 100%;
} }
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
border-bottom: 0px; border-bottom: 0px;
} }
h2 { .hd {
@include border-right(1px dashed #ddd); @include border-right(1px dashed #ddd);
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
...@@ -267,10 +267,11 @@ ...@@ -267,10 +267,11 @@
padding-right: flex-gutter(9); padding-right: flex-gutter(9);
text-transform: none; text-transform: none;
width: flex-grid(2, 9); width: flex-grid(2, 9);
vertical-align: top;
} }
.sections { .sections {
display: table-cell; display: inline-block;
@include padding-left(flex-gutter(9)); @include padding-left(flex-gutter(9));
width: flex-grid(7, 9); width: flex-grid(7, 9);
...@@ -285,7 +286,7 @@ ...@@ -285,7 +286,7 @@
border-bottom: 0; border-bottom: 0;
} }
h3 { .hd {
color: $gray-d1; color: $gray-d1;
span { span {
...@@ -296,30 +297,33 @@ ...@@ -296,30 +297,33 @@
} }
p { p {
color: $gray-d2;; margin: lh(0.5) 0;
color: $gray-d1;;
font-size: em(14); font-size: em(14);
font-weight: 600;
} }
.scores { .scores {
margin: lh(0.5) 0; margin: lh(0.5) 0;
h3 { dt {
font-size: em(14);
display: inline-block; display: inline-block;
width: auto;
margin: initial;
@include margin-right($baseline);
border: initial;
padding: initial;
font-size: em(14);
} }
ol { dd {
list-style: none;
margin: 0;
padding: 0;
display: inline-block; display: inline-block;
margin: 0;
li { @include margin-right($baseline);
display: inline-block; @include padding-right(1em);
font-size: em(14); font-size: em(14);
font-weight: normal; font-weight: normal;
padding-right: 1em; color: $gray-d2;
}
} }
} }
} }
......
lms/templates/courseware/progress.html
...@@ -29,181 +29,171 @@ from django.utils.http import urlquote_plus ...@@ -29,181 +29,171 @@ from django.utils.http import urlquote_plus
<script type="text/javascript" src="${static.url('js/courseware/certificates_api.js') | h}"></script> <script type="text/javascript" src="${static.url('js/courseware/certificates_api.js') | h}"></script>
<script type="text/javascript" src="${static.url('js/courseware/credit_progress.js') | h}"></script> <script type="text/javascript" src="${static.url('js/courseware/credit_progress.js') | h}"></script>
<script> <script>
${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph", not course.no_grade, not course.no_grade) | h} ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph", not course.no_grade, not course.no_grade) | h}
</script> </script>
</%block> </%block>
<%include file="/courseware/course_navigation.html" args="active_page='progress'" /> <%include file="/courseware/course_navigation.html" args="active_page='progress'" />
<main id="main" aria-label="Content" tabindex="-1"> <main id="main" aria-label="Content" tabindex="-1">
<div class="container"> <div class="container">
<div class="profile-wrapper"> <div class="profile-wrapper">
<div class="course-info" id="course-info-progress" aria-label="${_('Course Progress')}"> <section class="course-info" id="course-info-progress">
% if staff_access and studio_url is not None: % if staff_access and studio_url is not None:
<div class="wrap-instructor-info"> <div class="wrap-instructor-info">
<a class="instructor-info-action studio-view" href="${studio_url | h}">${_("View Grading in studio")}</a> <a class="instructor-info-action studio-view" href="${studio_url | h}">${_("View Grading in studio")}</a>
</div> </div>
% endif % endif
<h3 class="hd hd-3 progress-certificates-title">
<header class="progress-certificates"> ${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email) | h}
<h1 class="progress-certificates-title">${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email) | h}</h1> </h3>
</header>
<div class="wrapper-msg wrapper-auto-cert"> %if certificate_data:
%if certificate_data: <div class="wrapper-msg wrapper-auto-cert">
<div id="errors-info" class="errors-info"></div> <div id="errors-info" class="errors-info"></div>
%if passed: %if passed:
<div class="auto-cert-message" id="course-success"> <div class="auto-cert-message" id="course-success">
<div class="has-actions"> <div class="has-actions">
<% post_url = reverse('generate_user_cert', args=[unicode(course.id)]) %> <% post_url = reverse('generate_user_cert', args=[unicode(course.id)]) %>
<div class="msg-content"> <div class="msg-content">
<h2 class="title">${certificate_data.title | h}</h2> <h4 class="hd hd-4 title">${certificate_data.title | h}</h4>
<p class="copy">${certificate_data.msg | h}</p> <p class="copy">${certificate_data.msg | h}</p>
</div> </div>
<div class="msg-actions"> <div class="msg-actions">
%if certificate_data.cert_web_view_url: %if certificate_data.cert_web_view_url:
<a class="btn" href="${certificate_data.cert_web_view_url | h}" target="_blank" title="${_('View certificate in a new browser window or tab.')}"> <a class="btn" href="${certificate_data.cert_web_view_url | h}" target="_blank">${_("View Certificate")} <span class="sr">${_("Opens in a new browser window")}</span></a>
${_("View Certificate")} %elif certificate_data.cert_status == CertificateStatuses.downloadable and certificate_data.download_url:
</a> <a class="btn" href="${certificate_data.download_url | h}" target="_blank">${_("Download Your Certificate")} <span class="sr">${_("Opens in a new browser window")}</span></a>
%elif certificate_data.cert_status == CertificateStatuses.downloadable and certificate_data.download_url: %elif certificate_data.cert_status == CertificateStatuses.requesting:
<a class="btn" href="${certificate_data.download_url | h}" target="_blank" title="${_('PDF will open in a new browser window or tab.')}"> <button class="btn generate_certs" data-endpoint="${post_url | h}" id="btn_generate_cert">${_('Request Certificate')}</button>
${_("Download Your Certificate")} %endif
</a> </div>
%elif certificate_data.cert_status == CertificateStatuses.requesting: </div>
<button class="btn generate_certs" data-endpoint="${post_url | h}" id="btn_generate_cert">${_('Request Certificate')}</button> </div>
%endif %endif
</div> </div>
</div> %endif
</div>
%endif
%endif
</div>
%if not course.disable_progress_graph: %if not course.disable_progress_graph:
<div class="grade-detail-graph" id="grade-detail-graph" aria-hidden="true"></div> <div class="grade-detail-graph" id="grade-detail-graph"></div>
%endif %endif
% if credit_course_requirements: % if credit_course_requirements:
<section class="credit-eligibility"> <section class="credit-eligibility">
<div class="credit-eligibility-container"> <h3 class="hd hd-4 eligibility-heading">${_("Requirements for Course Credit")}</h3>
<div class="eligibility-heading"> <div class="credit-eligibility-container">
<h2>${_("Requirements for Course Credit")}</h2> %if credit_course_requirements['eligibility_status'] == 'not_eligible':
</div>
%if credit_course_requirements['eligibility_status'] == 'not_eligible':
<span class="eligibility_msg">${_("{student_name}, you are no longer eligible for credit in this course.").format(student_name=student.profile.name) | h}</span> <span class="eligibility_msg">${_("{student_name}, you are no longer eligible for credit in this course.").format(student_name=student.profile.name) | h}</span>
%elif credit_course_requirements['eligibility_status'] == 'eligible': %elif credit_course_requirements['eligibility_status'] == 'eligible':
<span class="eligibility_msg">${_("{student_name}, you have met the requirements for credit in this course.").format(student_name=student.profile.name) | h} <span class="eligibility_msg">${_("{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}Go to your dashboard{a_end} to purchase course credit.").format(
a_start=u"<a href={url}>".format(url=reverse('dashboard')), a_start=u"<a href={url}>".format(url=reverse('dashboard')),
a_end="</a>" a_end="</a>"
)} )}
</span> </span>
%elif credit_course_requirements['eligibility_status'] == 'partial_eligible': %elif credit_course_requirements['eligibility_status'] == 'partial_eligible':
<span>${_("{student_name}, you have not yet met the requirements for credit.").format(student_name=student.profile.name) | h}</span> <span>${_("{student_name}, you have not yet met the requirements for credit.").format(student_name=student.profile.name) | h}</span>
%endif %endif
<a href="${settings.CREDIT_HELP_LINK_URL | h}" class="credit-help"><span class="fa fa-question" aria-hidden="true"></span><span class="sr">${_("Information about course credit requirements")}</span></a><br>
<div class="requirement-container" data-eligible="${credit_course_requirements['eligibility_status'] | h}"> <a href="${settings.CREDIT_HELP_LINK_URL | h}" class="credit-help">
%for requirement in credit_course_requirements['requirements']: <span class="fa fa-question" aria-hidden="true"></span>
<div class="requirement"> <span class="sr">${_("Information about course credit requirements")}</span>
<div class="requirement-name"> </a><br />
${_(requirement['display_name']) | h}
%if requirement['namespace'] == 'grade': <div class="requirement-container" data-eligible="${credit_course_requirements['eligibility_status'] | h}">
%for requirement in credit_course_requirements['requirements']:
<div class="requirement">
<div class="requirement-name">
${_(requirement['display_name']) | h}
%if requirement['namespace'] == 'grade':
<span>${int(requirement['criteria']['min_grade'] * 100) | h}%</span> <span>${int(requirement['criteria']['min_grade'] * 100) | h}%</span>
%endif %endif
</div> </div>
<div class="requirement-status"> <div class="requirement-status">
%if requirement['status']: %if requirement['status']:
%if requirement['status'] == 'submitted': %if requirement['status'] == 'submitted':
<span class="requirement-submitted">${_("Verification Submitted")}</span> <span class="requirement-submitted">${_("Verification Submitted")}</span>
%elif requirement['status'] == 'failed': %elif requirement['status'] == 'failed':
<span class="fa fa-times" aria-hidden="true"></span> <span class="fa fa-times" aria-hidden="true"></span>
<span>${_("Verification Failed" )}</span> <span>${_("Verification Failed" )}</span>
%elif requirement['status'] == 'declined': %elif requirement['status'] == 'declined':
<span class="fa fa-times" aria-hidden="true"></span> <span class="fa fa-times" aria-hidden="true"></span>
<span>${_("Verification Declined" )}</span> <span>${_("Verification Declined" )}</span>
%elif requirement['status'] == 'satisfied': %elif requirement['status'] == 'satisfied':
<span class="fa fa-check" aria-hidden="true"></span> <span class="fa fa-check" aria-hidden="true"></span>
<span>${_("Completed by")} ${get_time_display(requirement['status_date'], DEFAULT_SHORT_DATE_FORMAT, settings.TIME_ZONE)}</span> <span>${_("Completed by")} ${get_time_display(requirement['status_date'], DEFAULT_SHORT_DATE_FORMAT, settings.TIME_ZONE)}</span>
%endif %endif
%else: %else:
<span class="not-achieve">${_("Upcoming")}</span> <span class="not-achieve">${_("Upcoming")}</span>
%endif %endif
</div>
</div> </div>
%endfor
</div> </div>
<button class="detail-collapse">
<span class="fa fa-caret-up" aria-hidden="true"></span>
<span class="requirement-detail">${_("Less")}</span>
</button>
</div>
</section>
%endif
%if courseware_summary:
<section class="chapters">
<h3 class="hd hd-4 sr">${_('Details for each chapter')}</h3>
%for chapter in courseware_summary:
%if not chapter['display_name'] == "hidden":
<section aria-labelledby="chapter_${loop.index}">
<h4 class="hd hd-4" id="chapter_${loop.index}">${ chapter['display_name'] | h}</h4>
<div class="sections">
%for section in chapter['sections']:
<div>
<%
earned = section.all_total.earned
total = section.all_total.possible
percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 and total > 0 else ""
%>
<h5 class="hd hd-5">
<a href="${reverse('courseware_section', kwargs=dict(course_id=course.id.to_deprecated_string(), chapter=chapter['url_name'], section=section.url_name)) | h}">
${ section.display_name | h}
%if total > 0 or earned > 0:
<span class="sr">
${_("{earned} of {total} possible points").format(earned='{:.3n}'.format(float(earned)), total='{:.3n}'.format(float(total))) | h}
</span>
%endif
</a>
%if total > 0 or earned > 0:
<span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString ) | h}</span>
%endif
</h5>
%if section.due is not None:
<p>
<%
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)
%>
<em>${due_date | h}</em>
</p>
%endif
%if len(section.scores) > 0:
<dl class="scores">
<dt class="hd hd-6">${ _("Problem Scores: ") if section.graded else _("Practice Scores: ")}</dt>
%for score in section.scores:
<dd>${"{0:.3n}/{1:.3n}".format(float(score.earned),float(score.possible)) | h}</dd>
%endfor
</dl>
%else:
<p class="no-scores">${_("No problem scores in this section")}</p>
%endif
</div>
%endfor
</div>
</section>
%endif
%endfor %endfor
</div> </section>
<button class="detail-collapse" aria-live="polite"><span class="fa fa-caret-up" aria-hidden="true"></span> %endif
<span class="requirement-detail">${_("Less")}</span>
</button>
</div>
</section> </section>
%endif
<div class="chapters">
%for chapter in courseware_summary:
%if not chapter['display_name'] == "hidden":
<section>
<h2>${ chapter['display_name'] | h}</h2>
<div class="sections">
%for section in chapter['sections']:
<div>
<%
earned = section.all_total.earned
total = section.all_total.possible
percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 and total > 0 else ""
%>
<h3><a href="${reverse('courseware_section', kwargs=dict(course_id=course.id.to_deprecated_string(), chapter=chapter['url_name'], section=section.url_name)) | h}">
${ section.display_name | h}
%if total > 0 or earned > 0:
<span class="sr">
${_("{earned} of {total} possible points").format(earned='{:.3n}'.format(float(earned)), total='{:.3n}'.format(float(total))) | h}
</span>
%endif
</a>
%if total > 0 or earned > 0:
<span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString ) | h}</span>
%endif
</h3>
<p>
${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)
%>
<em>
${due_date | h}
</em>
%endif
</p>
<div class="scores">
%if len(section.scores) > 0:
<h3> ${ _("Problem Scores: ") if section.graded else _("Practice Scores: ")} </h3>
<ol>
%for score in section.scores:
<li>${"{0:.3n}/{1:.3n}".format(float(score.earned),float(score.possible)) | h}</li>
%endfor
</ol>
%else:
<h3 class="no-scores"> ${_("No problem scores in this section")} </h3>
%endif
</div>
</div> <!--End section-->
%endfor
</div> <!--End sections-->
</section> <!--End chapter-->
%endif
%endfor
</div> <!--End chapters-->
</div> </div>
</div>
</div> </div>
</main> </main>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment