diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 888fcef5b8..086a535994 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -41,7 +41,12 @@ $(document).ready(function() { $('.unit .item-actions .delete-button').bind('click', deleteUnit); $('.new-unit-item').bind('click', createNewUnit); - $('.collapse-all-button').bind('click', collapseAll); + // toggling overview section details + $(function(){ + if($('.courseware-section').length > 0) { + $('.toggle-button-sections').addClass('is-shown'); + } + }); $('.toggle-button-sections').bind('click', toggleSections); // autosave when a field is updated on the subsection page @@ -135,13 +140,17 @@ function toggleSections(e) { e.preventDefault(); $section = $('.courseware-section'); + sectionCount = $section.length; $button = $(this); $labelCollapsed = $('up Collapse All Sections'); $labelExpanded = $('down Expand All Sections'); - $section.toggleClass('collapsed'); - var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed; - $button.toggleClass('is-activated').html(buttonLabel); + if (sectionCount > 0) { + $section.toggleClass('collapsed'); + $section.find('.expand-collapse-icon').toggleClass('collapse expand'); + var buttonLabel = $section.hasClass('collapsed') ? $labelExpanded : $labelCollapsed; + $button.toggleClass('is-activated').html(buttonLabel); + } } function editSectionPublishDate(e) { diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index 6a8be8e5ea..2fe4605a33 100644 --- a/cms/static/sass/_courseware.scss +++ b/cms/static/sass/_courseware.scss @@ -422,6 +422,14 @@ input.courseware-unit-search-input { float: left; margin: 29px 6px 16px 16px; @include transition(none); + + &.expand { + background-position: 0 0; + } + + &.collapsed { + + } } .drag-handle { @@ -501,18 +509,8 @@ input.courseware-unit-search-input { } } -.collapse-all-button { - float: right; - margin-top: 10px; - font-size: 13px; - color: $darkGrey; - - .collapse-all-icon { - margin-right: 6px; - } -} - .toggle-button-sections { + display: none; position: relative; float: right; margin-top: 10px; @@ -520,6 +518,10 @@ input.courseware-unit-search-input { font-size: 13px; color: $darkGrey; + &.is-shown { + display: block; + } + .ss-icon { @include border-radius(20px); position: relative;