Skip to content

E
edx-platform
Commit 4185c11b by Chris Rodriguez
Options

Updating markup and styles

parent b32d2205
Showing with 214 additions and 261 deletions
lms/static/coffee/src/navigation.coffee
......@@ -2,7 +2,7 @@ class @Navigation
constructor: ->
if $('#accordion').length
# First look for an active section
active = $('#accordion div div ol:has(li.active)').index('#accordion div div ol')
active = $('#accordion div div:has(a.active)').index('#accordion div div')
# if we didn't find one, look for an active chapter
if active < 0
active = $('#accordion h3.active').index('#accordion h3')
......@@ -40,8 +40,7 @@ class @Navigation
$('.ui-accordion-content-active').parent().hide()
$('#accordion .ui-accordion-content-active').removeClass('ui-accordion-content-active')
$(this).closest('.chapter').next('div').children('div').addClass('ui-accordion-content-active')
$('.ui-accordion-content-active').parent().show()
$('.ui-accordion-content-active').parent().show().focus()
$('.ui-accordion-content-active').show()
$('.ui-accordion-content-active li:first-child a').focus()
$('.ui-accordion-content-active').attr('aria-hidden', 'false')
lms/static/sass/course/courseware/_sidebar.scss
.course-index {
@extend .sidebar;
@extend .tran;
@include border-right(1px solid $border-color-2);
@include border-radius(3px, 0, 0, 3px);
@extend .sidebar;
@extend .tran;
@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;
#open_close_accordion {
display: none;
}
}
div#accordion {
@extend %t-copy-sub1;
width: auto;
h3 {
@extend %t-title6;
@include padding-left($baseline);
overflow: visible;
margin: 0;
border-radius: 0;
box-shadow: none;
color: $link-color;
&:first-child {
border: none;
}
&.ui-accordion-header {
@extend %t-regular;
border-bottom: none;
a {
@include padding-left($baseline);
border-radius: 0;
box-shadow: none;
color: $link-color;
}
&.ui-state-active {
border-bottom: none;
color: $base-font-color;
&:hover, &:focus {
background: none;
}
}
span.ui-icon {
@include left($baseline);
background-image: url("/static/images/ui-icons_222222_256x240.png"); // jQuery UI sprite
opacity: 0.3;
&.ui-icon-triangle-1-e {
// CASE: left to right layout
@include ltr {
background-position: -32px -16px; // jQuery UI east arrow position
}
header {
max-height: 47px;
// CASE: right to left layout
@include rtl {
background-position: -96px -16px; // jQuery UI west arrow position
}
}
h2 {
white-space: nowrap;
}
}
}
.chapter {
@include box-sizing(border-box);
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
@include transition(background-color .1s linear 0s);
width: 100% !important;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
background-color: $sidebar-chapter-bg;
color: $link-color;
h3 {
padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
}
&.is-open {
background: $white;
box-shadow: none;
}
&:hover, &:focus {
background-color: $white;
}
}
div.chapter-content-container{
display: none;
padding: 0 14px ($baseline/2) 14px;
border-bottom: 1px solid $shadow-l1;
background: $white;
}
div.ui-accordion-content {
margin: 0;
padding: 0 ($baseline*.75);
border: none;
border-radius: 0;
background: transparent;
li {
margin: ($baseline/5) 0;
// margin-bottom: ($baseline/5);
border-bottom: 0;
border-radius: 0;
a {
@extend %t-strong;
@include padding(($baseline/4) ($baseline/2));
position: relative;
display: block;
border-radius: ($baseline/5);
background: transparent;
text-decoration: none;
p {
@extend %t-action3;
@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
i.verified {
color: $success-color;
}
i.rejected {
color: $alert-color;
}
i.error {
color: $alert-color;
}
}
}
&:hover, &:focus {
> a p {
color: $gray-d3;
#accordion {
@extend %t-copy-sub1;
width: auto;
nav {
.button-chapter {
@include box-sizing(border-box);
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
@include transition(background-color .1s linear 0s);
width: 100% !important;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
background-color: $sidebar-chapter-bg;
color: $link-color;
&.is-open {
background: $white;
box-shadow: none;
}
.group-heading {
@extend %t-title6;
overflow: visible;
padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
margin: 0;
border-radius: 0;
box-shadow: none;
color: $link-color;
&:first-child {
border: none;
}
&.ui-state-active {
border-bottom: none;
color: $base-font-color;
&:hover,
&:focus {
background: none;
}
}
.ui-icon {
@include left($baseline);
background-image: url("/static/images/ui-icons_222222_256x240.png"); // jQuery UI sprite
opacity: 0.3;
&.ui-icon-triangle-1-e {
// CASE: left to right layout
@include ltr {
background-position: -32px -16px; // jQuery UI east arrow position
}
// CASE: right to left layout
@include rtl {
background-position: -96px -16px; // jQuery UI west arrow position
}
}
}
}
}
}
&:active {
box-shadow: inset 0 1px 14px 0 $shadow-l1;
&:after {
opacity: 1.0;
right: 15px;
}
}
}
&.active {
@extend %t-strong;
&:after {
@extend %t-regular;
@include transition(none);
@include right($baseline);
content: '›';
position: absolute;
top: 50%;
margin-top: -13px;
font-size: 30px;
color: $gray-d3;
opacity: 0;
}
> a {
border: 1px solid $border-color-1;
box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
background: $sidebar-active-image;
&:after {
opacity: 1.0;
right: 15px;
}
p {
color: $gray-d3;
.chapter-content-container {
display: none;
padding: 0 14px ($baseline/2) 14px;
border-bottom: 1px solid $shadow-l1;
background: $white;
.chapter-menu {
margin: 0;
padding: 0 ($baseline*.75);
border: none;
border-radius: 0;
background: transparent;
overflow: hidden;
a {
@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;
p {
@extend %t-action3;
@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;
}
}
}
&.graded {
img {
@include right($baseline/4);
position: absolute;
bottom: ($baseline/4);
margin: auto;
}
}
&.active {
@extend %t-strong;
background: linear-gradient(to bottom, $gray-l4, #d6d6d6);
&:after {
@extend %t-regular;
@include transition(none);
@include right($baseline);
content: '›';
position: absolute;
top: 50%;
margin-top: -13px;
font-size: 30px;
color: $gray-d3;
opacity: 0;
}
}
&:hover,
&:focus {
p {
color: $gray-d3;
}
}
&:active {
box-shadow: inset 0 1px 14px 0 $shadow-l1;
&:after {
opacity: 1.0;
right: 15px;
}
}
}
}
}
}
span.subtitle {
@extend %t-regular;
}
}
&.graded {
> a {
> img {
@include right($baseline/4);
position: absolute;
bottom: ($baseline/4);
margin: auto;
}
}
&.active > a {
background: linear-gradient(to bottom, $gray-l4, #d6d6d6);
}
}
}
}
}
}
}
\ No newline at end of file
lms/templates/courseware/accordion.html
......@@ -6,44 +6,39 @@
%>
<%def name="make_chapter(chapter)">
<button class="chapter" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-expanded="false" aria-pressed="false">
<%
if chapter.get('active'):
aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
active_class = ' class="active"'
else:
aria_label = chapter['display_name']
active_class = ''
%>
<h3 ${active_class} aria-label="${aria_label}">
${chapter['display_name']}
</h3>
</button>
<div class="chapter-content-container">
<div id="${chapter['display_id']}-child" role="region" aria-labelledby="${chapter['display_id']}-parent" aria-hidden="false">
<ol>
% for section in chapter['sections']:
<li class="${'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 src="/static/images/graded.png" alt="Graded Section">
% endif
</a>
</li>
% endfor
</ol>
</div>
<button class="button-chapter chapter" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-expanded="false" 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 = ''
%>
<h3 class="group-heading ${active_class}" aria-label="${aria_label}">
${chapter['display_name']}
</h3>
</button>
<div class="chapter-content-container" tabindex="-1">
<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>
% endfor
</div>
</div>
</%def>
% for chapter in toc:
......
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