diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 3e79b1a1ad..de0fd955dc 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -597,11 +597,9 @@ function cancelNewSection(e) { function addNewCourse(e) { e.preventDefault(); - $('.new-course-button').addClass('disabled'); - $(e.target).addClass('disabled'); - var $newCourse = $($('#new-course-template').html()); + $('.new-course-button').addClass('is-disabled'); + var $newCourse = $('.wrapper-create-course').addClass('is-shown'); var $cancelButton = $newCourse.find('.new-course-cancel'); - $('.courses').prepend($newCourse); $newCourse.find('.new-course-name').focus().select(); $newCourse.find('form').bind('submit', saveNewCourse); $cancelButton.bind('click', cancelNewCourse); @@ -613,11 +611,11 @@ function addNewCourse(e) { function saveNewCourse(e) { e.preventDefault(); - var $newCourse = $(this).closest('.new-course'); - var display_name = $newCourse.find('.new-course-name').val(); - var org = $newCourse.find('.new-course-org').val(); - var number = $newCourse.find('.new-course-number').val(); - var run = $newCourse.find('.new-course-run').val(); + var $newCourseForm = $(this).closest('#create-course-form'); + var display_name = $newCourseForm.find('.new-course-name').val(); + var org = $newCourseForm.find('.new-course-org').val(); + var number = $newCourseForm.find('.new-course-number').val(); + var run = $newCourseForm.find('.new-course-run').val(); var required_field_text = gettext('Required field'); @@ -646,6 +644,7 @@ function saveNewCourse(e) { var setNewCourseErrMsgs = function(header_err_msg, display_name_errMsg, org_errMsg, number_errMsg, run_errMsg) { if (header_err_msg) { + $('.wrapper-create-course').addClass('has-errors'); $('.wrap-error').addClass('is-shown'); $('#course_creation_error').html('

' + header_err_msg + '

'); } else { @@ -701,8 +700,8 @@ function saveNewCourse(e) { function cancelNewCourse(e) { e.preventDefault(); - $('.new-course-button').removeClass('disabled'); - $(this).parents('section.new-course').remove(); + $('.new-course-button').removeClass('is-disabled'); + $('.wrapper-create-course').removeClass('is-shown'); } function addNewSubsection(e) { diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss index a79177cc31..ab3ad6f810 100644 --- a/cms/static/sass/views/_dashboard.scss +++ b/cms/static/sass/views/_dashboard.scss @@ -358,20 +358,30 @@ body.dashboard { } } - .new-course { - @include clearfix(); - padding: 0; - margin-top: $baseline; - border-radius: 3px; - border: 1px solid $gray; - background: $white; - box-shadow: 0 1px 2px rgba(0, 0, 0, .1); - .title { - @extend .t-title4; - font-weight: 700; - margin-bottom: $baseline; + // ELEM: new user form + .wrapper-create-course { + + // CASE: when form is animating + &.animate { + + // STATE: shown + &.is-shown { + height: ($baseline*26); + + // STATE: errors + &.has-errors { + height: ($baseline*33); + } + } } + } + + // ==================== + + // course listings + + .create-course { .row { @include clearfix(); diff --git a/cms/templates/index.html b/cms/templates/index.html index 619824ede6..ff6318ea5e 100644 --- a/cms/templates/index.html +++ b/cms/templates/index.html @@ -38,55 +38,7 @@ <%block name="header_extras"> @@ -133,6 +85,56 @@ %endif +
+
+
+ +
+ +
+

${_("Create a New Course")}

+ +
+ ${_("Required Information to Create a New Course")} + +
    +
  1. + + + ${_("The public display name for your course.")} +
    2. +
  2. + + + ${_("The name of the organization sponsoring the course")} - ${_("Note: No spaces or special characters are allowed. This cannot be changed.")} +
    3. + +
  3. + + + ${_("The unique number that identifies your course within your organization")} - ${_("Note: No spaces or special characters are allowed. This cannot be changed.")} +
    4. + +
  4. + + + ${_("The term in which your course will run")} - ${_("Note: No spaces or special characters are allowed. This cannot be changed.")} +
    5. +
+ +
+
+ +
+ + +
+ +
+
+ %if len(courses) > 0:
+