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