overhaul of the studio course creation form html and sass

cms/static/sass/_shame.scss

@@ -23,6 +23,13 @@ body.dashboard {
 }
 
 
+// yes we have no boldness today - need to fix the resets
+body strong,
+body b {
+  font-weight: 700;
+}
+
+// known things to do (paint the fence, sand the floor, wax on/off)
 // ====================
 
 

cms/static/sass/elements/_forms.scss

@@ -93,7 +93,6 @@ form {
   }
 }
 
-
 // ELEM: form wrapper
 .wrapper-create-element {
   height: 0;
@@ -117,10 +116,6 @@ form {
 // form styling for creating a new content item (course, user, textbook)
 form[class^="create-"] {
   @extend .ui-window;
-  @include box-sizing(border-box);
-  border-radius: 2px;
-  width: 100%;
-  background: $white;
 
   .title {
     @extend .t-title4;
@@ -171,8 +166,8 @@ form[class^="create-"] {
 
 
       input, textarea {
-        @include transition(all $tmg-f2 ease-in-out 0s);
         @extend .t-copy-base;
+        @include transition(all $tmg-f2 ease-in-out 0s);
         height: 100%;
         width: 100%;
         padding: ($baseline/2);
@@ -185,6 +180,10 @@ form[class^="create-"] {
           width: 25%;
         }
 
+        /*@include placeholder {
+          color: $gray-l3;
+        }*/
+
         &:focus {
 
           + .tip {

cms/static/sass/views/_dashboard.scss

@@ -367,13 +367,11 @@ body.dashboard {
 		background: $white;
 		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 
-		.title {
-			@extend .t-title4;
-			font-weight: 600;
-			margin-bottom: ($baseline/2);
-			border-bottom: 1px solid $gray-l3;
-			padding-bottom: ($baseline/2);
-		}
+	    .title {
+	      @extend .t-title4;
+	      font-weight: 700;
+	      margin-bottom: $baseline;
+	    }
 
 		.row {
 			@include clearfix();
@@ -389,10 +387,6 @@ body.dashboard {
 			margin-right: 4%;
 		}
 
-		.course-info {
-			width: 600px;
-		}
-
 		label {
 			@extend .t-title7;
 			display: block;
@@ -422,5 +416,24 @@ body.dashboard {
 		.item-details {
 			padding-bottom: 0;
 		}
+
+	    .wrap-error {
+	      @include transition(all $tmg-f2 ease 0s);
+	      height: 0;
+	      overflow: hidden;
+	      opacity: 0;
+	    }
+
+	    .wrap-error.is-shown {
+	      height: 45px;
+	      opacity: 1;
+	    }
+
+	    .message-status {
+	      display: block;
+	      margin-bottom: 0;
+	      padding-left: 30px;
+    }
+
 	}
 }

cms/templates/index.html

@@ -39,33 +39,53 @@
 <%block name="header_extras">
   <script type="text/template" id="new-course-template">
     <section class="new-course">
-      <h3 class="title">${_("Create a New Course:")}</h3>
-      <div class="item-details">
-        <form class="course-info">
-          <div class="row">
-	    <label>${_("Course Name")}</label>
-            <input type="text" class="new-course-name" />
+      <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 Course Name and Organization fields below. All fields are required.</p>
           </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 class="column">
-              <label>Course Run</label>
-              <input type="text" class="new-course-run" />
-            </div>
           </div>
-          <div class="row">
-            <input type="submit" value="${_('Save')}" class="new-course-save"/>
-            <input type="button" value="${_('Cancel')}" class="new-course-cancel" />
+
+          <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 - ")}<strong>${_("Note: This cannot be changed")}</strong></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")}</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")}</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")}</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>
-      </div>
+      </article>
     </section>
   </script>
 </%block>