Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio - restyling course basic details and adding in a course's URL more prominently WIP

Browse Source
This commit is contained in:
Brian Talbot
2013-04-08 15:39:01 -04:00
parent aaf95ddbba
commit 4e331a2c6a
4 changed files with 111 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cms/static/sass/elements/_controls.scss
View File

@@ -97,7 +97,7 @@
color: $blue;
&:hover, &:active {
background: $blue-l3;
background: $blue-l4;
color: $blue-s2;
}

39
cms/static/sass/elements/_forms.scss
View File

@@ -8,11 +8,11 @@ input[type="password"],
textarea.text {
padding: 6px 8px 8px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border: 1px solid $gray-l2;
border-radius: 2px;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
@include linear-gradient($gray-l5, $white);
background-color: $gray-l5;
@include box-shadow(inset 0 1px 2px $shadow-l1);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: $baseFontColor;
@@ -21,7 +21,7 @@ textarea.text {
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
color: #979faf;
color: $gray-l2;
}
&:focus {
@@ -39,7 +39,7 @@ textarea.text {
color: $gray-d2;
}
input, textarea {
label, input, textarea {
pointer-events: none;
}
}
@@ -61,8 +61,31 @@ form {
.note {
@include box-sizing(border-box);
padding: $baseline;
background: $gray-l4;
.title {
}
.copy {
}
// note with actions
&.has-actions {
@include clearfix();
.title {
}
.copy {
}
.list-actions {
}
}
}
.note-promotion {

67
cms/static/sass/views/_settings.scss
View File

@@ -147,7 +147,7 @@ body.course.settings {
}
label {
@include font-size(14);
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
font-weight: 400;
@@ -243,12 +243,31 @@ body.course.settings {
.list-input {
@include clearfix();
padding: 0 ($baseline/2);
.field {
margin-bottom: 0;
}
}
// course details that should appear more like content than elements to change
.field.is-not-editable {
label {
}
input, textarea {
@extend .t-copy-lead1;
@include box-shadow(none);
border: none;
background: none;
padding: 0;
margin: 0;
font-weight: 600;
}
}
#field-course-organization {
float: left;
width: flex-grid(2, 9);
@@ -265,6 +284,52 @@ body.course.settings {
float: left;
width: flex-grid(5, 9);
}
// course link note
.note-promotion-courseURL {
@include box-shadow(0 1px 1px $shadow-l1);
@include border-radius(($baseline/5));
margin-top: ($baseline*1.5);
border: 1px solid $gray-l3;
padding: ($baseline/2) 0 0 0;
.title {
@extend .t-copy-sub1;
margin: 0 0 ($baseline/10) 0;
padding: 0 ($baseline/2);
}
.copy {
padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);
.link-courseURL {
@extend .t-copy-lead1;
&:hover {
}
}
}
.list-actions {
@include box-shadow(inset 0 1px 1px $shadow-l1);
border-top: 1px solid $gray-l4;
padding: ($baseline/2);
background: $gray-l5;
.action-primary {
@include blue-button();
@include font-size(13);
.icon {
@extend .t-icon;
@include font-size(16);
display: inline-block;
vertical-align: middle;
}
}
}
}
}
// specific fields - schedule

27
cms/templates/settings.html
View File

@@ -67,20 +67,6 @@ from contentstore import utils
<span class="tip">The nuts and bolts of your course</span>
</header>
<div class="note note-promotion note-promotion-courseURL">
<h3 class="title">Your Course's Live URL</h3>
<div class="copy">
<p>Students can enroll in and access ${context_course.display_name_with_default} at: <a rel="external" href="${utils.get_lms_link_for_about_page(course_location)}" />${utils.get_lms_link_for_about_page(course_location)}</a></p>
</div>
<ul class="list-actions">
<li class="action-item">
<a href="" class="action action-primary"><i class="ss-icon icon ss-symbolicons-block icon icon-inline icon-announcement">&#xEC00;</i> Download Studio Documentation</a>
<span class="tip">How to use Studio to build your course</span>
</li>
</ul>
</div>
<ol class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
<label for="course-organization">Organization</label>
@@ -97,6 +83,19 @@ from contentstore import utils
<input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-name" value="[Course Name]" readonly />
</li>
</ol>
<div class="note note-promotion note-promotion-courseURL has-actions">
<h3 class="title">Course URL (for student enrollment and access)</h3>
<div class="copy">
<p><a class="link-courseURL" rel="external" href="${utils.get_lms_link_for_about_page(course_location)}" />${utils.get_lms_link_for_about_page(course_location)}</a></p>
</div>
<ul class="list-actions">
<li class="action-item">
<a title="Send a note to students via email" href="mailto:john.doe@gmail.com?Subject=Enroll%20in%20COURSENAME&body=Hi,%20COURSENAME,%20provided%20by%20edX,%20is%20almost%20ready%20to%20begin.%20Please%20enroll%20for%20this%20course%20at%20${utils.get_lms_link_for_about_page(course_location)}." class="action action-primary"><i class="ss-icon icon ss-symbolicons-standard icon icon-inline icon-announcement">&#x2709;</i> Send an invitation to your students</a>
</li>
</ul>
</div>
</section>
<hr class="divide" />