Skip to content

E
edx-platform
Commit 1b679750 by Brian Talbot
Options

studio - settings: more revamp of tabs to views WIP

parent dc07e737
Showing with 248 additions and 45 deletions
cms/static/sass/_account.scss
// Studio - Sign In/Up // Studio - Sign In/Up
// ==================== // ====================
.signup, .signin { body.signup, body.signin {
.wrapper-content { .wrapper-content {
margin: 0; margin: 0;
......
cms/static/sass/_base.scss
...@@ -534,3 +534,16 @@ hr.divide { ...@@ -534,3 +534,16 @@ hr.divide {
.sr { .sr {
@include text-sr(); @include text-sr();
} }
.non-list {
list-style: none;
margin: 0;
padding: 0;
}
.wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
\ No newline at end of file
cms/static/sass/_header.scss
...@@ -220,6 +220,7 @@ ...@@ -220,6 +220,7 @@
position: relative; position: relative;
.icon-expand { .icon-expand {
@include font-size(14);
@include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out); @include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
margin-left: 2px; margin-left: 2px;
opacity: 0.5; opacity: 0.5;
......
cms/static/sass/_settings.scss
...@@ -44,6 +44,14 @@ body.course.settings { ...@@ -44,6 +44,14 @@ body.course.settings {
} }
// UI hints/tips
.tip {
@include font-size(13);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
// form basics // form basics
.list-input { .list-input {
margin: 0; margin: 0;
...@@ -51,7 +59,7 @@ body.course.settings { ...@@ -51,7 +59,7 @@ body.course.settings {
list-style: none; list-style: none;
.field { .field {
margin: 0 0 ($baseline*0.75) 0; margin: 0 0 $baseline 0;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
...@@ -77,6 +85,7 @@ body.course.settings { ...@@ -77,6 +85,7 @@ body.course.settings {
@include font-size(14); @include font-size(14);
@include transition(color, 0.15s, ease-in-out); @include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
font-weight: 400;
&.is-focused { &.is-focused {
color: $blue; color: $blue;
...@@ -84,33 +93,15 @@ body.course.settings { ...@@ -84,33 +93,15 @@ body.course.settings {
} }
input, textarea { input, textarea {
@include placeholder($gray-l4);
@include font-size(16); @include font-size(16);
height: 100%; @include size(100%,100%);
width: 100%;
padding: ($baseline/2); padding: ($baseline/2);
&.long { &.long {
width: 100%;
} }
&.short { &.short {
width: 25%;
}
::-webkit-input-placeholder {
color: $gray-l4;
}
:-moz-placeholder {
color: $gray-l3;
}
::-moz-placeholder {
color: $gray-l3;
}
:-ms-input-placeholder {
color: $gray-l3;
} }
} }
...@@ -128,39 +119,122 @@ body.course.settings { ...@@ -128,39 +119,122 @@ body.course.settings {
display: inline-block; display: inline-block;
} }
} }
}
.tip { .field-group {
@include clearfix();
margin: 0 0 ($baseline/2) 0;
}
}
// existing inputs
.input-existing {
margin: 0 0 $baseline 0;
.actions {
margin: ($baseline/4) 0 0 0;
.remove-item {
@include white-button;
@include font-size(13); @include font-size(13);
display: block; }
margin-top: ($baseline/4); }
}
// not editable fields
.field.is-not-editable {
label, .label {
color: $gray-l3; color: $gray-l3;
} }
input {
opacity: 0.25;
}
} }
.field-group { // specific fields - basic
&.basic {
.list-input {
@include clearfix(); @include clearfix();
margin: 0 0 ($baseline/2) 0;
.field { .field {
display: block; margin-bottom: 0;
width: 47%; }
border-bottom: none; }
margin: 0 $baseline 0 0;
#field-course-organization {
float: left;
width: flex-grid(2, 9);
margin-right: flex-gutter();
}
#field-course-number {
float: left;
width: flex-grid(2, 9);
margin-right: flex-gutter();
}
#field-course-name {
float: left;
width: flex-grid(5, 9);
}
}
// specific fields - schedule
&.schedule {
.list-input {
margin-bottom: ($baseline*1.5);
&:last-child {
margin-bottom: 0;
}
}
.field-group {
@include clearfix();
border-bottom: 1px solid $gray-l5;
padding-bottom: ($baseline/2);
&:last-child {
border: none;
padding-bottom: 0; padding-bottom: 0;
}
&:nth-child(odd) { .field {
float: left; float: left;
width: flex-grid(3, 9);
margin-bottom: ($baseline/4);
margin-right: flex-gutter();
}
}
} }
&:nth-child(even) { // specific fields - overview
float: right; #field-course-overview {
margin-right: 0;
#course-overview {
height: ($baseline*20);
}
} }
input, textarea { // specific fields - video
width: 100%; #field-course-introduction-video {
// current video saved/referenced
.current {
@include size(640px,362px);
} }
} }
// specific fields - requirements
&.requirements {
#field-course-effort {
width: flex-grid(3, 9);
} }
} }
} }
......
cms/templates/settings.html
...@@ -23,6 +23,12 @@ from contentstore import utils ...@@ -23,6 +23,12 @@ from contentstore import utils
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
}).blur(function() {
$("label").removeClass("is-focused");
});
var editor = new CMS.Views.Settings.Details({ var editor = new CMS.Views.Settings.Details({
el: $('.settings-details'), el: $('.settings-details'),
model: new CMS.Models.Settings.CourseDetails(${course_details|n},{parse:true}) model: new CMS.Models.Settings.CourseDetails(${course_details|n},{parse:true})
...@@ -42,9 +48,9 @@ from contentstore import utils ...@@ -42,9 +48,9 @@ from contentstore import utils
<h1 class="title-1">Schedule &amp; Details</h1> <h1 class="title-1">Schedule &amp; Details</h1>
</header> </header>
<div class="introduction"> <!-- <div class="introduction">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div> </div> -->
<article class="content-primary" role="main"> <article class="content-primary" role="main">
<form id="settings_details" method="post" action=""> <form id="settings_details" method="post" action="">
...@@ -54,7 +60,23 @@ from contentstore import utils ...@@ -54,7 +60,23 @@ from contentstore import utils
<span class="tip">The nuts and bolts of your course</span> <span class="tip">The nuts and bolts of your course</span>
</header> </header>
<ol class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
<label for="course-organization">Organization</label>
<input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled" />
</li>
<li class="field text is-not-editable" id="field-course-number">
<label for="course-number">Course Number</label>
<input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
</li>
<li class="field text is-not-editable" id="field-course-name">
<label for="course-name">Course Name</label>
<input type="text" class="long" id="course-name" value="[Course Name]" disabled="disabled" />
</li>
</ol>
<span class="tip tip-stacked">These are used in <a href="${utils.get_lms_link_for_about_page(course_location)}" />your course URL</a>, and cannot be changed</span>
</section> </section>
<hr class="divide" /> <hr class="divide" />
...@@ -65,6 +87,65 @@ from contentstore import utils ...@@ -65,6 +87,65 @@ from contentstore import utils
<span class="tip">Important steps and segments of your course</span> <span class="tip">Important steps and segments of your course</span>
</header> </header>
<ol class="list-input">
<li class="field-group field-group-course-start" id="course-start">
<div class="field date" id="field-course-start-date">
<label for="course-start-date">Course Start Date</label>
<input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">First day the course begins</span>
</div>
<div class="field time" id="field-course-start-time">
<label for="course-start-time">Course Start Time</label>
<input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
<li class="field-group field-group-course-end" id="course-end">
<div class="field date" id="field-course-end-date">
<label for="course-end-date">Course End Date</label>
<input type="text" class="end-date date end" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">Last day your course is active</span>
</div>
<div class="field time" id="field-course-end-time">
<label for="course-end-time">Course End Time</label>
<input type="text" class="time end" id="course-end-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
</ol>
<ol class="list-input">
<li class="field-group field-group-enrollment-start" id="enrollment-start">
<div class="field date" id="field-enrollment-start-date">
<label for="course-enrollment-start-date">Enrollment Start Date</label>
<input type="text" class="start-date date start" id="course-enrollment-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">First day students can enroll</span>
</div>
<div class="field time" id="field-enrollment-start-time">
<label for="course-enrollment-start-time">Enrollment Start Time</label>
<input type="text" class="time start" id="course-enrollment-start-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
<li class="field-group field-group-enrollment-end" id="enrollment-end">
<div class="field date" id="field-enrollment-end-date">
<label for="course-enrollment-end-date">Enrollment End Date</label>
<input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">Last day students can enroll</span>
</div>
<div class="field time" id="field-enrollment-end-time">
<label for="course-enrollment-end-time">Enrollment End Time</label>
<input type="text" class="time end" id="course-enrollment-end-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
</ol>
</section> </section>
<hr class="divide" /> <hr class="divide" />
...@@ -77,24 +158,26 @@ from contentstore import utils ...@@ -77,24 +158,26 @@ from contentstore import utils
<ol class="list-input"> <ol class="list-input">
<li class="field text" id="field-course-overview"> <li class="field text" id="field-course-overview">
<label for="course-overview">Course Overview:</label> <label for="course-overview">Course Overview</label>
<input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />
<textarea class="tinymce text-editor" id="course-overview"></textarea> <textarea class="tinymce text-editor" id="course-overview"></textarea>
<span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="${utils.get_lms_link_for_about_page(course_location)}">your course summary page</a></span> <span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="${utils.get_lms_link_for_about_page(course_location)}">your course summary page</a></span>
</li> </li>
<li class="field video" id="field-course-introduction-video"> <li class="field video" id="field-course-introduction-video">
<label for="course-overview">Course Introduction Video</label>
<div class="input input-existing"> <div class="input input-existing">
<div class="current current-course-introduction-video"> <div class="current current-course-introduction-video">
<iframe width="100%" height="" src="" frameborder="0" allowfullscreen></iframe> <iframe width="100%" height="" src="" frameborder="0" allowfullscreen></iframe>
<a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a> </div>
<div class="actions">
<a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Current Video</a>
</div> </div>
</div> </div>
<div class="input"> <div class="input">
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off"> <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off" />
<span class="tip tip-stacked">Video restrictions go here</span> <span class="tip tip-stacked">Enter your YouTube video's ID (along with any restriction parameters)</span>
</div> </div>
</li> </li>
</ol> </ol>
...@@ -108,6 +191,13 @@ from contentstore import utils ...@@ -108,6 +191,13 @@ from contentstore import utils
<span class="tip">Expectations of the students taking this course</span> <span class="tip">Expectations of the students taking this course</span>
</header> </header>
<ol class="list-input">
<li class="field text" id="field-course-effort">
<label for="course-effort">Hours of Effort per Week</label>
<input type="text" class="short time" id="course-effort" placeholder="HH:MM" />
<span class="tip tip-inline">Time spent on all course work</span>
</li>
</ol>
</section> </section>
</form> </form>
</article> </article>
......
common/static/sass/_mixins.scss
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
} }
// vertical and horizontal centering // vertical and horizontal centering
@mixin vertically-and-horizontally-centered ( $height, $width ) { @mixin vertically-and-horizontally-centered ($height, $width) {
left: 50%; left: 50%;
margin-left: -$width / 2; margin-left: -$width / 2;
//margin-top: -$height / 2; //margin-top: -$height / 2;
...@@ -42,3 +42,26 @@ ...@@ -42,3 +42,26 @@
position: absolute; position: absolute;
top: 150px; top: 150px;
} }
// sizing
@mixin size($width: $baseline, $height: $baseline) {
height: $height;
width: $width;
}
@mixin square($size: $baseline) {
@include size($size);
}
// placeholder styling
@mixin placeholder($color) {
:-moz-placeholder {
color: $color;
}
::-webkit-input-placeholder {
color: $color;
}
:-ms-input-placeholder {
color: $color;
}
}
\ No newline at end of file
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