Skip to content

E
edx-platform
Commit 917947d8 by Chris Rodriguez
Options

Markup and style tweaks to address test reqs

parent 895867a8
Showing with 112 additions and 119 deletions
common/test/acceptance/pages/lms/courseware.py
......@@ -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):
......
lms/static/js/fixtures/accordion.html
......@@ -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>
......
lms/static/js/utils/navigation.js
......@@ -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();
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -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;
&:empty {
display: none;
}
// definitions for proctored exam attempt status indicators
.verified {
color: $success-color;
@extend %t-strong;
margin-bottom: 0;
font-family: $sans-serif;
&.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;
}
}
}
.rejected {
color: $alert-color;
}
&:hover,
&:focus {
color: $link-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;
}
}
}
}
}
......
lms/templates/courseware/accordion.html
......@@ -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>
......
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