Markup and style tweaks to address test reqs
This commit is contained in:
Chris Rodriguez
@@ -102,7 +102,7 @@ class CoursewarePage(CoursePage):
|
||||
"""
|
||||
return the url of the active subsection in the left nav
|
||||
"""
|
||||
return self.q(css='.chapter-content-container .chapter-menu a.active').attrs('href')[0]
|
||||
return self.q(css='.chapter-content-container .chapter-menu .menu-item.active a').attrs('href')[0]
|
||||
|
||||
@property
|
||||
def can_start_proctored_exam(self):
|
||||
|
||||
@@ -7,17 +7,23 @@
|
||||
</button>
|
||||
<div class="chapter-content-container" tabindex="-1" aria-expanded="true">
|
||||
<div class="chapter-menu" id="accordion-menu-1">
|
||||
<a href="#">
|
||||
<p>edX Homepage</p>
|
||||
<p class="subtitle">Ungraded</p>
|
||||
</a>
|
||||
<a class="active" href="#">
|
||||
<p>The edX Blog</p>
|
||||
</a>
|
||||
<a class="graded" href="#">
|
||||
<p>Courses Dashboard</p>
|
||||
<p class="subtitle">Graded</p>
|
||||
</a>
|
||||
<div class="menu-item">
|
||||
<a href="#">
|
||||
<p>edX Homepage</p>
|
||||
<p class="subtitle">Ungraded</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="menu-item active">
|
||||
<a href="#">
|
||||
<p>The edX Blog</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="menu-item graded">
|
||||
<a href="#">
|
||||
<p>Courses Dashboard</p>
|
||||
<p class="subtitle">Graded</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button-chapter chapter" aria-controls="accordion-menu-2" aria-pressed="false">
|
||||
@@ -27,17 +33,23 @@
|
||||
</button>
|
||||
<div class="chapter-content-container" tabindex="-1" aria-expanded="false">
|
||||
<div class="chapter-menu" id="accordion-menu-2">
|
||||
<a href="#">
|
||||
<p>edX Homepage</p>
|
||||
<p class="subtitle">Ungraded</p>
|
||||
</a>
|
||||
<a href="#">
|
||||
<p>The edX Blog</p>
|
||||
</a>
|
||||
<a class="graded" href="#">
|
||||
<p>Courses Dashboard</p>
|
||||
<p class="subtitle">Graded</p>
|
||||
</a>
|
||||
<div class="menu-item">
|
||||
<a href="#">
|
||||
<p>edX Homepage</p>
|
||||
<p class="subtitle">Ungraded</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<a href="#">
|
||||
<p>The edX Blog</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<a class="graded" href="#">
|
||||
<p>Courses Dashboard</p>
|
||||
<p class="subtitle">Graded</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ var edx = edx || {},
|
||||
},
|
||||
|
||||
checkForCurrent: function() {
|
||||
var active = $('#accordion .chapter-content-container .chapter-menu:has(a.active)').index('#accordion .chapter-content-container .chapter-menu') ? $('#accordion .chapter-content-container .chapter-menu:has(a.active)').index('#accordion .chapter-content-container .chapter-menu') : 0,
|
||||
var active = $('#accordion .chapter-content-container .chapter-menu:has(.active)').index('#accordion .chapter-content-container .chapter-menu') ? $('#accordion .chapter-content-container .chapter-menu:has(.active)').index('#accordion .chapter-content-container .chapter-menu') : 0,
|
||||
activeSection = $('#accordion .button-chapter:eq(' + active + ')');
|
||||
|
||||
navigation.closeAccordions();
|
||||
|
||||
@@ -4,16 +4,9 @@
|
||||
@include border-right(1px solid $border-color-2);
|
||||
@include border-radius(3px, 0, 0, 3px);
|
||||
|
||||
#open_close_accordion {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header {
|
||||
max-height: 47px;
|
||||
|
||||
h2 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
// reseting bolded fonts for the course index
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#accordion {
|
||||
@@ -39,9 +32,12 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $sidebar-active-image;
|
||||
&.active {
|
||||
|
||||
.group-heading {
|
||||
@extend %t-ultrastrong;
|
||||
color: $base-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.group-heading {
|
||||
@@ -57,16 +53,6 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: none;
|
||||
color: $base-font-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
@include left($baseline);
|
||||
@@ -91,56 +77,68 @@
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
.menu-item {
|
||||
@extend %t-strong;
|
||||
@include padding(($baseline/4) ($baseline/2));
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: ($baseline/5) 0;
|
||||
border-radius: ($baseline/5);
|
||||
border-bottom: 0;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
color: $base-font-color;
|
||||
|
||||
p {
|
||||
@extend %t-action3;
|
||||
@extend %t-strong;
|
||||
margin-bottom: 0;
|
||||
font-family: $sans-serif;
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
color: $base-font-color;
|
||||
|
||||
&.subtitle {
|
||||
p {
|
||||
@extend %t-action3;
|
||||
@extend %t-regular;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $gray-d1;
|
||||
@extend %t-strong;
|
||||
margin-bottom: 0;
|
||||
font-family: $sans-serif;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
&.subtitle {
|
||||
@extend %t-action3;
|
||||
@extend %t-regular;
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $gray-d1;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// definitions for proctored exam attempt status indicators
|
||||
.verified {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
.rejected {
|
||||
color: $alert-color;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $alert-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// definitions for proctored exam attempt status indicators
|
||||
.verified {
|
||||
color: $success-color;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-color;
|
||||
|
||||
.rejected {
|
||||
color: $alert-color;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $alert-color;
|
||||
.subtitle {
|
||||
color: $gray-d1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.graded {
|
||||
|
||||
img {
|
||||
.menu-icon {
|
||||
@include right($baseline/4);
|
||||
position: absolute;
|
||||
bottom: ($baseline/4);
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
@@ -153,34 +151,15 @@
|
||||
@extend %t-regular;
|
||||
@include transition(none);
|
||||
@include right($baseline);
|
||||
content: '›';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -13px;
|
||||
font-size: 30px;
|
||||
color: $gray-d3;
|
||||
content: '›';
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
color: $link-color;
|
||||
|
||||
.subtitle {
|
||||
color: $gray-d1;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 1px 14px 0 $shadow-l1;
|
||||
|
||||
&:after {
|
||||
opacity: 1.0;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,15 +6,15 @@
|
||||
%>
|
||||
|
||||
<%def name="make_chapter(chapter)">
|
||||
<button class="button-chapter chapter" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-pressed="false">
|
||||
<%
|
||||
if chapter.get('active'):
|
||||
aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
|
||||
active_class = 'active"'
|
||||
else:
|
||||
aria_label = chapter['display_name']
|
||||
active_class = ''
|
||||
%>
|
||||
<%
|
||||
if chapter.get('active'):
|
||||
aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
|
||||
active_class = 'active"'
|
||||
else:
|
||||
aria_label = chapter['display_name']
|
||||
active_class = ''
|
||||
%>
|
||||
<button class="button-chapter chapter ${active_class}" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-pressed="false">
|
||||
<h3 class="group-heading ${active_class}" aria-label="${aria_label}">
|
||||
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
|
||||
${chapter['display_name']}
|
||||
@@ -23,20 +23,22 @@
|
||||
<div class="chapter-content-container" tabindex="-1" aria-expanded="false">
|
||||
<div class="chapter-menu" id="${chapter['display_id']}-child" role="region" aria-labelledby="${chapter['display_id']}-parent" aria-hidden="false">
|
||||
% for section in chapter['sections']:
|
||||
<a class="${'active' if 'active' in section and section['active'] else ''} ${'graded' if 'graded' in section and section['graded'] else ''}" href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
|
||||
<p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
|
||||
<%
|
||||
if section.get('due') is None:
|
||||
due_date = ''
|
||||
else:
|
||||
formatted_string = get_time_display(section['due'], due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES)
|
||||
due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
|
||||
%>
|
||||
<p class="subtitle">${section['format']} ${due_date}</p>
|
||||
% if 'graded' in section and section['graded']:
|
||||
<img src="/static/images/graded.png" alt="Graded Section">
|
||||
% endif
|
||||
</a>
|
||||
<div class="menu-item ${'active' if 'active' in section and section['active'] else ''} ${'graded' if 'graded' in section and section['graded'] else ''}">
|
||||
<a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
|
||||
<p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
|
||||
<%
|
||||
if section.get('due') is None:
|
||||
due_date = ''
|
||||
else:
|
||||
formatted_string = get_time_display(section['due'], due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES)
|
||||
due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
|
||||
%>
|
||||
<p class="subtitle">${section['format']} ${due_date}</p>
|
||||
% if 'graded' in section and section['graded']:
|
||||
<img class="menu-icon" src="/static/images/graded.png" alt="Graded Section">
|
||||
% endif
|
||||
</a>
|
||||
</div>
|
||||
% endfor
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user