Commit ce4994dd by Brian Talbot

studio - revised course overview section collapse button to toggle collapsing/expanding

parent edd9b2bc
...@@ -42,6 +42,7 @@ $(document).ready(function() { ...@@ -42,6 +42,7 @@ $(document).ready(function() {
$('.new-unit-item').bind('click', createNewUnit); $('.new-unit-item').bind('click', createNewUnit);
$('.collapse-all-button').bind('click', collapseAll); $('.collapse-all-button').bind('click', collapseAll);
$('.toggle-button-sections').bind('click', toggleSections);
// autosave when a field is updated on the subsection page // autosave when a field is updated on the subsection page
$body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue); $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
...@@ -130,6 +131,19 @@ function collapseAll(e) { ...@@ -130,6 +131,19 @@ function collapseAll(e) {
$('.expand-collapse-icon').removeClass('collapse').addClass('expand'); $('.expand-collapse-icon').removeClass('collapse').addClass('expand');
} }
function toggleSections(e) {
e.preventDefault();
$section = $('.courseware-section');
$button = $(this);
$labelCollapsed = $('<i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span>');
$labelExpanded = $('<i class="ss-icon ss-symbolicons-block">down</i> <span class="label">Expand All Sections</span>');
$section.toggleClass('collapsed');
var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed;
$button.toggleClass('is-activated').html(buttonLabel);
}
function editSectionPublishDate(e) { function editSectionPublishDate(e) {
e.preventDefault(); e.preventDefault();
$modal = $('.edit-subsection-publish-settings').show(); $modal = $('.edit-subsection-publish-settings').show();
......
...@@ -512,6 +512,29 @@ input.courseware-unit-search-input { ...@@ -512,6 +512,29 @@ input.courseware-unit-search-input {
} }
} }
.toggle-button-sections {
position: relative;
float: right;
margin-top: 10px;
font-size: 13px;
color: $darkGrey;
.ss-icon {
@include border-radius(20px);
position: relative;
top: -1px;
display: inline-block;
margin-right: 2px;
line-height: 5px;
font-size: 11px;
}
.label {
display: inline-block;
}
}
.new-section-name, .new-section-name,
.new-subsection-name-input { .new-subsection-name-input {
width: 515px; width: 515px;
......
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
<div class="inner-wrapper"> <div class="inner-wrapper">
<div class="page-actions"> <div class="page-actions">
<a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a> <a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
<a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a> <a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span></a>
</div> </div>
<article class="courseware-overview" data-course-id="${context_course.location.url()}"> <article class="courseware-overview" data-course-id="${context_course.location.url()}">
% for section in sections: % for section in sections:
......
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