Skip to content

E
edx-platform
Commit 9901212f by Frances Botsford Committed by Brian Talbot
Options

overhaul of the studio course creation form html and sass

parent ae77795f
Showing with 79 additions and 40 deletions
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>
......
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