Skip to content

E
edx-platform
Commit 16187462 by Brian Talbot
Options

Studio: syncs up visual and semantic standards b/t create course and user forms

parent beda411e
Showing with 84 additions and 71 deletions
cms/static/js/base.js
...@@ -597,11 +597,9 @@ function cancelNewSection(e) { ...@@ -597,11 +597,9 @@ function cancelNewSection(e) {
function addNewCourse(e) { function addNewCourse(e) {
e.preventDefault(); e.preventDefault();
$('.new-course-button').addClass('disabled'); $('.new-course-button').addClass('is-disabled');
$(e.target).addClass('disabled'); var $newCourse = $('.wrapper-create-course').addClass('is-shown');
var $newCourse = $($('#new-course-template').html());
var $cancelButton = $newCourse.find('.new-course-cancel'); var $cancelButton = $newCourse.find('.new-course-cancel');
$('.courses').prepend($newCourse);
$newCourse.find('.new-course-name').focus().select(); $newCourse.find('.new-course-name').focus().select();
$newCourse.find('form').bind('submit', saveNewCourse); $newCourse.find('form').bind('submit', saveNewCourse);
$cancelButton.bind('click', cancelNewCourse); $cancelButton.bind('click', cancelNewCourse);
...@@ -613,11 +611,11 @@ function addNewCourse(e) { ...@@ -613,11 +611,11 @@ function addNewCourse(e) {
function saveNewCourse(e) { function saveNewCourse(e) {
e.preventDefault(); e.preventDefault();
var $newCourse = $(this).closest('.new-course'); var $newCourseForm = $(this).closest('#create-course-form');
var display_name = $newCourse.find('.new-course-name').val(); var display_name = $newCourseForm.find('.new-course-name').val();
var org = $newCourse.find('.new-course-org').val(); var org = $newCourseForm.find('.new-course-org').val();
var number = $newCourse.find('.new-course-number').val(); var number = $newCourseForm.find('.new-course-number').val();
var run = $newCourse.find('.new-course-run').val(); var run = $newCourseForm.find('.new-course-run').val();
var required_field_text = gettext('Required field'); var required_field_text = gettext('Required field');
...@@ -646,6 +644,7 @@ function saveNewCourse(e) { ...@@ -646,6 +644,7 @@ function saveNewCourse(e) {
var setNewCourseErrMsgs = function(header_err_msg, display_name_errMsg, org_errMsg, number_errMsg, run_errMsg) { var setNewCourseErrMsgs = function(header_err_msg, display_name_errMsg, org_errMsg, number_errMsg, run_errMsg) {
if (header_err_msg) { if (header_err_msg) {
$('.wrapper-create-course').addClass('has-errors');
$('.wrap-error').addClass('is-shown'); $('.wrap-error').addClass('is-shown');
$('#course_creation_error').html('<p>' + header_err_msg + '</p>'); $('#course_creation_error').html('<p>' + header_err_msg + '</p>');
} else { } else {
...@@ -701,8 +700,8 @@ function saveNewCourse(e) { ...@@ -701,8 +700,8 @@ function saveNewCourse(e) {
function cancelNewCourse(e) { function cancelNewCourse(e) {
e.preventDefault(); e.preventDefault();
$('.new-course-button').removeClass('disabled'); $('.new-course-button').removeClass('is-disabled');
$(this).parents('section.new-course').remove(); $('.wrapper-create-course').removeClass('is-shown');
} }
function addNewSubsection(e) { function addNewSubsection(e) {
......
cms/static/sass/views/_dashboard.scss
...@@ -358,20 +358,30 @@ body.dashboard { ...@@ -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 { // ELEM: new user form
@extend .t-title4; .wrapper-create-course {
font-weight: 700;
margin-bottom: $baseline; // 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 { .row {
@include clearfix(); @include clearfix();
......
cms/templates/index.html
...@@ -38,55 +38,7 @@ ...@@ -38,55 +38,7 @@
<%block name="header_extras"> <%block name="header_extras">
<script type="text/template" id="new-course-template"> <script type="text/template" id="new-course-template">
<section class="new-course">
<article>
<form class="create-course course-info">
<div class="wrap-error">
<div id="course_creation_error" name="course_creation_error" class="message message-status message-status error" role="alert">
<p>${_("Please correct the highlighted fields below.")}</p>
</div>
</div>
<fieldset>
<legend class="sr">${_("Required Information to Create a New Course")}</legend>
<h3 class="title">${_("Create a New Course")}</h3>
<ol class="list-input">
<li class="field field-inline text required" id="field-course-name">
<label for="new-course-name">${_("Course Name")}</label>
<input class="new-course-name" id="new-course-name" type="text" name="new-course-name" aria-required="true" placeholder="${_('e.g. Introduction to Computer Science')}" />
<span class="tip tip-stacked">${_("The public display name for your course.")}</span>
</li>
<li class="field field-inline text required" id="field-organization">
<label for="new-course-org">${_("Organization")}</label>
<input class="new-course-org" id="new-course-org" type="text" name="new-course-org" aria-required="true" placeholder="${_('e.g. MITX or IMF')}" />
<span class="tip tip-stacked">${_("The name of the organization sponsoring the course")} - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
</li>
<li class="field field-inline text required" id="field-course-number">
<label for="new-course-number">${_("Course Number")}</label>
<input class="new-course-number" id="new-course-number" type="text" name="new-course-number" aria-required="true" placeholder="${_('e.g. CS101')}" />
<span class="tip tip-stacked">${_("The unique number that identifies your course within your organization")} - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
</li>
<li class="field field-inline text required" id="field-course-run">
<label for="new-course-run">${_("Course Run")}</label>
<input class="new-course-run" id="new-course-run" type="text" name="new-course-run" aria-required="true"placeholder="${_('e.g. 2013_Spring')}" />
<span class="tip tip-stacked">${_("The term in which your course will run")} - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
</li>
</ol>
</fieldset>
<div class="actions">
<input type="submit" value="${_('Save')}" class="action action-primary new-course-save" />
<input type="button" value="${_('Cancel')}" class="action action-secondary action-cancel new-course-cancel" />
</div>
</form>
</article>
</section>
</script> </script>
</%block> </%block>
...@@ -133,6 +85,56 @@ ...@@ -133,6 +85,56 @@
%endif %endif
</div> </div>
<div class="wrapper-create-element wrapper-create-course">
<form class="create-course course-info" id="create-course-form" name="create-course-form">
<div class="wrap-error">
<div id="course_creation_error" name="course_creation_error" class="message message-status message-status error" role="alert">
<p>${_("Please correct the highlighted fields below.")}</p>
</div>
</div>
<div class="wrapper-form">
<h3 class="title">${_("Create a New Course")}</h3>
<fieldset>
<legend class="sr">${_("Required Information to Create a New Course")}</legend>
<ol class="list-input">
<li class="field field-inline text required" id="field-course-name">
<label for="new-course-name">${_("Course Name")}</label>
<input class="new-course-name" id="new-course-name" type="text" name="new-course-name" aria-required="true" placeholder="${_('e.g. Introduction to Computer Science')}" />
<span class="tip tip-stacked">${_("The public display name for your course.")}</span>
</li>
<li class="field field-inline text required" id="field-organization">
<label for="new-course-org">${_("Organization")}</label>
<input class="new-course-org" id="new-course-org" type="text" name="new-course-org" aria-required="true" placeholder="${_('e.g. MITX or IMF')}" />
<span class="tip tip-stacked">${_("The name of the organization sponsoring the course")} - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
</li>
<li class="field field-inline text required" id="field-course-number">
<label for="new-course-number">${_("Course Number")}</label>
<input class="new-course-number" id="new-course-number" type="text" name="new-course-number" aria-required="true" placeholder="${_('e.g. CS101')}" />
<span class="tip tip-stacked">${_("The unique number that identifies your course within your organization")} - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
</li>
<li class="field field-inline text required" id="field-course-run">
<label for="new-course-run">${_("Course Run")}</label>
<input class="new-course-run" id="new-course-run" type="text" name="new-course-run" aria-required="true"placeholder="${_('e.g. 2013_Spring')}" />
<span class="tip tip-stacked">${_("The term in which your course will run")} - <strong>${_("Note: No spaces or special characters are allowed. This cannot be changed.")}</strong></span>
</li>
</ol>
</fieldset>
</div>
<div class="actions">
<input type="submit" value="${_('Save')}" class="action action-primary new-course-save" />
<input type="button" value="${_('Cancel')}" class="action action-secondary action-cancel new-course-cancel" />
</div>
</form>
</div>
%if len(courses) > 0: %if len(courses) > 0:
<div class="courses"> <div class="courses">
<ul class="list-courses"> <ul class="list-courses">
......
cms/templates/manage_users.html
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
<fieldset class="form-fields"> <fieldset class="form-fields">
<legend class="sr">${_("New Team Member Information")}</legend> <legend class="sr">${_("New Team Member Information")}</legend>
<ol class="list-input"> <ol class="list-input">
<li class="field text required create-user-email"> <li class="field text required create-user-email">
<label for="user-email-input">${_("User's Email Address")}</label> <label for="user-email-input">${_("User's Email Address")}</label>
...@@ -47,6 +48,7 @@ ...@@ -47,6 +48,7 @@
</ol> </ol>
</fieldset> </fieldset>
</div> </div>
<div class="actions"> <div class="actions">
<button class="action action-primary" type="submit">${_("Add User")}</button> <button class="action action-primary" type="submit">${_("Add User")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button> <button class="action action-secondary action-cancel">${_("Cancel")}</button>
......
Markdown is supported
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