div
'
+ first_update_url = reverse('course_info_json',
+ kwargs={'org': self.course_location.org,
+ 'course': self.course_location.course,
+ 'provided_id': payload['id']})
+ content += 'p
div
'
payload['content'] = content
+ resp = self.client.post(first_update_url, json.dumps(payload),
+ "application/json")
+
+ self.assertHTMLEqual(content, json.loads(resp.content)['content'],
+ "iframe w/ div")
+
+ # now put in an evil update
+ content = 'p
+
+
+
+
+
+
+
+
++ ▾ + <%= checklistShortDescription %>
+ + Tasks Completed: <%= itemsChecked %>/<%= items.length %> + ✓ + +-
+ <% var taskIndex = 0; %>
+ <% _.each(items, function(item) { %>
+ <% var checked = item['is_checked']; %>
+
- + class="task is-completed" + <% } else { %> + class="task" + <% } %> + > + <% var taskId = 'course-checklist' + checklistIndex + '-task' + taskIndex; %> + + checked="checked" + <% } %> + > + + + <% if (item['action_text'] !== '' && item['action_url'] !== '') { %> + + <% } %> + + + <% taskIndex+=1; }) %> + +
-
+-
+
-
-
+
+
+ e.g. Homework, Midterm Exams
+
-
-
-
-
- e.g. Homework, Labs, Midterm Exams, Final Exam
-
-
-
-
-
-
-
-
-
-
- e.g. HW, Midterm, Final
-
-
-
-
-
-
-
-
-
-
- e.g. 25%
-
-
-
-
-
-
-
-
-
-
- total exercises assigned
-
-
-
-
-
- Delete
+
-
-
-
- total exercises that won't be graded
-
-
+
+
+ e.g. HW, Midterm
+
+
+
+
+
+ e.g. 25%
+
+
+
+
+
+ total exercises assigned
+
+
+
+
+
+ total exercises that won't be graded
+
+
+
+ Delete
+
');
@@ -13,10 +13,6 @@ $(document).ready(function() {
// pipelining (note, this doesn't happen on local runtimes). So if we set it on window, when we can access it from other
// scopes (namely the course-info tab)
window.$modalCover = $modalCover;
-
- // Control whether template caching in local memory occurs (see template_loader.js). Caching screws up development but may
- // be a good optimization in production (it works fairly well)
- window.cachetemplates = false;
$body.append($modalCover);
$newComponentItem = $('.new-component-item');
@@ -31,25 +27,74 @@ $(document).ready(function() {
$modal.bind('click', hideModal);
$modalCover.bind('click', hideModal);
- $('.assets .upload-button').bind('click', showUploadModal);
+ $('.uploads .upload-button').bind('click', showUploadModal);
$('.upload-modal .close-button').bind('click', hideModal);
- $body.on('click', '.embeddable-xml-input', function(){ $(this).select(); });
+ $body.on('click', '.embeddable-xml-input', function () {
+ $(this).select();
+ });
$('.unit .item-actions .delete-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit);
+ $('body').addClass('js');
+
+ // lean/simple modal
+ $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
+ $('a.action-modal-close').click(function(e){
+ (e).preventDefault();
+ });
+
+ // nav - dropdown related
+ $body.click(function (e) {
+ $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
+ $('.nav-dropdown .nav-item .title').removeClass('is-selected');
+ });
+
+ $('.nav-dropdown .nav-item .title').click(function (e) {
+
+ $subnav = $(this).parent().find('.wrapper-nav-sub');
+ $title = $(this).parent().find('.title');
+ e.preventDefault();
+ e.stopPropagation();
+
+ if ($subnav.hasClass('is-shown')) {
+ $subnav.removeClass('is-shown');
+ $title.removeClass('is-selected');
+ }
+
+ else {
+ $('.nav-dropdown .nav-item .title').removeClass('is-selected');
+ $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
+ $title.addClass('is-selected');
+ $subnav.addClass('is-shown');
+ }
+ });
+
+ // general link management - new window/tab
+ $('a[rel="external"]').attr('title', 'This link will open in a new browser window/tab').bind('click', linkNewWindow);
+
+ // general link management - lean modal window
+ $('a[rel="modal"]').attr('title', 'This link will open in a modal window').leanModal({overlay: 0.50, closeButton: '.action-modal-close' });
+ $('.action-modal-close').click(function (e) {
+ (e).preventDefault();
+ });
+
+ // general link management - smooth scrolling page links
+ $('a[rel*="view"][href^="#"]').bind('click', smoothScrollLink);
+
+
// toggling overview section details
- $(function(){
- if($('.courseware-section').length > 0) {
- $('.toggle-button-sections').addClass('is-shown');
- }
+ $(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
- $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
- $('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
+ // autosave when leaving input field
+ $body.on('change', '.subsection-display-name-input', saveSubsection);
+ $('.subsection-display-name-input').each(function () {
this.val = $(this).val();
});
$("#start_date, #start_time, #due_date, #due_time").bind('change', autosaveInput);
@@ -61,21 +106,16 @@ $(document).ready(function() {
// add new/delete section
$('.new-courseware-section-button').bind('click', addNewSection);
$('.delete-section-button').bind('click', deleteSection);
-
+
// add new/delete subsection
$('.new-subsection-item').bind('click', addNewSubsection);
$('.delete-subsection-button').bind('click', deleteSubsection);
- // add/remove policy metadata button click handlers
- $('.add-policy-data').bind('click', addPolicyMetadata);
- $('.remove-policy-data').bind('click', removePolicyMetadata);
- $body.on('click', '.policy-list-element .save-button', savePolicyMetadata);
- $body.on('click', '.policy-list-element .cancel-button', cancelPolicyMetadata);
$('.sync-date').bind('click', syncReleaseDate);
// import form setup
$('.import .file-input').bind('change', showImportSubmit);
- $('.import .choose-file-button, .import .choose-file-button-inline').bind('click', function(e) {
+ $('.import .choose-file-button, .import .choose-file-button-inline').bind('click', function (e) {
e.preventDefault();
$('.import .file-input').click();
});
@@ -98,42 +138,59 @@ $(document).ready(function() {
$body.on('click', '.section-published-date .schedule-button', editSectionPublishDate);
$body.on('click', '.edit-subsection-publish-settings .save-button', saveSetSectionScheduleDate);
$body.on('click', '.edit-subsection-publish-settings .cancel-button', hideModal);
- $body.on('change', '.edit-subsection-publish-settings .start-date', function() {
- if($('.edit-subsection-publish-settings').find('.start-time').val() == '') {
- $('.edit-subsection-publish-settings').find('.start-time').val('12:00am');
+ $body.on('change', '.edit-subsection-publish-settings .start-date', function () {
+ if ($('.edit-subsection-publish-settings').find('.start-time').val() == '') {
+ $('.edit-subsection-publish-settings').find('.start-time').val('12:00am');
}
});
- $('.edit-subsection-publish-settings').on('change', '.start-date, .start-time', function() {
+ $('.edit-subsection-publish-settings').on('change', '.start-date, .start-time', function () {
$('.edit-subsection-publish-settings').find('.save-button').show();
});
});
-// function collapseAll(e) {
-// $('.branch').addClass('collapsed');
-// $('.expand-collapse-icon').removeClass('collapse').addClass('expand');
-// }
+function smoothScrollLink(e) {
+ (e).preventDefault();
+
+ $.smoothScroll({
+ offset: -200,
+ easing: 'swing',
+ speed: 1000,
+ scrollElement: null,
+ scrollTarget: $(this).attr('href')
+ });
+}
+
+function linkNewWindow(e) {
+ window.open($(e.target).attr('href'));
+ e.preventDefault();
+}
+
+// On AWS instances, base.js gets wrapped in a separate scope as part of Django static
+// pipelining (note, this doesn't happen on local runtimes). So if we set it on window,
+// when we can access it from other scopes (namely the checklists)
+window.cmsLinkNewWindow = linkNewWindow;
function toggleSections(e) {
- e.preventDefault();
+ e.preventDefault();
- $section = $('.courseware-section');
- sectionCount = $section.length;
- $button = $(this);
- $labelCollapsed = $('up Collapse All Sections');
- $labelExpanded = $('down Expand All Sections');
+ $section = $('.courseware-section');
+ sectionCount = $section.length;
+ $button = $(this);
+ $labelCollapsed = $('up Collapse All Sections');
+ $labelExpanded = $('down Expand All Sections');
- var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded;
- $button.toggleClass('is-activated').html(buttonLabel);
+ var buttonLabel = $button.hasClass('is-activated') ? $labelCollapsed : $labelExpanded;
+ $button.toggleClass('is-activated').html(buttonLabel);
- if($button.hasClass('is-activated')) {
- $section.addClass('collapsed');
- // first child in order to avoid the icons on the subsection lists which are not in the first child
- $section.find('header .expand-collapse-icon').removeClass('collapse').addClass('expand');
- } else {
- $section.removeClass('collapsed');
- // first child in order to avoid the icons on the subsection lists which are not in the first child
- $section.find('header .expand-collapse-icon').removeClass('expand').addClass('collapse');
- }
+ if ($button.hasClass('is-activated')) {
+ $section.addClass('collapsed');
+ // first child in order to avoid the icons on the subsection lists which are not in the first child
+ $section.find('header .expand-collapse-icon').removeClass('collapse').addClass('expand');
+ } else {
+ $section.removeClass('collapsed');
+ // first child in order to avoid the icons on the subsection lists which are not in the first child
+ $section.find('header .expand-collapse-icon').removeClass('expand').addClass('collapse');
+ }
}
function editSectionPublishDate(e) {
@@ -143,16 +200,16 @@ function editSectionPublishDate(e) {
$modal.attr('data-id', $(this).attr('data-id'));
$modal.find('.start-date').val($(this).attr('data-date'));
$modal.find('.start-time').val($(this).attr('data-time'));
- if($modal.find('.start-date').val() == '' && $modal.find('.start-time').val() == '') {
+ if ($modal.find('.start-date').val() == '' && $modal.find('.start-time').val() == '') {
$modal.find('.save-button').hide();
- }
+ }
$modal.find('.section-name').html('"' + $(this).closest('.courseware-section').find('.section-name-span').text() + '"');
$modalCover.show();
}
function showImportSubmit(e) {
var filepath = $(this).val();
- if(filepath.substr(filepath.length - 6, 6) == 'tar.gz') {
+ if (filepath.substr(filepath.length - 6, 6) == 'tar.gz') {
$('.error-block').hide();
$('.file-name').html($(this).val().replace('C:\\fakepath\\', ''));
$('.file-name-block').show();
@@ -171,65 +228,15 @@ function syncReleaseDate(e) {
$("#start_time").val("");
}
-function addPolicyMetadata(e) {
- e.preventDefault();
- var template =$('#add-new-policy-element-template > li');
- var newNode = template.clone();
- var _parent_el = $(this).parent('ol:.policy-list');
- newNode.insertBefore('.add-policy-data');
- $('.remove-policy-data').bind('click', removePolicyMetadata);
- newNode.find('.policy-list-name').focus();
-}
-
-function savePolicyMetadata(e) {
- e.preventDefault();
-
- var $policyElement = $(this).parents('.policy-list-element');
- saveSubsection()
- $policyElement.removeClass('new-policy-list-element');
- $policyElement.find('.policy-list-name').attr('disabled', 'disabled');
- $policyElement.removeClass('editing');
-}
-
-function cancelPolicyMetadata(e) {
- e.preventDefault();
-
- var $policyElement = $(this).parents('.policy-list-element');
- if(!$policyElement.hasClass('editing')) {
- $policyElement.remove();
- } else {
- $policyElement.removeClass('new-policy-list-element');
- $policyElement.find('.policy-list-name').val($policyElement.data('currentValues')[0]);
- $policyElement.find('.policy-list-value').val($policyElement.data('currentValues')[1]);
- }
- $policyElement.removeClass('editing');
-}
-
-function removePolicyMetadata(e) {
- e.preventDefault();
-
- if(!confirm('Are you sure you wish to delete this item. It cannot be reversed!'))
- return;
-
- policy_name = $(this).data('policy-name');
- var _parent_el = $(this).parent('li:.policy-list-element');
- if ($(_parent_el).hasClass("new-policy-list-element")) {
- _parent_el.remove();
- } else {
- _parent_el.appendTo("#policy-to-delete");
- }
- saveSubsection()
-}
-
function getEdxTimeFromDateTimeVals(date_val, time_val, format) {
var edxTimeStr = null;
if (date_val != '') {
- if (time_val == '')
+ if (time_val == '')
time_val = '00:00';
// Note, we are using date.js utility which has better parsing abilities than the built in JS date parsing
- date = Date.parse(date_val + " " + time_val);
+ var date = Date.parse(date_val + " " + time_val);
if (format == null)
format = 'yyyy-MM-ddTHH:mm';
@@ -240,51 +247,28 @@ function getEdxTimeFromDateTimeVals(date_val, time_val, format) {
}
function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
- var input_date = $('#'+date_id).val();
- var input_time = $('#'+time_id).val();
+ var input_date = $('#' + date_id).val();
+ var input_time = $('#' + time_id).val();
return getEdxTimeFromDateTimeVals(input_date, input_time, format);
}
-function checkForNewValue(e) {
- if($(this).parents('.new-policy-list-element')[0]) {
- return;
- }
-
- if(this.val) {
- this.hasChanged = this.val != $(this).val();
- } else {
- this.hasChanged = false;
- }
-
- this.val = $(this).val();
- if(this.hasChanged) {
- if(this.saveTimer) {
- clearTimeout(this.saveTimer);
- }
-
- this.saveTimer = setTimeout(function() {
- $changedInput = $(e.target);
- saveSubsection();
- this.saveTimer = null;
- }, 500);
- }
-}
-
function autosaveInput(e) {
- if(this.saveTimer) {
+ var self = this;
+ if (this.saveTimer) {
clearTimeout(this.saveTimer);
}
- this.saveTimer = setTimeout(function() {
+ this.saveTimer = setTimeout(function () {
$changedInput = $(e.target);
saveSubsection();
- this.saveTimer = null;
+ self.saveTimer = null;
}, 500);
}
function saveSubsection() {
- if($changedInput && !$changedInput.hasClass('no-spinner')) {
+ // Spinner is no longer used by subsection name, but is still used by date and time pickers on the right.
+ if ($changedInput && !$changedInput.hasClass('no-spinner')) {
$spinner.css({
'position': 'absolute',
'top': Math.floor($changedInput.position().top + ($changedInput.outerHeight() / 2) + 3),
@@ -294,31 +278,17 @@ function saveSubsection() {
$changedInput.after($spinner);
$spinner.show();
}
-
+
var id = $('.subsection-body').data('id');
// pull all 'normalized' metadata editable fields on page
var metadata_fields = $('input[data-metadata-name]');
-
+
var metadata = {};
- for(var i=0; i< metadata_fields.length;i++) {
- var el = metadata_fields[i];
- metadata[$(el).data("metadata-name")] = el.value;
- }
-
- // now add 'free-formed' metadata which are presented to the user as dual input fields (name/value)
- $('ol.policy-list > li.policy-list-element').each( function(i, element) {
- var name = $(element).children('.policy-list-name').val();
- metadata[name] = $(element).children('.policy-list-value').val();
- });
-
- // now add any 'removed' policy metadata which is stored in a separate hidden div
- // 'null' presented to the server means 'remove'
- $("#policy-to-delete > li.policy-list-element").each(function(i, element) {
- var name = $(element).children('.policy-list-name').val();
- if (name != "")
- metadata[name] = null;
- });
+ for (var i = 0; i < metadata_fields.length; i++) {
+ var el = metadata_fields[i];
+ metadata[$(el).data("metadata-name")] = el.value;
+ }
// Piece back together the date/time UI elements into one date/time string
// NOTE: our various "date/time" metadata elements don't always utilize the same formatting string
@@ -327,18 +297,19 @@ function saveSubsection() {
metadata['due'] = getEdxTimeFromDateTimeInputs('due_date', 'due_time', 'MMMM dd HH:mm');
$.ajax({
- url: "/save_item",
- type: "POST",
- dataType: "json",
- contentType: "application/json",
- data:JSON.stringify({ 'id' : id, 'metadata' : metadata}),
- success: function() {
+ url: "/save_item",
+ type: "POST",
+ dataType: "json",
+ contentType: "application/json",
+ data: JSON.stringify({ 'id': id, 'metadata': metadata}),
+ success: function () {
$spinner.delay(500).fadeOut(150);
- },
- error: function() {
+ $changedInput = null;
+ },
+ error: function () {
showToastMessage('There has been an error while saving your changes.');
- }
- });
+ }
+ });
}
@@ -349,14 +320,14 @@ function createNewUnit(e) {
template = $(this).data('template');
$.post('/clone_item',
- {'parent_location' : parent,
- 'template' : template,
- 'display_name': 'New Unit'
- },
- function(data) {
- // redirect to the edit page
- window.location = "/edit/" + data['id'];
- });
+ {'parent_location': parent,
+ 'template': template,
+ 'display_name': 'New Unit'
+ },
+ function (data) {
+ // redirect to the edit page
+ window.location = "/edit/" + data['id'];
+ });
}
function deleteUnit(e) {
@@ -375,16 +346,16 @@ function deleteSection(e) {
}
function _deleteItem($el) {
- if(!confirm('Are you sure you wish to delete this item. It cannot be reversed!'))
- return;
-
+ if (!confirm('Are you sure you wish to delete this item. It cannot be reversed!'))
+ return;
+
var id = $el.data('id');
-
- $.post('/delete_item',
- {'id': id, 'delete_children' : true, 'delete_all_versions' : true},
- function(data) {
- $el.remove();
- });
+
+ $.post('/delete_item',
+ {'id': id, 'delete_children': true, 'delete_all_versions': true},
+ function (data) {
+ $el.remove();
+ });
}
function showUploadModal(e) {
@@ -411,7 +382,7 @@ function startUpload(e) {
$('.upload-modal .progress-bar').removeClass('loaded').show();
}
-function resetUploadBar(){
+function resetUploadBar() {
var percentVal = '0%';
$('.upload-modal .progress-fill').width(percentVal);
$('.upload-modal .progress-fill').html(percentVal);
@@ -424,7 +395,7 @@ function showUploadFeedback(event, position, total, percentComplete) {
}
function displayFinishedUpload(xhr) {
- if(xhr.status = 200){
+ if (xhr.status = 200) {
markAsLoaded();
}
@@ -448,10 +419,10 @@ function displayFinishedUpload(xhr) {
function markAsLoaded() {
$('.upload-modal .copy-button').css('display', 'inline-block');
$('.upload-modal .progress-bar').addClass('loaded');
-}
+}
function hideModal(e) {
- if(e) {
+ if (e) {
e.preventDefault();
}
// Unit editors do not want the modal cover to hide when users click outside
@@ -465,7 +436,7 @@ function hideModal(e) {
}
function onKeyUp(e) {
- if(e.which == 87) {
+ if (e.which == 87) {
$body.toggleClass('show-wip hide-wip');
}
}
@@ -515,14 +486,14 @@ function showToastMessage(message, $button, lifespan) {
var $content = $('');
$content.html(message);
$toast.append($content);
- if($button) {
+ if ($button) {
$button.addClass('action-button');
$button.bind('click', hideToastMessage);
$content.append($button);
}
$closeBtn.bind('click', hideToastMessage);
- if($('.toast-notification')[0]) {
+ if ($('.toast-notification')[0]) {
var targetY = $('.toast-notification').offset().top + $('.toast-notification').outerHeight();
$toast.css('top', (targetY + 10) + 'px');
}
@@ -530,8 +501,8 @@ function showToastMessage(message, $button, lifespan) {
$body.prepend($toast);
$toast.fadeIn(200);
- if(lifespan) {
- $toast.timer = setTimeout(function() {
+ if (lifespan) {
+ $toast.timer = setTimeout(function () {
$toast.fadeOut(300);
}, lifespan * 1000);
}
@@ -557,7 +528,7 @@ function addNewSection(e, isTemplate) {
}
function checkForCancel(e) {
- if(e.which == 27) {
+ if (e.which == 27) {
$body.unbind('keyup', checkForCancel);
e.data.$cancelButton.click();
}
@@ -573,11 +544,11 @@ function saveNewSection(e) {
var display_name = $(this).find('.new-section-name').val();
$.post('/clone_item', {
- 'parent_location' : parent,
- 'template' : template,
+ 'parent_location': parent,
+ 'template': template,
'display_name': display_name,
},
- function(data) {
+ function (data) {
if (data.id != undefined)
location.reload();
}
@@ -596,7 +567,7 @@ function addNewCourse(e) {
$(e.target).hide();
var $newCourse = $($('#new-course-template').html());
var $cancelButton = $newCourse.find('.new-course-cancel');
- $('.new-course-button').after($newCourse);
+ $('.inner-wrapper').prepend($newCourse);
$newCourse.find('.new-course-name').focus().select();
$newCourse.find('form').bind('submit', saveNewCourse);
$cancelButton.bind('click', cancelNewCourse);
@@ -612,18 +583,18 @@ function saveNewCourse(e) {
var number = $newCourse.find('.new-course-number').val();
var display_name = $newCourse.find('.new-course-name').val();
- if (org == '' || number == '' || display_name == ''){
+ if (org == '' || number == '' || display_name == '') {
alert('You must specify all fields in order to create a new course.');
return;
}
$.post('/create_new_course', {
- 'template' : template,
- 'org' : org,
- 'number' : number,
- 'display_name': display_name
+ 'template': template,
+ 'org': org,
+ 'number': number,
+ 'display_name': display_name
},
- function(data) {
+ function (data) {
if (data.id != undefined) {
window.location = '/' + data.id.replace(/.*:\/\//, '');
} else if (data.ErrMsg != undefined) {
@@ -667,13 +638,13 @@ function saveNewSubsection(e) {
var display_name = $(this).find('.new-subsection-name-input').val();
$.post('/clone_item', {
- 'parent_location' : parent,
- 'template' : template,
- 'display_name': display_name
+ 'parent_location': parent,
+ 'template': template,
+ 'display_name': display_name
},
- function(data) {
+ function (data) {
if (data.id != undefined) {
- location.reload();
+ location.reload();
}
}
);
@@ -720,21 +691,20 @@ function saveEditSectionName(e) {
}
var $_this = $(this);
- // call into server to commit the new order
+ // call into server to commit the new order
$.ajax({
url: "/save_item",
type: "POST",
dataType: "json",
contentType: "application/json",
- data:JSON.stringify({ 'id' : id, 'metadata' : {'display_name' : display_name}})
- }).success(function()
- {
- $spinner.delay(250).fadeOut(250);
- $_this.closest('h3').find('.section-name-span').html(display_name).show();
- $_this.hide();
- $_this.closest('.section-name').bind('click', editSectionName);
- e.stopPropagation();
- });
+ data: JSON.stringify({ 'id': id, 'metadata': {'display_name': display_name}})
+ }).success(function () {
+ $spinner.delay(250).fadeOut(250);
+ $_this.closest('h3').find('.section-name-span').html(display_name).show();
+ $_this.hide();
+ $_this.closest('.section-name').bind('click', editSectionName);
+ e.stopPropagation();
+ });
}
function setSectionScheduleDate(e) {
@@ -765,21 +735,20 @@ function saveSetSectionScheduleDate(e) {
type: "POST",
dataType: "json",
contentType: "application/json",
- data:JSON.stringify({ 'id' : id, 'metadata' : {'start' : start}})
- }).success(function()
- {
- var $thisSection = $('.courseware-section[data-id="' + id + '"]');
- $thisSection.find('.section-published-date').html('Will Release: ' + input_date + ' at ' + input_time + 'Edit');
- $thisSection.find('.section-published-date').animate({
- 'background-color': 'rgb(182,37,104)'
- }, 300).animate({
- 'background-color': '#edf1f5'
- }, 300).animate({
- 'background-color': 'rgb(182,37,104)'
- }, 300).animate({
- 'background-color': '#edf1f5'
- }, 300);
-
- hideModal();
- });
-}
+ data: JSON.stringify({ 'id': id, 'metadata': {'start': start}})
+ }).success(function () {
+ var $thisSection = $('.courseware-section[data-id="' + id + '"]');
+ $thisSection.find('.section-published-date').html('Will Release: ' + input_date + ' at ' + input_time + 'Edit');
+ $thisSection.find('.section-published-date').animate({
+ 'background-color': 'rgb(182,37,104)'
+ }, 300).animate({
+ 'background-color': '#edf1f5'
+ }, 300).animate({
+ 'background-color': 'rgb(182,37,104)'
+ }, 300).animate({
+ 'background-color': '#edf1f5'
+ }, 300);
+
+ hideModal();
+ });
+}
\ No newline at end of file
diff --git a/cms/static/js/models/checklists.js b/cms/static/js/models/checklists.js
new file mode 100644
index 0000000000..823ac584d2
--- /dev/null
+++ b/cms/static/js/models/checklists.js
@@ -0,0 +1,24 @@
+// Model for checklists_view.js.
+CMS.Models.Checklist = Backbone.Model.extend({
+});
+
+CMS.Models.ChecklistCollection = Backbone.Collection.extend({
+ model : CMS.Models.Checklist,
+
+ parse: function(response) {
+ _.each(response,
+ function( element, idx ) {
+ element.id = idx;
+ });
+
+ return response;
+ },
+
+ // Disable caching so the browser back button will work (checklists have links to other
+ // places within Studio).
+ fetch: function (options) {
+ options.cache = false;
+ return Backbone.Collection.prototype.fetch.call(this, options);
+ }
+});
+
diff --git a/cms/static/js/models/settings/advanced.js b/cms/static/js/models/settings/advanced.js
new file mode 100644
index 0000000000..adc259239d
--- /dev/null
+++ b/cms/static/js/models/settings/advanced.js
@@ -0,0 +1,50 @@
+if (!CMS.Models['Settings']) CMS.Models.Settings = {};
+
+CMS.Models.Settings.Advanced = Backbone.Model.extend({
+
+ defaults: {
+ // the properties are whatever the user types in (in addition to whatever comes originally from the server)
+ },
+ // which keys to send as the deleted keys on next save
+ deleteKeys : [],
+
+ validate: function (attrs) {
+ // Keys can no longer be edited. We are currently not validating values.
+ },
+
+ save : function (attrs, options) {
+ // wraps the save call w/ the deletion of the removed keys after we know the saved ones worked
+ options = options ? _.clone(options) : {};
+ // add saveSuccess to the success
+ var success = options.success;
+ options.success = function(model, resp, options) {
+ model.afterSave(model);
+ if (success) success(model, resp, options);
+ };
+ Backbone.Model.prototype.save.call(this, attrs, options);
+ },
+
+ afterSave : function(self) {
+ // remove deleted attrs
+ if (!_.isEmpty(self.deleteKeys)) {
+ // remove the to be deleted keys from the returned model
+ _.each(self.deleteKeys, function(key) { self.unset(key); });
+ // not able to do via backbone since we're not destroying the model
+ $.ajax({
+ url : self.url,
+ // json to and fro
+ contentType : "application/json",
+ dataType : "json",
+ // delete
+ type : 'DELETE',
+ // data
+ data : JSON.stringify({ deleteKeys : self.deleteKeys})
+ })
+ .fail(function(hdr, status, error) { CMS.ServerError(self, "Deleting keys:" + status); })
+ .done(function(data, status, error) {
+ // clear deleteKeys on success
+ self.deleteKeys = [];
+ });
+ }
+ }
+});
diff --git a/cms/static/js/models/settings/course_details.js b/cms/static/js/models/settings/course_details.js
index bdbb46b3b1..d41545cca9 100644
--- a/cms/static/js/models/settings/course_details.js
+++ b/cms/static/js/models/settings/course_details.js
@@ -1,85 +1,81 @@
if (!CMS.Models['Settings']) CMS.Models.Settings = new Object();
CMS.Models.Settings.CourseDetails = Backbone.Model.extend({
- defaults: {
- location : null, // the course's Location model, required
- start_date: null, // maps to 'start'
- end_date: null, // maps to 'end'
- enrollment_start: null,
- enrollment_end: null,
- syllabus: null,
- overview: "",
- intro_video: null,
- effort: null // an int or null
- },
-
- // When init'g from html script, ensure you pass {parse: true} as an option (2nd arg to reset)
- parse: function(attributes) {
- if (attributes['course_location']) {
- attributes.location = new CMS.Models.Location(attributes.course_location, {parse:true});
- }
- if (attributes['start_date']) {
- attributes.start_date = new Date(attributes.start_date);
- }
- if (attributes['end_date']) {
- attributes.end_date = new Date(attributes.end_date);
- }
- if (attributes['enrollment_start']) {
- attributes.enrollment_start = new Date(attributes.enrollment_start);
- }
- if (attributes['enrollment_end']) {
- attributes.enrollment_end = new Date(attributes.enrollment_end);
- }
- return attributes;
- },
-
- validate: function(newattrs) {
- // Returns either nothing (no return call) so that validate works or an object of {field: errorstring} pairs
- // A bit funny in that the video key validation is asynchronous; so, it won't stop the validation.
- var errors = {};
- if (newattrs.start_date && newattrs.end_date && newattrs.start_date >= newattrs.end_date) {
- errors.end_date = "The course end date cannot be before the course start date.";
- }
- if (newattrs.start_date && newattrs.enrollment_start && newattrs.start_date < newattrs.enrollment_start) {
- errors.enrollment_start = "The course start date cannot be before the enrollment start date.";
- }
- if (newattrs.enrollment_start && newattrs.enrollment_end && newattrs.enrollment_start >= newattrs.enrollment_end) {
- errors.enrollment_end = "The enrollment start date cannot be after the enrollment end date.";
- }
- if (newattrs.end_date && newattrs.enrollment_end && newattrs.end_date < newattrs.enrollment_end) {
- errors.enrollment_end = "The enrollment end date cannot be after the course end date.";
- }
- if (newattrs.intro_video && newattrs.intro_video !== this.get('intro_video')) {
- if (this._videokey_illegal_chars.exec(newattrs.intro_video)) {
- errors.intro_video = "Key should only contain letters, numbers, _, or -";
- }
- // TODO check if key points to a real video using google's youtube api
- }
- if (!_.isEmpty(errors)) return errors;
- // NOTE don't return empty errors as that will be interpreted as an error state
- },
-
- url: function() {
- var location = this.get('location');
- return '/' + location.get('org') + "/" + location.get('course') + '/settings/' + location.get('name') + '/section/details';
- },
-
- _videokey_illegal_chars : /[^a-zA-Z0-9_-]/g,
- save_videosource: function(newsource) {
- // newsource either is or just the "speed:key, *" string
- // returns the videosource for the preview which iss the key whose speed is closest to 1
- if (_.isEmpty(newsource) && !_.isEmpty(this.get('intro_video'))) this.save({'intro_video': null},
- { error : CMS.ServerError});
- // TODO remove all whitespace w/in string
- else {
- if (this.get('intro_video') !== newsource) this.save('intro_video', newsource,
- { error : CMS.ServerError});
- }
-
- return this.videosourceSample();
- },
- videosourceSample : function() {
- if (this.has('intro_video')) return "http://www.youtube.com/embed/" + this.get('intro_video');
- else return "";
- }
+ defaults: {
+ location : null, // the course's Location model, required
+ start_date: null, // maps to 'start'
+ end_date: null, // maps to 'end'
+ enrollment_start: null,
+ enrollment_end: null,
+ syllabus: null,
+ overview: "",
+ intro_video: null,
+ effort: null // an int or null
+ },
+
+ // When init'g from html script, ensure you pass {parse: true} as an option (2nd arg to reset)
+ parse: function(attributes) {
+ if (attributes['course_location']) {
+ attributes.location = new CMS.Models.Location(attributes.course_location, {parse:true});
+ }
+ if (attributes['start_date']) {
+ attributes.start_date = new Date(attributes.start_date);
+ }
+ if (attributes['end_date']) {
+ attributes.end_date = new Date(attributes.end_date);
+ }
+ if (attributes['enrollment_start']) {
+ attributes.enrollment_start = new Date(attributes.enrollment_start);
+ }
+ if (attributes['enrollment_end']) {
+ attributes.enrollment_end = new Date(attributes.enrollment_end);
+ }
+ return attributes;
+ },
+
+ validate: function(newattrs) {
+ // Returns either nothing (no return call) so that validate works or an object of {field: errorstring} pairs
+ // A bit funny in that the video key validation is asynchronous; so, it won't stop the validation.
+ var errors = {};
+ if (newattrs.start_date === null) {
+ errors.start_date = "The course must have an assigned start date.";
+ }
+ if (newattrs.start_date && newattrs.end_date && newattrs.start_date >= newattrs.end_date) {
+ errors.end_date = "The course end date cannot be before the course start date.";
+ }
+ if (newattrs.start_date && newattrs.enrollment_start && newattrs.start_date < newattrs.enrollment_start) {
+ errors.enrollment_start = "The course start date cannot be before the enrollment start date.";
+ }
+ if (newattrs.enrollment_start && newattrs.enrollment_end && newattrs.enrollment_start >= newattrs.enrollment_end) {
+ errors.enrollment_end = "The enrollment start date cannot be after the enrollment end date.";
+ }
+ if (newattrs.end_date && newattrs.enrollment_end && newattrs.end_date < newattrs.enrollment_end) {
+ errors.enrollment_end = "The enrollment end date cannot be after the course end date.";
+ }
+ if (newattrs.intro_video && newattrs.intro_video !== this.get('intro_video')) {
+ if (this._videokey_illegal_chars.exec(newattrs.intro_video)) {
+ errors.intro_video = "Key should only contain letters, numbers, _, or -";
+ }
+ // TODO check if key points to a real video using google's youtube api
+ }
+ if (!_.isEmpty(errors)) return errors;
+ // NOTE don't return empty errors as that will be interpreted as an error state
+ },
+
+ _videokey_illegal_chars : /[^a-zA-Z0-9_-]/g,
+ save_videosource: function(newsource) {
+ // newsource either is or just the "speed:key, *" string
+ // returns the videosource for the preview which iss the key whose speed is closest to 1
+ if (_.isEmpty(newsource) && !_.isEmpty(this.get('intro_video'))) this.save({'intro_video': null});
+ // TODO remove all whitespace w/in string
+ else {
+ if (this.get('intro_video') !== newsource) this.save('intro_video', newsource);
+ }
+
+ return this.videosourceSample();
+ },
+ videosourceSample : function() {
+ if (this.has('intro_video')) return "http://www.youtube.com/embed/" + this.get('intro_video');
+ else return "";
+ }
});
diff --git a/cms/static/js/models/settings/course_grading_policy.js b/cms/static/js/models/settings/course_grading_policy.js
index cce4e0207d..3f8b1bf29a 100644
--- a/cms/static/js/models/settings/course_grading_policy.js
+++ b/cms/static/js/models/settings/course_grading_policy.js
@@ -1,55 +1,56 @@
if (!CMS.Models['Settings']) CMS.Models.Settings = new Object();
CMS.Models.Settings.CourseGradingPolicy = Backbone.Model.extend({
- defaults : {
- course_location : null,
- graders : null, // CourseGraderCollection
- grade_cutoffs : null, // CourseGradeCutoff model
+ defaults : {
+ course_location : null,
+ graders : null, // CourseGraderCollection
+ grade_cutoffs : null, // CourseGradeCutoff model
grace_period : null // either null or { hours: n, minutes: m, ...}
- },
- parse: function(attributes) {
- if (attributes['course_location']) {
- attributes.course_location = new CMS.Models.Location(attributes.course_location, {parse:true});
- }
- if (attributes['graders']) {
- var graderCollection;
- if (this.has('graders')) {
- graderCollection = this.get('graders');
- graderCollection.reset(attributes.graders);
- }
- else {
- graderCollection = new CMS.Models.Settings.CourseGraderCollection(attributes.graders);
- graderCollection.course_location = attributes['course_location'] || this.get('course_location');
- }
- attributes.graders = graderCollection;
- }
- return attributes;
- },
- url : function() {
- var location = this.get('course_location');
- return '/' + location.get('org') + "/" + location.get('course') + '/settings/' + location.get('name') + '/section/grading';
- },
- gracePeriodToDate : function() {
- var newDate = new Date();
- if (this.has('grace_period') && this.get('grace_period')['hours'])
- newDate.setHours(this.get('grace_period')['hours']);
- else newDate.setHours(0);
- if (this.has('grace_period') && this.get('grace_period')['minutes'])
- newDate.setMinutes(this.get('grace_period')['minutes']);
- else newDate.setMinutes(0);
- if (this.has('grace_period') && this.get('grace_period')['seconds'])
- newDate.setSeconds(this.get('grace_period')['seconds']);
- else newDate.setSeconds(0);
-
- return newDate;
- },
- dateToGracePeriod : function(date) {
- return {hours : date.getHours(), minutes : date.getMinutes(), seconds : date.getSeconds() };
- }
+ },
+ parse: function(attributes) {
+ if (attributes['course_location']) {
+ attributes.course_location = new CMS.Models.Location(attributes.course_location, {parse:true});
+ }
+ if (attributes['graders']) {
+ var graderCollection;
+ // interesting race condition: if {parse:true} when newing, then parse called before .attributes created
+ if (this.attributes && this.has('graders')) {
+ graderCollection = this.get('graders');
+ graderCollection.reset(attributes.graders);
+ }
+ else {
+ graderCollection = new CMS.Models.Settings.CourseGraderCollection(attributes.graders);
+ graderCollection.course_location = attributes['course_location'] || this.get('course_location');
+ }
+ attributes.graders = graderCollection;
+ }
+ return attributes;
+ },
+ url : function() {
+ var location = this.get('course_location');
+ return '/' + location.get('org') + "/" + location.get('course') + '/settings-details/' + location.get('name') + '/section/grading';
+ },
+ gracePeriodToDate : function() {
+ var newDate = new Date();
+ if (this.has('grace_period') && this.get('grace_period')['hours'])
+ newDate.setHours(this.get('grace_period')['hours']);
+ else newDate.setHours(0);
+ if (this.has('grace_period') && this.get('grace_period')['minutes'])
+ newDate.setMinutes(this.get('grace_period')['minutes']);
+ else newDate.setMinutes(0);
+ if (this.has('grace_period') && this.get('grace_period')['seconds'])
+ newDate.setSeconds(this.get('grace_period')['seconds']);
+ else newDate.setSeconds(0);
+
+ return newDate;
+ },
+ dateToGracePeriod : function(date) {
+ return {hours : date.getHours(), minutes : date.getMinutes(), seconds : date.getSeconds() };
+ }
});
CMS.Models.Settings.CourseGrader = Backbone.Model.extend({
- defaults: {
+ defaults: {
"type" : "", // must be unique w/in collection (ie. w/in course)
"min_count" : 1,
"drop_count" : 0,
@@ -57,71 +58,71 @@ CMS.Models.Settings.CourseGrader = Backbone.Model.extend({
"weight" : 0 // int 0..100
},
parse : function(attrs) {
- if (attrs['weight']) {
- if (!_.isNumber(attrs.weight)) attrs.weight = parseInt(attrs.weight);
- }
- if (attrs['min_count']) {
- if (!_.isNumber(attrs.min_count)) attrs.min_count = parseInt(attrs.min_count);
- }
- if (attrs['drop_count']) {
- if (!_.isNumber(attrs.drop_count)) attrs.drop_count = parseInt(attrs.drop_count);
- }
- return attrs;
+ if (attrs['weight']) {
+ if (!_.isNumber(attrs.weight)) attrs.weight = parseInt(attrs.weight);
+ }
+ if (attrs['min_count']) {
+ if (!_.isNumber(attrs.min_count)) attrs.min_count = parseInt(attrs.min_count);
+ }
+ if (attrs['drop_count']) {
+ if (!_.isNumber(attrs.drop_count)) attrs.drop_count = parseInt(attrs.drop_count);
+ }
+ return attrs;
},
validate : function(attrs) {
- var errors = {};
- if (attrs['type']) {
- if (_.isEmpty(attrs['type'])) {
- errors.type = "The assignment type must have a name.";
- }
- else {
- // FIXME somehow this.collection is unbound sometimes. I can't track down when
- var existing = this.collection && this.collection.some(function(other) { return (other != this) && (other.get('type') == attrs['type']);}, this);
- if (existing) {
- errors.type = "There's already another assignment type with this name.";
- }
- }
- }
- if (attrs['weight']) {
- if (!isFinite(attrs.weight) || /\D+/.test(attrs.weight)) {
- errors.weight = "Please enter an integer between 0 and 100.";
- }
- else {
- attrs.weight = parseInt(attrs.weight); // see if this ensures value saved is int
- if (this.collection && attrs.weight > 0) {
- // FIXME b/c saves don't update the models if validation fails, we should
- // either revert the field value to the one in the model and make them make room
- // or figure out a wholistic way to balance the vals across the whole
-// if ((this.collection.sumWeights() + attrs.weight - this.get('weight')) > 100)
-// errors.weight = "The weights cannot add to more than 100.";
- }
- }}
- if (attrs['min_count']) {
- if (!isFinite(attrs.min_count) || /\D+/.test(attrs.min_count)) {
- errors.min_count = "Please enter an integer.";
- }
- else attrs.min_count = parseInt(attrs.min_count);
- }
- if (attrs['drop_count']) {
- if (!isFinite(attrs.drop_count) || /\D+/.test(attrs.drop_count)) {
- errors.drop_count = "Please enter an integer.";
- }
- else attrs.drop_count = parseInt(attrs.drop_count);
- }
- if (attrs['min_count'] && attrs['drop_count'] && attrs.drop_count > attrs.min_count) {
- errors.drop_count = "Cannot drop more " + attrs.type + " than will assigned.";
- }
- if (!_.isEmpty(errors)) return errors;
+ var errors = {};
+ if (attrs['type']) {
+ if (_.isEmpty(attrs['type'])) {
+ errors.type = "The assignment type must have a name.";
+ }
+ else {
+ // FIXME somehow this.collection is unbound sometimes. I can't track down when
+ var existing = this.collection && this.collection.some(function(other) { return (other != this) && (other.get('type') == attrs['type']);}, this);
+ if (existing) {
+ errors.type = "There's already another assignment type with this name.";
+ }
+ }
+ }
+ if (attrs['weight']) {
+ if (!isFinite(attrs.weight) || /\D+/.test(attrs.weight)) {
+ errors.weight = "Please enter an integer between 0 and 100.";
+ }
+ else {
+ attrs.weight = parseInt(attrs.weight); // see if this ensures value saved is int
+ if (this.collection && attrs.weight > 0) {
+ // FIXME b/c saves don't update the models if validation fails, we should
+ // either revert the field value to the one in the model and make them make room
+ // or figure out a wholistic way to balance the vals across the whole
+// if ((this.collection.sumWeights() + attrs.weight - this.get('weight')) > 100)
+// errors.weight = "The weights cannot add to more than 100.";
+ }
+ }}
+ if (attrs['min_count']) {
+ if (!isFinite(attrs.min_count) || /\D+/.test(attrs.min_count)) {
+ errors.min_count = "Please enter an integer.";
+ }
+ else attrs.min_count = parseInt(attrs.min_count);
+ }
+ if (attrs['drop_count']) {
+ if (!isFinite(attrs.drop_count) || /\D+/.test(attrs.drop_count)) {
+ errors.drop_count = "Please enter an integer.";
+ }
+ else attrs.drop_count = parseInt(attrs.drop_count);
+ }
+ if (attrs['min_count'] && attrs['drop_count'] && attrs.drop_count > attrs.min_count) {
+ errors.drop_count = "Cannot drop more " + attrs.type + " than will assigned.";
+ }
+ if (!_.isEmpty(errors)) return errors;
}
});
CMS.Models.Settings.CourseGraderCollection = Backbone.Collection.extend({
- model : CMS.Models.Settings.CourseGrader,
- course_location : null, // must be set to a Location object
- url : function() {
- return '/' + this.course_location.get('org') + "/" + this.course_location.get('course') + '/grades/' + this.course_location.get('name') + '/';
- },
- sumWeights : function() {
- return this.reduce(function(subtotal, grader) { return subtotal + grader.get('weight'); }, 0);
- }
+ model : CMS.Models.Settings.CourseGrader,
+ course_location : null, // must be set to a Location object
+ url : function() {
+ return '/' + this.course_location.get('org') + "/" + this.course_location.get('course') + '/settings-grading/' + this.course_location.get('name') + '/';
+ },
+ sumWeights : function() {
+ return this.reduce(function(subtotal, grader) { return subtotal + grader.get('weight'); }, 0);
+ }
});
\ No newline at end of file
diff --git a/cms/static/js/models/settings/course_settings.js b/cms/static/js/models/settings/course_settings.js
deleted file mode 100644
index 9d09e4bdc5..0000000000
--- a/cms/static/js/models/settings/course_settings.js
+++ /dev/null
@@ -1,43 +0,0 @@
-if (!CMS.Models['Settings']) CMS.Models.Settings = new Object();
-CMS.Models.Settings.CourseSettings = Backbone.Model.extend({
- // a container for the models representing the n possible tabbed states
- defaults: {
- courseLocation: null,
- // NOTE: keep these sync'd w/ the data-section names in settings-page-menu
- details: null,
- faculty: null,
- grading: null,
- problems: null,
- discussions: null
- },
-
- retrieve: function(submodel, callback) {
- if (this.get(submodel)) callback();
- else {
- var cachethis = this;
- switch (submodel) {
- case 'details':
- var details = new CMS.Models.Settings.CourseDetails({location: this.get('courseLocation')});
- details.fetch( {
- success : function(model) {
- cachethis.set('details', model);
- callback(model);
- }
- });
- break;
- case 'grading':
- var grading = new CMS.Models.Settings.CourseGradingPolicy({course_location: this.get('courseLocation')});
- grading.fetch( {
- success : function(model) {
- cachethis.set('grading', model);
- callback(model);
- }
- });
- break;
-
- default:
- break;
- }
- }
- }
-})
\ No newline at end of file
diff --git a/cms/static/js/template_loader.js b/cms/static/js/template_loader.js
index 89ecc98cc4..45161b3c28 100644
--- a/cms/static/js/template_loader.js
+++ b/cms/static/js/template_loader.js
@@ -1,78 +1,79 @@
//
// TODO Figure out how to initialize w/ static views from server (don't call .load but instead inject in django as strings)
// so this only loads the lazily loaded ones.
-(function() {
- if (typeof window.templateLoader == 'function') return;
-
- var templateLoader = {
- templateVersion: "0.0.12",
- templates: {},
- loadRemoteTemplate: function(templateName, filename, callback) {
- if (!this.templates[templateName]) {
- var self = this;
- jQuery.ajax({url : filename,
- success : function(data) {
- self.addTemplate(templateName, data);
- self.saveLocalTemplates();
- callback(data);
- },
- error : function(xhdr, textStatus, errorThrown) {
- console.log(textStatus); },
- dataType : "html"
- })
- }
- else {
- callback(this.templates[templateName]);
- }
- },
-
- addTemplate: function(templateName, data) {
- // is there a reason this doesn't go ahead and compile the template? _.template(data)
- // I suppose localstorage use would still req raw string rather than compiled version, but that sd work
- // if it maintains a separate cache of uncompiled ones
- this.templates[templateName] = data;
- },
-
- localStorageAvailable: function() {
- try {
- // window.cachetemplates is global set in base.js to turn caching on/off
- return window.cachetemplates && 'localStorage' in window && window['localStorage'] !== null;
- } catch (e) {
- return false;
- }
- },
-
- saveLocalTemplates: function() {
- if (this.localStorageAvailable) {
- localStorage.setItem("templates", JSON.stringify(this.templates));
- localStorage.setItem("templateVersion", this.templateVersion);
- }
- },
-
- loadLocalTemplates: function() {
- if (this.localStorageAvailable) {
- var templateVersion = localStorage.getItem("templateVersion");
- if (templateVersion && templateVersion == this.templateVersion) {
- var templates = localStorage.getItem("templates");
- if (templates) {
- templates = JSON.parse(templates);
- for (var x in templates) {
- if (!this.templates[x]) {
- this.addTemplate(x, templates[x]);
- }
- }
- }
- }
- else {
- localStorage.removeItem("templates");
- localStorage.removeItem("templateVersion");
- }
- }
- }
+(function () {
+ if (typeof window.templateLoader == 'function') return;
+
+ var templateLoader = {
+ templateVersion: "0.0.15",
+ templates: {},
+ // Control whether template caching in local memory occurs. Caching screws up development but may
+ // be a good optimization in production (it works fairly well).
+ cacheTemplates: false,
+ loadRemoteTemplate: function (templateName, filename, callback) {
+ if (!this.templates[templateName]) {
+ var self = this;
+ jQuery.ajax({url: filename,
+ success: function (data) {
+ self.addTemplate(templateName, data);
+ self.saveLocalTemplates();
+ callback(data);
+ },
+ error: function (xhdr, textStatus, errorThrown) {
+ console.log(textStatus);
+ },
+ dataType: "html"
+ })
+ }
+ else {
+ callback(this.templates[templateName]);
+ }
+ },
+
+ addTemplate: function (templateName, data) {
+ // is there a reason this doesn't go ahead and compile the template? _.template(data)
+ // I suppose localstorage use would still req raw string rather than compiled version, but that sd work
+ // if it maintains a separate cache of uncompiled ones
+ this.templates[templateName] = data;
+ },
+
+ localStorageAvailable: function () {
+ try {
+ return this.cacheTemplates && 'localStorage' in window && window['localStorage'] !== null;
+ } catch (e) {
+ return false;
+ }
+ },
+
+ saveLocalTemplates: function () {
+ if (this.localStorageAvailable()) {
+ localStorage.setItem("templates", JSON.stringify(this.templates));
+ localStorage.setItem("templateVersion", this.templateVersion);
+ }
+ },
+
+ loadLocalTemplates: function () {
+ if (this.localStorageAvailable()) {
+ var templateVersion = localStorage.getItem("templateVersion");
+ if (templateVersion && templateVersion == this.templateVersion) {
+ var templates = localStorage.getItem("templates");
+ if (templates) {
+ templates = JSON.parse(templates);
+ for (var x in templates) {
+ if (!this.templates[x]) {
+ this.addTemplate(x, templates[x]);
+ }
+ }
+ }
+ }
+ else {
+ localStorage.removeItem("templates");
+ localStorage.removeItem("templateVersion");
+ }
+ }
+ }
-
-
};
templateLoader.loadLocalTemplates();
window.templateLoader = templateLoader;
- })();
+})();
diff --git a/cms/static/js/views/checklists_view.js b/cms/static/js/views/checklists_view.js
new file mode 100644
index 0000000000..e553c7a2ca
--- /dev/null
+++ b/cms/static/js/views/checklists_view.js
@@ -0,0 +1,89 @@
+if (!CMS.Views['Checklists']) CMS.Views.Checklists = {};
+
+CMS.Views.Checklists = Backbone.View.extend({
+ // takes CMS.Models.Checklists as model
+
+ events : {
+ 'click .course-checklist .checklist-title' : "toggleChecklist",
+ 'click .course-checklist .task input' : "toggleTask",
+ 'click a[rel="external"]' : window.cmsLinkNewWindow
+ },
+
+ initialize : function() {
+ var self = this;
+
+ this.collection.fetch({
+ complete: function () {
+ window.templateLoader.loadRemoteTemplate("checklist",
+ "/static/client_templates/checklist.html",
+ function (raw_template) {
+ self.template = _.template(raw_template);
+ self.render();
+ }
+ );
+ },
+ error: CMS.ServerError
+ }
+ );
+ },
+
+ render: function() {
+ // catch potential outside call before template loaded
+ if (!this.template) return this;
+
+ this.$el.empty();
+
+ var self = this;
+ _.each(this.collection.models,
+ function(checklist, index) {
+ self.$el.append(self.renderTemplate(checklist, index));
+ });
+
+ return this;
+ },
+
+ renderTemplate: function (checklist, index) {
+ var checklistItems = checklist.attributes['items'];
+ var itemsChecked = 0;
+ _.each(checklistItems,
+ function(checklist) {
+ if (checklist['is_checked']) {
+ itemsChecked +=1;
+ }
+ });
+ var percentChecked = Math.round((itemsChecked/checklistItems.length)*100);
+ return this.template({
+ checklistIndex : index,
+ checklistShortDescription : checklist.attributes['short_description'],
+ items: checklistItems,
+ itemsChecked: itemsChecked,
+ percentChecked: percentChecked});
+ },
+
+ toggleChecklist : function(e) {
+ e.preventDefault();
+ $(e.target).closest('.course-checklist').toggleClass('is-collapsed');
+ },
+
+ toggleTask : function (e) {
+ var self = this;
+
+ var completed = 'is-completed';
+ var $checkbox = $(e.target);
+ var $task = $checkbox.closest('.task');
+ $task.toggleClass(completed);
+
+ var checklist_index = $checkbox.data('checklist');
+ var task_index = $checkbox.data('task');
+ var model = this.collection.at(checklist_index);
+ model.attributes.items[task_index].is_checked = $task.hasClass(completed);
+ model.save({},
+ {
+ success : function() {
+ var updatedTemplate = self.renderTemplate(model, checklist_index);
+ self.$el.find('#course-checklist'+checklist_index).first().replaceWith(updatedTemplate);
+ },
+ error : CMS.ServerError
+ });
+ }
+});
\ No newline at end of file
diff --git a/cms/static/js/views/course_info_edit.js b/cms/static/js/views/course_info_edit.js
index cb396b2a7f..ce959fd443 100644
--- a/cms/static/js/views/course_info_edit.js
+++ b/cms/static/js/views/course_info_edit.js
@@ -10,7 +10,7 @@ CMS.Views.CourseInfoEdit = Backbone.View.extend({
render: function() {
// instantiate the ClassInfoUpdateView and delegate the proper dom to it
new CMS.Views.ClassInfoUpdateView({
- el: this.$('#course-update-view'),
+ el: $('body.updates'),
collection: this.model.get('updates')
});
@@ -27,10 +27,10 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
// collection is CourseUpdateCollection
events: {
"click .new-update-button" : "onNew",
- "click .save-button" : "onSave",
- "click .cancel-button" : "onCancel",
- "click .edit-button" : "onEdit",
- "click .delete-button" : "onDelete"
+ "click #course-update-view .save-button" : "onSave",
+ "click #course-update-view .cancel-button" : "onCancel",
+ "click .post-actions > .edit-button" : "onEdit",
+ "click .post-actions > .delete-button" : "onDelete"
},
initialize: function() {
@@ -44,6 +44,8 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
self.render();
}
);
+ // when the client refetches the updates as a whole, re-render them
+ this.listenTo(this.collection, 'reset', this.render);
},
render: function () {
@@ -53,8 +55,12 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
$(updateEle).empty();
var self = this;
this.collection.each(function (update) {
- var newEle = self.template({ updateModel : update });
- $(updateEle).append(newEle);
+ try {
+ var newEle = self.template({ updateModel : update });
+ $(updateEle).append(newEle);
+ } catch (e) {
+ // ignore
+ }
});
this.$el.find(".new-update-form").hide();
this.$el.find('.date').datepicker({ 'dateFormat': 'MM d, yy' });
@@ -136,8 +142,11 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
onDelete: function(event) {
event.preventDefault();
- // TODO ask for confirmation
- // remove the dom element and delete the model
+
+ if (!confirm('Are you sure you want to delete this update? This action cannot be undone.')) {
+ return;
+ }
+
var targetModel = this.eventModel(event);
this.modelDom(event).remove();
var cacheThis = this;
@@ -150,7 +159,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
},
closeEditor: function(self, removePost) {
- var targetModel = self.collection.getByCid(self.$currentPost.attr('name'));
+ var targetModel = self.collection.get(self.$currentPost.attr('name'));
if(removePost) {
self.$currentPost.remove();
@@ -160,8 +169,13 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
self.$currentPost.removeClass('editing');
self.$currentPost.find('.date-display').html(targetModel.get('date'));
self.$currentPost.find('.date').val(targetModel.get('date'));
- self.$currentPost.find('.update-contents').html(targetModel.get('content'));
- self.$currentPost.find('.new-update-content').val(targetModel.get('content'));
+ try {
+ // just in case the content causes an error (embedded js errors)
+ self.$currentPost.find('.update-contents').html(targetModel.get('content'));
+ self.$currentPost.find('.new-update-content').val(targetModel.get('content'));
+ } catch (e) {
+ // ignore but handle rest of page
+ }
self.$currentPost.find('form').hide();
window.$modalCover.unbind('click');
window.$modalCover.hide();
@@ -172,7 +186,7 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
// Dereferencing from events to screen elements
eventModel: function(event) {
// not sure if it should be currentTarget or delegateTarget
- return this.collection.getByCid($(event.currentTarget).attr("name"));
+ return this.collection.get($(event.currentTarget).attr("name"));
},
modelDom: function(event) {
diff --git a/cms/static/js/views/settings/advanced_view.js b/cms/static/js/views/settings/advanced_view.js
new file mode 100644
index 0000000000..e3ff098efb
--- /dev/null
+++ b/cms/static/js/views/settings/advanced_view.js
@@ -0,0 +1,168 @@
+if (!CMS.Views['Settings']) CMS.Views.Settings = {};
+
+CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
+ error_saving : "error_saving",
+ successful_changes: "successful_changes",
+
+ // Model class is CMS.Models.Settings.Advanced
+ events : {
+ 'focus :input' : "focusInput",
+ 'blur :input' : "blurInput"
+ // TODO enable/disable save based on validation (currently enabled whenever there are changes)
+ },
+ initialize : function() {
+ var self = this;
+ // instantiates an editor template for each update in the collection
+ window.templateLoader.loadRemoteTemplate("advanced_entry",
+ "/static/client_templates/advanced_entry.html",
+ function (raw_template) {
+ self.template = _.template(raw_template);
+ self.render();
+ }
+ );
+ // because these are outside of this.$el, they can't be in the event hash
+ $('.save-button').on('click', this, this.saveView);
+ $('.cancel-button').on('click', this, this.revertView);
+ this.listenTo(this.model, 'error', CMS.ServerError);
+ this.listenTo(this.model, 'invalid', this.handleValidationError);
+ },
+ render: function() {
+ // catch potential outside call before template loaded
+ if (!this.template) return this;
+
+ var listEle$ = this.$el.find('.course-advanced-policy-list');
+ listEle$.empty();
+
+ // b/c we've deleted all old fields, clear the map and repopulate
+ this.fieldToSelectorMap = {};
+ this.selectorToField = {};
+
+ // iterate through model and produce key : value editors for each property in model.get
+ var self = this;
+ _.each(_.sortBy(_.keys(this.model.attributes), _.identity),
+ function(key) {
+ listEle$.append(self.renderTemplate(key, self.model.get(key)));
+ });
+
+ var policyValues = listEle$.find('.json');
+ _.each(policyValues, this.attachJSONEditor, this);
+ this.showMessage();
+ return this;
+ },
+ attachJSONEditor : function (textarea) {
+ // Since we are allowing duplicate keys at the moment, it is possible that we will try to attach
+ // JSON Editor to a value that already has one. Therefore only attach if no CodeMirror peer exists.
+ if ( $(textarea).siblings().hasClass('CodeMirror')) {
+ return;
+ }
+
+ var self = this;
+ var oldValue = $(textarea).val();
+ CodeMirror.fromTextArea(textarea, {
+ mode: "application/json", lineNumbers: false, lineWrapping: false,
+ onChange: function(instance, changeobj) {
+ // this event's being called even when there's no change :-(
+ if (instance.getValue() !== oldValue) self.showSaveCancelButtons();
+ },
+ onFocus : function(mirror) {
+ $(textarea).parent().children('label').addClass("is-focused");
+ },
+ onBlur: function (mirror) {
+ $(textarea).parent().children('label').removeClass("is-focused");
+ var key = $(mirror.getWrapperElement()).closest('.field-group').children('.key').attr('id');
+ var stringValue = $.trim(mirror.getValue());
+ // update CodeMirror to show the trimmed value.
+ mirror.setValue(stringValue);
+ var JSONValue = undefined;
+ try {
+ JSONValue = JSON.parse(stringValue);
+ } catch (e) {
+ // If it didn't parse, try converting non-arrays/non-objects to a String.
+ // But don't convert single-quote strings, which are most likely errors.
+ var firstNonWhite = stringValue.substring(0, 1);
+ if (firstNonWhite !== "{" && firstNonWhite !== "[" && firstNonWhite !== "'") {
+ try {
+ stringValue = '"'+stringValue +'"';
+ JSONValue = JSON.parse(stringValue);
+ mirror.setValue(stringValue);
+ } catch(quotedE) {
+ // TODO: validation error
+ // console.log("Error with JSON, even after converting to String.");
+ // console.log(quotedE);
+ JSONValue = undefined;
+ }
+ }
+ }
+ if (JSONValue !== undefined) {
+ self.clearValidationErrors();
+ self.model.set(key, JSONValue, {validate: true});
+ }
+ }
+ });
+ },
+ showMessage: function (type) {
+ this.$el.find(".message-status").removeClass("is-shown");
+ if (type) {
+ if (type === this.error_saving) {
+ this.$el.find(".message-status.error").addClass("is-shown");
+ }
+ else if (type === this.successful_changes) {
+ this.$el.find(".message-status.confirm").addClass("is-shown");
+ this.hideSaveCancelButtons();
+ }
+ }
+ else {
+ // This is the case of the page first rendering, or when Cancel is pressed.
+ this.hideSaveCancelButtons();
+ }
+ },
+ showSaveCancelButtons: function(event) {
+ if (!this.buttonsVisible) {
+ this.$el.find(".message-status").removeClass("is-shown");
+ $('.wrapper-notification').addClass('is-shown');
+ this.buttonsVisible = true;
+ }
+ },
+ hideSaveCancelButtons: function() {
+ $('.wrapper-notification').removeClass('is-shown');
+ this.buttonsVisible = false;
+ },
+ saveView : function(event) {
+ // TODO one last verification scan:
+ // call validateKey on each to ensure proper format
+ // check for dupes
+ var self = event.data;
+ self.model.save({},
+ {
+ success : function() {
+ self.render();
+ self.showMessage(self.successful_changes);
+ },
+ error : CMS.ServerError
+ });
+ },
+ revertView : function(event) {
+ var self = event.data;
+ self.model.deleteKeys = [];
+ self.model.clear({silent : true});
+ self.model.fetch({
+ success : function() { self.render(); },
+ error : CMS.ServerError
+ });
+ },
+ renderTemplate: function (key, value) {
+ var newKeyId = _.uniqueId('policy_key_'),
+ newEle = this.template({ key : key, value : JSON.stringify(value, null, 4),
+ keyUniqueId: newKeyId, valueUniqueId: _.uniqueId('policy_value_')});
+
+ this.fieldToSelectorMap[key] = newKeyId;
+ this.selectorToField[newKeyId] = key;
+ return newEle;
+ },
+ focusInput : function(event) {
+ $(event.target).prev().addClass("is-focused");
+ },
+ blurInput : function(event) {
+ $(event.target).prev().removeClass("is-focused");
+ }
+});
\ No newline at end of file
diff --git a/cms/static/js/views/settings/main_settings_view.js b/cms/static/js/views/settings/main_settings_view.js
index f4c7df41a6..3e1690f0b6 100644
--- a/cms/static/js/views/settings/main_settings_view.js
+++ b/cms/static/js/views/settings/main_settings_view.js
@@ -1,222 +1,92 @@
if (!CMS.Views['Settings']) CMS.Views.Settings = {};
-// TODO move to common place
-CMS.Views.ValidatingView = Backbone.View.extend({
- // Intended as an abstract class which catches validation errors on the model and
- // decorates the fields. Needs wiring per class, but this initialization shows how
- // either have your init call this one or copy the contents
- initialize : function() {
- this.model.on('error', this.handleValidationError, this);
- this.selectorToField = _.invert(this.fieldToSelectorMap);
- },
-
- errorTemplate : _.template('<%= message %>'),
-
- events : {
- "blur input" : "clearValidationErrors",
- "blur textarea" : "clearValidationErrors"
- },
- fieldToSelectorMap : {
- // Your subclass must populate this w/ all of the model keys and dom selectors
- // which may be the subjects of validation errors
- },
- _cacheValidationErrors : [],
- handleValidationError : function(model, error) {
- // error is object w/ fields and error strings
- for (var field in error) {
- var ele = this.$el.find('#' + this.fieldToSelectorMap[field]);
- this._cacheValidationErrors.push(ele);
- if ($(ele).is('div')) {
- // put error on the contained inputs
- $(ele).find('input, textarea').addClass('error');
- }
- else $(ele).addClass('error');
- $(ele).parent().append(this.errorTemplate({message : error[field]}));
- }
- },
-
- clearValidationErrors : function() {
- // error is object w/ fields and error strings
- while (this._cacheValidationErrors.length > 0) {
- var ele = this._cacheValidationErrors.pop();
- if ($(ele).is('div')) {
- // put error on the contained inputs
- $(ele).find('input, textarea').removeClass('error');
- }
- else $(ele).removeClass('error');
- $(ele).nextAll('.message-error').remove();
- }
- },
-
- saveIfChanged : function(event) {
- // returns true if the value changed and was thus sent to server
- var field = this.selectorToField[event.currentTarget.id];
- var currentVal = this.model.get(field);
- var newVal = $(event.currentTarget).val();
- if (currentVal != newVal) {
- this.clearValidationErrors();
- this.model.save(field, newVal, { error : CMS.ServerError});
- return true;
- }
- else return false;
- }
-});
-
-CMS.Views.Settings.Main = Backbone.View.extend({
- // Model class is CMS.Models.Settings.CourseSettings
- // allow navigation between the tabs
- events: {
- 'click .settings-page-menu a': "showSettingsTab",
- 'mouseover #timezone' : "updateTime"
- },
-
- currentTab: null,
- subviews: {}, // indexed by tab name
-
- initialize: function() {
- // load templates
- this.currentTab = this.$el.find('.settings-page-menu .is-shown').attr('data-section');
- // create the initial subview
- this.subviews[this.currentTab] = this.createSubview();
-
- // fill in fields
- this.$el.find("#course-name").val(this.model.get('courseLocation').get('name'));
- this.$el.find("#course-organization").val(this.model.get('courseLocation').get('org'));
- this.$el.find("#course-number").val(this.model.get('courseLocation').get('course'));
- this.$el.find('.set-date').datepicker({ 'dateFormat': 'm/d/yy' });
- this.$el.find(":input, textarea").focus(function() {
- $("label[for='" + this.id + "']").addClass("is-focused");
- }).blur(function() {
- $("label").removeClass("is-focused");
- });
- this.render();
- },
-
- render: function() {
-
- // create any necessary subviews and put them onto the page
- if (!this.model.has(this.currentTab)) {
- // TODO disable screen until fetch completes?
- var cachethis = this;
- this.model.retrieve(this.currentTab, function() {
- cachethis.subviews[cachethis.currentTab] = cachethis.createSubview();
- cachethis.subviews[cachethis.currentTab].render();
- });
- }
- else this.subviews[this.currentTab].render();
-
- var dateIntrospect = new Date();
- this.$el.find('#timezone').html("(" + dateIntrospect.getTimezone() + ")");
-
- return this;
- },
-
- createSubview: function() {
- switch (this.currentTab) {
- case 'details':
- return new CMS.Views.Settings.Details({
- el: this.$el.find('.settings-' + this.currentTab),
- model: this.model.get(this.currentTab)
- });
- case 'faculty':
- break;
- case 'grading':
- return new CMS.Views.Settings.Grading({
- el: this.$el.find('.settings-' + this.currentTab),
- model: this.model.get(this.currentTab)
- });
- case 'problems':
- break;
- case 'discussions':
- break;
- }
- },
-
- updateTime : function(e) {
- var now = new Date();
- var hours = now.getHours();
- var minutes = now.getMinutes();
- $(e.currentTarget).attr('title', (hours % 12 === 0 ? 12 : hours % 12) + ":" + (minutes < 10 ? "0" : "") +
- now.getMinutes() + (hours < 12 ? "am" : "pm") + " (current local time)");
- },
-
- showSettingsTab: function(e) {
- this.currentTab = $(e.target).attr('data-section');
- $('.settings-page-section > section').hide();
- $('.settings-' + this.currentTab).show();
- $('.settings-page-menu .is-shown').removeClass('is-shown');
- $(e.target).addClass('is-shown');
- // fetch model for the tab if not loaded already
- this.render();
- }
-
-});
-
CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
- // Model class is CMS.Models.Settings.CourseDetails
- events : {
- "blur input" : "updateModel",
- "blur textarea" : "updateModel",
- 'click .remove-course-syllabus' : "removeSyllabus",
- 'click .new-course-syllabus' : 'assetSyllabus',
- 'click .remove-course-introduction-video' : "removeVideo",
- 'focus #course-overview' : "codeMirrorize"
- },
- initialize : function() {
- // TODO move the html frag to a loaded asset
- this.fileAnchorTemplate = _.template(' 📄<%= filename %>');
- this.model.on('error', this.handleValidationError, this);
- this.selectorToField = _.invert(this.fieldToSelectorMap);
- },
-
- render: function() {
- this.setupDatePicker('start_date');
- this.setupDatePicker('end_date');
- this.setupDatePicker('enrollment_start');
- this.setupDatePicker('enrollment_end');
-
- if (this.model.has('syllabus')) {
- this.$el.find(this.fieldToSelectorMap['syllabus']).html(
- this.fileAnchorTemplate({
- fullpath : this.model.get('syllabus'),
- filename: 'syllabus'}));
- this.$el.find('.remove-course-syllabus').show();
- }
- else {
- this.$el.find('#' + this.fieldToSelectorMap['syllabus']).html("");
- this.$el.find('.remove-course-syllabus').hide();
- }
-
- this.$el.find('#' + this.fieldToSelectorMap['overview']).val(this.model.get('overview'));
- this.codeMirrorize(null, $('#course-overview')[0]);
-
- this.$el.find('.current-course-introduction-video iframe').attr('src', this.model.videosourceSample());
- if (this.model.has('intro_video')) {
- this.$el.find('.remove-course-introduction-video').show();
- this.$el.find('#' + this.fieldToSelectorMap['intro_video']).val(this.model.get('intro_video'));
- }
- else this.$el.find('.remove-course-introduction-video').hide();
-
- this.$el.find('#' + this.fieldToSelectorMap['effort']).val(this.model.get('effort'));
-
- return this;
- },
- fieldToSelectorMap : {
- 'start_date' : "course-start",
- 'end_date' : 'course-end',
- 'enrollment_start' : 'enrollment-start',
- 'enrollment_end' : 'enrollment-end',
- 'syllabus' : '.current-course-syllabus .doc-filename',
- 'overview' : 'course-overview',
- 'intro_video' : 'course-introduction-video',
- 'effort' : "course-effort"
- },
+ // Model class is CMS.Models.Settings.CourseDetails
+ events : {
+ "change input" : "updateModel",
+ "change textarea" : "updateModel",
+ 'click .remove-course-syllabus' : "removeSyllabus",
+ 'click .new-course-syllabus' : 'assetSyllabus',
+ 'click .remove-course-introduction-video' : "removeVideo",
+ 'focus #course-overview' : "codeMirrorize",
+ 'mouseover #timezone' : "updateTime",
+ // would love to move to a general superclass, but event hashes don't inherit in backbone :-(
+ 'focus :input' : "inputFocus",
+ 'blur :input' : "inputUnfocus"
+
+ },
+ initialize : function() {
+ this.fileAnchorTemplate = _.template(' 📄<%= filename %>');
+ // fill in fields
+ this.$el.find("#course-name").val(this.model.get('location').get('name'));
+ this.$el.find("#course-organization").val(this.model.get('location').get('org'));
+ this.$el.find("#course-number").val(this.model.get('location').get('course'));
+ this.$el.find('.set-date').datepicker({ 'dateFormat': 'm/d/yy' });
+
+ var dateIntrospect = new Date();
+ this.$el.find('#timezone').html("(" + dateIntrospect.getTimezone() + ")");
+
+ this.listenTo(this.model, 'error', CMS.ServerError);
+ this.listenTo(this.model, 'invalid', this.handleValidationError);
+ this.selectorToField = _.invert(this.fieldToSelectorMap);
+ },
+
+ render: function() {
+ this.setupDatePicker('start_date');
+ this.setupDatePicker('end_date');
+ this.setupDatePicker('enrollment_start');
+ this.setupDatePicker('enrollment_end');
+
+ if (this.model.has('syllabus')) {
+ this.$el.find(this.fieldToSelectorMap['syllabus']).html(
+ this.fileAnchorTemplate({
+ fullpath : this.model.get('syllabus'),
+ filename: 'syllabus'}));
+ this.$el.find('.remove-course-syllabus').show();
+ }
+ else {
+ this.$el.find('#' + this.fieldToSelectorMap['syllabus']).html("");
+ this.$el.find('.remove-course-syllabus').hide();
+ }
+
+ this.$el.find('#' + this.fieldToSelectorMap['overview']).val(this.model.get('overview'));
+ this.codeMirrorize(null, $('#course-overview')[0]);
+
+ this.$el.find('.current-course-introduction-video iframe').attr('src', this.model.videosourceSample());
+ if (this.model.has('intro_video')) {
+ this.$el.find('.remove-course-introduction-video').show();
+ this.$el.find('#' + this.fieldToSelectorMap['intro_video']).val(this.model.get('intro_video'));
+ }
+ else this.$el.find('.remove-course-introduction-video').hide();
+
+ this.$el.find('#' + this.fieldToSelectorMap['effort']).val(this.model.get('effort'));
+
+ return this;
+ },
+ fieldToSelectorMap : {
+ 'start_date' : "course-start",
+ 'end_date' : 'course-end',
+ 'enrollment_start' : 'enrollment-start',
+ 'enrollment_end' : 'enrollment-end',
+ 'syllabus' : '.current-course-syllabus .doc-filename',
+ 'overview' : 'course-overview',
+ 'intro_video' : 'course-introduction-video',
+ 'effort' : "course-effort"
+ },
+
+ updateTime : function(e) {
+ var now = new Date();
+ var hours = now.getHours();
+ var minutes = now.getMinutes();
+ $(e.currentTarget).attr('title', (hours % 12 === 0 ? 12 : hours % 12) + ":" + (minutes < 10 ? "0" : "") +
+ now.getMinutes() + (hours < 12 ? "am" : "pm") + " (current local time)");
+ },
setupDatePicker: function (fieldName) {
var cacheModel = this.model;
var div = this.$el.find('#' + this.fieldToSelectorMap[fieldName]);
- var datefield = $(div).find(".date");
- var timefield = $(div).find(".time");
+ var datefield = $(div).find("input:.date");
+ var timefield = $(div).find("input:.time");
var cachethis = this;
var savefield = function () {
cachethis.clearValidationErrors();
@@ -228,9 +98,15 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
}
var newVal = new Date(date.getTime() + time * 1000);
if (!cacheModel.has(fieldName) || cacheModel.get(fieldName).getTime() !== newVal.getTime()) {
- cacheModel.save(fieldName, newVal, { error: CMS.ServerError});
+ cacheModel.save(fieldName, newVal);
}
}
+ else {
+ // Clear date (note that this clears the time as well, as date and time are linked).
+ // Note also that the validation logic prevents us from clearing the start date
+ // (start date is required by the back end).
+ cacheModel.save(fieldName, null);
+ }
};
// instrument as date and time pickers
@@ -245,58 +121,57 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
datefield.datepicker('setDate', this.model.get(fieldName));
if (this.model.has(fieldName)) timefield.timepicker('setTime', this.model.get(fieldName));
},
-
- updateModel: function(event) {
- switch (event.currentTarget.id) {
- case 'course-start-date': // handled via onSelect method
- case 'course-end-date':
- case 'course-enrollment-start-date':
- case 'course-enrollment-end-date':
- break;
- case 'course-overview':
- // handled via code mirror
- break;
+ updateModel: function(event) {
+ switch (event.currentTarget.id) {
+ case 'course-start-date': // handled via onSelect method
+ case 'course-end-date':
+ case 'course-enrollment-start-date':
+ case 'course-enrollment-end-date':
+ break;
- case 'course-effort':
- this.saveIfChanged(event);
- break;
- case 'course-introduction-video':
- this.clearValidationErrors();
- var previewsource = this.model.save_videosource($(event.currentTarget).val());
- this.$el.find(".current-course-introduction-video iframe").attr("src", previewsource);
- if (this.model.has('intro_video')) {
- this.$el.find('.remove-course-introduction-video').show();
- }
- else {
- this.$el.find('.remove-course-introduction-video').hide();
- }
- break;
-
- default:
- break;
- }
-
- },
-
- removeSyllabus: function() {
- if (this.model.has('syllabus')) this.model.save({'syllabus': null},
- { error : CMS.ServerError});
- },
-
- assetSyllabus : function() {
- // TODO implement
- },
-
- removeVideo: function() {
- if (this.model.has('intro_video')) {
- this.model.save_videosource(null);
- this.$el.find(".current-course-introduction-video iframe").attr("src", "");
- this.$el.find('#' + this.fieldToSelectorMap['intro_video']).val("");
- this.$el.find('.remove-course-introduction-video').hide();
- }
- },
- codeMirrors : {},
+ case 'course-overview':
+ // handled via code mirror
+ break;
+
+ case 'course-effort':
+ this.saveIfChanged(event);
+ break;
+ case 'course-introduction-video':
+ this.clearValidationErrors();
+ var previewsource = this.model.save_videosource($(event.currentTarget).val());
+ this.$el.find(".current-course-introduction-video iframe").attr("src", previewsource);
+ if (this.model.has('intro_video')) {
+ this.$el.find('.remove-course-introduction-video').show();
+ }
+ else {
+ this.$el.find('.remove-course-introduction-video').hide();
+ }
+ break;
+
+ default:
+ break;
+ }
+
+ },
+
+ removeSyllabus: function() {
+ if (this.model.has('syllabus')) this.model.save({'syllabus': null});
+ },
+
+ assetSyllabus : function() {
+ // TODO implement
+ },
+
+ removeVideo: function() {
+ if (this.model.has('intro_video')) {
+ this.model.save_videosource(null);
+ this.$el.find(".current-course-introduction-video iframe").attr("src", "");
+ this.$el.find('#' + this.fieldToSelectorMap['intro_video']).val("");
+ this.$el.find('.remove-course-introduction-video').hide();
+ }
+ },
+ codeMirrors : {},
codeMirrorize: function (e, forcedTarget) {
var thisTarget;
if (forcedTarget) {
@@ -315,374 +190,11 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
mirror.save();
cachethis.clearValidationErrors();
var newVal = mirror.getValue();
- if (cachethis.model.get(field) != newVal) cachethis.model.save(field, newVal,
- { error: CMS.ServerError});
+ if (cachethis.model.get(field) != newVal) cachethis.model.save(field, newVal);
}
});
}
}
-
-});
-
-CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
- // Model class is CMS.Models.Settings.CourseGradingPolicy
- events : {
- "blur input" : "updateModel",
- "blur textarea" : "updateModel",
- "blur span[contenteditable=true]" : "updateDesignation",
- "click .settings-extra header" : "showSettingsExtras",
- "click .new-grade-button" : "addNewGrade",
- "click .remove-button" : "removeGrade",
- "click .add-grading-data" : "addAssignmentType"
- },
- initialize : function() {
- // load template for grading view
- var self = this;
- this.gradeCutoffTemplate = _.template('');
-
- // Instrument grading scale
- // convert cutoffs to inversely ordered list
- var modelCutoffs = this.model.get('grade_cutoffs');
- for (var cutoff in modelCutoffs) {
- this.descendingCutoffs.push({designation: cutoff, cutoff: Math.round(modelCutoffs[cutoff] * 100)});
- }
- this.descendingCutoffs = _.sortBy(this.descendingCutoffs,
- function (gradeEle) { return -gradeEle['cutoff']; });
-
- // Instrument grace period
- this.$el.find('#course-grading-graceperiod').timepicker();
-
- // instantiates an editor template for each update in the collection
- // Because this calls render, put it after everything which render may depend upon to prevent race condition.
- window.templateLoader.loadRemoteTemplate("course_grade_policy",
- "/static/client_templates/course_grade_policy.html",
- function (raw_template) {
- self.template = _.template(raw_template);
- self.render();
- }
- );
- this.model.on('error', this.handleValidationError, this);
- this.model.get('graders').on('remove', this.render, this);
- this.model.get('graders').on('reset', this.render, this);
- this.model.get('graders').on('add', this.render, this);
- this.selectorToField = _.invert(this.fieldToSelectorMap);
- },
-
- render: function() {
- // prevent bootstrap race condition by event dispatch
- if (!this.template) return;
-
- // Create and render the grading type subs
- var self = this;
- var gradelist = this.$el.find('.course-grading-assignment-list');
- // Undo the double invocation error. At some point, fix the double invocation
- $(gradelist).empty();
- var gradeCollection = this.model.get('graders');
- gradeCollection.each(function(gradeModel) {
- $(gradelist).append(self.template({model : gradeModel }));
- var newEle = gradelist.children().last();
- var newView = new CMS.Views.Settings.GraderView({el: newEle,
- model : gradeModel, collection : gradeCollection });
- });
-
- // render the grade cutoffs
- this.renderCutoffBar();
-
- var graceEle = this.$el.find('#course-grading-graceperiod');
- graceEle.timepicker({'timeFormat' : 'H:i'}); // init doesn't take setTime
- if (this.model.has('grace_period')) graceEle.timepicker('setTime', this.model.gracePeriodToDate());
- // remove any existing listeners to keep them from piling on b/c render gets called frequently
- graceEle.off('change', this.setGracePeriod);
- graceEle.on('change', this, this.setGracePeriod);
-
- return this;
- },
- addAssignmentType : function(e) {
- e.preventDefault();
- this.model.get('graders').push({});
- },
- fieldToSelectorMap : {
- 'grace_period' : 'course-grading-graceperiod'
- },
- setGracePeriod : function(event) {
- event.data.clearValidationErrors();
- var newVal = event.data.model.dateToGracePeriod($(event.currentTarget).timepicker('getTime'));
- if (event.data.model.get('grace_period') != newVal) event.data.model.save('grace_period', newVal,
- { error : CMS.ServerError});
- },
- updateModel : function(event) {
- if (!this.selectorToField[event.currentTarget.id]) return;
-
- switch (this.selectorToField[event.currentTarget.id]) {
- case 'grace_period': // handled above
- break;
-
- default:
- this.saveIfChanged(event);
- break;
- }
- },
-
- // Grade sliders attributes and methods
- // Grade bars are li's ordered A -> F with A taking whole width, B overlaying it with its paint, ...
- // The actual cutoff for each grade is the width % of the next lower grade; so, the hack here
- // is to lay down a whole width bar claiming it's A and then lay down bars for each actual grade
- // starting w/ A but posting the label in the preceding li and setting the label of the last to "Fail" or "F"
-
- // A does not have a drag bar (cannot change its upper limit)
- // Need to insert new bars in right place.
- GRADES : ['A', 'B', 'C', 'D'], // defaults for new grade designators
- descendingCutoffs : [], // array of { designation : , cutoff : }
- gradeBarWidth : null, // cache of value since it won't change (more certain)
-
- renderCutoffBar: function() {
- var gradeBar =this.$el.find('.grade-bar');
- this.gradeBarWidth = gradeBar.width();
- var gradelist = gradeBar.children('.grades');
- // HACK fixing a duplicate call issue by undoing previous call effect. Need to figure out why called 2x
- gradelist.empty();
- var nextWidth = 100; // first width is 100%
- // Can probably be simplified to one variable now.
- var removable = false;
- var draggable = false; // first and last are not removable, first is not draggable
- _.each(this.descendingCutoffs,
- function(cutoff, index) {
- var newBar = this.gradeCutoffTemplate({
- descriptor : cutoff['designation'] ,
- width : nextWidth,
- removable : removable });
- gradelist.append(newBar);
- if (draggable) {
- newBar = gradelist.children().last(); // get the dom object not the unparsed string
- newBar.resizable({
- handles: "e",
- containment : "parent",
- start : this.startMoveClosure(),
- resize : this.moveBarClosure(),
- stop : this.stopDragClosure()
- });
- }
- // prepare for next
- nextWidth = cutoff['cutoff'];
- removable = true; // first is not removable, all others are
- draggable = true;
- },
- this);
- // add fail which is not in data
- var failBar = this.gradeCutoffTemplate({ descriptor : this.failLabel(),
- width : nextWidth, removable : false});
- $(failBar).find("span[contenteditable=true]").attr("contenteditable", false);
- gradelist.append(failBar);
- gradelist.children().last().resizable({
- handles: "e",
- containment : "parent",
- start : this.startMoveClosure(),
- resize : this.moveBarClosure(),
- stop : this.stopDragClosure()
- });
-
- this.renderGradeRanges();
- },
-
- showSettingsExtras : function(event) {
- $(event.currentTarget).toggleClass('active');
- $(event.currentTarget).siblings.toggleClass('is-shown');
- },
-
-
- startMoveClosure : function() {
- // set min/max widths
- var cachethis = this;
- var widthPerPoint = cachethis.gradeBarWidth / 100;
- return function(event, ui) {
- var barIndex = ui.element.index();
- // min and max represent limits not labels (note, can's make smaller than 3 points wide)
- var min = (barIndex < cachethis.descendingCutoffs.length ? cachethis.descendingCutoffs[barIndex]['cutoff'] + 3 : 3);
- // minus 2 b/c minus 1 is the element we're effecting. It's max is just shy of the next one above it
- var max = (barIndex >= 2 ? cachethis.descendingCutoffs[barIndex - 2]['cutoff'] - 3 : 97);
- ui.element.resizable("option",{minWidth : min * widthPerPoint, maxWidth : max * widthPerPoint});
- };
- },
-
- moveBarClosure : function() {
- // 0th ele doesn't have a bar; so, will never invoke this
- var cachethis = this;
- return function(event, ui) {
- var barIndex = ui.element.index();
- // min and max represent limits not labels (note, can's make smaller than 3 points wide)
- var min = (barIndex < cachethis.descendingCutoffs.length ? cachethis.descendingCutoffs[barIndex]['cutoff'] + 3 : 3);
- // minus 2 b/c minus 1 is the element we're effecting. It's max is just shy of the next one above it
- var max = (barIndex >= 2 ? cachethis.descendingCutoffs[barIndex - 2]['cutoff'] - 3 : 100);
- var percentage = Math.min(Math.max(ui.size.width / cachethis.gradeBarWidth * 100, min), max);
- cachethis.descendingCutoffs[barIndex - 1]['cutoff'] = Math.round(percentage);
- cachethis.renderGradeRanges();
- };
- },
-
- renderGradeRanges: function() {
- // the labels showing the range e.g., 71-80
- var cutoffs = this.descendingCutoffs;
- this.$el.find('.range').each(function(i) {
- var min = (i < cutoffs.length ? cutoffs[i]['cutoff'] : 0);
- var max = (i > 0 ? cutoffs[i - 1]['cutoff'] : 100);
- $(this).text(min + '-' + max);
- });
- },
-
- stopDragClosure: function() {
- var cachethis = this;
- return function(event, ui) {
- // for some reason the resize is setting height to 0
- cachethis.saveCutoffs();
- };
- },
-
- saveCutoffs: function() {
- this.model.save('grade_cutoffs',
- _.reduce(this.descendingCutoffs,
- function(object, cutoff) {
- object[cutoff['designation']] = cutoff['cutoff'] / 100.0;
- return object;
- },
- {}),
- { error : CMS.ServerError});
- },
-
- addNewGrade: function(e) {
- e.preventDefault();
- var gradeLength = this.descendingCutoffs.length; // cutoffs doesn't include fail/f so this is only the passing grades
- if(gradeLength > 3) {
- // TODO shouldn't we disable the button
- return;
- }
- var failBarWidth = this.descendingCutoffs[gradeLength - 1]['cutoff'];
- // going to split the grade above the insertion point in half leaving fail in same place
- var nextGradeTop = (gradeLength > 1 ? this.descendingCutoffs[gradeLength - 2]['cutoff'] : 100);
- var targetWidth = failBarWidth + ((nextGradeTop - failBarWidth) / 2);
- this.descendingCutoffs.push({designation: this.GRADES[gradeLength], cutoff: failBarWidth});
- this.descendingCutoffs[gradeLength - 1]['cutoff'] = Math.round(targetWidth);
-
- var $newGradeBar = this.gradeCutoffTemplate({ descriptor : this.GRADES[gradeLength],
- width : targetWidth, removable : true });
- var gradeDom = this.$el.find('.grades');
- gradeDom.children().last().before($newGradeBar);
- var newEle = gradeDom.children()[gradeLength];
- $(newEle).resizable({
- handles: "e",
- containment : "parent",
- start : this.startMoveClosure(),
- resize : this.moveBarClosure(),
- stop : this.stopDragClosure()
- });
-
- // Munge existing grade labels?
- // If going from Pass/Fail to 3 levels, change to Pass to A
- if (gradeLength === 1 && this.descendingCutoffs[0]['designation'] === 'Pass') {
- this.descendingCutoffs[0]['designation'] = this.GRADES[0];
- this.setTopGradeLabel();
- }
- this.setFailLabel();
-
- this.renderGradeRanges();
- this.saveCutoffs();
- },
-
- removeGrade: function(e) {
- e.preventDefault();
- var domElement = $(e.currentTarget).closest('li');
- var index = domElement.index();
- // copy the boundary up to the next higher grade then remove
- this.descendingCutoffs[index - 1]['cutoff'] = this.descendingCutoffs[index]['cutoff'];
- this.descendingCutoffs.splice(index, 1);
- domElement.remove();
-
- if (this.descendingCutoffs.length === 1 && this.descendingCutoffs[0]['designation'] === this.GRADES[0]) {
- this.descendingCutoffs[0]['designation'] = 'Pass';
- this.setTopGradeLabel();
- }
- this.setFailLabel();
- this.renderGradeRanges();
- this.saveCutoffs();
- },
-
- updateDesignation: function(e) {
- var index = $(e.currentTarget).closest('li').index();
- this.descendingCutoffs[index]['designation'] = $(e.currentTarget).html();
- this.saveCutoffs();
- },
-
- failLabel: function() {
- if (this.descendingCutoffs.length === 1) return 'Fail';
- else return 'F';
- },
- setFailLabel: function() {
- this.$el.find('.grades .letter-grade').last().html(this.failLabel());
- },
- setTopGradeLabel: function() {
- this.$el.find('.grades .letter-grade').first().html(this.descendingCutoffs[0]['designation']);
- }
});
-CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({
- // Model class is CMS.Models.Settings.CourseGrader
- events : {
- "blur input" : "updateModel",
- "blur textarea" : "updateModel",
- "click .remove-grading-data" : "deleteModel"
- },
- initialize : function() {
- this.model.on('error', this.handleValidationError, this);
- this.selectorToField = _.invert(this.fieldToSelectorMap);
- this.render();
- },
-
- render: function() {
- return this;
- },
- fieldToSelectorMap : {
- 'type' : 'course-grading-assignment-name',
- 'short_label' : 'course-grading-assignment-shortname',
- 'min_count' : 'course-grading-assignment-totalassignments',
- 'drop_count' : 'course-grading-assignment-droppable',
- 'weight' : 'course-grading-assignment-gradeweight'
- },
- updateModel : function(event) {
- // HACK to fix model sometimes losing its pointer to the collection [I think I fixed this but leaving
- // this in out of paranoia. If this error ever happens, the user will get a warning that they cannot
- // give 2 assignments the same name.]
- if (!this.model.collection) {
- this.model.collection = this.collection;
- }
-
- switch (event.currentTarget.id) {
- case 'course-grading-assignment-totalassignments':
- this.$el.find('#course-grading-assignment-droppable').attr('max', $(event.currentTarget).val());
- this.saveIfChanged(event);
- break;
- case 'course-grading-assignment-name':
- var oldName = this.model.get('type');
- if (this.saveIfChanged(event) && !_.isEmpty(oldName)) {
- // overload the error display logic
- this._cacheValidationErrors.push(event.currentTarget);
- $(event.currentTarget).parent().append(
- this.errorTemplate({message : 'For grading to work, you must change all "' + oldName +
- '" subsections to "' + this.model.get('type') + '".'}));
- }
- break;
- default:
- this.saveIfChanged(event);
- break;
- }
- },
- deleteModel : function(e) {
- this.model.destroy(
- { error : CMS.ServerError});
- e.preventDefault();
- }
-
-});
\ No newline at end of file
diff --git a/cms/static/js/views/settings/settings_grading_view.js b/cms/static/js/views/settings/settings_grading_view.js
new file mode 100644
index 0000000000..78972f97a7
--- /dev/null
+++ b/cms/static/js/views/settings/settings_grading_view.js
@@ -0,0 +1,370 @@
+if (!CMS.Views['Settings']) CMS.Views.Settings = {}; // ensure the pseudo pkg exists
+
+CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
+ // Model class is CMS.Models.Settings.CourseGradingPolicy
+ events : {
+ "change input" : "updateModel",
+ "change textarea" : "updateModel",
+ "change span[contenteditable=true]" : "updateDesignation",
+ "click .settings-extra header" : "showSettingsExtras",
+ "click .new-grade-button" : "addNewGrade",
+ "click .remove-button" : "removeGrade",
+ "click .add-grading-data" : "addAssignmentType",
+ // would love to move to a general superclass, but event hashes don't inherit in backbone :-(
+ 'focus :input' : "inputFocus",
+ 'blur :input' : "inputUnfocus"
+ },
+ initialize : function() {
+ // load template for grading view
+ var self = this;
+ this.gradeCutoffTemplate = _.template('');
+
+ // Instrument grading scale
+ // convert cutoffs to inversely ordered list
+ var modelCutoffs = this.model.get('grade_cutoffs');
+ for (var cutoff in modelCutoffs) {
+ this.descendingCutoffs.push({designation: cutoff, cutoff: Math.round(modelCutoffs[cutoff] * 100)});
+ }
+ this.descendingCutoffs = _.sortBy(this.descendingCutoffs,
+ function (gradeEle) { return -gradeEle['cutoff']; });
+
+ // Instrument grace period
+ this.$el.find('#course-grading-graceperiod').timepicker();
+
+ // instantiates an editor template for each update in the collection
+ // Because this calls render, put it after everything which render may depend upon to prevent race condition.
+ window.templateLoader.loadRemoteTemplate("course_grade_policy",
+ "/static/client_templates/course_grade_policy.html",
+ function (raw_template) {
+ self.template = _.template(raw_template);
+ self.render();
+ }
+ );
+ this.listenTo(this.model, 'error', CMS.ServerError);
+ this.listenTo(this.model, 'invalid', this.handleValidationError);
+ this.model.get('graders').on('remove', this.render, this);
+ this.model.get('graders').on('reset', this.render, this);
+ this.model.get('graders').on('add', this.render, this);
+ this.selectorToField = _.invert(this.fieldToSelectorMap);
+ },
+
+ render: function() {
+ // prevent bootstrap race condition by event dispatch
+ if (!this.template) return;
+
+ // Create and render the grading type subs
+ var self = this;
+ var gradelist = this.$el.find('.course-grading-assignment-list');
+ // Undo the double invocation error. At some point, fix the double invocation
+ $(gradelist).empty();
+ var gradeCollection = this.model.get('graders');
+ gradeCollection.each(function(gradeModel) {
+ $(gradelist).append(self.template({model : gradeModel }));
+ var newEle = gradelist.children().last();
+ var newView = new CMS.Views.Settings.GraderView({el: newEle,
+ model : gradeModel, collection : gradeCollection });
+ });
+
+ // render the grade cutoffs
+ this.renderCutoffBar();
+
+ var graceEle = this.$el.find('#course-grading-graceperiod');
+ graceEle.timepicker({'timeFormat' : 'H:i'}); // init doesn't take setTime
+ if (this.model.has('grace_period')) graceEle.timepicker('setTime', this.model.gracePeriodToDate());
+ // remove any existing listeners to keep them from piling on b/c render gets called frequently
+ graceEle.off('change', this.setGracePeriod);
+ graceEle.on('change', this, this.setGracePeriod);
+
+ return this;
+ },
+ addAssignmentType : function(e) {
+ e.preventDefault();
+ this.model.get('graders').push({});
+ },
+ fieldToSelectorMap : {
+ 'grace_period' : 'course-grading-graceperiod'
+ },
+ setGracePeriod : function(event) {
+ event.data.clearValidationErrors();
+ var newVal = event.data.model.dateToGracePeriod($(event.currentTarget).timepicker('getTime'));
+ if (event.data.model.get('grace_period') != newVal) event.data.model.save('grace_period', newVal);
+ },
+ updateModel : function(event) {
+ if (!this.selectorToField[event.currentTarget.id]) return;
+
+ switch (this.selectorToField[event.currentTarget.id]) {
+ case 'grace_period': // handled above
+ break;
+
+ default:
+ this.saveIfChanged(event);
+ break;
+ }
+ },
+
+ // Grade sliders attributes and methods
+ // Grade bars are li's ordered A -> F with A taking whole width, B overlaying it with its paint, ...
+ // The actual cutoff for each grade is the width % of the next lower grade; so, the hack here
+ // is to lay down a whole width bar claiming it's A and then lay down bars for each actual grade
+ // starting w/ A but posting the label in the preceding li and setting the label of the last to "Fail" or "F"
+
+ // A does not have a drag bar (cannot change its upper limit)
+ // Need to insert new bars in right place.
+ GRADES : ['A', 'B', 'C', 'D'], // defaults for new grade designators
+ descendingCutoffs : [], // array of { designation : , cutoff : }
+ gradeBarWidth : null, // cache of value since it won't change (more certain)
+
+ renderCutoffBar: function() {
+ var gradeBar =this.$el.find('.grade-bar');
+ this.gradeBarWidth = gradeBar.width();
+ var gradelist = gradeBar.children('.grades');
+ // HACK fixing a duplicate call issue by undoing previous call effect. Need to figure out why called 2x
+ gradelist.empty();
+ var nextWidth = 100; // first width is 100%
+ // Can probably be simplified to one variable now.
+ var removable = false;
+ var draggable = false; // first and last are not removable, first is not draggable
+ _.each(this.descendingCutoffs,
+ function(cutoff, index) {
+ var newBar = this.gradeCutoffTemplate({
+ descriptor : cutoff['designation'] ,
+ width : nextWidth,
+ removable : removable });
+ gradelist.append(newBar);
+ if (draggable) {
+ newBar = gradelist.children().last(); // get the dom object not the unparsed string
+ newBar.resizable({
+ handles: "e",
+ containment : "parent",
+ start : this.startMoveClosure(),
+ resize : this.moveBarClosure(),
+ stop : this.stopDragClosure()
+ });
+ }
+ // prepare for next
+ nextWidth = cutoff['cutoff'];
+ removable = true; // first is not removable, all others are
+ draggable = true;
+ },
+ this);
+ // add fail which is not in data
+ var failBar = this.gradeCutoffTemplate({ descriptor : this.failLabel(),
+ width : nextWidth, removable : false});
+ $(failBar).find("span[contenteditable=true]").attr("contenteditable", false);
+ gradelist.append(failBar);
+ gradelist.children().last().resizable({
+ handles: "e",
+ containment : "parent",
+ start : this.startMoveClosure(),
+ resize : this.moveBarClosure(),
+ stop : this.stopDragClosure()
+ });
+
+ this.renderGradeRanges();
+ },
+
+ showSettingsExtras : function(event) {
+ $(event.currentTarget).toggleClass('active');
+ $(event.currentTarget).siblings.toggleClass('is-shown');
+ },
+
+
+ startMoveClosure : function() {
+ // set min/max widths
+ var cachethis = this;
+ var widthPerPoint = cachethis.gradeBarWidth / 100;
+ return function(event, ui) {
+ var barIndex = ui.element.index();
+ // min and max represent limits not labels (note, can's make smaller than 3 points wide)
+ var min = (barIndex < cachethis.descendingCutoffs.length ? cachethis.descendingCutoffs[barIndex]['cutoff'] + 3 : 3);
+ // minus 2 b/c minus 1 is the element we're effecting. It's max is just shy of the next one above it
+ var max = (barIndex >= 2 ? cachethis.descendingCutoffs[barIndex - 2]['cutoff'] - 3 : 97);
+ ui.element.resizable("option",{minWidth : min * widthPerPoint, maxWidth : max * widthPerPoint});
+ };
+ },
+
+ moveBarClosure : function() {
+ // 0th ele doesn't have a bar; so, will never invoke this
+ var cachethis = this;
+ return function(event, ui) {
+ var barIndex = ui.element.index();
+ // min and max represent limits not labels (note, can's make smaller than 3 points wide)
+ var min = (barIndex < cachethis.descendingCutoffs.length ? cachethis.descendingCutoffs[barIndex]['cutoff'] + 3 : 3);
+ // minus 2 b/c minus 1 is the element we're effecting. It's max is just shy of the next one above it
+ var max = (barIndex >= 2 ? cachethis.descendingCutoffs[barIndex - 2]['cutoff'] - 3 : 100);
+ var percentage = Math.min(Math.max(ui.size.width / cachethis.gradeBarWidth * 100, min), max);
+ cachethis.descendingCutoffs[barIndex - 1]['cutoff'] = Math.round(percentage);
+ cachethis.renderGradeRanges();
+ };
+ },
+
+ renderGradeRanges: function() {
+ // the labels showing the range e.g., 71-80
+ var cutoffs = this.descendingCutoffs;
+ this.$el.find('.range').each(function(i) {
+ var min = (i < cutoffs.length ? cutoffs[i]['cutoff'] : 0);
+ var max = (i > 0 ? cutoffs[i - 1]['cutoff'] : 100);
+ $(this).text(min + '-' + max);
+ });
+ },
+
+ stopDragClosure: function() {
+ var cachethis = this;
+ return function(event, ui) {
+ // for some reason the resize is setting height to 0
+ cachethis.saveCutoffs();
+ };
+ },
+
+ saveCutoffs: function() {
+ this.model.save('grade_cutoffs',
+ _.reduce(this.descendingCutoffs,
+ function(object, cutoff) {
+ object[cutoff['designation']] = cutoff['cutoff'] / 100.0;
+ return object;
+ },
+ {}));
+ },
+
+ addNewGrade: function(e) {
+ e.preventDefault();
+ var gradeLength = this.descendingCutoffs.length; // cutoffs doesn't include fail/f so this is only the passing grades
+ if(gradeLength > 3) {
+ // TODO shouldn't we disable the button
+ return;
+ }
+ var failBarWidth = this.descendingCutoffs[gradeLength - 1]['cutoff'];
+ // going to split the grade above the insertion point in half leaving fail in same place
+ var nextGradeTop = (gradeLength > 1 ? this.descendingCutoffs[gradeLength - 2]['cutoff'] : 100);
+ var targetWidth = failBarWidth + ((nextGradeTop - failBarWidth) / 2);
+ this.descendingCutoffs.push({designation: this.GRADES[gradeLength], cutoff: failBarWidth});
+ this.descendingCutoffs[gradeLength - 1]['cutoff'] = Math.round(targetWidth);
+
+ var $newGradeBar = this.gradeCutoffTemplate({ descriptor : this.GRADES[gradeLength],
+ width : targetWidth, removable : true });
+ var gradeDom = this.$el.find('.grades');
+ gradeDom.children().last().before($newGradeBar);
+ var newEle = gradeDom.children()[gradeLength];
+ $(newEle).resizable({
+ handles: "e",
+ containment : "parent",
+ start : this.startMoveClosure(),
+ resize : this.moveBarClosure(),
+ stop : this.stopDragClosure()
+ });
+
+ // Munge existing grade labels?
+ // If going from Pass/Fail to 3 levels, change to Pass to A
+ if (gradeLength === 1 && this.descendingCutoffs[0]['designation'] === 'Pass') {
+ this.descendingCutoffs[0]['designation'] = this.GRADES[0];
+ this.setTopGradeLabel();
+ }
+ this.setFailLabel();
+
+ this.renderGradeRanges();
+ this.saveCutoffs();
+ },
+
+ removeGrade: function(e) {
+ e.preventDefault();
+ var domElement = $(e.currentTarget).closest('li');
+ var index = domElement.index();
+ // copy the boundary up to the next higher grade then remove
+ this.descendingCutoffs[index - 1]['cutoff'] = this.descendingCutoffs[index]['cutoff'];
+ this.descendingCutoffs.splice(index, 1);
+ domElement.remove();
+
+ if (this.descendingCutoffs.length === 1 && this.descendingCutoffs[0]['designation'] === this.GRADES[0]) {
+ this.descendingCutoffs[0]['designation'] = 'Pass';
+ this.setTopGradeLabel();
+ }
+ this.setFailLabel();
+ this.renderGradeRanges();
+ this.saveCutoffs();
+ },
+
+ updateDesignation: function(e) {
+ var index = $(e.currentTarget).closest('li').index();
+ this.descendingCutoffs[index]['designation'] = $(e.currentTarget).html();
+ this.saveCutoffs();
+ },
+
+ failLabel: function() {
+ if (this.descendingCutoffs.length === 1) return 'Fail';
+ else return 'F';
+ },
+ setFailLabel: function() {
+ this.$el.find('.grades .letter-grade').last().html(this.failLabel());
+ },
+ setTopGradeLabel: function() {
+ this.$el.find('.grades .letter-grade').first().html(this.descendingCutoffs[0]['designation']);
+ }
+
+});
+
+CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({
+ // Model class is CMS.Models.Settings.CourseGrader
+ events : {
+ "change input" : "updateModel",
+ "change textarea" : "updateModel",
+ "click .remove-grading-data" : "deleteModel",
+ // would love to move to a general superclass, but event hashes don't inherit in backbone :-(
+ 'focus :input' : "inputFocus",
+ 'blur :input' : "inputUnfocus"
+ },
+ initialize : function() {
+ this.listenTo(this.model, 'error', CMS.ServerError);
+ this.listenTo(this.model, 'invalid', this.handleValidationError);
+ this.selectorToField = _.invert(this.fieldToSelectorMap);
+ this.render();
+ },
+
+ render: function() {
+ return this;
+ },
+ fieldToSelectorMap : {
+ 'type' : 'course-grading-assignment-name',
+ 'short_label' : 'course-grading-assignment-shortname',
+ 'min_count' : 'course-grading-assignment-totalassignments',
+ 'drop_count' : 'course-grading-assignment-droppable',
+ 'weight' : 'course-grading-assignment-gradeweight'
+ },
+ updateModel : function(event) {
+ // HACK to fix model sometimes losing its pointer to the collection [I think I fixed this but leaving
+ // this in out of paranoia. If this error ever happens, the user will get a warning that they cannot
+ // give 2 assignments the same name.]
+ if (!this.model.collection) {
+ this.model.collection = this.collection;
+ }
+
+ switch (event.currentTarget.id) {
+ case 'course-grading-assignment-totalassignments':
+ this.$el.find('#course-grading-assignment-droppable').attr('max', $(event.currentTarget).val());
+ this.saveIfChanged(event);
+ break;
+ case 'course-grading-assignment-name':
+ var oldName = this.model.get('type');
+ if (this.saveIfChanged(event) && !_.isEmpty(oldName)) {
+ // overload the error display logic
+ this._cacheValidationErrors.push(event.currentTarget);
+ $(event.currentTarget).parent().append(
+ this.errorTemplate({message : 'For grading to work, you must change all "' + oldName +
+ '" subsections to "' + this.model.get('type') + '".'}));
+ }
+ break;
+ default:
+ this.saveIfChanged(event);
+ break;
+ }
+ },
+ deleteModel : function(e) {
+ this.model.destroy(
+ { error : CMS.ServerError});
+ e.preventDefault();
+ }
+
+});
\ No newline at end of file
diff --git a/cms/static/js/views/validating_view.js b/cms/static/js/views/validating_view.js
new file mode 100644
index 0000000000..3376e5fe9b
--- /dev/null
+++ b/cms/static/js/views/validating_view.js
@@ -0,0 +1,72 @@
+CMS.Views.ValidatingView = Backbone.View.extend({
+ // Intended as an abstract class which catches validation errors on the model and
+ // decorates the fields. Needs wiring per class, but this initialization shows how
+ // either have your init call this one or copy the contents
+ initialize : function() {
+ this.listenTo(this.model, 'error', CMS.ServerError);
+ this.listenTo(this.model, 'invalid', this.handleValidationError);
+ this.selectorToField = _.invert(this.fieldToSelectorMap);
+ },
+
+ errorTemplate : _.template('<%= message %>'),
+
+ events : {
+ "change input" : "clearValidationErrors",
+ "change textarea" : "clearValidationErrors"
+ },
+ fieldToSelectorMap : {
+ // Your subclass must populate this w/ all of the model keys and dom selectors
+ // which may be the subjects of validation errors
+ },
+ _cacheValidationErrors : [],
+
+ handleValidationError : function(model, error) {
+ // error is object w/ fields and error strings
+ for (var field in error) {
+ var ele = this.$el.find('#' + this.fieldToSelectorMap[field]);
+ this._cacheValidationErrors.push(ele);
+ this.getInputElements(ele).addClass('error');
+ $(ele).parent().append(this.errorTemplate({message : error[field]}));
+ }
+ },
+
+ clearValidationErrors : function() {
+ // error is object w/ fields and error strings
+ while (this._cacheValidationErrors.length > 0) {
+ var ele = this._cacheValidationErrors.pop();
+ this.getInputElements(ele).removeClass('error');
+ $(ele).nextAll('.message-error').remove();
+ }
+ },
+
+ saveIfChanged : function(event) {
+ // returns true if the value changed and was thus sent to server
+ var field = this.selectorToField[event.currentTarget.id];
+ var currentVal = this.model.get(field);
+ var newVal = $(event.currentTarget).val();
+ this.clearValidationErrors(); // curr = new if user reverts manually
+ if (currentVal != newVal) {
+ this.model.save(field, newVal);
+ return true;
+ }
+ else return false;
+ },
+ // these should perhaps go into a superclass but lack of event hash inheritance demotivates me
+ inputFocus : function(event) {
+ $("label[for='" + event.currentTarget.id + "']").addClass("is-focused");
+ },
+ inputUnfocus : function(event) {
+ $("label[for='" + event.currentTarget.id + "']").removeClass("is-focused");
+ },
+
+ getInputElements: function(ele) {
+ var inputElements = 'input, textarea';
+ if ($(ele).is(inputElements)) {
+ return $(ele);
+ }
+ else {
+ // put error on the contained inputs
+ return $(ele).find(inputElements);
+ }
+ }
+});
diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss
deleted file mode 100644
index 11d2e4fe3a..0000000000
--- a/cms/static/sass/_alerts.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.alert {
- padding: 15px 20px;
- margin-bottom: 30px;
- border-radius: 3px;
- border: 1px solid #edbd3c;
- border-radius: 3px;
- background: #fbf6e1;
- // background: #edbd3c;
- font-size: 14px;
- @include clearfix;
-
- .alert-message {
- float: left;
- margin-top: 4px;
- }
-
- strong {
- font-weight: 700;
- }
-
- .alert-action {
- float: right;
-
- &.secondary {
- @include orange-button;
- }
- }
-}
-
-body.error {
- background: $darkGrey;
- color: #3c3c3c;
-
- .primary-header {
- display: none;
- }
-
- .error-prompt {
- width: 700px;
- margin: 150px auto;
- padding: 60px 50px 90px;
- border-radius: 3px;
- background: #fff;
- text-align: center;
- }
-
- h1 {
- float: none;
- margin: 0;
- font-size: 60px;
- font-weight: 300;
- color: #3c3c3c;
- }
-
- .description {
- margin-bottom: 50px;
- font-size: 21px;
- }
-
- .back-button {
- @include blue-button;
- padding: 14px 40px 18px;
- font-size: 18px;
- }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 6e5c547b87..cadb442b7c 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -1,180 +1,427 @@
-// -------------------------------------
-//
-// Universal
-//
-// -------------------------------------
+// studio - base styling
+// ====================
-body {
- min-width: 980px;
- background: rgb(240, 241, 245);
- font-size: 16px;
- line-height: 1.6;
- color: $baseFontColor;
+// basic setup
+html {
+ font-size: 62.5%;
+ overflow-y: scroll;
}
-body,
-input {
- font-family: 'Open Sans', sans-serif;
+body {
+ @include font-size(16);
+ min-width: $fg-min-width;
+ background: $gray-l5;
+ line-height: 1.6;
+ color: $baseFontColor;
+}
+
+body, input {
+ font-family: 'Open Sans', sans-serif;
}
a {
- text-decoration: none;
- color: $blue;
- @include transition(color .15s);
+ text-decoration: none;
+ color: $blue;
+ @include transition(color .15s);
- &:hover {
- color: #cb9c40;
- }
+ &:hover {
+ color: #cb9c40;
+ }
}
h1 {
- float: left;
- font-size: 28px;
- font-weight: 300;
- margin: 24px 6px;
+ @include font-size(28);
+ font-weight: 300;
}
.waiting {
- opacity: 0.1;
+ opacity: 0.1;
}
.page-actions {
- margin-bottom: 30px;
+ margin-bottom: 30px;
}
-.main-wrapper {
+.wrapper {
+ @include clearfix();
+ @include box-sizing(border-box);
+ width: 100%;
+}
+
+// ====================
+
+// layout - basic page header
+.wrapper-mast {
+ margin: 0;
+ padding: 0 $baseline;
+ position: relative;
+
+ .mast, .metadata {
+ @include clearfix();
+ @include font-size(16);
position: relative;
- margin: 0 40px;
+ max-width: $fg-max-width;
+ min-width: $fg-min-width;
+ width: flex-grid(12);
+ margin: 0 auto $baseline auto;
+ color: $gray-d2;
+ }
+
+ .mast {
+ border-bottom: 1px solid $gray-l4;
+ padding-bottom: ($baseline/2);
+
+ .title-sub {
+ @include font-size(14);
+ position: relative;
+ top: ($baseline/4);
+ display: block;
+ margin: 0;
+ color: $gray-l2;
+ font-weight: 400;
+ }
+
+ .title, .title-1 {
+ @include font-size(32);
+ margin: 0;
+ padding: 0;
+ font-weight: 600;
+ color: $gray-d3;
+ }
+
+ .nav-hierarchy {
+ @include font-size(14);
+ display: block;
+ margin: 0;
+ color: $gray-l2;
+ font-weight: 400;
+
+ .nav-item {
+ display: inline;
+ vertical-align: middle;
+ margin-right: ($baseline/4);
+
+ &:after {
+ content: ">>";
+ margin-left: ($baseline/4);
+ }
+
+ &:last-child {
+ margin-right: 0;
+
+ &:after {
+ content: none;
+ }
+ }
+ }
+ }
+
+ // layout with actions
+ .title {
+ width: flex-grid(12);
+ }
+
+ // layout with actions
+ &.has-actions {
+ @include clearfix();
+
+ .title {
+ float: left;
+ width: flex-grid(6,12);
+ margin-right: flex-gutter();
+ }
+
+ .nav-actions {
+ position: relative;
+ bottom: -($baseline*0.75);
+ float: right;
+ width: flex-grid(6,12);
+ text-align: right;
+
+ .nav-item {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: ($baseline/2);
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ // buttons
+ .button {
+ padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2) !important;
+ font-weight: 400 !important;
+ }
+
+ .new-button {
+ font-weight: 700 !important;
+ }
+
+ .view-button {
+
+ font-weight: 700 !important;
+ }
+
+ .upload-button .icon-create {
+ @include font-size(18);
+ margin-top: ($baseline/4);
+ }
+ }
+ }
+
+ // layout with actions
+ &.has-subtitle {
+
+ .nav-actions {
+ bottom: -($baseline*1.5);
+ }
+ }
+ }
+
+ // page metadata/action bar
+ .metadata {
+
+ }
+}
+
+// layout - basic page content
+.wrapper-content {
+ margin: 0;
+ padding: 0 $baseline;
+ position: relative;
+}
+
+.content {
+ @include clearfix();
+ @include font-size(16);
+ max-width: $fg-max-width;
+ min-width: $fg-min-width;
+ width: flex-grid(12);
+ margin: 0 auto;
+ color: $gray-d2;
+
+ header {
+ position: relative;
+ margin-bottom: $baseline;
+ border-bottom: 1px solid $gray-l4;
+ padding-bottom: ($baseline/2);
+
+ .title-sub {
+ @include font-size(14);
+ display: block;
+ margin: 0;
+ color: $gray-l2;
+ }
+
+ .title-1 {
+ @include font-size(32);
+ margin: 0;
+ padding: 0;
+ font-weight: 600;
+ color: $gray-d3;
+ }
+ }
+
+ .introduction {
+ @include box-sizing(border-box);
+ @include font-size(14);
+ width: flex-grid(12);
+ margin: 0 0 $baseline 0;
+
+ .copy strong {
+ font-weight: 600;
+ }
+
+ &.has-links {
+ @include clearfix();
+
+ .copy {
+ float: left;
+ width: flex-grid(8,12);
+ margin-right: flex-gutter();
+ }
+
+ .nav-introduction-supplementary {
+ @include font-size(13);
+ float: right;
+ width: flex-grid(4,12);
+ display: block;
+ text-align: right;
+
+ .icon {
+ @include font-size(14);
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: ($baseline/4);
+ }
+ }
+ }
+ }
+}
+
+.content-primary, .content-supplementary {
+ @include box-sizing(border-box);
+}
+
+// layout - primary content
+.content-primary {
+
+ .title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
+ color: $gray-d3;
+ }
+
+ .title-1 {
+
+ }
+
+ .title-2 {
+ @include font-size(24);
+ margin: 0 0 ($baseline/2) 0;
+ font-weight: 600;
+ }
+
+ .title-3 {
+ @include font-size(16);
+ margin: 0 0 ($baseline/2) 0;
+ font-weight: 600;
+ }
+
+ .title-4 {
+
+ }
+
+ .title-5 {
+
+ }
+}
+
+// layout - supplemental content
+.content-supplementary {
+
+ .bit {
+ @include font-size(13);
+ margin: 0 0 $baseline 0;
+ border-bottom: 1px solid $gray-l4;
+ padding: 0 0 $baseline 0;
+ color: $gray-l1;
+
+ &:last-child {
+ margin-bottom: 0;
+ border: none;
+ padding-bottom: 0;
+ }
+
+ h3 {
+ @include font-size(14);
+ margin: 0 0 ($baseline/4) 0;
+ color: $gray-d2;
+ font-weight: 600;
+ }
+
+ p {
+ margin: 0 0 $baseline 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ // navigation
+ .nav-related, .nav-page {
+
+ .nav-item {
+ margin-bottom: ($baseline/4);
+ border-bottom: 1px dotted $gray-l4;
+ padding-bottom: ($baseline/4);
+
+
+ &:last-child {
+ margin-bottom: 0;
+ border: none;
+ padding-bottom: 0;
+ }
+ }
+ }
+ }
+}
+
+// ====================
+
+// layout - grandfathered
+.main-wrapper {
+ position: relative;
+ margin: 40px;
}
.inner-wrapper {
- position: relative;
- max-width: 1280px;
- margin: auto;
+ @include clearfix();
+ position: relative;
+ max-width: 1280px;
+ margin: auto;
- > article {
- clear: both;
- }
+ > article {
+ clear: both;
+ }
+}
+
+.main-column {
+ clear: both;
+ float: left;
+ width: 70%;
}
.sidebar {
- float: right;
- width: 28%;
+ float: right;
+ width: 28%;
}
.left {
- float: left;
+ float: left;
}
.right {
- float: right;
+ float: right;
}
-footer {
- clear: both;
- height: 100px;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-textarea.text {
- padding: 6px 8px 8px;
- @include box-sizing(border-box);
- border: 1px solid $mediumGrey;
- border-radius: 2px;
- @include linear-gradient($lightGrey, tint($lightGrey, 90%));
- background-color: $lightGrey;
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
- font-family: 'Open Sans', sans-serif;
- font-size: 11px;
- color: $baseFontColor;
- outline: 0;
-
- &::-webkit-input-placeholder,
- &:-moz-placeholder,
- &:-ms-input-placeholder {
- color: #979faf;
- }
-
- &:focus {
- @include linear-gradient($paleYellow, tint($paleYellow, 90%));
- outline: 0;
- }
-}
-
-input.search {
- padding: 6px 15px 8px 30px;
- @include box-sizing(border-box);
- border: 1px solid $darkGrey;
- border-radius: 20px;
- background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
- font-family: 'Open Sans', sans-serif;
- color: $baseFontColor;
- outline: 0;
-
- &::-webkit-input-placeholder {
- color: #979faf;
- }
-}
-
-label {
- font-size: 12px;
-}
-
-code {
- padding: 0 4px;
- border-radius: 3px;
- background: #eee;
- font-family: Monaco, monospace;
-}
-
-.CodeMirror {
- font-size: 13px;
- border: 1px solid $darkGrey;
- background: #fff;
-}
-
-.text-editor {
- width: 100%;
- min-height: 80px;
- padding: 10px;
- @include box-sizing(border-box);
- border: 1px solid $mediumGrey;
- @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
- background-color: #edf1f5;
- @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
- font-family: Monaco, monospace;
-}
+// ====================
+// UI - actions
.new-unit-item,
.new-subsection-item,
.new-policy-item {
- @include grey-button;
- margin: 5px 8px;
- padding: 3px 10px 4px 10px;
- font-size: 10px;
+ @include grey-button;
+ margin: 5px 8px;
+ padding: 3px 10px 4px 10px;
+ font-size: 10px;
- .new-folder-icon,
- .new-policy-icon,
- .new-unit-icon {
- position: relative;
- top: 2px;
- }
+ .new-folder-icon,
+ .new-policy-icon,
+ .new-unit-icon {
+ position: relative;
+ top: 2px;
+ }
}
.item-actions {
- position: absolute;
- top: 5px;
- right: 5px;
+ position: absolute;
+ top: 5px;
+ right: 5px;
- .edit-button,
- .delete-button,
- .visibility-toggle {
- float: left;
- margin-right: 13px;
- color: #a4aab7;
- }
+ .edit-button,
+ .delete-button,
+ .visibility-toggle {
+ float: left;
+ margin-right: 13px;
+ color: #a4aab7;
+ }
+}
+
+// ====================
+
+// misc
+hr.divide {
+ @include text-sr();
}
.item-details {
@@ -189,81 +436,56 @@ code {
}
.window {
- margin-bottom: 20px;
- border: 1px solid $mediumGrey;
- border-radius: 3px;
- background: #fff;
- @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+ // @include border-radius(3px);
+ // @include box-shadow(0 1px 1px $shadow-l1);
+ // margin-bottom: $baseline;
+ // border: 1px solid $gray-l2;
+ // background: $white;
- .window-contents {
- padding: 20px;
+ .window-contents {
+ padding: 20px;
+ }
+
+ .header {
+ padding: 6px 14px;
+ border-bottom: 1px solid $mediumGrey;
+ border-radius: 2px 2px 0 0;
+ @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+ background-color: $lightBluishGrey;
+ @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
+ font-size: 14px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+ }
+
+ label {
+ display: block;
+ margin-bottom: 6px;
+ font-weight: 700;
+
+ &.inline-label {
+ display: inline;
}
- .header {
- padding: 6px 14px;
- border-bottom: 1px solid $mediumGrey;
- border-radius: 2px 2px 0 0;
- @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
- background-color: $lightBluishGrey;
- @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
- font-size: 14px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+ .description {
+ display: block;
+ font-size: 11px;
+ font-weight: 400;
+ font-style: italic;
+ line-height: 1.3;
+ color: #999;
}
+ }
- label {
- display: block;
- margin-bottom: 6px;
- font-weight: 700;
-
- &.inline-label {
- display: inline;
- }
-
- .description {
- display: block;
- font-size: 11px;
- font-weight: 400;
- font-style: italic;
- line-height: 1.3;
- color: #999;
- }
- }
-
- .row {
- margin-bottom: 10px;
- padding-bottom: 10px;
- border-bottom: 1px solid #cbd1db;
- }
+ .row {
+ margin-bottom: 10px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #cbd1db;
+ }
}
-body.hide-wip {
- .wip, .wip-box {
- display: none !important;
- }
-}
+// ====================
-body.show-wip {
- .wip {
- outline: 1px solid #f00 !important;
- position: relative;
- }
-
- .wip-box {
- @extend .wip;
- &:after {
- content: "WIP";
- font-size: 8px;
- padding: 2px;
- background: #f00;
- color: #fff;
- @include position(absolute, 0px 0px 0 0);
- }
- }
-}
-
-.waiting {
-
-}
+// system notifications
.toast-notification {
display: none;
position: fixed;
@@ -323,59 +545,86 @@ body.show-wip {
}
.waiting {
- position: relative;
+ position: relative;
- &:before {
- content: '';
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 999998;
- width: 100%;
- height: 100%;
- border-radius: inherit;
- background: rgba(255, 255, 255, .9);
- }
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 999998;
+ width: 100%;
+ height: 100%;
+ border-radius: inherit;
+ background: rgba(255, 255, 255, .9);
+ }
- &:after {
- content: '';
- @extend .spinner-icon;
- display: block;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -10px;
- margin-top: -10px;
- z-index: 999999;
- }
+ &:after {
+ content: '';
+ @extend .spinner-icon;
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -10px;
+ margin-top: -10px;
+ z-index: 999999;
+ }
}
.waiting-inline {
- &:after {
- content: '';
- @extend .spinner-icon;
- }
+ &:after {
+ content: '';
+ @extend .spinner-icon;
+ }
}
.new-button {
- @include green-button;
- font-size: 13px;
- padding: 8px 20px 10px;
- text-align: center;
+ @include green-button;
+ @include font-size(13);
+ padding: 8px 20px 10px;
+ text-align: center;
- &.big {
- display: block;
- }
+ &.big {
+ display: block;
+ }
+
+ .icon-create {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: ($baseline/4);
+ margin-top: ($baseline/10);
+ line-height: 0;
+ }
+}
+
+.view-button {
+ @include blue-button;
+ @include font-size(13);
+ text-align: center;
+
+ &.big {
+ display: block;
+ }
+
+ .icon-view {
+ @include font-size(15);
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: ($baseline/2);
+ margin-top: ($baseline/5);
+ line-height: 0;
+ }
}
.edit-button.standard,
.delete-button.standard {
- float: left;
+ @include font-size(12);
@include white-button;
+ float: left;
padding: 3px 10px 4px;
margin-left: 7px;
- font-size: 12px;
font-weight: 400;
.edit-icon,
@@ -386,9 +635,9 @@ body.show-wip {
.delete-button.standard {
- &:hover {
- background-color: tint($orange, 75%);
- }
+ &:hover {
+ background-color: tint($orange, 75%);
+ }
}
.tooltip {
@@ -417,4 +666,108 @@ body.show-wip {
font-size: 20px;
color: rgba(0, 0, 0, 0.85);
}
+}
+
+// ====================
+
+// basic utility
+.sr {
+ @include text-sr();
+}
+
+.fake-link {
+ cursor: pointer;
+}
+
+.non-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.wrap {
+ text-wrap: wrap;
+ white-space: pre-wrap;
+ white-space: -moz-pre-wrap;
+ word-wrap: break-word;
+}
+
+hr.divider {
+ @extend .sr;
+}
+
+// ====================
+
+// js dependant
+body.js {
+
+ // lean/simple modal window
+ .content-modal {
+ @include border-bottom-radius(2px);
+ @include box-sizing(border-box);
+ @include box-shadow(0 2px 4px $shadow-d1);
+ position: relative;
+ display: none;
+ width: 700px;
+ overflow: hidden;
+ border: 1px solid $gray-d1;
+ padding: ($baseline);
+ background: $white;
+
+ .action-modal-close {
+ @include transition(top .25s ease-in-out);
+ @include border-bottom-radius(3px);
+ position: absolute;
+ top: -3px;
+ right: $baseline;
+ padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
+ background: $gray-l3;
+ text-align: center;
+
+ .label {
+ @include text-sr();
+ }
+
+ .ss-icon {
+ @include font-size(18);
+ color: $white;
+ }
+
+ &:hover {
+ background: $blue;
+ top: 0;
+ }
+ }
+
+ img {
+ @include box-sizing(border-box);
+ width: 100%;
+ overflow-y: scroll;
+ padding: ($baseline/10);
+ border: 1px solid $gray-l4;
+ }
+
+ .title {
+ @include font-size(18);
+ margin: 0 0 ($baseline/2) 0;
+ font-weight: 600;
+ color: $gray-d3;
+ }
+
+ .description {
+ @include font-size(13);
+ margin-top: ($baseline/2);
+ color: $gray-l1;
+ }
+ }
+}
+
+// ====================
+
+// works in progress
+body.hide-wip {
+
+ .wip-box {
+ display: none;
+ }
}
\ No newline at end of file
diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss
deleted file mode 100644
index 4c007bb561..0000000000
--- a/cms/static/sass/_calendar.scss
+++ /dev/null
@@ -1,367 +0,0 @@
-section.cal {
- @include box-sizing(border-box);
- @include clearfix;
- padding: 20px;
-
- > header {
- display: none;
- @include clearfix;
- margin-bottom: 10px;
- opacity: .4;
- @include transition;
- text-shadow: 0 1px 0 #fff;
-
- &:hover {
- opacity: 1;
- }
-
- h2 {
- @include inline-block();
- text-transform: uppercase;
- letter-spacing: 1px;
- font-size: 14px;
- padding: 6px 6px 6px 0;
- font-size: 12px;
- margin: 0;
- }
-
- ul {
- @include inline-block;
- float: right;
- margin: 0;
- padding: 0;
-
- &.actions {
- float: left;
- }
-
- li {
- @include inline-block;
- margin-right: 6px;
- border-right: 1px solid #ddd;
- padding: 0 6px 0 0;
-
- &:last-child {
- border-right: 0;
- margin-right: 0;
- padding-right: 0;
- }
-
- a {
- @include inline-block();
- font-size: 12px;
- @include inline-block;
- margin: 0 6px;
- font-style: italic;
- }
-
- ul {
- @include inline-block();
- margin: 0;
-
- li {
- @include inline-block();
- padding: 0;
- border-left: 0;
- }
- }
- }
- }
- }
-
- ol {
- list-style: none;
- @include clearfix;
- border: 1px solid lighten( $dark-blue , 30% );
- background: #FFF;
- width: 100%;
- @include box-sizing(border-box);
- margin: 0;
- padding: 0;
- @include box-shadow(0 0 5px lighten($dark-blue, 45%));
- @include border-radius(3px);
- overflow: hidden;
-
- > li {
- border-right: 1px solid lighten($dark-blue, 40%);
- border-bottom: 1px solid lighten($dark-blue, 40%);
- @include box-sizing(border-box);
- float: left;
- width: flex-grid(3) + ((flex-gutter() * 3) / 4);
- background-color: $light-blue;
- @include box-shadow(inset 0 0 0 1px lighten($light-blue, 8%));
-
- &:hover {
- li.create-module {
- opacity: 1;
- }
- }
-
- &:nth-child(4n) {
- border-right: 0;
- }
-
- header {
- border-bottom: 1px solid lighten($dark-blue, 40%);
- @include box-shadow(0 2px 2px $light-blue);
- display: block;
- margin-bottom: 2px;
- background: #FFF;
-
- h1 {
- font-size: 14px;
- text-transform: uppercase;
- border-bottom: 1px solid lighten($dark-blue, 60%);
- padding: 6px;
- color: $bright-blue;
- margin: 0;
-
- a {
- color: $bright-blue;
- display: block;
- padding: 6px;
- margin: -6px;
-
- &:hover {
- color: darken($bright-blue, 10%);
- background: lighten($yellow, 10%);
- }
- }
- }
-
- ul {
- margin: 0;
- padding: 0;
-
- li {
- background: #fff;
- color: #888;
- border-bottom: 0;
- font-size: 12px;
- @include box-shadow(none);
- }
- }
- }
-
- ul {
- list-style: none;
- margin: 0 0 1px 0;
- padding: 0;
-
- li {
- border-bottom: 1px solid darken($light-blue, 6%);
- // @include box-shadow(0 1px 0 lighten($light-blue, 4%));
- overflow: hidden;
- position: relative;
- text-shadow: 0 1px 0 #fff;
-
- &:hover {
- background-color: lighten($yellow, 14%);
-
- a.draggable {
- background-color: lighten($yellow, 14%);
- opacity: 1;
- }
- }
-
- &.editable {
- padding: 3px 6px;
- }
-
- a {
- color: lighten($dark-blue, 10%);
- display: block;
- padding: 6px 35px 6px 6px;
-
- &:hover {
- background-color: lighten($yellow, 10%);
- }
-
- &.draggable {
- background-color: $light-blue;
- opacity: .3;
- padding: 0;
-
- &:hover {
- background-color: lighten($yellow, 10%);
- }
- }
- }
-
- &.create-module {
- position: relative;
- opacity: 0;
- @include transition(all 3s ease-in-out);
- background: darken($light-blue, 2%);
-
- > div {
- background: $dark-blue;
- @include box-shadow(0 0 5px darken($light-blue, 60%));
- @include box-sizing(border-box);
- display: none;
- margin-left: 3%;
- padding: 10px;
- @include position(absolute, 30px 0 0 0);
- width: 90%;
- z-index: 99;
-
- ul {
- li {
- border-bottom: 0;
- background: none;
-
- input {
- @include box-sizing(border-box);
- width: 100%;
- }
-
- select {
- @include box-sizing(border-box);
- width: 100%;
-
- option {
- font-size: 14px;
- }
- }
-
- div {
- margin-top: 10px;
- }
-
- a {
- color: $light-blue;
- float: right;
-
- &:first-child {
- float: left;
- }
-
- &:hover {
- color: #fff;
- }
- }
- }
- }
- }
- }
- }
- }
- }
- }
-
- section.new-section {
- margin: 10px 0 40px;
- @include inline-block();
- position: relative;
-
- > a {
- @extend .button;
- display: block;
- }
-
- section {
- display: none;
- @include position(absolute, 30px 0 0 0);
- background: rgba(#000, .8);
- min-width: 300px;
- padding: 10px;
- @include box-sizing(border-box);
- @include border-radius(3px);
- z-index: 99;
-
- &:before {
- content: " ";
- display: block;
- background: rgba(#000, .8);
- width: 10px;
- height: 10px;
- @include position(absolute, -5px 0 0 20%);
- @include transform(rotate(45deg));
- }
-
- form {
-
- ul {
- list-style: none;
-
- li {
- border-bottom: 0;
- background: none;
- margin-bottom: 6px;
-
- input {
- width: 100%;
- @include box-sizing(border-box);
- border-color: #000;
- padding: 6px;
- }
-
- select {
- width: 100%;
- @include box-sizing(border-box);
-
- option {
- font-size: 14px;
- }
- }
-
- a {
- float: right;
-
- &:first-child {
- float: left;
- }
- }
- }
- }
- }
- }
- }
-}
-
-body.content
-section.cal {
- width: flex-grid(3);
- float: left;
- overflow: scroll;
- @include box-sizing(border-box);
- opacity: .4;
- @include transition();
-
- &:hover {
- opacity: 1;
- }
-
- > header {
- @include transition;
- overflow: hidden;
-
- > a {
- display: none;
- }
-
- ul {
- float: none;
- display: block;
-
- li {
-
- ul {
- display: inline;
- }
- }
- }
- }
-
- ol {
- li {
- @include box-sizing(border-box);
- width: 100%;
- border-right: 0;
-
- &.create-module {
- display: none;
- }
- }
- }
-}
diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss
index 0f2e139455..015a94b762 100644
--- a/cms/static/sass/_cms_mixins.scss
+++ b/cms/static/sass/_cms_mixins.scss
@@ -1,3 +1,6 @@
+// studio - utilities - mixins and extends
+// ====================
+
@mixin clearfix {
&:after {
content: '';
@@ -28,7 +31,7 @@
}
}
- &:hover {
+ &:hover, &.active {
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
}
}
@@ -41,7 +44,7 @@
background-color: $blue;
color: #fff;
- &:hover {
+ &:hover, &.active {
background-color: #62aaf5;
color: #fff;
}
@@ -285,4 +288,11 @@
padding: 0;
position: absolute;
width: 1px;
+}
+
+@mixin active {
+ @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+ background-color: rgba(255, 255, 255, .3);
+ @include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
\ No newline at end of file
diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss
deleted file mode 100644
index f2bd25c601..0000000000
--- a/cms/static/sass/_courseware.scss
+++ /dev/null
@@ -1,679 +0,0 @@
-
-input.courseware-unit-search-input {
- float: left;
- width: 260px;
- background-color: #fff;
-}
-
-.branch {
-
- .section-item {
- @include clearfix();
-
- .details {
- display: block;
- float: left;
- margin-bottom: 0;
- width: 650px;
- }
-
- .gradable-status {
- float: right;
- position: relative;
- top: -4px;
- right: 50px;
- width: 145px;
-
- .status-label {
- position: absolute;
- top: 2px;
- right: -5px;
- display: none;
- width: 110px;
- padding: 5px 40px 5px 10px;
- @include border-radius(3px);
- color: $lightGrey;
- text-align: right;
- font-size: 12px;
- font-weight: bold;
- line-height: 16px;
- }
-
- .menu-toggle {
- z-index: 10;
- position: absolute;
- top: 0;
- right: 5px;
- padding: 5px;
- color: $mediumGrey;
-
- &:hover, &.is-active {
- color: $blue;
- }
- }
-
- .menu {
- z-index: 1;
- display: none;
- opacity: 0.0;
- position: absolute;
- top: -1px;
- left: 5px;
- margin: 0;
- padding: 8px 12px;
- background: $white;
- border: 1px solid $mediumGrey;
- font-size: 12px;
- @include border-radius(4px);
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
- @include transition(opacity .15s);
-
-
- li {
- width: 115px;
- margin-bottom: 3px;
- padding-bottom: 3px;
- border-bottom: 1px solid $lightGrey;
-
- &:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
- border: none;
-
- a {
- color: $darkGrey;
- }
- }
- }
-
- a {
- color: $blue;
-
- &.is-selected {
- font-weight: bold;
- }
- }
- }
-
- // dropdown state
- &.is-active {
-
- .menu {
- z-index: 1000;
- display: block;
- opacity: 1.0;
- }
-
- .menu-toggle {
- z-index: 10000;
- }
- }
-
- // set state
- &.is-set {
-
- .menu-toggle {
- color: $blue;
- }
-
- .status-label {
- display: block;
- color: $blue;
- }
- }
- }
- }
- }
-
-
-.courseware-section {
- position: relative;
- background: #fff;
- border-radius: 3px;
- border: 1px solid $mediumGrey;
- margin-top: 15px;
- padding-bottom: 12px;
- @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
-
- &:first-child {
- margin-top: 0;
- }
-
- &.collapsed {
- padding-bottom: 0;
- }
-
- label {
- float: left;
- line-height: 29px;
- }
-
- .datepair {
- float: left;
- margin-left: 10px;
- }
-
- .section-published-date {
- position: absolute;
- top: 19px;
- right: 90px;
- padding: 4px 10px;
- border-radius: 3px;
- background: $lightGrey;
- text-align: right;
-
- .published-status {
- font-size: 12px;
- margin-right: 15px;
-
- strong {
- font-weight: bold;
- }
- }
-
- .schedule-button {
- @include blue-button;
- }
-
- .edit-button {
- @include blue-button;
- }
-
- .schedule-button,
- .edit-button {
- font-size: 11px;
- padding: 3px 15px 5px;
- }
- }
-
- .datepair .date,
- .datepair .time {
- padding-left: 0;
- padding-right: 0;
- border: none;
- background: none;
- @include box-shadow(none);
- font-size: 13px;
- font-weight: bold;
- color: $blue;
- cursor: pointer;
- }
-
- .datepair .date {
- width: 80px;
- }
-
- .datepair .time {
- width: 65px;
- }
-
- &.collapsed .subsection-list,
- .collapsed .subsection-list,
- .collapsed > ol {
- display: none !important;
- }
-
- header {
- min-height: 75px;
- @include clearfix();
-
- .item-details, .section-published-date {
-
- }
-
- .item-details {
- display: inline-block;
- padding: 20px 0 10px 0;
- @include clearfix();
-
- .section-name {
- float: left;
- margin-right: 10px;
- width: 350px;
- font-size: 19px;
- font-weight: bold;
- color: $blue;
- }
-
- .section-name-span {
- cursor: pointer;
- @include transition(color .15s);
-
- &:hover {
- color: $orange;
- }
- }
-
- .section-name-edit {
- position: relative;
- width: 400px;
- background: $white;
-
- input {
- font-size: 16px;
- }
-
- .save-button {
- @include blue-button;
- padding: 7px 20px 7px;
- margin-right: 5px;
- }
-
- .cancel-button {
- @include white-button;
- padding: 7px 20px 7px;
- }
- }
-
- .section-published-date {
- float: right;
- width: 265px;
- margin-right: 220px;
- @include border-radius(3px);
- background: $lightGrey;
-
- .published-status {
- font-size: 12px;
- margin-right: 15px;
-
- strong {
- font-weight: bold;
- }
- }
-
- .schedule-button {
- @include blue-button;
- }
-
- .edit-button {
- @include blue-button;
- }
-
- .schedule-button,
- .edit-button {
- font-size: 11px;
- padding: 3px 15px 5px;
-
- }
- }
-
- .gradable-status {
- position: absolute;
- top: 20px;
- right: 70px;
- width: 145px;
-
- .status-label {
- position: absolute;
- top: 0;
- right: 2px;
- display: none;
- width: 100px;
- padding: 10px 35px 10px 10px;
- @include border-radius(3px);
- background: $lightGrey;
- color: $lightGrey;
- text-align: right;
- font-size: 12px;
- font-weight: bold;
- line-height: 16px;
- }
-
- .menu-toggle {
- z-index: 10;
- position: absolute;
- top: 2px;
- right: 5px;
- padding: 5px;
- color: $lightGrey;
-
- &:hover, &.is-active {
- color: $blue;
- }
- }
-
- .menu {
- z-index: 1;
- display: none;
- opacity: 0.0;
- position: absolute;
- top: -1px;
- left: 2px;
- margin: 0;
- padding: 8px 12px;
- background: $white;
- border: 1px solid $mediumGrey;
- font-size: 12px;
- @include border-radius(4px);
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
- @include transition(opacity .15s);
- @include transition(display .15s);
-
-
- li {
- width: 115px;
- margin-bottom: 3px;
- padding-bottom: 3px;
- border-bottom: 1px solid $lightGrey;
-
- &:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
- border: none;
-
- a {
- color: $darkGrey;
- }
- }
- }
-
- a {
-
- &.is-selected {
- font-weight: bold;
- }
- }
- }
-
- // dropdown state
- &.is-active {
-
- .menu {
- z-index: 1000;
- display: block;
- opacity: 1.0;
- }
-
-
- .menu-toggle {
- z-index: 10000;
- }
- }
-
- // set state
- &.is-set {
-
- .menu-toggle {
- color: $blue;
- }
-
- .status-label {
- display: block;
- color: $blue;
- }
- }
-
- float: left;
- padding: 21px 0 0;
- }
- }
-
- .item-actions {
- margin-top: 21px;
- margin-right: 12px;
-
- .edit-button,
- .delete-button {
- margin-top: -3px;
- }
- }
-
- .expand-collapse-icon {
- float: left;
- margin: 29px 6px 16px 16px;
- @include transition(none);
-
- &.expand {
- background-position: 0 0;
- }
-
- &.collapsed {
-
- }
- }
-
- .drag-handle {
- margin-left: 11px;
- }
- }
-
- h3 {
- font-size: 19px;
- font-weight: 700;
- color: $blue;
- }
-
- .section-name-span {
- cursor: pointer;
- @include transition(color .15s);
-
- &:hover {
- color: $orange;
- }
- }
-
- .section-name-form {
- margin-bottom: 15px;
- }
-
- .section-name-edit {
- input {
- font-size: 16px;
- }
-
- .save-button {
- @include blue-button;
- padding: 7px 20px 7px;
- margin-right: 5px;
- }
-
- .cancel-button {
- @include white-button;
- padding: 7px 20px 7px;
- }
- }
-
- h4 {
- font-size: 12px;
- color: #878e9d;
-
- strong {
- font-weight: bold;
- }
- }
-
- .list-header {
- @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
- background-color: #ced2db;
- border-radius: 3px 3px 0 0;
- }
-
- .subsection-list {
- margin: 0 12px;
-
- > ol {
- @include tree-view;
- border-top-width: 0;
- }
- }
-
- &.new-section {
- header {
- height: auto;
- @include clearfix();
- }
-
- .expand-collapse-icon {
- visibility: hidden;
- }
- }
-}
-
-.toggle-button-sections {
- display: none;
- position: relative;
- float: right;
- margin-top: 10px;
-
- font-size: 13px;
- color: $darkGrey;
-
- &.is-shown {
- display: block;
- }
-
- .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-subsection-name-input {
- width: 515px;
-}
-
-.new-section-name-save,
-.new-subsection-name-save {
- @include blue-button;
- padding: 4px 20px 7px;
- margin: 0 5px;
- color: #fff !important;
-}
-
-.new-section-name-cancel,
-.new-subsection-name-cancel {
- @include white-button;
- padding: 4px 20px 7px;
- color: #8891a1 !important;
-}
-
-.dummy-calendar {
- display: none;
- position: absolute;
- top: 55px;
- left: 110px;
- z-index: 9999;
- border: 1px solid #3C3C3C;
- @include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
-}
-
-.unit-name-input {
- padding: 20px 40px;
-
- label {
- display: block;
- }
-
- input {
- width: 100%;
- font-size: 20px;
- }
-}
-
-.preview {
- background: url(../img/preview.jpg) center top no-repeat;
-}
-
-.edit-subsection-publish-settings {
- display: none;
- position: fixed;
- top: 100px;
- left: 50%;
- z-index: 99999;
- width: 600px;
- margin-left: -300px;
- background: #fff;
- text-align: center;
-
- .settings {
- padding: 40px;
- }
-
- h3 {
- font-size: 34px;
- font-weight: 300;
- }
-
- .picker {
- margin: 30px 0 65px;
- }
-
- .description {
- margin-top: 30px;
- font-size: 14px;
- line-height: 20px;
- }
-
- strong {
- font-weight: 700;
- }
-
- .start-date,
- .start-time {
- font-size: 19px;
- }
-
- .save-button {
- @include blue-button;
- margin-right: 10px;
- }
-
- .cancel-button {
- @include white-button;
- }
-
- .save-button,
- .cancel-button {
- font-size: 16px;
- }
-}
-
-.collapse-all-button {
- float: right;
- margin-top: 10px;
- font-size: 13px;
- color: $darkGrey;
-}
-
-// sort/drag and drop
-.ui-droppable {
- @include transition (padding 0.5s ease-in-out 0s);
- min-height: 20px;
- padding: 0;
-
- &.dropover {
- padding: 15px 0;
- }
-}
-
-.ui-draggable-dragging {
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
- border: 1px solid $darkGrey;
- opacity : 0.2;
- &:hover {
- opacity : 1.0;
- .section-item {
- background: $yellow !important;
- }
- }
-
- // hiding unit button - temporary fix until this semantically corrected
- .new-unit-item {
- display: none;
- }
-}
-
-ol.ui-droppable .branch:first-child .section-item {
- border-top: none;
-}
-
diff --git a/cms/static/sass/_dashboard.scss b/cms/static/sass/_dashboard.scss
deleted file mode 100644
index 0a9e992650..0000000000
--- a/cms/static/sass/_dashboard.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-.class-list {
- margin-top: 20px;
- border-radius: 3px;
- border: 1px solid $darkGrey;
- background: #fff;
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
-
- li {
- border-bottom: 1px solid $mediumGrey;
-
- &:last-child {
- border-bottom: none;
- }
- }
-
- a {
- padding: 20px 25px;
- line-height: 1.3;
-
- &:hover {
- background: $paleYellow;
- }
- }
-
- .class-name {
- display: block;
- font-size: 19px;
- font-weight: 300;
- }
-
- .detail {
- font-size: 14px;
- font-weight: 400;
- margin-right: 20px;
- color: #3c3c3c;
- }
-}
-
-.new-course {
- padding: 15px 25px;
- margin-top: 20px;
- border-radius: 3px;
- border: 1px solid $darkGrey;
- background: #fff;
- box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
- @include clearfix;
-
- .row {
- margin-bottom: 15px;
- @include clearfix;
- }
-
- .column {
- float: left;
- width: 48%;
- }
-
- .column:first-child {
- margin-right: 4%;
- }
-
- .course-info {
- width: 600px;
- }
-
- label {
- display: block;
- font-size: 13px;
- font-weight: 700;
- }
-
- .new-course-org,
- .new-course-number,
- .new-course-name {
- width: 100%;
- }
-
- .new-course-name {
- font-size: 19px;
- font-weight: 300;
- }
-
- .new-course-save {
- @include blue-button;
- }
-
- .new-course-cancel {
- @include white-button;
- }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss
deleted file mode 100644
index e031e16f50..0000000000
--- a/cms/static/sass/_header.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-body.no-header {
- .primary-header {
- display: none;
- }
-}
-
-@mixin active {
- @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
- background-color: rgba(255, 255, 255, .3);
- @include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-.primary-header {
- width: 100%;
- margin-bottom: 30px;
-
- &.active-tab-courseware #courseware-tab {
- @include active;
- }
-
- &.active-tab-assets #assets-tab {
- @include active;
- }
-
- &.active-tab-pages #pages-tab {
- @include active;
- }
-
- &.active-tab-users #users-tab {
- @include active;
- }
-
- &.active-tab-settings #settings-tab {
- @include active;
- }
-
- &.active-tab-import #import-tab {
- @include active;
- }
-
- &.active-tab-export #export-tab {
- @include active;
- }
-
- .drop-icon {
- margin-left: 5px;
- font-size: 11px;
- }
-
- .settings-icon {
- font-size: 18px;
- line-height: 18px;
- }
-
- .class-nav-bar {
- clear: both;
- @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
- background-color: $lightBluishGrey;
- @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
- }
-
- .class-nav {
- @include clearfix;
-
- a {
- float: left;
- display: inline-block;
- padding: 15px 25px 17px;
- font-size: 15px;
- color: #3c3c3c;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
-
- &:hover {
- @include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
- }
- }
-
- li {
- float: left;
- }
- }
-
- .class {
- @include clearfix;
- height: 100%;
- font-size: 12px;
- color: rgb(163, 171, 184);
- @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
- background-color: rgb(47, 53, 63);
-
- a {
- display: inline-block;
- height: 20px;
- padding: 5px 10px 6px;
- color: rgb(163, 171, 184);
- }
-
- .home {
- position: relative;
- top: 1px;
- }
-
- .log-out {
- position: relative;
- top: 3px;
- }
- }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss
deleted file mode 100644
index a3e210b558..0000000000
--- a/cms/static/sass/_index.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-body.index {
- > header {
- display: none;
- }
-
- > h1 {
- font-weight: 300;
- color: lighten($dark-blue, 40%);
- text-shadow: 0 1px 0 #fff;
- -webkit-font-smoothing: antialiased;
- max-width: 600px;
- text-align: center;
- margin: 80px auto 30px;
- }
-
- section.main-container {
- border-right: 3px;
- background: #FFF;
- max-width: 600px;
- margin: 0 auto;
- display: block;
- @include box-sizing(border-box);
- border: 1px solid lighten( $dark-blue , 30% );
- @include border-radius(3px);
- overflow: hidden;
- @include bounce-in-animation(.8s);
-
- header {
- border-bottom: 1px solid lighten($dark-blue, 50%);
- @include linear-gradient(#fff, lighten($dark-blue, 62%));
- @include clearfix();
- @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
- text-shadow: 0 1px 0 #fff;
-
- h1 {
- font-size: 14px;
- padding: 8px 20px;
- float: left;
- color: $dark-blue;
- margin: 0;
- }
-
- a {
- float: right;
- padding: 8px 20px;
- border-left: 1px solid lighten($dark-blue, 50%);
- @include box-shadow( inset -1px 0 0 #fff);
- font-weight: bold;
- font-size: 22px;
- line-height: 1;
- color: $dark-blue;
- }
- }
-
- ol {
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- border-bottom: 1px solid lighten($dark-blue, 50%);
-
- a {
- display: block;
- padding: 10px 20px;
-
- &:hover {
- color: $dark-blue;
- background: lighten($yellow, 10%);
- text-shadow: 0 1px 0 #fff;
- }
- }
-
- &:last-child {
- border-bottom: none;
- }
- }
- }
- }
-}
diff --git a/cms/static/sass/_landing.scss b/cms/static/sass/_landing.scss
deleted file mode 100644
index 16f1b5b5a7..0000000000
--- a/cms/static/sass/_landing.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-// This is a temporary page, which will be replaced once we have a more extensive course catalog and marketing site for edX labs.
-
-.class-landing {
-
- .main-wrapper {
- width: 700px !important;
- margin: 100px auto;
- }
-
- .class-info {
- padding: 30px 40px 40px;
- @extend .window;
-
- hgroup {
- padding-bottom: 26px;
- border-bottom: 1px solid $mediumGrey;
- }
-
- h1 {
- float: none;
- font-size: 30px;
- font-weight: 300;
- margin: 0;
- }
-
- h2 {
- color: #5d6779;
- }
-
- .class-actions {
- @include clearfix;
- padding: 15px 0;
- margin-bottom: 18px;
- border-bottom: 1px solid $mediumGrey;
- }
-
- .log-in-form {
- @include clearfix;
- padding: 15px 0 20px;
- margin-bottom: 18px;
- border-bottom: 1px solid $mediumGrey;
-
- .log-in-submit-button {
- @include blue-button;
- padding: 6px 20px 8px;
- margin: 24px 0 0;
- }
-
- .column {
- float: left;
- width: 41%;
- margin-right: 1%;
-
- &.submit {
- width: 16%;
- margin-right: 0;
- }
-
- label {
- float: left;
- }
- }
-
- input {
- width: 100%;
- font-family: $sans-serif;
- font-size: 13px;
- }
-
- .forgot-button {
- float: right;
- margin-bottom: 6px;
- font-size: 12px;
- }
- }
-
- .sign-up-button {
- @include blue-button;
- display: block;
- width: 250px;
- margin: auto;
- }
-
- .log-in-button {
- @include white-button;
- float: right;
- }
-
- .sign-up-button,
- .log-in-button {
- padding: 8px 0 12px;
- font-size: 18px;
- font-weight: 300;
- text-align: center;
- }
-
- .class-description {
- margin-top: 30px;
- font-size: 14px;
- }
-
- p + p {
- margin-top: 22px;
- }
- }
-
- .edx-labs-logo-small {
- display: block;
- width: 124px;
- height: 30px;
- margin: auto;
- background: url(../img/edx-labs-logo-small.png) no-repeat;
- text-indent: -9999px;
- overflow: hidden;
- }
-
- .edge-logo {
- display: block;
- width: 143px;
- height: 39px;
- margin: auto;
- background: url(../images/edge-logo-small.png) no-repeat;
- text-indent: -9999px;
- overflow: hidden;
- }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss
deleted file mode 100644
index 43308a973c..0000000000
--- a/cms/static/sass/_layout.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-body {
- @include clearfix();
- height: 100%;
- font: 14px $body-font-family;
- background-color: lighten($dark-blue, 62%);
- background-image: url('/static/img/noise.png');
-
- > section {
- display: table;
- table-layout: fixed;
- width: 100%;
- }
-
- > header {
- background: $dark-blue;
- @include background-image(url('/static/img/noise.png'), linear-gradient(lighten($dark-blue, 10%), $dark-blue));
- border-bottom: 1px solid darken($dark-blue, 15%);
- @include box-shadow(inset 0 -1px 0 lighten($dark-blue, 10%));
- @include box-sizing(border-box);
- color: #fff;
- display: block;
- float: none;
- padding: 0 20px;
- text-shadow: 0 -1px 0 darken($dark-blue, 15%);
- width: 100%;
-
- nav {
- @include clearfix;
-
- > a {
- @include hide-text;
- background: url('/static/img/menu.png') 0 center no-repeat;
- border-right: 1px solid darken($dark-blue, 10%);
- @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
- display: block;
- float: left;
- height: 19px;
- padding: 8px 10px 8px 0;
- width: 14px;
-
- &:hover, &:focus {
- opacity: .7;
- }
- }
-
- h2 {
- border-right: 1px solid darken($dark-blue, 10%);
- @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
- float: left;
- font-size: 14px;
- margin: 0;
- text-transform: uppercase;
- -webkit-font-smoothing: antialiased;
-
- a {
- color: #fff;
- padding: 8px 20px;
- display: block;
-
- &:hover {
- background-color: rgba(darken($dark-blue, 15%), .5);
- color: $yellow;
- }
- }
- }
-
- a {
- color: rgba(#fff, .8);
-
- &:hover {
- color: rgba(#fff, .6);
- }
- }
-
- ul {
- float: left;
- margin: 0;
- padding: 0;
- @include clearfix;
-
- &.user-nav {
- float: right;
- border-left: 1px solid darken($dark-blue, 10%);
- }
-
- li {
- border-right: 1px solid darken($dark-blue, 10%);
- float: left;
- @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
-
- a {
- padding: 8px 20px;
- display: block;
-
- &:hover {
- background-color: rgba(darken($dark-blue, 15%), .5);
- color: $yellow;
- }
-
- &.new-module {
- &:before {
- @include inline-block;
- content: "+";
- font-weight: bold;
- margin-right: 10px;
- }
- }
- }
- }
- }
- }
- }
-
- &.content {
- section.main-content {
- border-left: 2px solid $dark-blue;
- @include box-sizing(border-box);
- width: flex-grid(9) + flex-gutter();
- float: left;
- @include box-shadow( -2px 0 0 lighten($dark-blue, 55%));
- @include transition();
- background: #FFF;
- }
- }
-}
diff --git a/cms/static/sass/_lms.scss b/cms/static/sass/_lms.scss
deleted file mode 100644
index 1ddc48edaf..0000000000
--- a/cms/static/sass/_lms.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.component {
- font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
- font-size: 16px;
- line-height: 1.6;
- color: #3c3c3c;
-
- a {
- color: #1d9dd9;
- text-decoration: none;
- }
-
- p {
- font-size: 16px;
- line-height: 1.6;
- }
-
- h1 {
- float: none;
- }
-
- h2 {
- color: #646464;
- font-size: 19px;
- font-weight: 300;
- letter-spacing: 1px;
- margin-bottom: 15px;
- margin-left: 0;
- text-transform: uppercase;
- }
-
- h3 {
- font-size: 19px;
- font-weight: 400;
- }
-
- h4 {
- background: none;
- padding: 0;
- border: none;
- @include box-shadow(none);
- font-size: 16px;
- font-weight: 400;
- }
-
- code {
- margin: 0 2px;
- padding: 0px 5px;
- border-radius: 3px;
- border: 1px solid #eaeaea;
- white-space: nowrap;
- font-family: Monaco, monospace;
- font-size: 14px;
- background-color: #f8f8f8;
- }
-
- p + h2, ul + h2, ol + h2, p + h3 {
- margin-top: 40px;
- }
-
- p + p, ul + p, ol + p {
- margin-top: 20px;
- }
-
- p {
- color: #3c3c3c;
- font: normal 1em/1.6em;
- margin: 0px;
- }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_login.scss b/cms/static/sass/_login.scss
deleted file mode 100644
index c2bff74638..0000000000
--- a/cms/static/sass/_login.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-.edx-studio-logo-large {
- display: block;
- width: 224px;
- height: 45px;
- margin: 100px auto 30px;
- background: url(../img/edx-studio-large.png) no-repeat;
-}
-
-.sign-up-box,
-.log-in-box {
- width: 500px;
- margin: auto;
- border-radius: 3px;
-
- header {
- height: 36px;
- border-radius: 3px 3px 0 0;
- border: 1px solid #2c2e33;
- @include linear-gradient(top, #686b76, #54565e);
- color: #fff;
- @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset);
-
- h1 {
- float: none;
- margin: 5px 0;
- font-size: 15px;
- font-weight: 300;
- text-align: center;
- }
- }
-
- form {
- padding: 40px;
- border: 1px solid $darkGrey;
- border-top-width: 0;
- border-radius: 0 0 3px 3px;
- background: #fff;
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
- }
-
- label {
- display: block;
- margin-bottom: 5px;
- font-size: 13px;
- font-weight: 700;
- }
-
- input[type="text"],
- input[type="email"],
- input[type="password"] {
- width: 100%;
- font-size: 20px;
- font-weight: 300;
- }
-
- .row {
- @include clearfix;
- margin-bottom: 24px;
-
- .split {
- float: left;
- width: 48%;
-
- &:first-child {
- margin-right: 4%;
- }
- }
- }
-
- .form-actions {
- @include clearfix;
- margin-top: 32px;
- margin-bottom: 5px;
- text-align: center;
- }
-
- .log-in-button,
- .create-account-button {
- @include blue-button;
- padding: 8px 0 10px;
- font-family: $sans-serif;
- @include transition(all .15s);
- }
-
- .create-account-button {
- padding: 10px 40px 12px;
- margin-bottom: 10px;
- }
-
- .enrolled {
- font-size: 14px;
- }
-
- .sign-up-button {
- @include white-button;
- padding: 7px 0 9px;
- }
-
- .log-in-button,
- .sign-up-button {
- @include box-sizing(border-box);
- float: left;
- width: 45%;
- }
-
- .or {
- float: left;
- display: inline-block;
- width: 10%;
- font-size: 15px;
- line-height: 36px;
- color: $darkGrey;
- text-align: center;
- }
-
- .forgot-button {
- float: right;
- font-size: 11px;
- font-weight: 400;
- line-height: 21px;
- }
-
- .log-in-extra {
- margin-top: 10px;
- text-align: right;
- font-size: 13px;
- }
-
- #login_error,
- #register_error {
- display: none;
- margin-bottom: 30px;
- padding: 5px 10px;
- border-radius: 3px;
- background: $error-red;
- font-size: 14px;
- color: #fff;
- }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_module-header.scss b/cms/static/sass/_module-header.scss
deleted file mode 100644
index e2af263618..0000000000
--- a/cms/static/sass/_module-header.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-section.video-new, section.video-edit, section.problem-new, section.problem-edit {
- position: absolute;
- top: 72px;
- right: 0;
- background: #fff;
- width: flex-grid(6);
- @include box-shadow(0 0 6px #666);
- border: 1px solid #333;
- border-right: 0;
- z-index: 4;
-
- > header {
- background: #666;
- @include clearfix;
- color: #fff;
- padding: 6px;
- border-bottom: 1px solid #333;
- -webkit-font-smoothing: antialiased;
-
- h2 {
- float: left;
- font-size: 14px;
- }
-
- a {
- color: #fff;
-
- &.save-update {
- float: right;
- }
-
- &.cancel {
- float: left;
- }
- }
-
- }
-
- > section {
- padding: 20px;
-
- > header {
- h1 {
- font-size: 24px;
- margin: 12px 0;
- }
-
- section {
- &.status-settings {
- ul {
- list-style: none;
- @include border-radius(2px);
- border: 1px solid #999;
- @include inline-block();
-
- li {
- @include inline-block();
- border-right: 1px solid #999;
- padding: 6px;
-
- &:last-child {
- border-right: 0;
- }
-
- &.current {
- background: #eee;
- }
- }
- }
-
- a.settings {
- @include inline-block();
- margin: 0 20px;
- border: 1px solid #999;
- padding: 6px;
- }
-
- select {
- float: right;
- }
- }
-
- &.meta {
- background: #eee;
- padding: 10px;
- margin: 20px 0;
- @include clearfix();
-
- div {
- float: left;
- margin-right: 20px;
-
- h2 {
- font-size: 14px;
- @include inline-block();
- }
-
- p {
- @include inline-block();
- }
- }
- }
- }
- }
-
- section.notes {
- margin-top: 20px;
- padding: 6px;
- background: #eee;
- border: 1px solid #ccc;
-
- textarea {
- @include box-sizing(border-box);
- display: block;
- width: 100%;
- }
-
- h2 {
- font-size: 14px;
- margin-bottom: 6px;
- }
-
- input[type="submit"]{
- margin-top: 10px;
- }
- }
- }
-}
diff --git a/cms/static/sass/_problem.scss b/cms/static/sass/_problem.scss
deleted file mode 100644
index 66acacf65c..0000000000
--- a/cms/static/sass/_problem.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-section.problem-new, section.problem-edit {
- > section {
- textarea {
- @include box-sizing(border-box);
- display: block;
- width: 100%;
- }
-
- div.preview {
- background: #eee;
- @include box-sizing(border-box);
- height: 40px;
- padding: 10px;
- width: 100%;
- }
-
- a.save {
- @extend .button;
- @include inline-block();
- margin-top: 20px;
- }
- }
-}
-
diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss
index 6b4b653e87..87a6e51232 100644
--- a/cms/static/sass/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -1,3 +1,10 @@
+// studio - utilities - reset
+// ====================
+
+// * {
+// @include box-sizing(border-box);
+// }
+
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
@@ -18,7 +25,7 @@ time, mark, audio, video {
font: inherit;
vertical-align: baseline;
}
-/* HTML5 display-role reset for older browsers */
+
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
@@ -38,12 +45,6 @@ q:before, q:after {
content: none;
}
-/* remember to define visible focus styles!
-:focus {
- outline: ?????;
-} */
-
-/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
@@ -54,4 +55,94 @@ del {
table {
border-collapse: collapse;
border-spacing: 0;
+}
+
+// ====================
+
+// grandfathered styles
+
+// reset styles to remove ui-lightness jquery ui theme from the tabs component (used in the add component problem tab menu)
+.ui-tabs {
+ padding: 0;
+ white-space: normal;
+}
+
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+}
+
+
+.ui-widget-content {
+ border: 0;
+ background: none;
+}
+.ui-widget {
+ font-family: 'Open Sans', sans-serif;
+ font-size: 16px;
+}
+
+.ui-widget-header {
+ border:none;
+ background: none;
+}
+
+.ui-tabs .ui-tabs-nav {
+ padding: 0;
+}
+
+.ui-tabs .ui-tabs-nav li {
+ margin: 0;
+ padding: 0;
+ border: none;
+ top: 0;
+ margin: 0;
+ float: none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+.ui-tabs-nav {
+
+ li {
+ top: 0;
+ margin: 0;
+ }
+ a {
+ float: none;
+ font-weight: normal;
+ }
+}
+
+.ui-tabs .ui-tabs-panel {
+ padding: 0;
+}
+
+// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
+.problem-type-tabs {
+ border:none;
+ list-style-type: none;
+ width: 100%;
+ @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+ //background-color: $lightBluishGrey;
+ @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+
+ li:first-child {
+ margin-left: 20px;
+ }
+ li {
+ opacity: .8;
+
+ &:ui-state-active {
+ background-color: rgba(255, 255, 255, .3);
+ opacity: 1;
+ font-weight: 400;
+ }
+ a:focus {
+ outline: none;
+ border: 0px;
+ }
+ }
}
\ No newline at end of file
diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss
deleted file mode 100644
index 97818326be..0000000000
--- a/cms/static/sass/_section.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-section#unit-wrapper {
- section.filters {
- @include clearfix;
- display: none;
- opacity: .4;
- margin-bottom: 10px;
- @include transition;
-
- &:hover {
- opacity: 1;
- }
-
- h2 {
- @include inline-block();
- text-transform: uppercase;
- letter-spacing: 1px;
- font-size: 14px;
- padding: 6px 6px 6px 0;
- font-size: 12px;
- margin: 0;
- }
-
- ul {
- @include clearfix();
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- @include inline-block;
- margin-right: 6px;
- border-right: 1px solid #ddd;
- padding-right: 6px;
-
- &.search {
- float: right;
- border: 0;
- }
-
- a {
- &.more {
- font-size: 12px;
- @include inline-block;
- margin: 0 6px;
- font-style: italic;
- }
- }
- }
- }
- }
-
- div.content {
- display: table;
- border: 1px solid lighten($dark-blue, 40%);
- width: 100%;
- @include border-radius(3px);
- @include box-shadow(0 0 4px lighten($dark-blue, 50%));
-
- section {
- header {
- background: #fff;
- padding: 6px;
- border-bottom: 1px solid lighten($dark-blue, 60%);
- @include clearfix;
-
- h2 {
- color: $bright-blue;
- // float: left;
- font-size: 14px;
- letter-spacing: 1px;
- // line-height: 20px;
- text-transform: uppercase;
- margin: 0;
- }
- }
-
- &.modules {
- @include box-sizing(border-box);
- display: table-cell;
- width: flex-grid(6, 9);
- border-right: 1px solid lighten($dark-blue, 40%);
-
- &.empty {
- text-align: center;
- vertical-align: middle;
-
- a {
- @extend .button;
- @include inline-block();
- margin-top: 10px;
- }
- }
-
- ol {
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- border-bottom: 1px solid lighten($dark-blue, 60%);
-
- a {
- color: #000;
- }
-
- ol {
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- padding: 6px;
- position: relative;
-
- &:last-child {
- border-bottom: 0;
- }
-
- &:hover {
- background-color: lighten($yellow, 10%);
-
- a.draggable {
- opacity: 1;
- }
- }
-
- a.draggable {
- float: right;
- opacity: .4;
- }
-
- &.group {
- padding: 0;
-
- header {
- padding: 6px;
- background: none;
-
- h3 {
- font-size: 14px;
- margin: 0;
- }
- }
-
- ol {
- border-left: 4px solid #999;
- border-bottom: 0;
- margin: 0;
- padding: 0;
-
- li {
- &:last-child {
- border-bottom: 0;
- }
- }
- }
- }
- }
- }
- }
- }
- }
-
- &.scratch-pad {
- @include box-sizing(border-box);
- display: table-cell;
- width: flex-grid(3, 9) + flex-gutter(9);
- vertical-align: top;
-
- ol {
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- background: $light-blue;
-
- &:last-child {
- border-bottom: 0;
- }
-
- &.new-module a {
- background-color: darken($light-blue, 2%);
- border-bottom: 1px solid darken($light-blue, 8%);
-
- &:hover {
- background-color: lighten($yellow, 10%);
- }
- }
-
- a {
- color: $dark-blue;
- }
-
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- padding: 6px;
- border-collapse: collapse;
- border-bottom: 1px solid darken($light-blue, 8%);
- position: relative;
-
- &:last-child {
- border-bottom: 1px solid darken($light-blue, 8%);
- }
-
- &:hover {
- background-color: lighten($yellow, 10%);
-
- a.draggable {
- opacity: 1;
- }
- }
-
-
- &.empty {
- padding: 12px;
-
- a {
- @extend .button;
- display: block;
- text-align: center;
- }
- }
-
- a.draggable {
- opacity: .3;
- }
- }
- }
- }
- }
- }
- }
- }
-}
diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
deleted file mode 100644
index b11378145b..0000000000
--- a/cms/static/sass/_settings.scss
+++ /dev/null
@@ -1,800 +0,0 @@
-.settings {
- .settings-overview {
- @extend .window;
- @include clearfix;
- display: table;
- width: 100%;
-
- // layout
- .sidebar {
- display: table-cell;
- float: none;
- width: 20%;
- padding: 30px 0 30px 20px;
- @include border-radius(3px 0 0 3px);
- background: $lightGrey;
- }
-
- .main-column {
- display: table-cell;
- float: none;
- width: 80%;
- padding: 30px 40px 30px 60px;
- }
-
- .settings-page-menu {
- a {
- display: block;
- padding-left: 20px;
- line-height: 52px;
-
- &.is-shown {
- background: #fff;
- @include border-radius(5px 0 0 5px);
- }
- }
- }
-
- .settings-page-section {
- > .alert {
- display: none;
-
- &.is-shown {
- display: block;
- }
- }
-
- > section {
- display: none;
- margin-bottom: 40px;
-
- &.is-shown {
- display: block;
- }
-
- &:last-child {
- border-bottom: none;
- }
-
- > .title {
- margin-bottom: 30px;
- font-size: 28px;
- font-weight: 300;
- color: $blue;
- }
-
- > section {
- margin-bottom: 100px;
- @include clearfix;
-
- header {
- @include clearfix;
- border-bottom: 1px solid $mediumGrey;
- margin-bottom: 20px;
- padding-bottom: 10px;
-
- h3 {
- color: $darkGrey;
- float: left;
-
- margin: 0 40px 0 0;
- text-transform: uppercase;
- }
-
- .detail {
- float: right;
- margin-top: 3px;
- color: $mediumGrey;
- font-size: 13px;
- }
- }
-
- &:last-child {
- padding-bottom: 0;
- border-bottom: none;
- }
- }
- }
- }
-
- // form basics
- label, .label {
- padding: 0;
- border: none;
- background: none;
- font-size: 15px;
- font-weight: 400;
-
- &.check-label {
- display: inline;
- margin-left: 10px;
- }
-
- &.ranges {
- margin-bottom: 20px;
- }
- }
-
- input, textarea {
- @include transition(all 1s ease-in-out);
- @include box-sizing(border-box);
- font-size: 15px;
-
- &.long {
- width: 100%;
- min-width: 400px;
- }
-
- &.tall {
- height: 200px;
- }
-
- &.short {
- min-width: 100px;
- width: 25%;
- }
-
- &.date {
- display: block !important;
- }
-
- &.time {
- width: 85px !important;
- min-width: 85px !important;
- }
-
- &:disabled {
- border: none;
- @include box-shadow(none);
- padding: 0;
- color: $darkGrey !important;
- font-weight: bold;
- background: #fff;
- }
- }
-
- textarea.tinymce {
- border: 1px solid $darkGrey;
- height: 300px;
- }
-
- input[type="checkbox"], input[type="radio"] {
-
- }
-
- input:disabled + .copy > label, input:disabled + .label {
- color: $mediumGrey;
- }
-
-
- .input-default input, .input-default textarea {
- color: $mediumGrey;
- background: $lightGrey;
- }
-
- ::-webkit-input-placeholder {
- color: $mediumGrey;
- font-size: 13px;
- }
- :-moz-placeholder {
- color: $mediumGrey;
- font-size: 13px;
- }
-
- .tip {
- color: $mediumGrey;
- font-size: 13px;
- }
-
-
- // form layouts
- .row {
- margin-bottom: 30px;
- padding-bottom: 30px;
- border-bottom: 1px solid $lightGrey;
-
- &:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
- border-bottom: none;
- }
-
- // structural labels, not semantic labels per se
- > label, .label {
- display: inline-block;
- vertical-align: top;
- }
-
- // tips
- .tip-inline {
- display: inline-block;
- margin-left: 10px;
- }
-
- .tip-stacked {
- display: block;
- margin-top: 10px;
- }
-
- // structural field, not semantic fields per se
- .field {
- display: inline-block;
- width: 100%;
-
- > input, > textarea, .input {
- display: inline-block;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- .group {
- input, textarea {
- margin-bottom: 5px;
- }
-
- .label, label {
- font-size: 13px;
- }
- }
-
- // multi-field
- &.multi {
- display: block;
- background: tint($lightGrey, 50%);
- padding: 20px;
- @include border-radius(4px);
- @include box-sizing(border-box);
-
- .group {
- margin-bottom: 10px;
- max-width: 175px;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- input, .input, textarea {
-
- }
-
- .tip-stacked {
- margin-top: 0;
- }
- }
- }
-
- // multi stacked
- &.multi-stacked {
-
- .group {
- input, .input, textarea {
- min-width: 370px;
- width: 370px;
- }
- }
- }
-
- // multi-field inline
- &.multi-inline {
- @include clearfix;
-
- .group {
- float: left;
- margin-right: 20px;
-
- &:nth-child(2) {
- margin-right: 0;
- }
-
- .input, input, textarea {
- width: 100%;
- }
- }
- }
- }
-
- // input-list
- .input-list {
-
- .input {
- margin-bottom: 15px;
- padding-bottom: 15px;
- border-bottom: 1px dotted $lightGrey;
- @include clearfix();
-
- &:last-child {
- border: 0;
- }
-
- .row {
- }
- }
- }
-
- //radio buttons and checkboxes
- .input-radio {
- @include clearfix();
-
- input {
- display: block;
- float: left;
- margin-right: 10px;
- }
-
- .copy {
- position: relative;
- top: -5px;
- float: left;
- width: 350px;
- }
-
- label {
- display: block;
- margin-bottom: 0;
- }
-
- .tip {
- display: block;
- margin-top: 0;
- }
-
- .message-error {
-
- }
- }
-
- .input-checkbox {
-
- }
-
- // enumerated inputs
- &.enum {
- }
- }
-
- // layout - aligned label/field pairs
- &.row-col2 {
-
- > label, .label {
- width: 200px;
- }
-
- .field {
- width: 400px ! important;
- }
-
- &.multi-inline {
- @include clearfix();
-
- .group {
- width: 170px;
- }
- }
- }
-
- .field-additional {
- margin-left: 204px;
- }
- }
-
- // editing controls - adding
- .new-item, .replace-item {
- clear: both;
- display: block;
- margin-top: 10px;
- padding-bottom: 10px;
- @include grey-button;
- @include box-sizing(border-box);
- }
-
-
- // editing controls - removing
- .delete-button {
- float: right;
- }
-
- // editing controls - preview
- .input-existing {
- display: block !important;
-
- .current {
- width: 100%;
- margin: 10px 0;
- padding: 10px;
- @include box-sizing(border-box);
- @include border-radius(5px);
- font-size: 14px;
- background: tint($lightGrey, 50%);
- @include clearfix();
-
- .doc-filename {
- display: inline-block;
- width: 220px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .remove-doc-data {
- display: inline-block;
- margin-top: 0;
- width: 150px;
- }
- }
- }
-
- // specific sections
- .settings-details {
-
- }
-
- .settings-faculty {
-
- .settings-faculty-members {
-
- > header {
- display: none;
- }
-
- .field .multi {
- display: block;
- margin-bottom: 40px;
- padding: 20px;
- background: tint($lightGrey, 50%);
- @include border-radius(4px);
- @include box-sizing(border-box);
- }
-
- .course-faculty-list-item {
-
- .row {
-
- &:nth-child(4) {
- padding-bottom: 0;
- border-bottom: none;
- }
- }
-
- .remove-faculty-photo {
- display: inline-block;
- }
- }
-
- #course-faculty-bio-input {
- margin-bottom: 0;
- }
-
- .new-course-faculty-item {
- }
-
- .current-faculty-photo {
- padding: 0;
-
- img {
- display: block;
- @include box-shadow(0 1px 3px rgba(0,0,0,0.1));
- padding: 10px;
- border: 2px solid $mediumGrey;
- background: #fff;
- }
- }
- }
- }
-
- .settings-grading {
-
- .setting-grading-assignment-types {
-
- .row .field.enum {
- width: 684px;
- }
- }
-
- .course-grading-assignment-list-item {
-
- }
-
- .input-list {
- .row {
-
- .input {
- &:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
- }
- }
- }
- }
- }
-
- .settings-handouts {
-
- }
-
- .settings-problems {
-
- > section {
-
- &.is-shown {
- display: block;
- }
- }
- }
-
- .settings-discussions {
-
- .course-discussions-categories-list-item {
-
- label {
- display: none;
- }
-
- .group {
- display: inline-block;
- }
-
- .remove-item {
- display: inline-block !important;
- margin-left: 10px;
- }
- }
-
-
- }
-
- // states
- label.is-focused {
- color: $blue;
- @include transition(color 1s ease-in-out);
- }
-
- // extras/abbreviations
- // .settings-extras {
-
- // > header {
- // cursor: pointer;
-
- // &.active {
-
- // }
- // }
-
- // > div {
- // display: none;
- // @include transition(display 0.25s ease-in-out);
-
- // &.is-shown {
- // display: block;
- // }
- // }
- // }
-
- input.error, textarea.error {
- border-color: $red;
- }
-
- .message-error {
- display: block;
- margin-top: 5px;
- color: $red;
- font-size: 13px;
- }
-
- // misc
- .divide {
- display: none;
- }
-
- i.ss-icon {
- position: relative;
- top: 1px;
- margin-right: 5px;
- }
-
- .well {
- padding: 20px;
- background: $lightGrey;
- border: 1px solid $mediumGrey;
- @include border-radius(4px);
- @include box-shadow(0 1px 1px rgba(0,0,0,0.05) inset)
- }
- }
-
-
-
- h3 {
- margin-bottom: 30px;
- font-size: 15px;
- font-weight: 700;
- color: $blue;
- }
-
- .grade-controls {
- @include clearfix;
- width: 642px;
- }
-
- .new-grade-button {
- position: relative;
- float: left;
- display: block;
- width: 29px;
- height: 29px;
- margin: 10px 20px 0 0;
- border-radius: 20px;
- border: 1px solid $darkGrey;
- @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
- background-color: #d1dae3;
- @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
- color: #6d788b;
-
- .plus-icon {
- position: absolute;
- top: 50%;
- left: 50%;
- margin-left: -6px;
- margin-top: -6px;
- }
- }
-
- .grade-slider {
- float: left;
- width: 580px;
- margin-bottom: 10px;
-
- .grade-bar {
- position: relative;
- width: 100%;
- height: 50px;
- background: $lightGrey;
-
- .increments {
- position: relative;
-
- li {
- position: absolute;
- top: 52px;
- width: 30px;
- margin-left: -15px;
- font-size: 9px;
- text-align: center;
-
- &.increment-0 {
- left: 0;
- }
-
- &.increment-10 {
- left: 10%;
- }
-
- &.increment-20 {
- left: 20%;
- }
-
- &.increment-30 {
- left: 30%;
- }
-
- &.increment-40 {
- left: 40%;
- }
-
- &.increment-50 {
- left: 50%;
- }
-
- &.increment-60 {
- left: 60%;
- }
-
- &.increment-70 {
- left: 70%;
- }
-
- &.increment-80 {
- left: 80%;
- }
-
- &.increment-90 {
- left: 90%;
- }
-
- &.increment-100 {
- left: 100%;
- }
- }
- }
-
- .grade-specific-bar {
- height: 50px !important;
- }
-
- .grades {
- position: relative;
-
- li {
- position: absolute;
- top: 0;
- height: 50px;
- text-align: right;
- @include border-radius(2px);
-
- &:hover,
- &.is-dragging {
- .remove-button {
- display: block;
- }
- }
-
- &.is-dragging {
-
-
- }
-
- .remove-button {
- display: none;
- position: absolute;
- top: -17px;
- right: 1px;
- height: 17px;
- font-size: 10px;
- }
-
- &:nth-child(1) {
- background: #4fe696;
- }
-
- &:nth-child(2) {
- background: #ffdf7e;
- }
-
- &:nth-child(3) {
- background: #ffb657;
- }
-
- &:nth-child(4) {
- background: #ef54a1;
- }
-
- &:nth-child(5),
- &.bar-fail {
- background: #fb336c;
- }
-
- .letter-grade {
- display: block;
- margin: 10px 15px 0 0;
- font-size: 16px;
- font-weight: 700;
- line-height: 14px;
- }
-
- .range {
- display: block;
- margin-right: 15px;
- font-size: 10px;
- line-height: 12px;
- }
-
- .drag-bar {
- position: absolute;
- top: 0;
- right: -1px;
- height: 50px;
- width: 2px;
- background-color: #fff;
- @include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
-
- cursor: ew-resize;
- @include transition(none);
-
- &:hover {
- width: 6px;
- right: -2px;
- }
- }
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_subsection.scss b/cms/static/sass/_subsection.scss
deleted file mode 100644
index 32c983ee3a..0000000000
--- a/cms/static/sass/_subsection.scss
+++ /dev/null
@@ -1,287 +0,0 @@
-.subsection-body {
- padding: 32px 40px;
- @include clearfix;
-
- > div {
- margin-bottom: 40px;
- }
-
- input {
- font-size: 14px;
- }
-
- .unit-subtitle {
- display: block;
- width: 100%;
- }
-
- .sortable-unit-list {
- ol {
- @include tree-view;
- }
- }
-
- .policy-list {
- input[disabled] {
- border: none;
- @include box-shadow(none);
- }
-
- .policy-list-name {
- margin-right: 5px;
- margin-bottom: 10px;
- }
-
- .policy-list-value {
- width: 320px;
- margin-right: 10px;
- }
- }
-
- .policy-list-element {
- .save-button,
- .cancel-button {
- display: none;
- }
-
- .edit-icon {
- margin-right: 8px;
- }
-
- &.editing,
- &.new-policy-list-element {
- .policy-list-name,
- .policy-list-value {
- border: 1px solid #b0b6c2;
- @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
- background-color: #edf1f5;
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
- }
- }
- }
-
- .new-policy-list-element {
- padding: 10px 10px 0;
- margin: 0 -10px 10px;
- border-radius: 3px;
- background: $mediumGrey;
-
- .save-button {
- @include blue-button;
- margin-bottom: 10px;
- }
-
- .cancel-button {
- @include white-button;
- }
-
- .edit-icon {
- display: none;
- }
-
- .delete-icon {
- display: none;
- }
- }
-
- .new-policy-item {
- margin: 10px 0;
-
- .plus-icon-small {
- position: relative;
- top: -1px;
- vertical-align: middle;
- }
- }
-}
-
-.subsection-name-input {
- label {
- display: block;
- }
-
- input {
- width: 100%;
- font-size: 20px;
- }
-}
-
-.scheduled-date-input,
-.due-date-input {
- @include clearfix;
-
- .date-input,
- .time-input {
- display: inline-block;
- width: 100px;
- }
-
- .inherits-check {
- label {
- font-size: 13px;
- }
- }
-
- .notice {
- margin-top: 6px;
- font-size: 11px;
- color: #999;
- }
-}
-
-.due-date-input {
- label {
- display: inline-block !important;
- margin-right: 10px;
- }
-
- a {
- font-size: 11px;
- font-weight: bold;
- text-transform: uppercase;
- }
-
- .date-setter {
- @include clearfix;
- display: none;
- }
-
- .remove-date {
- display: block;
- }
-}
-
-.row.visibility {
- label {
- display: inline-block !important;
- margin-right: 10px;
- line-height: 21px;
- }
-
- a {
- display: inline-block;
- height: 31px;
- margin-right: 8px;
- vertical-align: middle;
- font-size: 11px;
- font-weight: 700;
- line-height: 31px;
- text-transform: uppercase;
- }
-
- .large-toggle {
- width: 41px;
- background: url(../img/large-toggles.png) no-repeat;
- background-position: 0 -50px;
-
- .hidden {
- background-position: 0 -5px;
- }
- }
-}
-
-.gradable {
-
- label {
- display: inline-block;
- vertical-align: top;
- }
-
- .gradable-status {
- position: relative;
- top: -4px;
- display: inline-block;
- margin-left: 10px;
- width: 65%;
-
- .status-label {
- margin: 0;
- padding: 0;
- background: transparent;
- color: $blue;
- border: none;
- font-size: 11px;
- font-weight: bold;
- text-transform: uppercase;
- }
-
- .menu-toggle {
- z-index: 100;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 20px;
- background: transparent;
-
- &:hover, &.is-active {
- color: $blue;
- }
- }
-
- .menu {
- z-index: 1;
- position: absolute;
- top: -12px;
- left: -7px;
- display: none;
- width: 100%;
- margin: 0;
- padding: 8px 12px;
- opacity: 0.0;
- background: $white;
- border: 1px solid $mediumGrey;
- font-size: 12px;
- @include border-radius(4px);
- @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
- @include transition(opacity .15s);
-
-
- li {
- margin-bottom: 3px;
- padding-bottom: 3px;
- border-bottom: 1px solid $lightGrey;
-
- &:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
- border: none;
- }
- }
-
- a {
-
- &.is-selected {
- font-weight: bold;
- }
- }
- }
-
- // dropdown state
- &.is-active {
-
- .menu {
- z-index: 10000;
- display: block;
- opacity: 1.0;
- }
-
- .menu-toggle {
- z-index: 1000;
- }
- }
-
- // set state
- &.is-set {
-
- .menu-toggle {
- color: $blue;
- }
-
- .status-label {
- display: block;
- color: $blue;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
deleted file mode 100644
index bdc76c811c..0000000000
--- a/cms/static/sass/_unit.scss
+++ /dev/null
@@ -1,570 +0,0 @@
-.unit .main-wrapper,
-.subsection .main-wrapper {
- margin: 40px;
-}
-
-.main-column {
- clear: both;
- float: left;
- width: 70%;
-}
-
-.unit-body.published {
- .components > li {
- border: none;
-
- .rendered-component {
- padding: 0 20px;
- }
- }
-}
-
-.unit-body {
- .breadcrumbs {
- border-radius: 3px 3px 0 0;
- border-bottom: 1px solid #cbd1db;
- @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
- background-color: #edf1f5;
- @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
- @include clearfix;
-
- li {
- float: left;
- }
-
- a,
- .current-page {
- display: block;
- padding: 15px 35px 15px 30px;
- font-size: 14px;
- background: url(../img/breadcrumb-arrow.png) no-repeat right center;
- }
- }
-
- h2 {
- margin: 30px 40px 30px 0;
- color: #646464;
- font-size: 19px;
- font-weight: 300;
- letter-spacing: 1px;
- text-transform: uppercase;
- }
-
- .components {
-
- > li {
- position: relative;
- z-index: 10;
- margin: 20px 40px;
-
-
- .title {
- margin: 0 0 15px 0;
- color: $mediumGrey;
-
- .value {
- }
- }
-
- &.new-component-item {
- padding: 20px;
- border: none;
- border-radius: 3px;
- background: $lightGrey;
-
- .new-component-button {
- display: block;
- padding: 20px;
- text-align: center;
- color: #6d788b;
- }
-
- h5 {
- margin-bottom: 8px;
- color: #fff;
- font-weight: 700;
- }
-
- .rendered-component {
- display: none;
- background: #fff;
- border-radius: 3px 3px 0 0;
- }
-
- .new-component-type {
- a,
- li {
- display: inline-block;
- }
-
- a {
- width: 100px;
- height: 100px;
- margin-right: 10px;
- margin-bottom: 10px;
- border-radius: 8px;
- font-size: 13px;
- line-height: 14px;
- text-align: center;
- @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
-
- .name {
- position: absolute;
- bottom: 5px;
- left: 0;
- width: 100%;
- padding: 10px;
- @include box-sizing(border-box);
- }
- }
- }
-
- .new-component-templates {
- display: none;
- padding: 20px;
- @include clearfix;
-
- .cancel-button {
- @include white-button;
- }
-
- // specific menu types
- &.new-component-problem {
-
- .ss-icon, .editor-indicator {
- display: inline-block;
- }
- }
- }
-
- .new-component-type,
- .new-component-template {
- @include clearfix;
-
- a {
- position: relative;
- border: 1px solid $darkGreen;
- background: tint($green,20%);
- color: #fff;
- @include transition(background-color .15s);
-
- &:hover {
- background: $brightGreen;
- }
- }
- }
-
- .new-component-template {
- margin-bottom: 20px;
-
- li:last-child {
- a {
- border-radius: 0 0 3px 3px;
- border-bottom: 1px solid $darkGreen;
- }
- }
-
- li:nth-child(2) {
- a {
- border-radius: 3px 3px 0 0;
- }
- }
-
- a {
- @include clearfix();
- display: block;
- padding: 7px 20px;
- border-bottom: none;
- font-weight: 300;
-
- .name {
- float: left;
-
- .ss-icon {
- @include transition(opacity .15s);
- position: relative;
- top: 1px;
- font-size: 13px;
- margin-right: 5px;
- opacity: 0.5;
- }
- }
-
- .editor-indicator {
- @include transition(opacity .15s);
- float: right;
- position: relative;
- top: 3px;
- font-size: 12px;
- opacity: 0.3;
- }
-
- .ss-icon, .editor-indicator {
- display: none;
- }
-
- &:hover {
-
- .ss-icon {
- opacity: 1.0;
- }
-
- .editor-indicator {
- opacity: 1.0;
- }
- }
- }
-
- // specific editor types
- .empty {
- @include box-shadow(0 1px 3px rgba(0,0,0,0.2));
- margin-bottom: 10px;
-
- a {
- border-bottom: 1px solid $darkGreen;
- border-radius: 3px;
- font-weight: 500;
- background: $green;
- }
- }
- }
-
- .new-component {
- text-align: center;
-
- h5 {
- color: $green;
- }
-
- }
- }
- }
- }
-
- .component {
- border: 1px solid $lightBluishGrey2;
- border-radius: 3px;
- background: #fff;
- @include transition(none);
-
- &:hover {
- border-color: #6696d7;
-
- .drag-handle {
- background-color: $blue;
- border-color: $blue;
- }
- }
-
- &.editing {
- border: 1px solid $lightBluishGrey2;
- z-index: auto;
-
- .drag-handle,
- .component-actions {
- display: none;
- }
- }
-
- &.component-placeholder {
- border-color: #6696d7;
- }
-
- .component-actions {
- position: absolute;
- top: 7px;
- right: 9px;
- }
-
- .drag-handle {
- position: absolute;
- display: block;
- top: -1px;
- right: -16px;
- z-index: 10;
- width: 15px;
- height: 100%;
- border-radius: 0 3px 3px 0;
- border: 1px solid $lightBluishGrey2;
- background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
- cursor: move;
- @include transition(none);
- }
- }
-
- .xmodule_display {
- padding: 40px 20px 20px;
- overflow-x: auto;
-
- h1 {
- float: none;
- margin-left: 0;
- }
- }
-
- .wrapper-component-editor {
- z-index: 9999;
- position: relative;
- background: $lightBluishGrey2;
- }
-
- .component-editor {
- @include edit-box;
- @include box-shadow(none);
- display: none;
- padding: 20px;
- border-radius: 2px 2px 0 0;
-
- .metadata_edit {
- margin-bottom: 20px;
- font-size: 13px;
-
- li {
- margin-bottom: 10px;
- }
-
- label {
- display: inline-block;
- margin-right: 10px;
- }
- }
-
- h3 {
- margin-bottom: 10px;
- font-size: 18px;
- font-weight: 700;
- }
-
- h5 {
- margin-bottom: 8px;
- color: #fff;
- font-weight: 700;
- }
-
- .save-button {
- margin-top: 10px;
- margin: 15px 8px 0 0;
- }
- }
-}
-
-.unit-settings {
- .window-contents {
- padding: 10px 20px;
- }
-
- .unit-actions {
- border-bottom: none;
- padding-bottom: 0;
- }
-
- .published-alert {
- display: none;
- padding: 10px;
- border: 1px solid #edbd3c;
- border-radius: 3px;
- background: #fbf6e1;
- font-size: 14px;
- line-height: 1.4;
-
- div {
- margin-top: 15px;
- }
- }
-
- input[type="radio"] {
- margin-right: 7px;
- }
-
- .status {
- font-size: 12px;
-
- strong {
- font-weight: 700;
- }
- }
-
- .preview-button, .view-button {
- @include white-button;
- margin-bottom: 10px;
- }
-
- .publish-button {
- @include orange-button;
- }
-
- .delete-button {
- @include blue-button;
- }
-
- .delete-draft {
- display: inline-block;
- }
-
- .delete-button,
- .preview-button,
- .publish-button,
- .view-button {
- font-size: 11px;
- margin-top: 10px;
- padding: 6px 15px 8px;
- }
-}
-
-.unit-history {
- &.collapsed {
- h4 {
- border-bottom: none;
- border-radius: 3px;
- }
-
- .window-contents {
- display: none;
- }
- }
-
- ol {
- border: 1px solid #ced2db;
-
- li {
- display: block;
- padding: 6px 8px 8px 10px;
- background: #edf1f5;
- font-size: 12px;
-
- &:hover {
- background: #fffcf1;
-
- .item-actions {
- display: block;
- }
- }
-
- &.checked {
- background: #d1dae3;
- }
-
- .item-actions {
- display: none;
- }
-
- input[type="radio"] {
- margin-right: 7px;
- }
- }
- }
-}
-
-.unit-location {
- .url {
- width: 100%;
- margin-bottom: 10px;
- @include box-shadow(none);
- }
-
- .draft-tag,
- .hidden-tag,
- .private-tag,
- .has-new-draft-tag {
- font-size: 8px;
- }
-
- .window-contents > ol {
- @include tree-view;
-
- .section-item {
- display: inline-block;
- width: 100%;
- font-size: 11px;
- padding: 2px 8px 4px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- @include box-sizing(border-box);
- }
-
- ol {
- .section-item {
- padding-left: 20px;
- }
-
- .new-unit-item {
- margin-left: 20px;
- }
- }
-
- ol ol {
- .section-item {
- padding-left: 34px;
- }
-
- .new-unit-item {
- margin: 0 0 10px 41px;
- }
- }
- }
-}
-
-.edit-state-draft {
- .visibility,
- .edit-draft-message,
- .view-button {
- display: none;
- }
-
- .published-alert {
- display: block;
- }
-}
-
-.edit-state-public {
- .delete-draft,
- .component-actions,
- .new-component-item,
- .editing-draft-alert,
- .publish-draft-message,
- .preview-button {
- display: none;
- }
-
- .published-alert {
- display: block;
- }
-
- .drag-handle {
- display: none !important;
- }
-}
-
-.edit-state-private {
- .delete-draft,
- .publish-draft,
- .editing-draft-alert,
- .create-draft,
- .view-button {
- display: none;
- }
-}
-
-// editing units from courseware
-body.unit {
-
- .component {
- padding-top: 30px;
-
- .component-actions {
- @include box-sizing(border-box);
- position: absolute;
- width: 100%;
- padding: 15px;
- top: 0;
- left: 0;
- border-bottom: 1px solid $lightBluishGrey2;
- background: $lightGrey;
- }
-
- &.editing {
- padding-top: 0;
- }
- }
-}
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index a783abeaeb..29ebf69271 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -1,27 +1,154 @@
-$gw-column: 80px;
-$gw-gutter: 20px;
+// studio - utilities - variables
+// ====================
+$baseline: 20px;
+
+// grid
+$gw-column: ($baseline*3);
+$gw-gutter: $baseline;
$fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
-$fg-max-width: 1400px;
-$fg-min-width: 810px;
+$fg-max-width: 1280px;
+$fg-min-width: 900px;
+// type
$sans-serif: 'Open Sans', $verdana;
$body-line-height: golden-ratio(.875em, 1);
-$white: rgb(255,255,255);
+// colors - new for re-org
$black: rgb(0,0,0);
-$pink: rgb(182,37,104);
-$error-red: rgb(253, 87, 87);
+$black-t0: rgba(0,0,0,0.125);
+$black-t1: rgba(0,0,0,0.25);
+$black-t2: rgba(0,0,0,0.50);
+$black-t3: rgba(0,0,0,0.75);
+$white: rgb(255,255,255);
+$white-t0: rgba(255,255,255,0.125);
+$white-t1: rgba(255,255,255,0.25);
+$white-t2: rgba(255,255,255,0.50);
+$white-t3: rgba(255,255,255,0.75);
+$gray: rgb(127,127,127);
+$gray-l1: tint($gray,20%);
+$gray-l2: tint($gray,40%);
+$gray-l3: tint($gray,60%);
+$gray-l4: tint($gray,80%);
+$gray-l5: tint($gray,90%);
+$gray-l6: tint($gray,95%);
+$gray-d1: shade($gray,20%);
+$gray-d2: shade($gray,40%);
+$gray-d3: shade($gray,60%);
+$gray-d4: shade($gray,80%);
+
+$blue: rgb(85, 151, 221);
+$blue-l1: tint($blue,20%);
+$blue-l2: tint($blue,40%);
+$blue-l3: tint($blue,60%);
+$blue-l4: tint($blue,80%);
+$blue-l5: tint($blue,90%);
+$blue-d1: shade($blue,20%);
+$blue-d2: shade($blue,40%);
+$blue-d3: shade($blue,60%);
+$blue-d4: shade($blue,80%);
+$blue-s1: saturate($blue,15%);
+$blue-s2: saturate($blue,30%);
+$blue-s3: saturate($blue,45%);
+$blue-u1: desaturate($blue,15%);
+$blue-u2: desaturate($blue,30%);
+$blue-u3: desaturate($blue,45%);
+
+$pink: rgb(183, 37, 103);
+$pink-l1: tint($pink,20%);
+$pink-l2: tint($pink,40%);
+$pink-l3: tint($pink,60%);
+$pink-l4: tint($pink,80%);
+$pink-l5: tint($pink,90%);
+$pink-d1: shade($pink,20%);
+$pink-d2: shade($pink,40%);
+$pink-d3: shade($pink,60%);
+$pink-d4: shade($pink,80%);
+$pink-s1: saturate($pink,15%);
+$pink-s2: saturate($pink,30%);
+$pink-s3: saturate($pink,45%);
+$pink-u1: desaturate($pink,15%);
+$pink-u2: desaturate($pink,30%);
+$pink-u3: desaturate($pink,45%);
+
+$red: rgb(178, 6, 16);
+$red-l1: tint($red,20%);
+$red-l2: tint($red,40%);
+$red-l3: tint($red,60%);
+$red-l4: tint($red,80%);
+$red-l5: tint($red,90%);
+$red-d1: shade($red,20%);
+$red-d2: shade($red,40%);
+$red-d3: shade($red,60%);
+$red-d4: shade($red,80%);
+$red-s1: saturate($red,15%);
+$red-s2: saturate($red,30%);
+$red-s3: saturate($red,45%);
+$red-u1: desaturate($red,15%);
+$red-u2: desaturate($red,30%);
+$red-u3: desaturate($red,45%);
+
+$green: rgb(37, 184, 90);
+$green-l1: tint($green,20%);
+$green-l2: tint($green,40%);
+$green-l3: tint($green,60%);
+$green-l4: tint($green,80%);
+$green-l5: tint($green,90%);
+$green-d1: shade($green,20%);
+$green-d2: shade($green,40%);
+$green-d3: shade($green,60%);
+$green-d4: shade($green,80%);
+$green-s1: saturate($green,15%);
+$green-s2: saturate($green,30%);
+$green-s3: saturate($green,45%);
+$green-u1: desaturate($green,15%);
+$green-u2: desaturate($green,30%);
+$green-u3: desaturate($green,45%);
+
+$yellow: rgb(231, 214, 143);
+$yellow-l1: tint($yellow,20%);
+$yellow-l2: tint($yellow,40%);
+$yellow-l3: tint($yellow,60%);
+$yellow-l4: tint($yellow,80%);
+$yellow-l5: tint($yellow,90%);
+$yellow-d1: shade($yellow,20%);
+$yellow-d2: shade($yellow,40%);
+$yellow-d3: shade($yellow,60%);
+$yellow-d4: shade($yellow,80%);
+$yellow-s1: saturate($yellow,15%);
+$yellow-s2: saturate($yellow,30%);
+$yellow-s3: saturate($yellow,45%);
+$yellow-u1: desaturate($yellow,15%);
+$yellow-u2: desaturate($yellow,30%);
+$yellow-u3: desaturate($yellow,45%);
+
+$orange: rgb(237, 189, 60);
+$orange-l1: tint($orange,20%);
+$orange-l2: tint($orange,40%);
+$orange-l3: tint($orange,60%);
+$orange-l4: tint($orange,80%);
+$orange-l5: tint($orange,90%);
+$orange-d1: shade($orange,20%);
+$orange-d2: shade($orange,40%);
+$orange-d3: shade($orange,60%);
+$orange-d4: shade($orange,80%);
+$orange-s1: saturate($orange,15%);
+$orange-s2: saturate($orange,30%);
+$orange-s3: saturate($orange,45%);
+$orange-u1: desaturate($orange,15%);
+$orange-u2: desaturate($orange,30%);
+$orange-u3: desaturate($orange,45%);
+
+$shadow: rgba(0,0,0,0.2);
+$shadow-l1: rgba(0,0,0,0.1);
+$shadow-d1: rgba(0,0,0,0.4);
+
+// colors - inherited
$baseFontColor: #3c3c3c;
$offBlack: #3c3c3c;
-$black: rgb(0,0,0);
-$white: rgb(255,255,255);
-$blue: #5597dd;
-$orange: #edbd3c;
-$red: #b20610;
$green: #108614;
$lightGrey: #edf1f5;
$mediumGrey: #b0b6c2;
@@ -35,3 +162,4 @@ $disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228);
+$error-red: rgb(253, 87, 87);
diff --git a/cms/static/sass/_video.scss b/cms/static/sass/_video.scss
deleted file mode 100644
index b68176e2db..0000000000
--- a/cms/static/sass/_video.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-section.video-new, section.video-edit {
- > section {
-
- section.upload {
- padding: 6px;
- margin-bottom: 10px;
- border: 1px solid #ddd;
-
- a.upload-button {
- @extend .button;
- @include inline-block();
- }
- }
-
- section.in-use {
- h2 {
- font-size: 14px;
- }
-
- div {
- background: #eee;
- text-align: center;
- padding: 6px;
- }
- }
-
- a.save-update {
- @extend .button;
- @include inline-block();
- margin-top: 20px;
- }
- }
-}
diff --git a/cms/static/sass/_week.scss b/cms/static/sass/_week.scss
deleted file mode 100644
index b638a36f5c..0000000000
--- a/cms/static/sass/_week.scss
+++ /dev/null
@@ -1,256 +0,0 @@
-section.week-edit,
-section.week-new,
-section.sequence-edit {
-
- > header {
- border-bottom: 2px solid #333;
- @include clearfix();
-
- div {
- @include clearfix();
- padding: 6px 20px;
-
- h1 {
- font-size: 18px;
- text-transform: uppercase;
- letter-spacing: 1px;
- float: left;
- }
-
- p {
- float: right;
- }
-
- &.week {
- background: #eee;
- font-size: 12px;
- border-bottom: 1px solid #ccc;
-
- h2 {
- font-size: 12px;
- @include inline-block();
- margin-right: 20px;
- }
-
- ul {
- list-style: none;
- @include inline-block();
-
- li {
- @include inline-block();
- margin-right: 10px;
-
- p {
- float: none;
- }
- }
- }
- }
- }
-
- section.goals {
- background: #eee;
- padding: 6px 20px;
- border-top: 1px solid #ccc;
-
- ul {
- list-style: none;
- color: #999;
-
- li {
- margin-bottom: 6px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
- }
-
- > section.content {
- @include box-sizing(border-box);
- padding: 20px;
-
- section.filters {
- @include clearfix;
- margin-bottom: 10px;
- background: #efefef;
- border: 1px solid #ddd;
-
- ul {
- @include clearfix();
- list-style: none;
- padding: 6px;
-
- li {
- @include inline-block();
-
- &.advanced {
- float: right;
- }
- }
- }
- }
-
- > div {
- display: table;
- border: 1px solid;
- width: 100%;
-
- section {
- header {
- background: #eee;
- padding: 6px;
- border-bottom: 1px solid #ccc;
- @include clearfix;
-
- h2 {
- text-transform: uppercase;
- letter-spacing: 1px;
- font-size: 12px;
- float: left;
- }
- }
-
- &.modules {
- @include box-sizing(border-box);
- display: table-cell;
- width: flex-grid(6, 9);
- border-right: 1px solid #333;
-
- &.empty {
- text-align: center;
- vertical-align: middle;
-
- a {
- @extend .button;
- @include inline-block();
- margin-top: 10px;
- }
- }
-
- ol {
- list-style: none;
- border-bottom: 1px solid #333;
-
- li {
- border-bottom: 1px solid #333;
-
- &:last-child{
- border-bottom: 0;
- }
-
- a {
- color: #000;
- }
-
- ol {
- list-style: none;
-
- li {
- padding: 6px;
-
- &:hover {
- a.draggable {
- opacity: 1;
- }
- }
-
- a.draggable {
- float: right;
- opacity: .5;
- }
-
- &.group {
- padding: 0;
-
- header {
- padding: 6px;
- background: none;
-
- h3 {
- font-size: 14px;
- }
- }
-
-
- ol {
- border-left: 4px solid #999;
- border-bottom: 0;
-
- li {
- &:last-child {
- border-bottom: 0;
- }
- }
- }
- }
- }
- }
- }
- }
- }
-
- &.scratch-pad {
- @include box-sizing(border-box);
- display: table-cell;
- width: flex-grid(3, 9) + flex-gutter(9);
- vertical-align: top;
-
- ol {
- list-style: none;
- border-bottom: 1px solid #999;
-
- li {
- border-bottom: 1px solid #999;
- background: #f9f9f9;
-
- &:last-child {
- border-bottom: 0;
- }
-
- ul {
- list-style: none;
-
- li {
- padding: 6px;
-
- &:last-child {
- border-bottom: 0;
- }
-
- &:hover {
- a.draggable {
- opacity: 1;
- }
- }
-
- &.empty {
- padding: 12px;
-
- a {
- @extend .button;
- display: block;
- text-align: center;
- }
- }
-
- a.draggable {
- float: right;
- opacity: .3;
- }
-
- a {
- color: #000;
- }
- }
- }
-
- }
- }
- }
- }
- }
- }
-}
diff --git a/cms/static/sass/_content-types.scss b/cms/static/sass/assets/_content-types.scss
similarity index 100%
rename from cms/static/sass/_content-types.scss
rename to cms/static/sass/assets/_content-types.scss
diff --git a/cms/static/sass/_fonts.scss b/cms/static/sass/assets/_fonts.scss
similarity index 100%
rename from cms/static/sass/_fonts.scss
rename to cms/static/sass/assets/_fonts.scss
diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/assets/_graphics.scss
similarity index 91%
rename from cms/static/sass/_graphics.scss
rename to cms/static/sass/assets/_graphics.scss
index 4ed22c570d..300cf3b692 100644
--- a/cms/static/sass/_graphics.scss
+++ b/cms/static/sass/assets/_graphics.scss
@@ -254,6 +254,30 @@
background: url(../img/html-icon.png) center no-repeat;
}
+.large-openended-icon {
+ display: inline-block;
+ width: 100px;
+ height: 60px;
+ margin-right: 5px;
+ background: url(../img/large-openended-icon.png) center no-repeat;
+}
+
+.large-annotations-icon {
+ display: inline-block;
+ width: 100px;
+ height: 60px;
+ margin-right: 5px;
+ background: url(../img/large-annotations-icon.png) center no-repeat;
+}
+
+.large-advanced-icon {
+ display: inline-block;
+ width: 100px;
+ height: 60px;
+ margin-right: 5px;
+ background: url(../img/large-advanced-icon.png) center no-repeat;
+}
+
.large-textbook-icon {
display: inline-block;
width: 100px;
diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/assets/_keyframes.scss
similarity index 100%
rename from cms/static/sass/_keyframes.scss
rename to cms/static/sass/assets/_keyframes.scss
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index e3463477c1..6a1f1bb252 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -1,34 +1,52 @@
+// studio - css architecture
+// ====================
+
+// bourbon libs and resets
@import 'bourbon/bourbon';
+@import 'bourbon/addons/button';
@import 'vendor/normalize';
-@import 'keyframes';
-
@import 'reset';
+
+// utilities
+@import 'variables';
@import 'mixins';
+@import 'cms_mixins';
-@import "fonts";
-@import "variables";
-@import "cms_mixins";
-@import "base";
-@import "header";
-@import "dashboard";
-@import "courseware";
-@import "subsection";
-@import "unit";
-@import "assets";
-@import "static-pages";
-@import "users";
-@import "import";
-@import "export";
-@import "settings";
-@import "course-info";
-@import "landing";
-@import "graphics";
-@import "modal";
-@import "alerts";
-@import "login";
-@import 'jquery-ui-calendar';
+// assets
+@import 'assets/fonts';
+@import 'assets/graphics';
+@import 'assets/keyframes';
-@import 'content-types';
+// base
+@import 'base';
+// elements
+@import 'elements/header';
+@import 'elements/footer';
+@import 'elements/navigation';
+@import 'elements/forms';
+@import 'elements/modal';
+@import 'elements/alerts';
+@import 'elements/jquery-ui-calendar';
+
+// specific views
+@import 'views/account';
+@import 'views/assets';
+@import 'views/updates';
+@import 'views/dashboard';
+@import 'views/export';
+@import 'views/index';
+@import 'views/import';
+@import 'views/outline';
+@import 'views/settings';
+@import 'views/static-pages';
+@import 'views/subsection';
+@import 'views/unit';
+@import 'views/users';
+@import 'views/checklists';
+
+@import 'assets/content-types';
+
+// xblock-related
@import 'module/module-styles.scss';
@import 'descriptor/module-styles.scss';
diff --git a/cms/static/sass/elements/_alerts.scss b/cms/static/sass/elements/_alerts.scss
new file mode 100644
index 0000000000..9c15f811e0
--- /dev/null
+++ b/cms/static/sass/elements/_alerts.scss
@@ -0,0 +1,165 @@
+// studio - elements - alerts, notifications, prompts
+// ====================
+
+// notifications
+.wrapper-notification {
+ @include clearfix();
+ @include box-sizing(border-box);
+ @include transition (bottom 2.0s ease-in-out 5s);
+ @include box-shadow(0 -1px 2px rgba(0,0,0,0.1));
+ position: fixed;
+ bottom: -100px;
+ z-index: 1000;
+ width: 100%;
+ overflow: hidden;
+ opacity: 0;
+ border-top: 1px solid $darkGrey;
+ padding: 20px 40px;
+
+ &.is-shown {
+ bottom: 0;
+ opacity: 1.0;
+ }
+
+ &.wrapper-notification-warning {
+ border-color: shade($yellow, 25%);
+ background: tint($yellow, 25%);
+ }
+
+ &.wrapper-notification-error {
+ border-color: shade($red, 50%);
+ background: tint($red, 20%);
+ color: $white;
+ }
+
+ &.wrapper-notification-confirm {
+ border-color: shade($green, 30%);
+ background: tint($green, 40%);
+ color: shade($green, 30%);
+ }
+}
+
+.notification {
+ @include box-sizing(border-box);
+ margin: 0 auto;
+ width: flex-grid(12);
+ max-width: $fg-max-width;
+ min-width: $fg-min-width;
+
+ .copy {
+ float: left;
+ width: flex-grid(9, 12);
+ margin-right: flex-gutter();
+ margin-top: 5px;
+ font-size: 14px;
+
+ .icon {
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 5px;
+ font-size: 20px;
+ }
+
+ p {
+ width: flex-grid(8, 9);
+ display: inline-block;
+ vertical-align: top;
+ }
+ }
+
+ .actions {
+ float: right;
+ width: flex-grid(3, 12);
+ margin-top: ($baseline/2);
+ text-align: right;
+
+ li {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 10px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ .save-button {
+ @include blue-button;
+ }
+
+ .cancel-button {
+ @include white-button;
+ }
+ }
+
+ strong {
+ font-weight: 700;
+ }
+}
+
+// adopted alerts
+.alert {
+ padding: 15px 20px;
+ margin-bottom: 30px;
+ border-radius: 3px;
+ border: 1px solid #edbd3c;
+ border-radius: 3px;
+ background: #fbf6e1;
+ // background: #edbd3c;
+ font-size: 14px;
+ @include clearfix;
+
+ .alert-message {
+ float: left;
+ margin-top: 4px;
+ }
+
+ strong {
+ font-weight: 700;
+ }
+
+ .alert-action {
+ float: right;
+
+ &.secondary {
+ @include orange-button;
+ }
+ }
+}
+
+body.error {
+ background: $darkGrey;
+ color: #3c3c3c;
+
+ .primary-header {
+ display: none;
+ }
+
+ .error-prompt {
+ width: 700px;
+ margin: 150px auto;
+ padding: 60px 50px 90px;
+ border-radius: 3px;
+ background: #fff;
+ text-align: center;
+ }
+
+ h1 {
+ float: none;
+ margin: 0;
+ font-size: 60px;
+ font-weight: 300;
+ color: #3c3c3c;
+ }
+
+ .description {
+ margin-bottom: 50px;
+ font-size: 21px;
+ }
+
+ .back-button {
+ @include blue-button;
+ padding: 14px 40px 18px;
+ font-size: 18px;
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss
new file mode 100644
index 0000000000..b1c0f57bb2
--- /dev/null
+++ b/cms/static/sass/elements/_footer.scss
@@ -0,0 +1,50 @@
+// studio - elements - global footer
+// ====================
+
+.wrapper-footer {
+ margin: ($baseline*1.5) 0 $baseline 0;
+ padding: $baseline;
+ position: relative;
+ width: 100%;
+
+ footer.primary {
+ @include clearfix();
+ @include font-size(13);
+ max-width: $fg-max-width;
+ min-width: $fg-min-width;
+ width: flex-grid(12);
+ margin: 0 auto;
+ padding-top: $baseline;
+ border-top: 1px solid $gray-l4;
+ color: $gray-l2;
+
+ .colophon {
+ width: flex-grid(4, 12);
+ float: left;
+ margin-right: flex-gutter(2);
+ }
+
+ .nav-peripheral {
+ width: flex-grid(6, 12);
+ float: right;
+ text-align: right;
+
+ .nav-item {
+ display: inline-block;
+ margin-right: ($baseline/2);
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+
+ a {
+ color: $gray-l1;
+
+ &:hover, &:active {
+ color: $blue;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
new file mode 100644
index 0000000000..384ffc0509
--- /dev/null
+++ b/cms/static/sass/elements/_forms.scss
@@ -0,0 +1,76 @@
+// studio - elements - forms
+// ====================
+
+// forms - general
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea.text {
+ padding: 6px 8px 8px;
+ @include box-sizing(border-box);
+ border: 1px solid $mediumGrey;
+ border-radius: 2px;
+ @include linear-gradient($lightGrey, tint($lightGrey, 90%));
+ background-color: $lightGrey;
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+ font-family: 'Open Sans', sans-serif;
+ font-size: 11px;
+ color: $baseFontColor;
+ outline: 0;
+
+ &::-webkit-input-placeholder,
+ &:-moz-placeholder,
+ &:-ms-input-placeholder {
+ color: #979faf;
+ }
+
+ &:focus {
+ @include linear-gradient($paleYellow, tint($paleYellow, 90%));
+ outline: 0;
+ }
+}
+
+// forms - specific
+input.search {
+ padding: 6px 15px 8px 30px;
+ @include box-sizing(border-box);
+ border: 1px solid $darkGrey;
+ border-radius: 20px;
+ background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
+ font-family: 'Open Sans', sans-serif;
+ color: $baseFontColor;
+ outline: 0;
+
+ &::-webkit-input-placeholder {
+ color: #979faf;
+ }
+}
+
+label {
+ font-size: 12px;
+}
+
+code {
+ padding: 0 4px;
+ border-radius: 3px;
+ background: #eee;
+ font-family: Monaco, monospace;
+}
+
+.CodeMirror {
+ font-size: 13px;
+ border: 1px solid $darkGrey;
+ background: #fff;
+}
+
+.text-editor {
+ width: 100%;
+ min-height: 80px;
+ padding: 10px;
+ @include box-sizing(border-box);
+ border: 1px solid $mediumGrey;
+ @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
+ background-color: #edf1f5;
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
+ font-family: Monaco, monospace;
+}
\ No newline at end of file
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
new file mode 100644
index 0000000000..e8df37f57f
--- /dev/null
+++ b/cms/static/sass/elements/_header.scss
@@ -0,0 +1,562 @@
+// studio - elements - global header
+// ====================
+
+.wrapper-header {
+ margin: 0 0 ($baseline*1.5) 0;
+ padding: $baseline;
+ border-bottom: 1px solid $gray;
+ @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+ background: $white;
+ height: 76px;
+ position: relative;
+ width: 100%;
+ z-index: 10;
+
+ a {
+ color: $baseFontColor;
+ display: block;
+
+ &:hover, &:active {
+ color: $blue;
+ }
+ }
+
+ header.primary {
+ @include clearfix();
+ max-width: $fg-max-width;
+ min-width: $fg-min-width;
+ width: flex-grid(12);
+ margin: 0 auto;
+ color: $gray-l1;
+ }
+
+ nav .nav-item {
+ display: inline-block;
+ }
+}
+
+// ====================
+
+// basic layout
+.wrapper-left, .wrapper-right {
+ @include box-sizing(border-box);
+}
+
+.wrapper-left {
+ width: flex-grid(10, 12);
+ float: left;
+ margin-right: flex-gutter();
+}
+
+.wrapper-right {
+ width: flex-grid(2, 12);
+ float: right;
+}
+
+// ====================
+
+// specific elements - branding
+.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
+ display: inline-block;
+ vertical-align: top;
+}
+
+.branding {
+ position: relative;
+ margin: 0 ($baseline/2) 0 0;
+ padding-right: ($baseline*0.75);
+
+ a {
+ @include text-hide();
+ display: block;
+ width: 164px;
+ height: 32px;
+ background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
+ }
+}
+
+// ====================
+
+// specific elements - course name/info
+.info-course {
+ @include font-size(14);
+ position: relative;
+ margin: -3px ($baseline/2) 0 0;
+ padding-right: ($baseline*0.75);
+
+ &:before {
+ @extend .faded-vertical-divider;
+ content: "";
+ display: block;
+ height: 50px;
+ position: absolute;
+ right: 1px;
+ top: -8px;
+ width: 1px;
+ }
+
+ &:after {
+ @extend .faded-vertical-divider-light;
+ content: "";
+ display: block;
+ height: 50px;
+ position: absolute;
+ right: 0px;
+ top: -12px;
+ width: 1px;
+ }
+
+ .course-org {
+ margin-right: ($baseline/4);
+ }
+
+ .course-number, .course-org {
+ @include font-size(12);
+ display: inline-block;
+ }
+
+ .course-title {
+ display: block;
+ width: 100%;
+ max-width: 220px;
+ overflow: hidden;
+ margin-top: -4px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ @include font-size(16);
+ font-weight: 600;
+ }
+}
+
+// ====================
+
+// specific elements - course nav
+.nav-course {
+ width: 335px;
+ margin-top: -($baseline/4);
+ @include font-size(14);
+
+ > ol > .nav-item {
+ vertical-align: bottom;
+ margin: 0 ($baseline/2) 0 0;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .title {
+ display: block;
+ padding: 5px;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: $gray-d3;
+
+ .label-prefix {
+ display: block;
+ @include font-size(11);
+ font-weight: 400;
+ }
+ }
+
+ // specific nav items
+ &.nav-course-courseware {
+ }
+
+ &.nav-course-settings {
+ }
+
+ &.nav-course-tools {
+ }
+ }
+}
+
+// ====================
+
+// specific elements - account-based nav
+.nav-account {
+ width: 100%;
+ margin-top: ($baseline*0.75);
+ @include font-size(14);
+ text-align: right;
+
+ .nav-account-username {
+ width: 100%;
+
+ .icon-user {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 3px;
+ @include font-size(12);
+ }
+
+ .account-username {
+ display: inline-block;
+ vertical-align: middle;
+ width: 80%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .icon-expand {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ }
+}
+
+// ====================
+
+// UI - dropdown
+.nav-dropdown {
+
+ .nav-item {
+ position: relative;
+
+ .icon-expand {
+ @include font-size(14);
+ @include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
+ display: inline-block;
+ margin-left: 2px;
+ opacity: 0.5;
+ color: $gray-l2;
+ }
+
+ &:hover {
+
+ .icon-expand {
+ color: $blue;
+ opacity: 1.0;
+ }
+ }
+ }
+
+ .wrapper-nav-sub {
+ position: absolute;
+ left: -7px;
+ top: 47px;
+ width: 140px;
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .nav-sub {
+ @include border-radius(2px);
+ @include box-sizing(border-box);
+ @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+ position: relative;
+ width: 100%;
+ border: 1px solid $gray-l2;
+ padding: ($baseline/4) ($baseline/2);
+ background: $white;
+
+ &:after, &:before {
+ bottom: 100%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ }
+
+ &:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-bottom-color: #fff;
+ border-width: 5px;
+ right: 3px;
+ margin-left: -5px;
+ }
+
+ &:before {
+ border-color: rgba(178, 178, 178, 0);
+ border-bottom-color: $gray-l2;
+ border-width: 6px;
+ right: 3px;
+ margin-left: -6px;
+ }
+
+ .nav-item {
+ display: block;
+ margin: 0 0 ($baseline/4) 0;
+ border-bottom: 1px solid $gray-l5;
+ padding: 0 0($baseline/4) 0;
+ @include font-size(13);
+
+ &:last-child {
+ margin-bottom: 0;
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ a {
+ display: block;
+ }
+ }
+ }
+
+ // UI - dropdown - specific navs
+ &.nav-account {
+
+ .wrapper-nav-sub {
+ top: 27px;
+ left: auto;
+ right: -13px;
+ width: 110px;
+ }
+
+ .nav-sub {
+ text-align: left;
+
+ .icon-expand {
+ top: -2px;
+ }
+ }
+
+ .nav-sub:after {
+ left: auto;
+ right: 11px;
+ }
+
+ .nav-sub:before {
+ left: auto;
+ right: 10px;
+ }
+ }
+
+ &.nav-course {
+
+ .nav-course-courseware {
+
+ .nav-sub:after {
+ left: 88px;
+ }
+
+ .nav-sub:before {
+ left: 88px;
+ }
+ }
+
+ .nav-course-settings {
+
+ .nav-sub:after {
+ left: 88px;
+ }
+
+ .nav-sub:before {
+ left: 88px;
+ }
+ }
+
+ .nav-course-tools {
+
+ .wrapper-nav-sub {
+ top: ($baseline*1.5);
+ width: 100px;
+ }
+
+ .nav-sub:after {
+ left: 68px;
+ }
+
+ .nav-sub:before {
+ left: 68px;
+ }
+ }
+ }
+}
+
+// ====================
+
+// STATE: is-signed in
+.is-signedin {
+
+ &.course .branding {
+
+ &:before {
+ @extend .faded-vertical-divider;
+ content: "";
+ display: block;
+ height: 50px;
+ position: absolute;
+ right: 1px;
+ top: -8px;
+ width: 1px;
+ }
+
+ &:after {
+ @extend .faded-vertical-divider-light;
+ content: "";
+ display: block;
+ height: 50px;
+ position: absolute;
+ right: 0px;
+ top: -12px;
+ width: 1px;
+ }
+ }
+}
+
+// ====================
+
+// STATE: not signed in
+.not-signedin {
+
+ .wrapper-left {
+ width: flex-grid(4, 12);
+ }
+
+ .wrapper-right {
+ width: flex-grid(8, 12);
+ }
+
+ // STATE: not signed in - unauthenticated nav
+ .nav-not-signedin {
+ float: right;
+ margin-top: ($baseline/4);
+
+ .nav-item {
+ @include font-size(16);
+ vertical-align: middle;
+ margin: 0 $baseline 0 0;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .action {
+ margin-top: -($baseline/4);
+ display: inline-block;
+ padding: ($baseline/4) ($baseline/2);
+ }
+ }
+
+ // STATE: not signed in - specific items
+ .nav-not-signedin-help {
+
+ }
+
+ .nav-not-signedin-signup {
+ margin-right: ($baseline/2);
+
+ .action-signup {
+ @include blue-button;
+ @include transition(all .15s);
+ @include font-size(14);
+ padding: ($baseline/4) ($baseline/2);
+ text-transform: uppercase;
+ font-weight: 600;
+ }
+ }
+
+ .nav-not-signedin-signin {
+
+ .action-signin {
+ @include white-button;
+ @include transition(all .15s);
+ @include font-size(14);
+ padding: ($baseline/4) ($baseline/2);
+ text-transform: uppercase;
+ font-weight: 600;
+ }
+ }
+ }
+}
+
+// ====================
+
+// STATE: active/current nav states
+
+.nav-item.is-current,
+body.howitworks .nav-not-signedin-hiw,
+
+// dashboard
+body.dashboard .nav-account-dashboard,
+
+// course content
+body.course.outline .nav-course-courseware .title,
+body.course.updates .nav-course-courseware .title,
+body.course.pages .nav-course-courseware .title,
+body.course.uploads .nav-course-courseware .title,
+
+body.course.outline .nav-course-courseware-outline,
+body.course.updates .nav-course-courseware-updates,
+body.course.pages .nav-course-courseware-pages,
+body.course.uploads .nav-course-courseware-uploads,
+
+// course settings
+body.course.schedule .nav-course-settings .title,
+body.course.grading .nav-course-settings .title,
+body.course.team .nav-course-settings .title,
+body.course.advanced .nav-course-settings .title,
+
+body.course.schedule .nav-course-settings-schedule,
+body.course.grading .nav-course-settings-grading,
+body.course.team .nav-course-settings-team,
+body.course.advanced .nav-course-settings-advanced,
+
+// course tools
+body.course.import .nav-course-tools .title,
+body.course.export .nav-course-tools .title,
+
+body.course.import .nav-course-tools-import,
+body.course.export .nav-course-tools-export,
+
+{
+
+ color: $blue;
+
+ a {
+ color: $blue;
+ pointer-events: none;
+ }
+}
+
+body.signup .nav-not-signedin-signin {
+
+ a {
+ background-color: #d9e3ee;
+ color: #6d788b;
+ }
+}
+
+body.signin .nav-not-signedin-signup {
+
+ a {
+ background-color: #62aaf5;
+ color: #fff;
+ }
+}
+
+// ====================
+
+// STATE: js enabled
+.js {
+
+ .nav-dropdown {
+
+ .nav-item .title {
+ outline: 0;
+ cursor: pointer;
+
+ &:hover, &:active, &.is-selected {
+ color: $blue;
+
+ .icon-expand {
+ color: $blue;
+ }
+ }
+ }
+ }
+
+ .wrapper-nav-sub {
+ @include transition (opacity 1.0s ease-in-out 0s);
+ opacity: 0;
+ pointer-events: none;
+
+ &.is-shown {
+ opacity: 1.0;
+ pointer-events: auto;
+ }
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/_jquery-ui-calendar.scss b/cms/static/sass/elements/_jquery-ui-calendar.scss
similarity index 94%
rename from cms/static/sass/_jquery-ui-calendar.scss
rename to cms/static/sass/elements/_jquery-ui-calendar.scss
index 96cffc059f..3d20bde642 100644
--- a/cms/static/sass/_jquery-ui-calendar.scss
+++ b/cms/static/sass/elements/_jquery-ui-calendar.scss
@@ -1,3 +1,6 @@
+// studio - elements - JQUI calendar
+// ====================
+
.ui-datepicker {
border-color: $darkGrey;
border-radius: 2px;
diff --git a/cms/static/sass/_modal.scss b/cms/static/sass/elements/_modal.scss
similarity index 78%
rename from cms/static/sass/_modal.scss
rename to cms/static/sass/elements/_modal.scss
index 854d1e1045..b81baf4565 100644
--- a/cms/static/sass/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -1,3 +1,6 @@
+// studio - elements - modal windows
+// ====================
+
.modal-cover {
display: none;
position: fixed;
@@ -54,4 +57,16 @@
@include white-button;
margin-top: 13px;
}
+}
+
+// lean modal alternative
+#lean_overlay {
+ position: fixed;
+ z-index: 10000;
+ top: 0px;
+ left: 0px;
+ display: none;
+ height: 100%;
+ width: 100%;
+ background: $black;
}
\ No newline at end of file
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
new file mode 100644
index 0000000000..066c47298b
--- /dev/null
+++ b/cms/static/sass/elements/_navigation.scss
@@ -0,0 +1,24 @@
+// studio - elements - navigation
+// ====================
+
+// common
+
+// ====================
+
+// primary
+
+// ====================
+
+// right hand side
+
+// ====================
+
+// tabs
+
+// ====================
+
+// dropdown
+
+// ====================
+
+//
\ No newline at end of file
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
new file mode 100644
index 0000000000..1206db5e76
--- /dev/null
+++ b/cms/static/sass/views/_account.scss
@@ -0,0 +1,295 @@
+// studio - views - sign up/in
+// ====================
+
+body.signup, body.signin {
+
+ .wrapper-content {
+ margin: 0;
+ padding: 0 $baseline;
+ position: relative;
+ width: 100%;
+ }
+
+ .content {
+ @include clearfix();
+ @include font-size(16);
+ max-width: $fg-max-width;
+ min-width: $fg-min-width;
+ width: flex-grid(12);
+ margin: 0 auto;
+ color: $gray-d2;
+
+ header {
+ position: relative;
+ margin-bottom: $baseline;
+ border-bottom: 1px solid $gray-l4;
+ padding-bottom: ($baseline/2);
+
+ h1 {
+ @include font-size(32);
+ margin: 0;
+ padding: 0;
+ font-weight: 600;
+ }
+
+ .action {
+ @include font-size(13);
+ position: absolute;
+ right: 0;
+ top: 40%;
+ }
+ }
+
+ .introduction {
+ @include font-size(14);
+ margin: 0 0 $baseline 0;
+ }
+ }
+
+ .content-primary, .content-supplementary {
+ @include box-sizing(border-box);
+ float: left;
+ }
+
+ .content-primary {
+ width: flex-grid(8, 12);
+ margin-right: flex-gutter();
+
+ form {
+ @include box-sizing(border-box);
+ @include box-shadow(0 1px 2px $shadow-l1);
+ @include border-radius(2px);
+ width: 100%;
+ border: 1px solid $gray-l2;
+ padding: $baseline ($baseline*1.5);
+ background: $white;
+
+ .form-actions {
+ margin-top: $baseline;
+
+ .action-primary {
+ @include blue-button;
+ @include transition(all .15s);
+ @include font-size(15);
+ display:block;
+ width: 100%;
+ padding: ($baseline*0.75) ($baseline/2);
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+ }
+
+ .list-input {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ .field {
+ margin: 0 0 ($baseline*0.75) 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &.required {
+
+ label {
+ font-weight: 600;
+ }
+
+ label:after {
+ margin-left: ($baseline/4);
+ content: "*";
+ }
+ }
+
+ label, input, textarea {
+ display: block;
+ }
+
+ label {
+ @include font-size(14);
+ @include transition(color, 0.15s, ease-in-out);
+ margin: 0 0 ($baseline/4) 0;
+
+ &.is-focused {
+ color: $blue;
+ }
+ }
+
+ input, textarea {
+ @include font-size(16);
+ height: 100%;
+ width: 100%;
+ padding: ($baseline/2);
+
+ &.long {
+ width: 100%;
+ }
+
+ &.short {
+ width: 25%;
+ }
+
+ ::-webkit-input-placeholder {
+ color: $gray-l4;
+ }
+
+ :-moz-placeholder {
+ color: $gray-l3;
+ }
+
+ ::-moz-placeholder {
+ color: $gray-l3;
+ }
+
+ :-ms-input-placeholder {
+ color: $gray-l3;
+ }
+
+ &:focus {
+
+ + .tip {
+ color: $gray;
+ }
+ }
+ }
+
+ textarea.long {
+ height: ($baseline*5);
+ }
+
+ input[type="checkbox"] {
+ display: inline-block;
+ margin-right: ($baseline/4);
+ width: auto;
+ height: auto;
+
+ & + label {
+ display: inline-block;
+ }
+ }
+
+ .tip {
+ @include transition(color, 0.15s, ease-in-out);
+ @include font-size(13);
+ display: block;
+ margin-top: ($baseline/4);
+ color: $gray-l3;
+ }
+ }
+
+ .field-group {
+ @include clearfix();
+ margin: 0 0 ($baseline/2) 0;
+
+ .field {
+ display: block;
+ width: 47%;
+ border-bottom: none;
+ margin: 0 $baseline 0 0;
+ padding-bottom: 0;
+
+ &:nth-child(odd) {
+ float: left;
+ }
+
+ &:nth-child(even) {
+ float: right;
+ margin-right: 0;
+ }
+
+ input, textarea {
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .content-supplementary {
+ width: flex-grid(4, 12);
+
+ .bit {
+ @include font-size(13);
+ margin: 0 0 $baseline 0;
+ border-bottom: 1px solid $gray-l4;
+ padding: 0 0 $baseline 0;
+ color: $gray-l1;
+
+ &:last-child {
+ margin-bottom: 0;
+ border: none;
+ padding-bottom: 0;
+ }
+
+ h3 {
+ @include font-size(14);
+ margin: 0 0 ($baseline/4) 0;
+ color: $gray-d2;
+ font-weight: 600;
+ }
+
+ }
+ }
+}
+
+.signup {
+
+}
+
+.signin {
+
+ #field-password {
+ position: relative;
+
+ .action-forgotpassword {
+ @include font-size(13);
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
+ }
+}
+
+// ====================
+
+// messages
+.message {
+ @include font-size(14);
+ display: block;
+}
+
+.message-status {
+ display: none;
+ @include border-top-radius(2px);
+ @include box-sizing(border-box);
+ border-bottom: 2px solid $yellow-d2;
+ margin: 0 0 $baseline 0;
+ padding: ($baseline/2) $baseline;
+ font-weight: 500;
+ background: $yellow-d1;
+ color: $white;
+
+ .ss-icon {
+ position: relative;
+ top: 3px;
+ @include font-size(16);
+ display: inline-block;
+ margin-right: ($baseline/2);
+ }
+
+ .text {
+ display: inline-block;
+ }
+
+ &.error {
+ border-color: shade($red, 50%);
+ background: tint($red, 20%);
+ }
+
+ &.is-shown {
+ display: block;
+ }
+}
diff --git a/cms/static/sass/_assets.scss b/cms/static/sass/views/_assets.scss
similarity index 97%
rename from cms/static/sass/_assets.scss
rename to cms/static/sass/views/_assets.scss
index 5f735dd82b..779dc56684 100644
--- a/cms/static/sass/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -1,4 +1,8 @@
-.assets {
+// studio - views - assets
+// ====================
+
+body.course.uploads {
+
input.asset-search-input {
float: left;
width: 260px;
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
new file mode 100644
index 0000000000..e9ad540483
--- /dev/null
+++ b/cms/static/sass/views/_checklists.scss
@@ -0,0 +1,347 @@
+// Studio - Course Settings
+// ====================
+body.course.checklists {
+
+ .content-primary, .content-supplementary {
+ @include box-sizing(border-box);
+ float: left;
+ }
+
+ .content-primary {
+ width: flex-grid(9, 12);
+ margin-right: flex-gutter();
+ }
+
+ // checklists - general
+ .course-checklist {
+ @extend .window;
+ margin: 0 0 ($baseline*2) 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ // visual status
+ .viz-checklist-status {
+ @include text-hide();
+ @include size(100%,($baseline/4));
+ position: relative;
+ display: block;
+ margin: 0;
+ background: $gray-l4;
+
+ .viz-checklist-status-value {
+ @include transition(width 2s ease-in-out .25s);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0%;
+ height: ($baseline/4);
+ background: $green;
+
+ .int {
+ @include text-sr();
+ }
+ }
+ }
+ // 0% of checklist completed
+
+ // header/title
+ header {
+ @include clearfix();
+ @include box-shadow(inset 0 -1px 1px $shadow-l1);
+ margin-bottom: 0;
+ border-bottom: 1px solid $gray-l3;
+ padding: $baseline ($baseline*1.5);
+
+ .checklist-title {
+ @include transition(color .15s .25s ease-in-out);
+ width: flex-grid(6, 9);
+ margin: 0 flex-gutter() 0 0;
+ float: left;
+
+ .ui-toggle-expansion {
+ @include transition(rotate .15s ease-in-out .25s);
+ @include font-size(14);
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: ($baseline/2);
+ color: $gray-l4;
+ }
+
+ &.is-selectable {
+ cursor: pointer;
+
+ &:hover {
+ color: $blue;
+
+ .ui-toggle-expansion {
+ color: $blue;
+ }
+ }
+ }
+ }
+
+ .checklist-status {
+ @include font-size(13);
+ width: flex-grid(3, 9);
+ float: right;
+ margin-top: ($baseline/2);
+ text-align: right;
+ color: $gray-l2;
+
+
+ .icon-confirm {
+ @include font-size(20);
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: ($baseline/2);
+ color: $gray-l4;
+ }
+
+ .status-count {
+ @include font-size(16);
+ margin-left: ($baseline/4);
+ margin-right: ($baseline/4);
+ color: $gray-d3;
+ font-weight: 600;
+ }
+
+ .status-amount {
+ @include font-size(16);
+ margin-left: ($baseline/4);
+ color: $gray-d3;
+ font-weight: 600;
+ }
+ }
+ }
+
+ // checklist actions
+ .course-checklist-actions {
+ @include clearfix();
+ @include box-shadow(inset 0 1px 1px $shadow-l1);
+ @include transition(border .15s ease-in-out .25s);
+ border-top: 1px solid $gray-l2;
+ padding: $baseline ($baseline*1.5);
+ background: $gray-l4;
+
+ .action-primary {
+ @include green-button();
+ float: left;
+
+ .icon-add {
+ @include font-size(12);
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: ($baseline/4);
+ }
+ }
+
+ .action-secondary {
+ @include font-size(14);
+ @include grey-button();
+ font-weight: 400;
+ float: right;
+
+ .icon-delete {
+ @include font-size(12);
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: ($baseline/4);
+ }
+ }
+ }
+
+ // state - collapsed
+ &.is-collapsed {
+
+ header {
+ @include box-shadow(none);
+
+ .checklist-title {
+
+ .ui-toggle-expansion {
+ @include transform(rotate(-90deg));
+ @include transform-origin(50% 50%);
+ }
+ }
+ }
+
+ .list-tasks {
+ height: 0;
+ }
+ }
+
+ // state - completed
+ &.is-completed {
+
+ .viz-checklist-status {
+
+ .viz-checklist-status-value {
+ width: 100%;
+ }
+ }
+
+ header {
+
+ .checklist-title, .icon-confirm {
+ color: $green;
+ }
+
+ .checklist-status {
+
+ .status-count, .status-amount, .icon-confirm {
+ color: $green;
+ }
+ }
+ }
+ }
+
+ // state - not available
+ .is-not-available {
+
+ }
+ }
+
+ // list of tasks
+ .list-tasks {
+ height: auto;
+ overflow: hidden;
+
+ .task {
+ @include transition(background .15s ease-in-out .25s);
+ @include transition(border .15s ease-in-out .25s);
+ @include clearfix();
+ position: relative;
+ border-top: 1px solid $white;
+ border-bottom: 1px solid $gray-l5;
+ padding: $baseline ($baseline*1.5);
+ background: $white;
+ opacity: 1.0;
+
+
+ &:last-child {
+ margin-bottom: 0;
+ border-bottom: none;
+ }
+
+ .task-input {
+ display: inline-block;
+ vertical-align: text-top;
+ float: left;
+ margin: ($baseline/2) flex-gutter() 0 0;
+ }
+
+ .task-details {
+ display: inline-block;
+ vertical-align: text-top;
+ float: left;
+ width: flex-grid(6,9);
+ font-weight: 500;
+
+ .task-name {
+ @include transition(color .15s .25s ease-in-out);
+ vertical-align: baseline;
+ cursor: pointer;
+ margin-bottom: 0;
+ }
+
+ .task-description {
+ @include transition(color .15s .25s ease-in-out);
+ @include font-size(14);
+ color: $gray-l2;
+ }
+
+ .task-support {
+ @include transition(opacity .15s .25s ease-in-out);
+ @include font-size(12);
+ opacity: 0;
+ pointer-events: none;
+ }
+ }
+
+ .task-actions {
+ @include transition(opacity .15s .25s ease-in-out);
+ @include clearfix();
+ display: inline-block;
+ vertical-align: middle;
+ float: right;
+ width: flex-grid(2,9);
+ margin: ($baseline/2) 0 0 flex-gutter();
+ opacity: 0;
+ pointer-events: none;
+ text-align: right;
+
+ .action-primary {
+ @include blue-button;
+ @include transition(all .15s);
+ @include font-size(12);
+ font-weight: 600;
+ text-align: center;
+ }
+
+ .action-secondary {
+ @include font-size(13);
+ margin-top: ($baseline/2);
+ }
+ }
+
+ // state - hover
+ &:hover {
+ background: $blue-l5;
+ border-bottom-color: $blue-l4;
+ border-top-color: $blue-l4;
+ opacity: 1.0;
+
+ .task-details {
+
+ .task-support {
+ opacity: 1.0;
+ pointer-events: auto;
+ }
+ }
+
+ .task-actions {
+ opacity: 1.0;
+ pointer-events: auto;
+ }
+ }
+
+
+ // state - completed
+ &.is-completed {
+ background: $gray-l6;
+ border-top-color: $gray-l5;
+ border-bottom-color: $gray-l5;
+
+ .task-name {
+ color: $gray-l2;
+ }
+
+ .task-actions {
+
+ .action-primary {
+ @include grey-button;
+ @include font-size(12);
+ font-weight: 600;
+ text-align: center;
+ }
+ }
+
+ &:hover {
+ background: $gray-l5;
+ border-bottom-color: $gray-l4;
+ border-top-color: $gray-l4;
+
+ .task-details {
+ opacity:1.0;
+ }
+ }
+ }
+ }
+ }
+
+ .content-supplementary {
+ width: flex-grid(3, 12);
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
new file mode 100644
index 0000000000..a02c4e0c29
--- /dev/null
+++ b/cms/static/sass/views/_dashboard.scss
@@ -0,0 +1,124 @@
+// studio - views - user dashboard
+// ====================
+
+body.dashboard {
+
+ .my-classes {
+ margin-top: $baseline;
+ }
+
+ .class-list {
+ margin-top: 20px;
+ border-radius: 3px;
+ border: 1px solid $darkGrey;
+ background: #fff;
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+
+ li {
+ position: relative;
+ border-bottom: 1px solid $mediumGrey;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ .class-link {
+ z-index: 100;
+ display: block;
+ padding: 20px 25px;
+ line-height: 1.3;
+
+ &:hover {
+ background: $paleYellow;
+
+ + .view-live-button {
+ opacity: 1.0;
+ pointer-events: auto;
+ }
+ }
+ }
+ }
+
+ .class-name {
+ display: block;
+ font-size: 19px;
+ font-weight: 300;
+ }
+
+ .detail {
+ font-size: 14px;
+ font-weight: 400;
+ margin-right: 20px;
+ color: #3c3c3c;
+ }
+
+ // view live button
+ .view-live-button {
+ z-index: 10000;
+ position: absolute;
+ top: 15px;
+ right: $baseline;
+ padding: ($baseline/4) ($baseline/2);
+ opacity: 0;
+ pointer-events: none;
+
+ &:hover {
+ opacity: 1.0;
+ pointer-events: auto;
+ }
+ }
+ }
+
+ .new-course {
+ padding: 15px 25px;
+ margin-top: 20px;
+ border-radius: 3px;
+ border: 1px solid $darkGrey;
+ background: #fff;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+ @include clearfix;
+
+ .row {
+ margin-bottom: 15px;
+ @include clearfix;
+ }
+
+ .column {
+ float: left;
+ width: 48%;
+ }
+
+ .column:first-child {
+ margin-right: 4%;
+ }
+
+ .course-info {
+ width: 600px;
+ }
+
+ label {
+ display: block;
+ font-size: 13px;
+ font-weight: 700;
+ }
+
+ .new-course-org,
+ .new-course-number,
+ .new-course-name {
+ width: 100%;
+ }
+
+ .new-course-name {
+ font-size: 19px;
+ font-weight: 300;
+ }
+
+ .new-course-save {
+ @include blue-button;
+ }
+
+ .new-course-cancel {
+ @include white-button;
+ }
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/_export.scss b/cms/static/sass/views/_export.scss
similarity index 96%
rename from cms/static/sass/_export.scss
rename to cms/static/sass/views/_export.scss
index e1ab7eb605..933bb50252 100644
--- a/cms/static/sass/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -1,4 +1,8 @@
-.export {
+// studio - views - course export
+// ====================
+
+body.course.export {
+
.export-overview {
@extend .window;
@include clearfix;
@@ -118,6 +122,4 @@
}
}
}
-
-
}
\ No newline at end of file
diff --git a/cms/static/sass/_import.scss b/cms/static/sass/views/_import.scss
similarity index 95%
rename from cms/static/sass/_import.scss
rename to cms/static/sass/views/_import.scss
index a0a1f5e512..e5fb955348 100644
--- a/cms/static/sass/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -1,4 +1,8 @@
-.import {
+// studio - views - course import
+// ====================
+
+body.course.import {
+
.import-overview {
@extend .window;
@include clearfix;
diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss
new file mode 100644
index 0000000000..f4087a8605
--- /dev/null
+++ b/cms/static/sass/views/_index.scss
@@ -0,0 +1,355 @@
+// studio - views - how it works
+// ====================
+
+body.index {
+
+ &.not-signedin {
+
+ .wrapper-header {
+ margin-bottom: 0;
+ }
+
+ .wrapper-footer {
+ margin: 0;
+ border-top: 2px solid $gray-l3;
+
+ footer.primary {
+ border: none;
+ margin-top: 0;
+ padding-top: 0;
+ }
+ }
+
+ .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
+ @include box-sizing(border-box);
+ margin: 0;
+ padding: 0 $baseline;
+ position: relative;
+ width: 100%;
+ }
+
+ .content {
+ @include clearfix();
+ @include font-size(16);
+ max-width: $fg-max-width;
+ min-width: $fg-min-width;
+ width: flex-grid(12);
+ margin: 0 auto;
+ color: $gray-d2;
+
+ header {
+ border: none;
+ padding-bottom: 0;
+ margin-bottom: 0;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ color: $gray-d3;
+ }
+
+ h2 {
+
+ }
+
+ h3 {
+
+ }
+
+ h4 {
+
+ }
+ }
+
+ // welcome content
+ .wrapper-content-header {
+ @include linear-gradient($blue-l1,$blue,$blue-d1);
+ padding-bottom: ($baseline*4);
+ padding-top: ($baseline*4);
+ }
+
+ .content-header {
+ position: relative;
+ text-align: center;
+ color: $white;
+
+ h1 {
+ @include font-size(52);
+ float: none;
+ margin: 0 0 ($baseline/2) 0;
+ border-bottom: 1px solid $blue-l1;
+ padding: 0;
+ font-weight: 500;
+ color: $white;
+ }
+
+ .logo {
+ @include text-hide();
+ position: relative;
+ top: 3px;
+ display: inline-block;
+ vertical-align: baseline;
+ width: 282px;
+ height: 57px;
+ background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat;
+ }
+
+ .tagline {
+ @include font-size(24);
+ margin: 0;
+ color: $blue-l3;
+ }
+ }
+
+ .arrow_box {
+ position: relative;
+ background: #fff;
+ border: 4px solid #000;
+ }
+ .arrow_box:after, .arrow_box:before {
+ top: 100%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ }
+
+ .arrow_box:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-top-color: #fff;
+ border-width: 30px;
+ left: 50%;
+ margin-left: -30px;
+ }
+ .arrow_box:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-top-color: #000;
+ border-width: 36px;
+ left: 50%;
+ margin-left: -36px;
+ }
+
+ // feature content
+ .wrapper-content-features {
+ @include box-shadow(0 -1px ($baseline/4) $shadow);
+ padding-bottom: ($baseline*2);
+ padding-top: ($baseline*3);
+ background: $white;
+ }
+
+ .content-features {
+
+ .list-features {
+
+ }
+
+ // indiv features
+ .feature {
+ @include clearfix();
+ margin: 0 0 ($baseline*2) 0;
+ border-bottom: 1px solid $gray-l4;
+ padding: 0 0 ($baseline*2) 0;
+
+ .img {
+ @include box-sizing(border-box);
+ float: left;
+ width: flex-grid(3, 12);
+ margin-right: flex-gutter();
+
+ a {
+ @include box-sizing(border-box);
+ @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+ position: relative;
+ top: 0;
+ display: block;
+ overflow: hidden;
+ border: 1px solid $gray-l3;
+ padding: ($baseline/4);
+ background: $white;
+
+ .action-zoom {
+ @include transition(bottom .50s ease-in-out);
+ position: absolute;
+ bottom: -30px;
+ right: ($baseline/2);
+ opacity: 0;
+
+ .ss-icon {
+ @include font-size(18);
+ @include border-top-radius(3px);
+ display: inline-block;
+ padding: ($baseline/4) ($baseline/2);
+ background: $blue;
+ color: $white;
+ text-align: center;
+ }
+ }
+
+ &:hover {
+ border-color: $blue;
+
+ .action-zoom {
+ opacity: 1.0;
+ bottom: -2px;
+ }
+ }
+ }
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .copy {
+ float: left;
+ width: flex-grid(9, 12);
+ margin-top: -($baseline/4);
+
+ h3 {
+ margin: 0 0 ($baseline/2) 0;
+ @include font-size(24);
+ font-weight: 600;
+ }
+
+ > p {
+ @include font-size(18);
+ color: $gray-d1;
+ }
+
+ strong {
+ color: $gray-d2;
+ font-weight: 500;
+ }
+
+ .list-proofpoints {
+ @include clearfix();
+ @include font-size(14);
+ width: flex-grid(9, 9);
+ margin: ($baseline*1.5) 0 0 0;
+
+ .proofpoint {
+ @include box-sizing(border-box);
+ @include border-radius(($baseline/4));
+ @include transition(color .50s ease-in-out);
+ position: relative;
+ top: 0;
+ float: left;
+ width: flex-grid(3, 9);
+ min-height: ($baseline*8);
+ margin-right: flex-gutter();
+ padding: ($baseline*0.75) $baseline;
+ color: $gray-l1;
+
+ .title {
+ @include font-size(16);
+ margin: 0 0 ($baseline/4) 0;
+ font-weight: 500;
+ color: $gray-d3;
+ }
+
+ &:hover {
+ @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+ background: $blue-l5;
+ top: -($baseline/5);
+
+ .title {
+ color: $blue;
+ }
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+
+ &:last-child {
+ margin-bottom: 0;
+ border: none;
+ padding-bottom: 0;
+ }
+
+ &:nth-child(even) {
+
+ .img {
+ float: right;
+ margin-right: 0;
+ margin-left: flex-gutter();
+ }
+
+ .copy {
+ float: right;
+ text-align: right;
+ }
+
+ .list-proofpoints {
+
+ .proofpoint {
+ float: right;
+ width: flex-grid(3, 9);
+ margin-left: flex-gutter();
+ margin-right: 0;
+
+ &:last-child {
+ margin-left: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // call to action content
+ .wrapper-content-cta {
+ padding-bottom: ($baseline*2);
+ padding-top: ($baseline*2);
+ background: $white;
+ }
+
+ .content-cta {
+ border-top: 1px solid $gray-l4;
+
+ header {
+ border: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .list-actions {
+ position: relative;
+ margin-top: -($baseline*1.5);
+
+ li {
+ width: flex-grid(6, 12);
+ margin: 0 auto;
+ }
+
+ .action {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+
+ .action-primary {
+ @include blue-button;
+ @include transition(all .15s);
+ @include font-size(18);
+ padding: ($baseline*0.75) ($baseline/2);
+ font-weight: 600;
+ text-align: center;
+ text-transform: uppercase;
+ }
+
+ .action-secondary {
+ @include font-size(14);
+ margin-top: ($baseline/2);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
new file mode 100644
index 0000000000..0d72e2d2bf
--- /dev/null
+++ b/cms/static/sass/views/_outline.scss
@@ -0,0 +1,680 @@
+// studio - views - course outline
+// ====================
+
+body.course.outline {
+
+ input.courseware-unit-search-input {
+ float: left;
+ width: 260px;
+ background-color: #fff;
+ }
+
+ .branch {
+
+ .section-item {
+ @include clearfix();
+
+ .details {
+ display: block;
+ float: left;
+ margin-bottom: 0;
+ width: 650px;
+ }
+
+ .gradable-status {
+ float: right;
+ position: relative;
+ top: -4px;
+ right: 50px;
+ width: 145px;
+
+ .status-label {
+ position: absolute;
+ top: 2px;
+ right: -5px;
+ display: none;
+ width: 110px;
+ padding: 5px 40px 5px 10px;
+ @include border-radius(3px);
+ color: $lightGrey;
+ text-align: right;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 16px;
+ }
+
+ .menu-toggle {
+ z-index: 10;
+ position: absolute;
+ top: 0;
+ right: 5px;
+ padding: 5px;
+ color: $mediumGrey;
+
+ &:hover, &.is-active {
+ color: $blue;
+ }
+ }
+
+ .menu {
+ z-index: 1;
+ display: none;
+ opacity: 0.0;
+ position: absolute;
+ top: -1px;
+ left: 5px;
+ margin: 0;
+ padding: 8px 12px;
+ background: $white;
+ border: 1px solid $mediumGrey;
+ font-size: 12px;
+ @include border-radius(4px);
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+ @include transition(opacity .15s);
+
+
+ li {
+ width: 115px;
+ margin-bottom: 3px;
+ padding-bottom: 3px;
+ border-bottom: 1px solid $lightGrey;
+
+ &:last-child {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border: none;
+
+ a {
+ color: $darkGrey;
+ }
+ }
+ }
+
+ a {
+ color: $blue;
+
+ &.is-selected {
+ font-weight: bold;
+ }
+ }
+ }
+
+ // dropdown state
+ &.is-active {
+
+ .menu {
+ z-index: 1000;
+ display: block;
+ opacity: 1.0;
+ }
+
+ .menu-toggle {
+ z-index: 10000;
+ }
+ }
+
+ // set state
+ &.is-set {
+
+ .menu-toggle {
+ color: $blue;
+ }
+
+ .status-label {
+ display: block;
+ color: $blue;
+ }
+ }
+ }
+ }
+ }
+
+
+ .courseware-section {
+ position: relative;
+ background: #fff;
+ border-radius: 3px;
+ border: 1px solid $mediumGrey;
+ margin-top: 15px;
+ padding-bottom: 12px;
+ @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &.collapsed {
+ padding-bottom: 0;
+ }
+
+ label {
+ float: left;
+ line-height: 29px;
+ }
+
+ .datepair {
+ float: left;
+ margin-left: 10px;
+ }
+
+ .section-published-date {
+ position: absolute;
+ top: 19px;
+ right: 90px;
+ padding: 4px 10px;
+ border-radius: 3px;
+ background: $lightGrey;
+ text-align: right;
+
+ .published-status {
+ font-size: 12px;
+ margin-right: 15px;
+
+ strong {
+ font-weight: bold;
+ }
+ }
+
+ .schedule-button {
+ @include blue-button;
+ }
+
+ .edit-button {
+ @include blue-button;
+ }
+
+ .schedule-button,
+ .edit-button {
+ font-size: 11px;
+ padding: 3px 15px 5px;
+ }
+ }
+
+ .datepair .date,
+ .datepair .time {
+ padding-left: 0;
+ padding-right: 0;
+ border: none;
+ background: none;
+ @include box-shadow(none);
+ font-size: 13px;
+ font-weight: bold;
+ color: $blue;
+ cursor: pointer;
+ }
+
+ .datepair .date {
+ width: 80px;
+ }
+
+ .datepair .time {
+ width: 65px;
+ }
+
+ &.collapsed .subsection-list,
+ .collapsed .subsection-list,
+ .collapsed > ol {
+ display: none !important;
+ }
+
+ header {
+ min-height: 75px;
+ @include clearfix();
+
+ .item-details, .section-published-date {
+
+ }
+
+ .item-details {
+ display: inline-block;
+ padding: 20px 0 10px 0;
+ @include clearfix();
+
+ .section-name {
+ float: left;
+ margin-right: 10px;
+ width: 350px;
+ font-size: 19px;
+ font-weight: bold;
+ color: $blue;
+ }
+
+ .section-name-span {
+ cursor: pointer;
+ @include transition(color .15s);
+
+ &:hover {
+ color: $orange;
+ }
+ }
+
+ .section-name-edit {
+ position: relative;
+ width: 400px;
+ background: $white;
+
+ input {
+ font-size: 16px;
+ }
+
+ .save-button {
+ @include blue-button;
+ padding: 7px 20px 7px;
+ margin-right: 5px;
+ }
+
+ .cancel-button {
+ @include white-button;
+ padding: 7px 20px 7px;
+ }
+ }
+
+ .section-published-date {
+ float: right;
+ width: 265px;
+ margin-right: 220px;
+ @include border-radius(3px);
+ background: $lightGrey;
+
+ .published-status {
+ font-size: 12px;
+ margin-right: 15px;
+
+ strong {
+ font-weight: bold;
+ }
+ }
+
+ .schedule-button {
+ @include blue-button;
+ }
+
+ .edit-button {
+ @include blue-button;
+ }
+
+ .schedule-button,
+ .edit-button {
+ font-size: 11px;
+ padding: 3px 15px 5px;
+
+ }
+ }
+
+ .gradable-status {
+ position: absolute;
+ top: 20px;
+ right: 70px;
+ width: 145px;
+
+ .status-label {
+ position: absolute;
+ top: 0;
+ right: 2px;
+ display: none;
+ width: 100px;
+ padding: 10px 35px 10px 10px;
+ @include border-radius(3px);
+ background: $lightGrey;
+ color: $lightGrey;
+ text-align: right;
+ font-size: 12px;
+ font-weight: bold;
+ line-height: 16px;
+ }
+
+ .menu-toggle {
+ z-index: 10;
+ position: absolute;
+ top: 2px;
+ right: 5px;
+ padding: 5px;
+ color: $lightGrey;
+
+ &:hover, &.is-active {
+ color: $blue;
+ }
+ }
+
+ .menu {
+ z-index: 1;
+ display: none;
+ opacity: 0.0;
+ position: absolute;
+ top: -1px;
+ left: 2px;
+ margin: 0;
+ padding: 8px 12px;
+ background: $white;
+ border: 1px solid $mediumGrey;
+ font-size: 12px;
+ @include border-radius(4px);
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+ @include transition(opacity .15s);
+ @include transition(display .15s);
+
+
+ li {
+ width: 115px;
+ margin-bottom: 3px;
+ padding-bottom: 3px;
+ border-bottom: 1px solid $lightGrey;
+
+ &:last-child {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border: none;
+
+ a {
+ color: $darkGrey;
+ }
+ }
+ }
+
+ a {
+
+ &.is-selected {
+ font-weight: bold;
+ }
+ }
+ }
+
+ // dropdown state
+ &.is-active {
+
+ .menu {
+ z-index: 1000;
+ display: block;
+ opacity: 1.0;
+ }
+
+
+ .menu-toggle {
+ z-index: 10000;
+ }
+ }
+
+ // set state
+ &.is-set {
+
+ .menu-toggle {
+ color: $blue;
+ }
+
+ .status-label {
+ display: block;
+ color: $blue;
+ }
+ }
+
+ float: left;
+ padding: 21px 0 0;
+ }
+ }
+
+ .item-actions {
+ margin-top: 21px;
+ margin-right: 12px;
+
+ .edit-button,
+ .delete-button {
+ margin-top: -3px;
+ }
+ }
+
+ .expand-collapse-icon {
+ float: left;
+ margin: 29px 6px 16px 16px;
+ @include transition(none);
+
+ &.expand {
+ background-position: 0 0;
+ }
+
+ &.collapsed {
+
+ }
+ }
+
+ .drag-handle {
+ margin-left: 11px;
+ }
+ }
+
+ h3 {
+ font-size: 19px;
+ font-weight: 700;
+ color: $blue;
+ }
+
+ .section-name-span {
+ cursor: pointer;
+ @include transition(color .15s);
+
+ &:hover {
+ color: $orange;
+ }
+ }
+
+ .section-name-form {
+ margin-bottom: 15px;
+ }
+
+ .section-name-edit {
+ input {
+ font-size: 16px;
+ }
+
+ .save-button {
+ @include blue-button;
+ padding: 7px 20px 7px;
+ margin-right: 5px;
+ }
+
+ .cancel-button {
+ @include white-button;
+ padding: 7px 20px 7px;
+ }
+ }
+
+ h4 {
+ font-size: 12px;
+ color: #878e9d;
+
+ strong {
+ font-weight: bold;
+ }
+ }
+
+ .list-header {
+ @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
+ background-color: #ced2db;
+ border-radius: 3px 3px 0 0;
+ }
+
+ .subsection-list {
+ margin: 0 12px;
+
+ > ol {
+ @include tree-view;
+ border-top-width: 0;
+ }
+ }
+
+ &.new-section {
+
+ header {
+ height: auto;
+ @include clearfix();
+ }
+
+ .expand-collapse-icon {
+ visibility: hidden;
+ }
+
+ .item-details {
+ padding: 25px 0 0 0;
+
+ .section-name {
+ float: none;
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ .toggle-button-sections {
+ display: none;
+ position: relative;
+ float: right;
+ margin-top: 10px;
+
+ font-size: 13px;
+ color: $darkGrey;
+
+ &.is-shown {
+ display: block;
+ }
+
+ .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-subsection-name-input {
+ width: 515px;
+ }
+
+ .new-section-name-save,
+ .new-subsection-name-save {
+ @include blue-button;
+ padding: 4px 20px 7px;
+ margin: 0 5px;
+ color: #fff !important;
+ }
+
+ .new-section-name-cancel,
+ .new-subsection-name-cancel {
+ @include white-button;
+ padding: 4px 20px 7px;
+ color: #8891a1 !important;
+ }
+
+ .dummy-calendar {
+ display: none;
+ position: absolute;
+ top: 55px;
+ left: 110px;
+ z-index: 9999;
+ border: 1px solid #3C3C3C;
+ @include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
+ }
+
+ .preview {
+ background: url(../img/preview.jpg) center top no-repeat;
+ }
+
+ .edit-subsection-publish-settings {
+ display: none;
+ position: fixed;
+ top: 100px;
+ left: 50%;
+ z-index: 99999;
+ width: 600px;
+ margin-left: -300px;
+ background: #fff;
+ text-align: center;
+
+ .settings {
+ padding: 40px;
+ }
+
+ h3 {
+ font-size: 34px;
+ font-weight: 300;
+ }
+
+ .picker {
+ margin: 30px 0 65px;
+ }
+
+ .description {
+ margin-top: 30px;
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ strong {
+ font-weight: 700;
+ }
+
+ .start-date,
+ .start-time {
+ font-size: 19px;
+ }
+
+ .save-button {
+ @include blue-button;
+ margin-right: 10px;
+ }
+
+ .cancel-button {
+ @include white-button;
+ }
+
+ .save-button,
+ .cancel-button {
+ font-size: 16px;
+ }
+ }
+
+ .collapse-all-button {
+ float: right;
+ margin-top: 10px;
+ font-size: 13px;
+ color: $darkGrey;
+ }
+
+ // sort/drag and drop
+ .ui-droppable {
+ @include transition (padding 0.5s ease-in-out 0s);
+ min-height: 20px;
+ padding: 0;
+
+ &.dropover {
+ padding: 15px 0;
+ }
+ }
+
+ .ui-draggable-dragging {
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
+ border: 1px solid $darkGrey;
+ opacity : 0.2;
+ &:hover {
+ opacity : 1.0;
+ .section-item {
+ background: $yellow !important;
+ }
+ }
+
+ // hiding unit button - temporary fix until this semantically corrected
+ .new-unit-item {
+ display: none;
+ }
+ }
+
+ ol.ui-droppable .branch:first-child .section-item {
+ border-top: none;
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
new file mode 100644
index 0000000000..307ebad0a8
--- /dev/null
+++ b/cms/static/sass/views/_settings.scss
@@ -0,0 +1,737 @@
+// studio - views - course settings
+// ====================
+
+body.course.settings {
+
+ .content-primary, .content-supplementary {
+ @include box-sizing(border-box);
+ float: left;
+ }
+
+ .content-primary {
+ @extend .window;
+ width: flex-grid(9, 12);
+ margin-right: flex-gutter();
+ padding: $baseline ($baseline*1.5);
+ }
+
+ // messages - should be synced up with global messages in the future
+ .message {
+ display: block;
+ font-size: 14px;
+ }
+
+ .message-status {
+ display: none;
+ @include border-top-radius(2px);
+ @include box-sizing(border-box);
+ border-bottom: 2px solid $yellow;
+ margin: 0 0 20px 0;
+ padding: 10px 20px;
+ font-weight: 500;
+ background: $paleYellow;
+
+ .text {
+ display: inline-block;
+ }
+
+ &.error {
+ border-color: shade($red, 50%);
+ background: tint($red, 20%);
+ color: $white;
+ }
+
+ &.confirm {
+ border-color: shade($green, 50%);
+ background: tint($green, 20%);
+ color: $white;
+ }
+
+ &.is-shown {
+ display: block;
+ }
+ }
+
+ // in form - elements
+ .group-settings {
+ margin: 0 0 ($baseline*2) 0;
+
+ header {
+ @include clearfix();
+
+ .title-2 {
+ width: flex-grid(4, 9);
+ margin: 0 flex-gutter() 0 0;
+ float: left;
+ }
+
+ .tip {
+ @include font-size(13);
+ width: flex-grid(5, 9);
+ float: right;
+ margin-top: ($baseline/2);
+ text-align: right;
+ color: $gray-l2;
+ }
+ }
+
+ // basic layout/elements
+ .title-2 {
+
+ }
+
+ .title-3 {
+
+ }
+
+ // in form -UI hints/tips/messages
+ .instructions {
+ @include font-size(14);
+ margin: 0 0 $baseline 0;
+ }
+
+ .tip {
+ @include transition(color, 0.15s, ease-in-out);
+ @include font-size(13);
+ display: block;
+ margin-top: ($baseline/4);
+ color: $gray-l3;
+ }
+
+ .message-error {
+ @include font-size(13);
+ display: block;
+ margin-top: ($baseline/4);
+ margin-bottom: ($baseline/2);
+ color: $red;
+ }
+
+ // buttons
+ .remove-item {
+ @include white-button;
+ @include font-size(13);
+ font-weight: 400;
+ }
+
+ .new-button {
+ @include font-size(13);
+ }
+
+ // form basics
+ .list-input {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ .field {
+ margin: 0 0 $baseline 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &.required {
+
+ label {
+ font-weight: 600;
+ }
+
+ label:after {
+ margin-left: ($baseline/4);
+ content: "*";
+ }
+ }
+
+ label, input, textarea {
+ display: block;
+ }
+
+ label {
+ @include font-size(14);
+ @include transition(color, 0.15s, ease-in-out);
+ margin: 0 0 ($baseline/4) 0;
+ font-weight: 400;
+
+ &.is-focused {
+ color: $blue;
+ }
+ }
+
+ input, textarea {
+ @include placeholder($gray-l4);
+ @include font-size(16);
+ @include size(100%,100%);
+ padding: ($baseline/2);
+
+ &.long {
+ }
+
+ &.short {
+ }
+
+ &.error {
+ border-color: $red;
+ }
+
+ &:focus {
+
+ + .tip {
+ color: $gray;
+ }
+ }
+ }
+
+ textarea.long {
+ height: ($baseline*5);
+ }
+
+ input[type="checkbox"] {
+ display: inline-block;
+ margin-right: ($baseline/4);
+ width: auto;
+ height: auto;
+
+ & + label {
+ display: inline-block;
+ }
+ }
+ }
+
+ .field-group {
+ @include clearfix();
+ margin: 0 0 ($baseline/2) 0;
+ }
+
+ // enumerated/grouped lists
+ &.enum {
+
+ .field-group {
+ @include box-sizing(border-box);
+ @include border-radius(3px);
+ background: $gray-l5;
+ padding: $baseline;
+
+ &:last-child {
+ padding-bottom: $baseline;
+ }
+
+ .actions {
+ @include clearfix();
+ margin-top: ($baseline/2);
+ border-top: 1px solid $gray-l4;
+ padding-top: ($baseline/2);
+
+ .remove-item {
+ float: right;
+ }
+ }
+ }
+ }
+ }
+
+ // existing inputs
+ .input-existing {
+ margin: 0 0 $baseline 0;
+
+ .actions {
+ margin: ($baseline/4) 0 0 0;
+ }
+ }
+
+ // not editable fields
+ .field.is-not-editable {
+
+ & label.is-focused {
+ color: $gray-d2;
+ }
+ }
+
+ // field with error
+ .field.error {
+
+ input, textarea {
+ border-color: $red;
+ }
+ }
+
+ // specific fields - basic
+ &.basic {
+
+ .list-input {
+ @include clearfix();
+
+ .field {
+ margin-bottom: 0;
+ }
+ }
+
+ #field-course-organization {
+ float: left;
+ width: flex-grid(2, 9);
+ margin-right: flex-gutter();
+ }
+
+ #field-course-number {
+ float: left;
+ width: flex-grid(2, 9);
+ margin-right: flex-gutter();
+ }
+
+ #field-course-name {
+ float: left;
+ width: flex-grid(5, 9);
+ }
+ }
+
+ // specific fields - schedule
+ &.schedule {
+
+ .list-input {
+ margin-bottom: ($baseline*1.5);
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .field-group {
+ @include clearfix();
+ border-bottom: 1px solid $gray-l5;
+ padding-bottom: ($baseline/2);
+
+ &:last-child {
+ border: none;
+ padding-bottom: 0;
+ }
+
+ .field {
+ float: left;
+ width: flex-grid(3, 9);
+ margin-bottom: ($baseline/4);
+ margin-right: flex-gutter();
+ }
+
+ .field.time {
+ position: relative;
+
+ .tip {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
+ }
+ }
+ }
+
+ // specific fields - overview
+ #field-course-overview {
+
+ #course-overview {
+ height: ($baseline*20);
+ }
+ }
+
+ // specific fields - video
+ #field-course-introduction-video {
+
+ .input-existing {
+ @include box-sizing(border-box);
+ @include border-radius(3px);
+ background: $gray-l5;
+ padding: ($baseline/2);
+
+ .actions {
+ @include clearfix();
+ margin-top: ($baseline/2);
+ border-top: 1px solid $gray-l4;
+ padding-top: ($baseline/2);
+
+ .remove-item {
+ float: right;
+ }
+ }
+ }
+
+ .actions {
+ margin-top: ($baseline/2);
+ border-top: 1px solid $gray-l5;
+ padding-top: ($baseline/2);
+ }
+ }
+
+ // specific fields - requirements
+ &.requirements {
+
+ #field-course-effort {
+ width: flex-grid(3, 9);
+ }
+ }
+
+ // specific fields - grading range (artifact styling)
+ &.grade-range {
+ margin-bottom: ($baseline*3);
+
+ .grade-controls {
+ @include clearfix;
+ width: flex-grid(9,9);
+ }
+
+ .new-grade-button {
+ @include box-sizing(border-box);
+ @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
+ @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+ width: flex-grid(1,9);
+ height: ($baseline*2);
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: flex-gutter();
+ border-radius: 20px;
+ border: 1px solid $darkGrey;
+ background-color: #d1dae3;
+ color: #6d788b;
+
+ .plus-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -6px;
+ margin-top: -6px;
+ }
+ }
+
+ .grade-slider {
+ @include box-sizing(border-box);
+ width: flex-grid(8,9);
+ display: inline-block;
+ vertical-align: middle;
+
+ .grade-bar {
+ position: relative;
+ width: 100%;
+ height: ($baseline*2.5);
+ background: $lightGrey;
+
+ .increments {
+ position: relative;
+
+ li {
+ position: absolute;
+ top: 52px;
+ width: 30px;
+ margin-left: -15px;
+ font-size: 9px;
+ text-align: center;
+
+ &.increment-0 {
+ left: 0;
+ }
+
+ &.increment-10 {
+ left: 10%;
+ }
+
+ &.increment-20 {
+ left: 20%;
+ }
+
+ &.increment-30 {
+ left: 30%;
+ }
+
+ &.increment-40 {
+ left: 40%;
+ }
+
+ &.increment-50 {
+ left: 50%;
+ }
+
+ &.increment-60 {
+ left: 60%;
+ }
+
+ &.increment-70 {
+ left: 70%;
+ }
+
+ &.increment-80 {
+ left: 80%;
+ }
+
+ &.increment-90 {
+ left: 90%;
+ }
+
+ &.increment-100 {
+ left: 100%;
+ }
+ }
+ }
+
+ .grade-specific-bar {
+ height: 50px !important;
+ }
+
+ .grades {
+ position: relative;
+
+ li {
+ position: absolute;
+ top: 0;
+ height: 50px;
+ text-align: right;
+ @include border-radius(2px);
+
+ &:hover,
+ &.is-dragging {
+ .remove-button {
+ display: block;
+ }
+ }
+
+ &.is-dragging {
+
+ }
+
+ .remove-button {
+ display: none;
+ position: absolute;
+ top: -17px;
+ right: 1px;
+ height: 17px;
+ font-size: 10px;
+ }
+
+ &:nth-child(1) {
+ background: #4fe696;
+ }
+
+ &:nth-child(2) {
+ background: #ffdf7e;
+ }
+
+ &:nth-child(3) {
+ background: #ffb657;
+ }
+
+ &:nth-child(4) {
+ background: #ef54a1;
+ }
+
+ &:nth-child(5),
+ &.bar-fail {
+ background: #fb336c;
+ }
+
+ .letter-grade {
+ display: block;
+ margin: 10px 15px 0 0;
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 14px;
+ }
+
+ .range {
+ display: block;
+ margin-right: 15px;
+ font-size: 10px;
+ line-height: 12px;
+ }
+
+ .drag-bar {
+ position: absolute;
+ top: 0;
+ right: -1px;
+ height: 50px;
+ width: 2px;
+ background-color: #fff;
+ @include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
+
+ cursor: ew-resize;
+ @include transition(none);
+
+ &:hover {
+ width: 6px;
+ right: -2px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // specific fields - grading rules
+ &.grade-rules {
+
+ #field-course-grading-graceperiod {
+ width: flex-grid(3, 9);
+ }
+ }
+
+ &.assignment-types {
+
+ .list-input {
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .field-group {
+ @include clearfix();
+ width: flex-grid(9, 9);
+ margin-bottom: ($baseline*1.5);
+ border-bottom: 1px solid $gray-l5;
+ padding-bottom: ($baseline*1.5);
+
+ &:last-child {
+ border: none;
+ padding-bottom: 0;
+ }
+
+ .field {
+ display: inline-block;
+ vertical-align: top;
+ width: flex-grid(3, 6);
+ margin-bottom: ($baseline/2);
+ margin-right: flex-gutter();
+ }
+
+ #field-course-grading-assignment-shortname,
+ #field-course-grading-assignment-totalassignments,
+ #field-course-grading-assignment-gradeweight,
+ #field-course-grading-assignment-droppable {
+ width: flex-grid(2, 6);
+ }
+ }
+
+ .actions {
+ float: left;
+ width: flex-grid(9, 9);
+
+ .delete-button {
+ margin: 0;
+ }
+ }
+ }
+
+ // specific fields - advanced settings
+ &.advanced-policies {
+
+ .field-group {
+ margin-bottom: ($baseline*1.5);
+
+ &:last-child {
+ border: none;
+ padding-bottom: 0;
+ }
+ }
+
+ .course-advanced-policy-list-item {
+ @include clearfix();
+ position: relative;
+
+ .field {
+
+ input {
+ width: 100%;
+ }
+
+ .tip {
+ @include transition (opacity 0.5s ease-in-out 0s);
+ opacity: 0;
+ position: absolute;
+ bottom: ($baseline*1.25);
+ }
+
+ input:focus {
+
+ & + .tip {
+ opacity: 1.0;
+ }
+ }
+
+ input.error {
+
+ & + .tip {
+ opacity: 0;
+ }
+ }
+ }
+
+ .key, .value {
+ float: left;
+ margin: 0 0 ($baseline/2) 0;
+ }
+
+ .key {
+ width: flex-grid(3, 9);
+ margin-right: flex-gutter();
+ }
+
+ .value {
+ width: flex-grid(6, 9);
+ }
+
+ .actions {
+ float: left;
+ width: flex-grid(9, 9);
+
+ .delete-button {
+ margin: 0;
+ }
+ }
+ }
+
+ .message-error {
+ position: absolute;
+ bottom: ($baseline*0.75);
+ }
+
+ // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
+ .CodeMirror {
+ @include font-size(16);
+ @include box-sizing(border-box);
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+ @include linear-gradient($lightGrey, tint($lightGrey, 90%));
+ padding: 5px 8px;
+ border: 1px solid $mediumGrey;
+ border-radius: 2px;
+ background-color: $lightGrey;
+ font-family: 'Open Sans', sans-serif;
+ color: $baseFontColor;
+ outline: 0;
+
+ &.CodeMirror-focused {
+ @include linear-gradient($paleYellow, tint($paleYellow, 90%));
+ outline: 0;
+ }
+
+ .CodeMirror-scroll {
+ overflow: hidden;
+ height: auto;
+ min-height: ($baseline*1.5);
+ max-height: ($baseline*10);
+ }
+
+ // editor color changes just for JSON
+ .CodeMirror-lines {
+
+ .cm-string {
+ color: #cb9c40;
+ }
+
+ pre {
+ line-height: 2.0rem;
+ }
+ }
+ }
+ }
+ }
+
+ .content-supplementary {
+ width: flex-grid(3, 12);
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
similarity index 70%
rename from cms/static/sass/_static-pages.scss
rename to cms/static/sass/views/_static-pages.scss
index 1ab3413682..759b03cfc7 100644
--- a/cms/static/sass/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -1,4 +1,8 @@
-.static-pages {
+// studio - views - course static pages
+// ====================
+
+body.course.static-pages {
+
.new-static-page-button {
@include grey-button;
display: block;
@@ -16,6 +20,51 @@
margin: 0 0 5px 0;
}
}
+
+ .wrapper-component-editor {
+ z-index: 9999;
+ position: relative;
+ background: $lightBluishGrey2;
+ }
+
+ .component-editor {
+ @include edit-box;
+ @include box-shadow(none);
+ display: none;
+ padding: 20px;
+ border-radius: 2px 2px 0 0;
+
+ .metadata_edit {
+ margin-bottom: 20px;
+ font-size: 13px;
+
+ li {
+ margin-bottom: 10px;
+ }
+
+ label {
+ display: inline-block;
+ margin-right: 10px;
+ }
+ }
+
+ h3 {
+ margin-bottom: 10px;
+ font-size: 18px;
+ font-weight: 700;
+ }
+
+ h5 {
+ margin-bottom: 8px;
+ color: #fff;
+ font-weight: 700;
+ }
+
+ .save-button {
+ margin-top: 10px;
+ margin: 15px 8px 0 0;
+ }
+ }
}
.component-editor {
@@ -28,11 +77,14 @@
border-radius: 0;
&.new-component-item {
- margin-top: 20px;
+ background: transparent;
+ border: none;
+ @include box-shadow(none);
}
}
.component {
+ position: relative;
border: 1px solid $mediumGrey;
border-top: none;
@@ -54,10 +106,13 @@
}
.drag-handle {
+ position: absolute;
+ display: block;
top: 0;
right: 0;
z-index: 11;
width: 35px;
+ height: 100%;
border: none;
background: url(../img/drag-handles.png) center no-repeat #fff;
@@ -67,6 +122,7 @@
}
.component-actions {
+ position: absolute;
top: 26px;
right: 44px;
}
diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss
new file mode 100644
index 0000000000..cd29759db8
--- /dev/null
+++ b/cms/static/sass/views/_subsection.scss
@@ -0,0 +1,372 @@
+// studio - views - course subsection
+// ====================
+
+body.course.subsection {
+
+ .unit-settings {
+ .window-contents {
+ padding: 10px 20px;
+ }
+
+ .unit-actions {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ .published-alert {
+ display: none;
+ padding: 10px;
+ border: 1px solid #edbd3c;
+ border-radius: 3px;
+ background: #fbf6e1;
+ font-size: 14px;
+ line-height: 1.4;
+
+ div {
+ margin-top: 15px;
+ }
+ }
+
+ input[type="radio"] {
+ margin-right: 7px;
+ }
+
+ .status {
+ font-size: 12px;
+
+ strong {
+ font-weight: 700;
+ }
+ }
+
+ .preview-button, .view-button {
+ @include white-button;
+ margin-bottom: 10px;
+ }
+
+ .publish-button {
+ @include orange-button;
+ }
+
+ .delete-button {
+ @include blue-button;
+ }
+
+ .delete-draft {
+ display: inline-block;
+ }
+
+ .delete-button,
+ .preview-button,
+ .publish-button,
+ .view-button {
+ font-size: 11px;
+ margin-top: 10px;
+ padding: 6px 15px 8px;
+ }
+ }
+
+ .unit-history {
+ &.collapsed {
+ h4 {
+ border-bottom: none;
+ border-radius: 3px;
+ }
+
+ .window-contents {
+ display: none;
+ }
+ }
+
+ ol {
+ border: 1px solid #ced2db;
+
+ li {
+ display: block;
+ padding: 6px 8px 8px 10px;
+ background: #edf1f5;
+ font-size: 12px;
+
+ &:hover {
+ background: #fffcf1;
+
+ .item-actions {
+ display: block;
+ }
+ }
+
+ &.checked {
+ background: #d1dae3;
+ }
+
+ .item-actions {
+ display: none;
+ }
+
+ input[type="radio"] {
+ margin-right: 7px;
+ }
+ }
+ }
+ }
+
+ .unit-location {
+ .url {
+ width: 100%;
+ margin-bottom: 10px;
+ @include box-shadow(none);
+ }
+
+ .draft-tag,
+ .hidden-tag,
+ .private-tag,
+ .has-new-draft-tag {
+ font-size: 8px;
+ }
+
+ .window-contents > ol {
+ @include tree-view;
+
+ .section-item {
+ display: inline-block;
+ width: 100%;
+ font-size: 11px;
+ padding: 2px 8px 4px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ @include box-sizing(border-box);
+ }
+
+ ol {
+ .section-item {
+ padding-left: 20px;
+ }
+
+ .new-unit-item {
+ margin-left: 20px;
+ }
+ }
+
+ ol ol {
+ .section-item {
+ padding-left: 34px;
+ }
+
+ .new-unit-item {
+ margin: 0 0 10px 41px;
+ }
+ }
+ }
+ }
+
+ .subsection-body {
+ padding: 32px 40px;
+ @include clearfix;
+
+ > div {
+ margin-bottom: 40px;
+ }
+
+ input {
+ font-size: 14px;
+ }
+
+ .sortable-unit-list {
+ ol {
+ @include tree-view;
+ }
+ }
+ }
+
+ .subsection-name-input {
+ label {
+ display: block;
+ }
+
+ input {
+ width: 100%;
+ font-size: 20px;
+ }
+ }
+
+ .scheduled-date-input,
+ .due-date-input {
+ @include clearfix;
+
+ .date-input,
+ .time-input {
+ display: inline-block;
+ width: 100px;
+ }
+
+ .inherits-check {
+ label {
+ font-size: 13px;
+ }
+ }
+
+ .notice {
+ margin-top: 6px;
+ font-size: 11px;
+ color: #999;
+ }
+ }
+
+ .due-date-input {
+ label {
+ display: inline-block !important;
+ margin-right: 10px;
+ }
+
+ a {
+ font-size: 11px;
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+
+ .date-setter {
+ @include clearfix;
+ display: none;
+ }
+
+ .remove-date {
+ display: block;
+ }
+ }
+
+ .row.visibility {
+ label {
+ display: inline-block !important;
+ margin-right: 10px;
+ line-height: 21px;
+ }
+
+ a {
+ display: inline-block;
+ height: 31px;
+ margin-right: 8px;
+ vertical-align: middle;
+ font-size: 11px;
+ font-weight: 700;
+ line-height: 31px;
+ text-transform: uppercase;
+ }
+
+ .large-toggle {
+ width: 41px;
+ background: url(../img/large-toggles.png) no-repeat;
+ background-position: 0 -50px;
+
+ .hidden {
+ background-position: 0 -5px;
+ }
+ }
+ }
+
+ .gradable {
+
+ label {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ .gradable-status {
+ position: relative;
+ top: -4px;
+ display: inline-block;
+ margin-left: 10px;
+ width: 65%;
+
+ .status-label {
+ margin: 0;
+ padding: 0;
+ background: transparent;
+ color: $blue;
+ border: none;
+ font-size: 11px;
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+
+ .menu-toggle {
+ z-index: 100;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 20px;
+ background: transparent;
+
+ &:hover, &.is-active {
+ color: $blue;
+ }
+ }
+
+ .menu {
+ z-index: 1;
+ position: absolute;
+ top: -12px;
+ left: -7px;
+ display: none;
+ width: 100%;
+ margin: 0;
+ padding: 8px 12px;
+ opacity: 0.0;
+ background: $white;
+ border: 1px solid $mediumGrey;
+ font-size: 12px;
+ @include border-radius(4px);
+ @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+ @include transition(opacity .15s);
+
+
+ li {
+ margin-bottom: 3px;
+ padding-bottom: 3px;
+ border-bottom: 1px solid $lightGrey;
+
+ &:last-child {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border: none;
+ }
+ }
+
+ a {
+
+ &.is-selected {
+ font-weight: bold;
+ }
+ }
+ }
+
+ // dropdown state
+ &.is-active {
+
+ .menu {
+ z-index: 10000;
+ display: block;
+ opacity: 1.0;
+ }
+
+ .menu-toggle {
+ z-index: 1000;
+ }
+ }
+
+ // set state
+ &.is-set {
+
+ .menu-toggle {
+ color: $blue;
+ }
+
+ .status-label {
+ display: block;
+ color: $blue;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
new file mode 100644
index 0000000000..e74690d9ec
--- /dev/null
+++ b/cms/static/sass/views/_unit.scss
@@ -0,0 +1,681 @@
+// studio - views - unit
+// ====================
+
+body.course.unit {
+
+ .unit .main-wrapper {
+ @include clearfix();
+ margin: 40px;
+ }
+
+ //Problem Selector tab menu requirements
+ .js .tabs .tab {
+ display: none;
+ }
+ //end problem selector reqs
+
+ .main-column {
+ clear: both;
+ float: left;
+ width: 70%;
+ }
+
+ .unit-body.published {
+ .components > li {
+ border: none;
+
+ .rendered-component {
+ padding: 0 20px;
+ }
+ }
+ }
+
+ .unit-body {
+
+ .unit-name-input {
+ padding: 20px 40px;
+
+ label {
+ display: block;
+ }
+
+ input {
+ width: 100%;
+ font-size: 20px;
+ }
+ }
+
+ .breadcrumbs {
+ border-radius: 3px 3px 0 0;
+ border-bottom: 1px solid #cbd1db;
+ @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
+ background-color: #edf1f5;
+ @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
+ @include clearfix;
+
+ li {
+ float: left;
+ }
+
+ a,
+ .current-page {
+ display: block;
+ padding: 15px 35px 15px 30px;
+ font-size: 14px;
+ background: url(../img/breadcrumb-arrow.png) no-repeat right center;
+ }
+ }
+
+ h2 {
+ margin: 30px 40px 30px 0;
+ color: #646464;
+ font-size: 19px;
+ font-weight: 300;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ }
+
+ .components {
+
+ > li {
+ position: relative;
+ z-index: 10;
+ margin: 20px 40px;
+
+
+
+ .title {
+ margin: 0 0 15px 0;
+ color: $mediumGrey;
+
+ .value {
+ }
+ }
+
+ &.new-component-item {
+ margin: 20px 0px;
+ border-top: 1px solid $mediumGrey;
+ box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
+ background-color: $lightGrey;
+ margin-bottom: 0px;
+ padding-bottom: 20px;
+
+ .new-component-button {
+ display: block;
+ padding: 20px;
+ text-align: center;
+ color: #edf1f5;
+ }
+
+ h5 {
+ margin: 20px 0px;
+ color: #fff;
+ font-weight: 600;
+ font-size: 18px;
+ }
+
+ .rendered-component {
+ display: none;
+ background: #fff;
+ border-radius: 3px 3px 0 0;
+ }
+
+ .new-component-type {
+
+ a,
+ li {
+ display: inline-block;
+ }
+
+ a {
+ border: 1px solid $mediumGrey;
+ width: 100px;
+ height: 100px;
+ color: #fff;
+ margin-right: 15px;
+ margin-bottom: 20px;
+ border-radius: 8px;
+ font-size: 15px;
+ line-height: 14px;
+ text-align: center;
+ @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
+
+ .name {
+ position: absolute;
+ bottom: 5px;
+ left: 0;
+ width: 100%;
+ padding: 10px;
+ @include box-sizing(border-box);
+ color: #fff;
+ }
+ }
+ }
+
+ .new-component-templates {
+ display: none;
+ margin: 20px 40px 20px 40px;
+ border-radius: 3px;
+ border: 1px solid $mediumGrey;
+ background-color: #fff;
+ @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
+ @include clearfix;
+
+ .cancel-button {
+ margin: 20px 0px 10px 10px;
+ @include white-button;
+ }
+
+ .problem-type-tabs {
+ display: none;
+ }
+
+ // specific menu types
+ &.new-component-problem {
+ padding-bottom:10px;
+
+ .ss-icon, .editor-indicator {
+ display: inline-block;
+ }
+
+ .problem-type-tabs {
+ display: inline-block;
+ }
+ }
+ }
+
+ .new-component-type,
+ .new-component-template {
+ @include clearfix;
+
+ a {
+ position: relative;
+ border: 1px solid $darkGreen;
+ background: tint($green,20%);
+ color: #fff;
+
+ &:hover {
+ background: $brightGreen;
+ }
+ }
+ }
+
+ .problem-type-tabs {
+ list-style-type: none;
+ border-radius: 0;
+ width: 100%;
+ @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+ background-color: $lightBluishGrey;
+ @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+
+ li:first-child {
+ margin-left: 20px;
+ }
+
+ li {
+ float:left;
+ display:inline-block;
+ text-align:center;
+ width: auto;
+ @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+ background-color: tint($lightBluishGrey, 10%);
+ @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+ opacity:.8;
+
+ &:hover {
+ opacity:1;
+ background-color: tint($lightBluishGrey, 20%);
+ }
+
+ &.ui-state-active {
+ border: 0px;
+ @include active;
+ opacity:1;
+ }
+ }
+
+ a{
+ display: block;
+ padding: 15px 25px;
+ font-size: 15px;
+ line-height: 16px;
+ text-align: center;
+ color: #3c3c3c;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+ }
+ }
+
+ .new-component-template {
+
+ a {
+ background: #fff;
+ border: 0px;
+ color: #3c3c3c;
+ @include transition (none);
+
+ &:hover {
+ background: tint($green,30%);
+ color: #fff;
+ @include transition(background-color .15s);
+ }
+ }
+
+ li {
+ border:none;
+ border-bottom: 1px dashed $lightGrey;
+ color: #fff;
+ }
+
+ li:first-child {
+ a {
+ border-top: 0px;
+ }
+ }
+
+ li:nth-child(2) {
+ a {
+ border-radius: 0px;
+ }
+ }
+
+ a {
+ @include clearfix();
+ display: block;
+ padding: 7px 20px;
+ border-bottom: none;
+ font-weight: 500;
+
+ .name {
+ float: left;
+
+ .ss-icon {
+ @include transition(opacity .15s);
+ display: inline-block;
+ top: 1px;
+ margin-right: 5px;
+ opacity: 0.5;
+ width: 17;
+ height: 21px;
+ vertical-align: middle;
+ }
+ }
+
+ .editor-indicator {
+ @include transition(opacity .15s);
+ float: right;
+ position: relative;
+ top: 3px;
+ font-size: 12px;
+ opacity: 0.3;
+ }
+
+ .ss-icon, .editor-indicator {
+ display: none;
+ }
+
+ &:hover {
+ color: #fff;
+
+ .ss-icon {
+ opacity: 1.0;
+ }
+
+ .editor-indicator {
+ opacity: 1.0;
+ }
+ }
+ }
+
+ // specific editor types
+ .empty {
+
+ a {
+ line-height: 1.4;
+ font-weight: 400;
+ background: #fff;
+ color: #3c3c3c;
+
+
+ &:hover {
+ background: tint($green,30%);
+ color: #fff;
+ }
+ }
+ }
+ }
+
+ .new-component {
+ text-align: center;
+
+ h5 {
+ color: $darkGreen;
+ }
+
+ }
+ }
+ }
+ }
+
+ .component {
+ border: 1px solid $lightBluishGrey2;
+ border-radius: 3px;
+ background: #fff;
+ @include transition(none);
+
+ &:hover {
+ border-color: #6696d7;
+
+ .drag-handle {
+ background-color: $blue;
+ border-color: $blue;
+ }
+ }
+
+ &.editing {
+ border: 1px solid $lightBluishGrey2;
+ z-index: auto;
+
+ .drag-handle,
+ .component-actions {
+ display: none;
+ }
+ }
+
+ &.component-placeholder {
+ border-color: #6696d7;
+ }
+
+ .drag-handle {
+ position: absolute;
+ display: block;
+ top: -1px;
+ right: -16px;
+ z-index: 10;
+ width: 15px;
+ height: 100%;
+ border-radius: 0 3px 3px 0;
+ border: 1px solid $lightBluishGrey2;
+ background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
+ cursor: move;
+ @include transition(none);
+ }
+ }
+
+ .xmodule_display {
+ padding: 40px 20px 20px;
+ overflow-x: auto;
+
+ h1 {
+ float: none;
+ margin-left: 0;
+ }
+ }
+
+ .wrapper-component-editor {
+ z-index: 9999;
+ position: relative;
+ background: $lightBluishGrey2;
+ }
+
+ .component-editor {
+ @include edit-box;
+ @include box-shadow(none);
+ display: none;
+ padding: 20px;
+ border-radius: 2px 2px 0 0;
+
+ .metadata_edit {
+ margin-bottom: 20px;
+ font-size: 13px;
+
+ li {
+ margin-bottom: 10px;
+ }
+
+ label {
+ display: inline-block;
+ margin-right: 10px;
+ }
+ }
+
+ h3 {
+ margin-bottom: 10px;
+ font-size: 18px;
+ font-weight: 700;
+ }
+
+ h5 {
+ margin-bottom: 8px;
+ color: #fff;
+ font-weight: 700;
+ }
+
+ .save-button {
+ margin-top: 10px;
+ margin: 15px 8px 0 0;
+ }
+ }
+ }
+
+ .unit-settings {
+ .window-contents {
+ padding: 10px 20px;
+ }
+
+ .unit-actions {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ .published-alert {
+ display: none;
+ padding: 10px;
+ border: 1px solid #edbd3c;
+ border-radius: 3px;
+ background: #fbf6e1;
+ font-size: 14px;
+ line-height: 1.4;
+
+ div {
+ margin-top: 15px;
+ }
+ }
+
+ input[type="radio"] {
+ margin-right: 7px;
+ }
+
+ .status {
+ font-size: 12px;
+
+ strong {
+ font-weight: 700;
+ }
+ }
+
+ .preview-button, .view-button {
+ @include white-button;
+ margin-bottom: 10px;
+ }
+
+ .publish-button {
+ @include orange-button;
+ }
+
+ .delete-button {
+ @include blue-button;
+ }
+
+ .delete-draft {
+ display: inline-block;
+ }
+
+ .delete-button,
+ .preview-button,
+ .publish-button,
+ .view-button {
+ font-size: 11px;
+ margin-top: 10px;
+ padding: 6px 15px 8px;
+ }
+ }
+
+ .unit-history {
+ &.collapsed {
+ h4 {
+ border-bottom: none;
+ border-radius: 3px;
+ }
+
+ .window-contents {
+ display: none;
+ }
+ }
+
+ ol {
+ border: 1px solid #ced2db;
+
+ li {
+ display: block;
+ padding: 6px 8px 8px 10px;
+ background: #edf1f5;
+ font-size: 12px;
+
+ &:hover {
+ background: #fffcf1;
+
+ .item-actions {
+ display: block;
+ }
+ }
+
+ &.checked {
+ background: #d1dae3;
+ }
+
+ .item-actions {
+ display: none;
+ }
+
+ input[type="radio"] {
+ margin-right: 7px;
+ }
+ }
+ }
+ }
+
+ .unit-location {
+ .url {
+ width: 100%;
+ margin-bottom: 10px;
+ @include box-shadow(none);
+ }
+
+ .draft-tag,
+ .hidden-tag,
+ .private-tag,
+ .has-new-draft-tag {
+ font-size: 8px;
+ }
+
+ .window-contents > ol {
+ @include tree-view;
+
+ .section-item {
+ display: inline-block;
+ width: 100%;
+ font-size: 11px;
+ padding: 2px 8px 4px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ @include box-sizing(border-box);
+ }
+
+ ol {
+ .section-item {
+ padding-left: 20px;
+ }
+
+ .new-unit-item {
+ margin-left: 20px;
+ }
+ }
+
+ ol ol {
+ .section-item {
+ padding-left: 34px;
+ }
+
+ .new-unit-item {
+ margin: 0 0 10px 41px;
+ }
+ }
+ }
+ }
+
+ .edit-state-draft {
+ .visibility,
+
+ .edit-draft-message,
+ .view-button {
+ display: none;
+ }
+
+ .published-alert {
+ display: block;
+ }
+ }
+
+ .edit-state-public {
+ .delete-draft,
+ .component-actions,
+ .new-component-item,
+ .editing-draft-alert,
+ .publish-draft-message,
+ .preview-button {
+ display: none;
+ }
+
+ .published-alert {
+ display: block;
+ }
+
+ .drag-handle {
+ display: none !important;
+ }
+ }
+
+ .edit-state-private {
+ .delete-draft,
+ .publish-draft,
+ .editing-draft-alert,
+ .create-draft,
+ .view-button {
+ display: none;
+ }
+ }
+}
+
+// editing units from courseware
+body.unit {
+
+ .component {
+ padding-top: 30px;
+
+ .component-actions {
+ @include box-sizing(border-box);
+ position: absolute;
+ width: 100%;
+ padding: 15px;
+ top: 0;
+ left: 0;
+ border-bottom: 1px solid $lightBluishGrey2;
+ background: $lightGrey;
+ }
+
+ &.editing {
+ padding-top: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/cms/static/sass/_course-info.scss b/cms/static/sass/views/_updates.scss
similarity index 95%
rename from cms/static/sass/_course-info.scss
rename to cms/static/sass/views/_updates.scss
index f36172c4df..8d92c9d860 100644
--- a/cms/static/sass/_course-info.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -1,4 +1,8 @@
-.course-info {
+// studio - views - course updates
+// ====================
+
+body.course.updates {
+
h2 {
margin-bottom: 24px;
font-size: 22px;
@@ -37,6 +41,11 @@
padding: 34px 0 42px;
border-top: 1px solid #cbd1db;
+ &:first-child {
+ padding-top: 0;
+ border: none;
+ }
+
&.editing {
position: relative;
z-index: 1001;
diff --git a/cms/static/sass/_users.scss b/cms/static/sass/views/_users.scss
similarity index 94%
rename from cms/static/sass/_users.scss
rename to cms/static/sass/views/_users.scss
index e107bdbb6d..ecaa319707 100644
--- a/cms/static/sass/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -1,4 +1,8 @@
-.users {
+// studio - views - course users
+// ====================
+
+body.course.users {
+
.new-user-form {
display: none;
padding: 15px 20px;
diff --git a/cms/templates/404.html b/cms/templates/404.html
new file mode 100644
index 0000000000..a45a223bad
--- /dev/null
+++ b/cms/templates/404.html
@@ -0,0 +1,14 @@
+<%inherit file="base.html" />
+<%block name="title">Page Not Found
+
+<%block name="content">
+
+
diff --git a/cms/templates/activation_complete.html b/cms/templates/activation_complete.html
index 5d9437ccb3..1e195a632c 100644
--- a/cms/templates/activation_complete.html
+++ b/cms/templates/activation_complete.html
@@ -5,7 +5,7 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/cms/templates/500.html b/cms/templates/500.html
new file mode 100644
index 0000000000..2645b0067b
--- /dev/null
+++ b/cms/templates/500.html
@@ -0,0 +1,13 @@
+<%inherit file="base.html" />
+<%block name="title">Server Error
+
+<%block name="content">
+
+Page not found
+The page that you were looking for was not found. Go back to the homepage or let us know about any pages that may have been moved at technical@edx.org.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/cms/templates/activation_active.html b/cms/templates/activation_active.html
index 07d3a37969..712c73abf9 100644
--- a/cms/templates/activation_active.html
+++ b/cms/templates/activation_active.html
@@ -7,7 +7,7 @@
Currently the edX servers are down
+Our staff is currently working to get the site back up as soon as possible. Please email us at technical@edx.org to report any problems or downtime.
+Account already active!
-This account has already been activated. Log in here.
+This account has already been activated. Log in here.
Activation Complete!
-Thanks for activating your account. Log in here.
+Thanks for activating your account. Log in here.
+
+
+
+
+ Course Content
+
+
+
+