Merge pull request #908 from MITx/feature/tomg/cas-new-course-style

polished new course form

cms/djangoapps/contentstore/views.py

@@ -109,7 +109,7 @@ def index(request):
     courses = modulestore().get_items(['i4x', None, None, 'course', None])
 
     # filter out courses that we don't have access to
-    courses = filter(lambda course: has_access(request.user, course.location) and course.location.course != 'templates', courses)
+    courses = filter(lambda course: has_access(request.user, course.location) and course.location.course != 'templates' and course.location.org!='' and course.location.course!='' and course.location.name!='', courses)
 
     return render_to_response('index.html', {
         'new_course_template' : Location('i4x', 'edx', 'templates', 'course', 'Empty'),

cms/static/js/base.js

@@ -491,11 +491,13 @@ function addNewCourse(e) {
 function saveNewCourse(e) {
     e.preventDefault();
 
+    var $newCourse = $(this).closest('.new-course');
+
     template = $(this).data('template');
 
-    org = $(this).prevAll('.new-course-org').val();
-    number = $(this).prevAll('.new-course-number').val();
-    display_name = $(this).prevAll('.new-course-name').val();
+    org = $newCourse.find('.new-course-org').val();
+    number = $newCourse.find('.new-course-number').val();
+    display_name = $newCourse.find('.new-course-name').val();
 
     if (org == '' || number == '' || display_name == ''){
         alert('You must specify all fields in order to create a new course.')

cms/static/sass/_dashboard.scss

@@ -41,4 +41,57 @@
 	display: block;
 	padding: 20px;
 	text-align: center;
+}
+
+.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

cms/templates/index.html

@@ -4,16 +4,29 @@
 
 <%block name="header_extras">
   <script type="text/template" id="new-course-template">
-    <section class="courseware-section new-course">
-      <header>
-        <div class="item-details">
-          <h3 class="course-info">
-          	<input type="text" placeholder="Organization" class="new-course-org" />
-          	<input type="text" placeholder="Course Number" class="new-course-number" />
-          	<input type="text" placeholder="Course Name" class="new-course-name" />
-          	<a href="#" class="new-course-save" data-template="${new_course_template}">Save</a><a href="#" class="new-course-cancel">Cancel</a></h3>
-        </div>
-      </header>
+    <section class="new-course">
+      <div class="item-details">
+        <form class="course-info">
+          <div class="row">
+            <label>Course Name</label>
+            <input type="text" class="new-course-name" />
+          </div>
+          <div class="row">
+            <div class="column">
+              <label>Organization</label>
+              <input type="text" class="new-course-org" />
+            </div>
+            <div class="column">
+              <label>Course Number</label>
+              <input type="text" class="new-course-number" />
+            </div>
+          </div>
+          <div class="row">
+            <a href="#" class="new-course-save" data-template="${new_course_template}">Save</a>
+            <a href="#" class="new-course-cancel">Cancel</a>
+          </div>
+        </form>
+      </div>
     </section>
   </script>
  </%block>