Skip to content
Snippets Groups Projects
Commit 6083ba1d authored by Calen Pennington's avatar Calen Pennington
Browse files

Merge pull request #945 from MITx/feature/cas/tom/section-details 

Feature/cas/tom/section details
parents 2cd17eae 1d40fa33
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
cms/static/js/base.js
+ 53
− 10
View file @ 6083ba1d
......@@ -10,7 +10,8 @@ var $spinner;
$(document).ready(function() {
$body = $('body');
$modal = $('.history-modal');
$modalCover = $('.modal-cover');
$modalCover = $('<div class="modal-cover">');
$body.append($modalCover);
$newComponentItem = $('.new-component-item');
$newComponentTypePicker = $('.new-component');
$newComponentTemplatePickers = $('.new-component-templates');
......@@ -102,8 +103,35 @@ $(document).ready(function() {
// pretty wacky stuff to happen
$('.file-input').bind('change', startUpload);
$('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
$body.on('click', '.section-published-date .edit-button', editSectionPublishDate);
$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');
}
});
$('.edit-subsection-publish-settings').on('change', '.start-date, .start-time', function() {
$('.edit-subsection-publish-settings').find('.save-button').show();
});
});
function editSectionPublishDate(e) {
e.preventDefault();
$modal = $('.edit-subsection-publish-settings').show();
$modal = $('.edit-subsection-publish-settings').show();
$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() == '') {
$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') {
......@@ -387,7 +415,9 @@ function _deleteItem($el) {
function showUploadModal(e) {
e.preventDefault();
$('.upload-modal').show();
$modal = $('.upload-modal').show();
$('.file-input').bind('change', startUpload);
$('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
$modalCover.show();
}
......@@ -448,8 +478,10 @@ function markAsLoaded() {
}
function hideModal(e) {
e.preventDefault();
$('.modal').hide();
if(e) {
e.preventDefault();
}
$modal.hide();
$modalCover.hide();
}
......@@ -726,15 +758,15 @@ function cancelSetSectionScheduleDate(e) {
function saveSetSectionScheduleDate(e) {
e.preventDefault();
input_date = $(this).siblings('input.date').val();
input_time = $(this).siblings('input.time').val();
input_date = $('.edit-subsection-publish-settings .start-date').val();
input_time = $('.edit-subsection-publish-settings .start-time').val();
start = getEdxTimeFromDateTimeVals(input_date, input_time);
id = $(this).closest("section.courseware-section").data("id");
id = $modal.attr('data-id');
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",
......@@ -743,7 +775,18 @@ function saveSetSectionScheduleDate(e) {
data:JSON.stringify({ 'id' : id, 'metadata' : {'start' : start}, 'data': null, 'children' : null})
}).success(function()
{
alert('Your changes have been saved.');
location.reload();
var $thisSection = $('.courseware-section[data-id="' + id + '"]');
$thisSection.find('.section-published-date').html('<span class="published-status"><strong>Will Release:</strong> ' + input_date + ' at ' + input_time + '</span><a href="#" class="edit-button" data-date="' + input_date + '" data-time="' + input_time + '" data-id="' + id + '">Edit</a>');
$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();
});
}
cms/static/sass/_courseware.scss
+ 146
− 10
View file @ 6083ba1d
......@@ -28,16 +28,72 @@ input.courseware-unit-search-input {
&.collapsed {
padding-bottom: 0;
}
header {
height: 47px;
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: 700;
}
}
h4 {
display: none !important;
.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: 700;
color: $blue;
cursor: pointer;
}
.datepair .date {
width: 80px;
}
.datepair .time {
width: 65px;
}
&.collapsed .subsection-list,
.collapsed .subsection-list,
.collapsed > ol {
......@@ -45,15 +101,15 @@ input.courseware-unit-search-input {
}
header {
height: 67px;
height: 75px;
.item-details {
float: left;
padding: 10px 0 0;
padding: 21px 0 0;
}
.item-actions {
margin-top: 11px;
margin-top: 21px;
margin-right: 12px;
.edit-button,
......@@ -64,7 +120,7 @@ input.courseware-unit-search-input {
.expand-collapse-icon {
float: left;
margin: 16px 6px 16px 16px;
margin: 29px 6px 16px 16px;
@include transition(none);
}
......@@ -74,11 +130,37 @@ input.courseware-unit-search-input {
}
h3 {
font-size: 16px;
font-size: 19px;
font-weight: 700;
color: $blue;
}
.section-name-span {
cursor: pointer;
@include transition(color .15s);
&:hover {
color: $orange;
}
}
.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;
......@@ -161,3 +243,57 @@ input.courseware-unit-search-input {
.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;
}
}
\ No newline at end of file
cms/templates/overview.html
+ 19
− 9
View file @ 6083ba1d
......@@ -56,6 +56,20 @@
</%block>
<%block name="content">
<div class="edit-subsection-publish-settings">
<div class="settings">
<h3>Section Release Date</h3>
<div class="picker datepair">
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
<div class="description">
<p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students along with the 5 subsections within it. Any units marked private will only be visible to admins.</p>
</div>
</div>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Courseware</h1>
......@@ -74,23 +88,19 @@
<a href="#" class="save-button edit-section-name-save">Save</a><a href="#" class="cancel-button edit-section-name-cancel">Cancel</a>
</div>
</h3>
<h4 class='section-published-date'>
<div class="section-published-date">
<%
start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None
start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else ''
start_time_str = start_date.strftime('%H:%M') if start_date is not None else ''
%>
%if start_date is None:
<strong>Unscheduled:</strong>
<a href="#" class="set-publish-date">click here to set</a>
<span class="published-status">This section has not been released.</span>
<a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">Schedule</a>
%else:
<strong>${start_date_str} at ${start_time_str}</strong> <a href="#" class="set-publish-date">click here to edit</a>
<span class="published-status"><strong>Will Release:</strong> ${start_date_str} at ${start_time_str}</span>
<a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
%endif
</h4>
<div class="datepair" data-language="javascript" style="display: none">
<input type="text" name="start_date" value="${start_date_str}" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
<input type="text" name="start_time" value="${start_time_str}" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
<a href="#" class="save-button edit-section-start-save">Save</a><a href="#" class="cancel-button edit-section-start-cancel">Cancel</a>
</div>
</div>
<div class="item-actions">
......
common/static/js/vendor/timepicker/jquery.timepicker.css
+ 1
− 1
View file @ 6083ba1d
......@@ -11,7 +11,7 @@
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
outline: none;
z-index: 10001;
z-index: 100001;
font-size: 12px;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment