Commit 9901212f by Frances Botsford Committed by Brian Talbot

overhaul of the studio course creation form html and sass

parent ae77795f
...@@ -23,6 +23,13 @@ body.dashboard { ...@@ -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)
// ==================== // ====================
......
...@@ -93,7 +93,6 @@ form { ...@@ -93,7 +93,6 @@ form {
} }
} }
// ELEM: form wrapper // ELEM: form wrapper
.wrapper-create-element { .wrapper-create-element {
height: 0; height: 0;
...@@ -117,10 +116,6 @@ form { ...@@ -117,10 +116,6 @@ form {
// form styling for creating a new content item (course, user, textbook) // form styling for creating a new content item (course, user, textbook)
form[class^="create-"] { form[class^="create-"] {
@extend .ui-window; @extend .ui-window;
@include box-sizing(border-box);
border-radius: 2px;
width: 100%;
background: $white;
.title { .title {
@extend .t-title4; @extend .t-title4;
...@@ -171,8 +166,8 @@ form[class^="create-"] { ...@@ -171,8 +166,8 @@ form[class^="create-"] {
input, textarea { input, textarea {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend .t-copy-base; @extend .t-copy-base;
@include transition(all $tmg-f2 ease-in-out 0s);
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: ($baseline/2); padding: ($baseline/2);
...@@ -185,6 +180,10 @@ form[class^="create-"] { ...@@ -185,6 +180,10 @@ form[class^="create-"] {
width: 25%; width: 25%;
} }
/*@include placeholder {
color: $gray-l3;
}*/
&:focus { &:focus {
+ .tip { + .tip {
......
...@@ -367,13 +367,11 @@ body.dashboard { ...@@ -367,13 +367,11 @@ body.dashboard {
background: $white; background: $white;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
.title { .title {
@extend .t-title4; @extend .t-title4;
font-weight: 600; font-weight: 700;
margin-bottom: ($baseline/2); margin-bottom: $baseline;
border-bottom: 1px solid $gray-l3; }
padding-bottom: ($baseline/2);
}
.row { .row {
@include clearfix(); @include clearfix();
...@@ -389,10 +387,6 @@ body.dashboard { ...@@ -389,10 +387,6 @@ body.dashboard {
margin-right: 4%; margin-right: 4%;
} }
.course-info {
width: 600px;
}
label { label {
@extend .t-title7; @extend .t-title7;
display: block; display: block;
...@@ -422,5 +416,24 @@ body.dashboard { ...@@ -422,5 +416,24 @@ body.dashboard {
.item-details { .item-details {
padding-bottom: 0; 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;
}
} }
} }
...@@ -39,33 +39,53 @@ ...@@ -39,33 +39,53 @@
<%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"> <section class="new-course">
<h3 class="title">${_("Create a New Course:")}</h3> <article>
<div class="item-details"> <form class="create-course course-info">
<form class="course-info"> <div class="wrap-error">
<div class="row"> <div id="course_creation_error" name="course_creation_error" class="message message-status message-status error" role="alert">
<label>${_("Course Name")}</label> <p>Please correct the Course Name and Organization fields below. All fields are required.</p>
<input type="text" class="new-course-name" />
</div> </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>
<div class="row">
<input type="submit" value="${_('Save')}" class="new-course-save"/> <fieldset>
<input type="button" value="${_('Cancel')}" class="new-course-cancel" /> <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> </div>
</form> </form>
</div> </article>
</section> </section>
</script> </script>
</%block> </%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