Skip to content

E
edx-platform
Commit 4185c11b by Chris Rodriguez
Options

Updating markup and styles

parent b32d2205
Showing with 58 additions and 106 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
...@@ -16,14 +16,33 @@ ...@@ -16,14 +16,33 @@
} }
} }
div#accordion { #accordion {
@extend %t-copy-sub1; @extend %t-copy-sub1;
width: auto; width: auto;
h3 { 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; @extend %t-title6;
@include padding-left($baseline);
overflow: visible; overflow: visible;
padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
...@@ -33,27 +52,17 @@ ...@@ -33,27 +52,17 @@
border: none; 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 { &.ui-state-active {
border-bottom: none; border-bottom: none;
color: $base-font-color; color: $base-font-color;
&:hover, &:focus { &:hover,
&:focus {
background: none; background: none;
} }
} }
span.ui-icon { .ui-icon {
@include left($baseline); @include left($baseline);
background-image: url("/static/images/ui-icons_222222_256x240.png"); // jQuery UI sprite background-image: url("/static/images/ui-icons_222222_256x240.png"); // jQuery UI sprite
opacity: 0.3; opacity: 0.3;
...@@ -74,58 +83,28 @@ ...@@ -74,58 +83,28 @@
} }
} }
.chapter { .chapter-content-container {
@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; display: none;
padding: 0 14px ($baseline/2) 14px; padding: 0 14px ($baseline/2) 14px;
border-bottom: 1px solid $shadow-l1; border-bottom: 1px solid $shadow-l1;
background: $white; background: $white;
}
div.ui-accordion-content { .chapter-menu {
margin: 0; margin: 0;
padding: 0 ($baseline*.75); padding: 0 ($baseline*.75);
border: none; border: none;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
overflow: hidden;
li {
margin: ($baseline/5) 0;
// margin-bottom: ($baseline/5);
border-bottom: 0;
border-radius: 0;
a { a {
@extend %t-strong; @extend %t-strong;
@include padding(($baseline/4) ($baseline/2)); @include padding(($baseline/4) ($baseline/2));
position: relative; position: relative;
display: block; display: block;
margin: ($baseline/5) 0;
border-radius: ($baseline/5); border-radius: ($baseline/5);
border-bottom: 0;
background: transparent; background: transparent;
text-decoration: none; text-decoration: none;
...@@ -147,39 +126,33 @@ ...@@ -147,39 +126,33 @@
} }
// definitions for proctored exam attempt status indicators // definitions for proctored exam attempt status indicators
i.verified { .verified {
color: $success-color; color: $success-color;
} }
i.rejected { .rejected {
color: $alert-color; color: $alert-color;
} }
i.error { .error {
color: $alert-color; color: $alert-color;
} }
} }
} }
&:hover, &:focus { &.graded {
> a p {
color: $gray-d3;
}
}
&:active {
box-shadow: inset 0 1px 14px 0 $shadow-l1;
&:after { img {
opacity: 1.0; @include right($baseline/4);
right: 15px; position: absolute;
} bottom: ($baseline/4);
margin: auto;
} }
} }
&.active { &.active {
@extend %t-strong; @extend %t-strong;
background: linear-gradient(to bottom, $gray-l4, #d6d6d6);
&:after { &:after {
@extend %t-regular; @extend %t-regular;
...@@ -193,39 +166,24 @@ ...@@ -193,39 +166,24 @@
color: $gray-d3; color: $gray-d3;
opacity: 0; 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;
} }
&:hover,
&:focus {
p { p {
color: $gray-d3; color: $gray-d3;
} }
} }
span.subtitle { &:active {
@extend %t-regular; box-shadow: inset 0 1px 14px 0 $shadow-l1;
}
}
&.graded { &:after {
> a { opacity: 1.0;
> img { right: 15px;
@include right($baseline/4);
position: absolute;
bottom: ($baseline/4);
margin: auto;
} }
} }
&.active > a {
background: linear-gradient(to bottom, $gray-l4, #d6d6d6);
} }
} }
} }
......
lms/templates/courseware/accordion.html
...@@ -6,25 +6,23 @@ ...@@ -6,25 +6,23 @@
%> %>
<%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']:
<li class="${'active' if 'active' in section and section['active'] else ''} ${'graded' if 'graded' in section and section['graded'] else ''}"> <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']])}">
<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> <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: if section.get('due') is None:
...@@ -34,16 +32,13 @@ ...@@ -34,16 +32,13 @@
due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string) due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
%> %>
<p class="subtitle">${section['format']} ${due_date}</p> <p class="subtitle">${section['format']} ${due_date}</p>
% if 'graded' in section and section['graded']: % if 'graded' in section and section['graded']:
<img src="/static/images/graded.png" alt="Graded Section"> <img src="/static/images/graded.png" alt="Graded Section">
% endif % endif
</a> </a>
</li>
% endfor % 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