From e3457fa230b65524b71a53139843657fc0b346b9 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Thu, 18 Oct 2012 10:40:24 -0400 Subject: [PATCH 1/3] started styling section date pickers --- cms/static/js/base.js | 2 +- cms/static/sass/_courseware.scss | 51 +++++++++++++++++++++++++------- cms/templates/overview.html | 21 +++++-------- 3 files changed, 50 insertions(+), 24 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 5e91eca875..8834d69dc8 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -734,7 +734,7 @@ function saveSetSectionScheduleDate(e) { id = $(this).closest("section.courseware-section").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", diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index 752c33346f..0ba4b84226 100644 --- a/cms/static/sass/_courseware.scss +++ b/cms/static/sass/_courseware.scss @@ -28,14 +28,45 @@ input.courseware-unit-search-input { &.collapsed { padding-bottom: 0; + } - header { - height: 47px; - } - - h4 { - display: none !important; - } + label { + float: left; + line-height: 29px; + } + + .datepair { + float: left; + margin-left: 10px; + } + + .section-published-date { + position: absolute; + top: 12px; + right: 90px; + width: 250px; + font-size: 13px; + } + + .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, @@ -45,11 +76,11 @@ input.courseware-unit-search-input { } header { - height: 67px; + height: 55px; .item-details { float: left; - padding: 10px 0 0; + padding: 15px 0 0; } .item-actions { @@ -64,7 +95,7 @@ input.courseware-unit-search-input { .expand-collapse-icon { float: left; - margin: 16px 6px 16px 16px; + margin: 20px 6px 16px 16px; @include transition(none); } diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 17283fe4b2..91b39d7586 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -74,24 +74,19 @@ SaveCancel -

+
+ <% 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: - Unscheduled: - click here to set - %else: - ${start_date_str} at ${start_time_str} click here to edit - %endif -

- +
+ + + +
+
From f84b603133cdad1fc31d7b434b02c38572670b52 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 22 Oct 2012 13:10:52 -0400 Subject: [PATCH 2/3] wrapped up section date setting; need help with already published sections --- cms/static/js/base.js | 61 ++++++++++-- cms/static/sass/_courseware.scss | 95 +++++++++++++++++-- cms/templates/overview.html | 29 ++++-- .../vendor/timepicker/jquery.timepicker.css | 2 +- 4 files changed, 162 insertions(+), 25 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 8834d69dc8..4f162127be 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -10,7 +10,8 @@ var $spinner; $(document).ready(function() { $body = $('body'); $modal = $('.history-modal'); - $modalCover = $('.modal-cover'); + $modalCover = $('
'); + $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,12 +758,12 @@ 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 @@ -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('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(); }); } diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index 0ba4b84226..e064428dee 100644 --- a/cms/static/sass/_courseware.scss +++ b/cms/static/sass/_courseware.scss @@ -42,10 +42,35 @@ input.courseware-unit-search-input { .section-published-date { position: absolute; - top: 12px; + top: 19px; right: 90px; - width: 250px; - font-size: 13px; + padding: 4px 10px; + border-radius: 3px; + background: $lightGrey; + text-align: right; + + .published-status { + font-size: 12px; + margin-right: 15px; + + strong { + font-weight: 700; + } + } + + .schedule-button { + @include blue-button; + } + + .edit-button { + @include blue-button; + } + + .schedule-button, + .edit-button { + font-size: 11px; + padding: 3px 15px 5px; + } } .datepair .date, @@ -76,15 +101,15 @@ input.courseware-unit-search-input { } header { - height: 55px; + height: 75px; .item-details { float: left; - padding: 15px 0 0; + padding: 21px 0 0; } .item-actions { - margin-top: 11px; + margin-top: 21px; margin-right: 12px; .edit-button, @@ -95,7 +120,7 @@ input.courseware-unit-search-input { .expand-collapse-icon { float: left; - margin: 20px 6px 16px 16px; + margin: 29px 6px 16px 16px; @include transition(none); } @@ -105,7 +130,7 @@ input.courseware-unit-search-input { } h3 { - font-size: 16px; + font-size: 19px; font-weight: 700; color: $blue; } @@ -192,3 +217,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 diff --git a/cms/templates/overview.html b/cms/templates/overview.html index 91b39d7586..cc0d7e8e32 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -56,6 +56,20 @@ <%block name="content"> +
+
+

Section Release Date

+
+ + +
+

On the date set above, this section – – will be released to students along with the 5 subsections within it. Any units marked private will only be visible to admins.

+
+
+ SaveCancel +
+
+

Courseware

@@ -75,18 +89,19 @@
- <% 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: + This section has not been released. + Schedule + %else: + Will Release: ${start_date_str} at ${start_time_str} + Edit + %endif +
diff --git a/common/static/js/vendor/timepicker/jquery.timepicker.css b/common/static/js/vendor/timepicker/jquery.timepicker.css index 045751cc06..ad6dae98b8 100755 --- a/common/static/js/vendor/timepicker/jquery.timepicker.css +++ b/common/static/js/vendor/timepicker/jquery.timepicker.css @@ -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; } From 1d40fa33600d681d9a9fadecef28c734405df1f0 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 22 Oct 2012 13:21:45 -0400 Subject: [PATCH 3/3] tweaked styles for section naming --- cms/static/sass/_courseware.scss | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss index e064428dee..094b6183dd 100644 --- a/cms/static/sass/_courseware.scss +++ b/cms/static/sass/_courseware.scss @@ -135,6 +135,32 @@ input.courseware-unit-search-input { 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;