Merge pull request #17470 from edx/sofiya/2095-2

Auto-open course outline to last viewed block
This commit is contained in:
Sofiya Semenova
2018-02-20 15:20:14 -05:00
committed by GitHub
2 changed files with 26 additions and 33 deletions

View File

@@ -353,7 +353,7 @@
.details {
font-size: $body-font-size;
color: theme-color("secondary");
margin-left: 35px;
margin-left: 34px;
}
.prerequisite {
color: theme-color("secondary");
@@ -362,7 +362,7 @@
}
.vertical {
@include margin-left(10px);
@include margin-left(16px);
list-style-type: none;
border: 1px solid transparent;
@@ -398,7 +398,7 @@
}
// Course outline accordion
button.accordion-trigger {
button.accordion-trigger, button.prerequisite-button {
margin: 2px;
padding: 10px 0 10px 0;
border: none;

View File

@@ -16,18 +16,19 @@ from openedx.core.djangolib.markup import HTML, Text
% if blocks.get('children'):
<ol class="block-tree accordion" role="presentation">
% for section in blocks.get('children'):
<% section_is_auto_opened = section.get('resume_block') is True %>
<li
class="outline-item section"
role="heading"
>
<button class="section-name accordion-trigger"
aria-expanded="false"
aria-expanded="${ 'true' if section_is_auto_opened else 'false' }"
aria-controls="${ section['id'] }_contents"
id="${ section['id'] }">
<span class="fa fa-chevron-right" aria-hidden="true"></span>
<span class="fa fa-chevron-right ${ 'fa-rotate-90' if section_is_auto_opened else '' }" aria-hidden="true"></span>
<h3 class="section-title">${ section['display_name'] }</h3>
</button>
<ol class="outline-item accordion-panel is-hidden"
<ol class="outline-item accordion-panel ${ '' if section_is_auto_opened else 'is-hidden' }"
id="${ section['id'] }_contents"
role="region"
aria-labelledby="${ section['id'] }"
@@ -36,32 +37,16 @@ from openedx.core.djangolib.markup import HTML, Text
<%
gated_subsection = subsection['id'] in gated_content
completed_prereqs = gated_content[subsection['id']]['completed_prereqs'] if gated_subsection else False
subsection_is_auto_opened = subsection.get('resume_block') is True
%>
<li class="subsection accordion ${ 'current' if subsection['resume_block'] else '' }" role="heading">
% if gated_subsection and not completed_prereqs:
<button class="subsection-text accordion-trigger"
id="${ subsection['id'] }"
>
% else:
<button class="subsection-text accordion-trigger"
id="${ subsection['id'] }"
aria-expanded="false"
aria-controls="${ subsection['id'] }_contents"
>
% endif
## Subsection title
% if gated_subsection:
% if completed_prereqs:
<span class="menu-icon icon fa fa-unlock"
aria-hidden="true">
</span>
<span class="subsection-title">
${ subsection['display_name'] }
</span>
<span class="sr">&nbsp;${_("Unlocked")}</span>
% else:
<a href="${ subsection['lms_web_url'] }">
<button class="subsection-text prerequisite-button"
id="${ subsection['id'] }"
>
<span class="menu-icon icon fa fa-lock"
aria-hidden="true">
aria-hidden="true">
</span>
<span class="subsection-title">
${ subsection['display_name'] }
@@ -74,13 +59,18 @@ from openedx.core.djangolib.markup import HTML, Text
%>
${ prerequisite_name }
</div>
% endif
% else:
<span class="fa fa-chevron-right" aria-hidden="true"></span>
% else:
<button class="subsection-text accordion-trigger"
id="${ subsection['id'] }"
aria-expanded="${ 'true' if subsection_is_auto_opened else 'false' }"
aria-controls="${ subsection['id'] }_contents"
>
<span class="fa fa-chevron-right ${ 'fa-rotate-90' if subsection_is_auto_opened else '' }"
aria-hidden="true"></span>
<span class="subsection-title">
${ subsection['display_name'] }
</span>
% endif
% endif
<div class="details">
## There are behavior differences between rendering of subsections which have
@@ -139,8 +129,11 @@ from openedx.core.djangolib.markup import HTML, Text
% endif
</div> <!-- /details -->
</button> <!-- /subsection-text -->
% if gated_subsection and not completed_prereqs:
</a>
% endif
% if not gated_subsection or (gated_subsection and completed_prereqs):
<ol class="outline-item accordion-panel is-hidden"
<ol class="outline-item accordion-panel ${ '' if subsection_is_auto_opened else 'is-hidden' }"
id="${ subsection['id'] }_contents"
role="region"
aria-labelledby="${ subsection['id'] }"