Skip to content

E
edx-platform
Commit 094856e2 by chrisndodge
Options

Merge pull request #1149 from MITx/style/studio/tom/ui-cleanups 

Various Style/UI Tweaks
parents c182b8ef 59f1b1d1
Showing with 498 additions and 344 deletions
cms/djangoapps/contentstore/views.py
...@@ -995,7 +995,7 @@ def get_course_settings(request, org, course, name): ...@@ -995,7 +995,7 @@ def get_course_settings(request, org, course, name):
course_details = CourseDetails.fetch(location) course_details = CourseDetails.fetch(location)
return render_to_response('settings.html', { return render_to_response('settings.html', {
'active_tab': 'settings-tab', 'active_tab': 'settings',
'context_course': course_module, 'context_course': course_module,
'course_details' : json.dumps(course_details, cls=CourseSettingsEncoder) 'course_details' : json.dumps(course_details, cls=CourseSettingsEncoder)
}) })
......
cms/static/client_templates/course_grade_policy.html
...@@ -64,6 +64,6 @@ ...@@ -64,6 +64,6 @@
<span class="tip tip-inline">total exercises that won't be graded</span> <span class="tip tip-inline">total exercises that won't be graded</span>
</div> </div>
</div> </div>
</div> <a href="#" class="remove-item remove-grading-data"><span </div>
class="delete-icon"></span> Delete Assignment Type</a> <a href="#" class="delete-button standard remove-item remove-grading-data"><span class="delete-icon"></span>Delete</a>
</li> </li>
cms/static/coffee/src/views/module_edit.coffee
...@@ -56,6 +56,7 @@ class CMS.Views.ModuleEdit extends Backbone.View ...@@ -56,6 +56,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
event.preventDefault() event.preventDefault()
data = @module.save() data = @module.save()
data.metadata = @metadata() data.metadata = @metadata()
$modalCover.hide()
@model.save(data).done( => @model.save(data).done( =>
# # showToastMessage("Your changes have been saved.", null, 3) # # showToastMessage("Your changes have been saved.", null, 3)
@module = null @module = null
...@@ -69,9 +70,11 @@ class CMS.Views.ModuleEdit extends Backbone.View ...@@ -69,9 +70,11 @@ class CMS.Views.ModuleEdit extends Backbone.View
event.preventDefault() event.preventDefault()
@$el.removeClass('editing') @$el.removeClass('editing')
@$component_editor().slideUp(150) @$component_editor().slideUp(150)
$modalCover.hide()
clickEditButton: (event) -> clickEditButton: (event) ->
event.preventDefault() event.preventDefault()
@$el.addClass('editing') @$el.addClass('editing')
$modalCover.show()
@$component_editor().slideDown(150) @$component_editor().slideDown(150)
@loadEdit() @loadEdit()
cms/static/coffee/src/views/tabs.coffee
...@@ -33,6 +33,10 @@ class CMS.Views.TabsEdit extends Backbone.View ...@@ -33,6 +33,10 @@ class CMS.Views.TabsEdit extends Backbone.View
) )
$('.new-component-item').before(editor.$el) $('.new-component-item').before(editor.$el)
editor.$el.addClass('new')
setTimeout(=>
editor.$el.removeClass('new')
, 500)
editor.cloneTemplate( editor.cloneTemplate(
@model.get('id'), @model.get('id'),
......
cms/static/coffee/src/views/unit.coffee
...@@ -4,7 +4,6 @@ class CMS.Views.UnitEdit extends Backbone.View ...@@ -4,7 +4,6 @@ class CMS.Views.UnitEdit extends Backbone.View
'click .new-component .cancel-button': 'closeNewComponent' 'click .new-component .cancel-button': 'closeNewComponent'
'click .new-component-templates .new-component-template a': 'saveNewComponent' 'click .new-component-templates .new-component-template a': 'saveNewComponent'
'click .new-component-templates .cancel-button': 'closeNewComponent' 'click .new-component-templates .cancel-button': 'closeNewComponent'
'click .new-component-button': 'showNewComponentForm'
'click .delete-draft': 'deleteDraft' 'click .delete-draft': 'deleteDraft'
'click .create-draft': 'createDraft' 'click .create-draft': 'createDraft'
'click .publish-draft': 'publishDraft' 'click .publish-draft': 'publishDraft'
...@@ -54,30 +53,20 @@ class CMS.Views.UnitEdit extends Backbone.View ...@@ -54,30 +53,20 @@ class CMS.Views.UnitEdit extends Backbone.View
) )
) )
# New component creation
showNewComponentForm: (event) =>
event.preventDefault()
@$newComponentItem.addClass('adding')
$(event.target).fadeOut(150)
@$newComponentItem.css('height', @$newComponentTypePicker.outerHeight())
@$newComponentTypePicker.slideDown(250)
showComponentTemplates: (event) => showComponentTemplates: (event) =>
event.preventDefault() event.preventDefault()
type = $(event.currentTarget).data('type') type = $(event.currentTarget).data('type')
@$newComponentTypePicker.fadeOut(250) @$newComponentTypePicker.slideUp(250)
@$(".new-component-#{type}").fadeIn(250) @$(".new-component-#{type}").slideDown(250)
closeNewComponent: (event) => closeNewComponent: (event) =>
event.preventDefault() event.preventDefault()
@$newComponentTypePicker.slideUp(250) @$newComponentTypePicker.slideDown(250)
@$newComponentTemplatePickers.slideUp(250) @$newComponentTemplatePickers.slideUp(250)
@$newComponentButton.fadeIn(250)
@$newComponentItem.removeClass('adding') @$newComponentItem.removeClass('adding')
@$newComponentItem.find('.rendered-component').remove() @$newComponentItem.find('.rendered-component').remove()
@$newComponentItem.css('height', @$newComponentButton.outerHeight())
saveNewComponent: (event) => saveNewComponent: (event) =>
event.preventDefault() event.preventDefault()
......
cms/static/js/base.js
...@@ -43,6 +43,8 @@ $(document).ready(function() { ...@@ -43,6 +43,8 @@ $(document).ready(function() {
$('.unit .item-actions .delete-button').bind('click', deleteUnit); $('.unit .item-actions .delete-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit); $('.new-unit-item').bind('click', createNewUnit);
$('.collapse-all-button').bind('click', collapseAll);
// autosave when a field is updated on the subsection page // autosave when a field is updated on the subsection page
$body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue); $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
$('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) { $('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
...@@ -128,6 +130,11 @@ $(document).ready(function() { ...@@ -128,6 +130,11 @@ $(document).ready(function() {
}); });
}); });
function collapseAll(e) {
$('.branch').addClass('collapsed');
$('.expand-collapse-icon').removeClass('collapse').addClass('expand');
}
function editSectionPublishDate(e) { function editSectionPublishDate(e) {
e.preventDefault(); e.preventDefault();
$modal = $('.edit-subsection-publish-settings').show(); $modal = $('.edit-subsection-publish-settings').show();
...@@ -597,9 +604,11 @@ function hideToastMessage(e) { ...@@ -597,9 +604,11 @@ function hideToastMessage(e) {
function addNewSection(e, isTemplate) { function addNewSection(e, isTemplate) {
e.preventDefault(); e.preventDefault();
$(e.target).addClass('disabled');
var $newSection = $($('#new-section-template').html()); var $newSection = $($('#new-section-template').html());
var $cancelButton = $newSection.find('.new-section-name-cancel'); var $cancelButton = $newSection.find('.new-section-name-cancel');
$('.new-courseware-section-button').after($newSection); $('.courseware-overview').prepend($newSection);
$newSection.find('.new-section-name').focus().select(); $newSection.find('.new-section-name').focus().select();
$newSection.find('.section-name-form').bind('submit', saveNewSection); $newSection.find('.section-name-form').bind('submit', saveNewSection);
$cancelButton.bind('click', cancelNewSection); $cancelButton.bind('click', cancelNewSection);
...@@ -636,11 +645,14 @@ function saveNewSection(e) { ...@@ -636,11 +645,14 @@ function saveNewSection(e) {
function cancelNewSection(e) { function cancelNewSection(e) {
e.preventDefault(); e.preventDefault();
$('.new-courseware-section-button').removeClass('disabled');
$(this).parents('section.new-section').remove(); $(this).parents('section.new-section').remove();
} }
function addNewCourse(e) { function addNewCourse(e) {
e.preventDefault(); e.preventDefault();
$(e.target).hide();
var $newCourse = $($('#new-course-template').html()); var $newCourse = $($('#new-course-template').html());
var $cancelButton = $newCourse.find('.new-course-cancel'); var $cancelButton = $newCourse.find('.new-course-cancel');
$('.new-course-button').after($newCourse); $('.new-course-button').after($newCourse);
...@@ -681,6 +693,7 @@ function saveNewCourse(e) { ...@@ -681,6 +693,7 @@ function saveNewCourse(e) {
function cancelNewCourse(e) { function cancelNewCourse(e) {
e.preventDefault(); e.preventDefault();
$('.new-course-button').show();
$(this).parents('section.new-course').remove(); $(this).parents('section.new-course').remove();
} }
......
cms/static/js/views/settings/main_settings_view.js
...@@ -356,7 +356,8 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ ...@@ -356,7 +356,8 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
return this; return this;
}, },
addAssignmentType : function() { addAssignmentType : function(e) {
e.preventDefault();
this.model.get('graders').push({}); this.model.get('graders').push({});
}, },
fieldToSelectorMap : { fieldToSelectorMap : {
...@@ -461,7 +462,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ ...@@ -461,7 +462,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
// 0th ele doesn't have a bar; so, will never invoke this // 0th ele doesn't have a bar; so, will never invoke this
var cachethis = this; var cachethis = this;
return function(event, ui) { return function(event, ui) {
ui.element.height("50px");
var barIndex = ui.element.index(); var barIndex = ui.element.index();
// min and max represent limits not labels (note, can's make smaller than 3 points wide) // min and max represent limits not labels (note, can's make smaller than 3 points wide)
var min = (barIndex < cachethis.descendingCutoffs.length ? cachethis.descendingCutoffs[barIndex]['cutoff'] + 3 : 3); var min = (barIndex < cachethis.descendingCutoffs.length ? cachethis.descendingCutoffs[barIndex]['cutoff'] + 3 : 3);
...@@ -487,7 +487,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ ...@@ -487,7 +487,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
var cachethis = this; var cachethis = this;
return function(event, ui) { return function(event, ui) {
// for some reason the resize is setting height to 0 // for some reason the resize is setting height to 0
ui.element.height("50px");
cachethis.saveCutoffs(); cachethis.saveCutoffs();
} }
}, },
...@@ -503,6 +502,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ ...@@ -503,6 +502,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
}, },
addNewGrade: function(e) { addNewGrade: function(e) {
e.preventDefault();
var gradeLength = this.descendingCutoffs.length; // cutoffs doesn't include fail/f so this is only the passing grades var gradeLength = this.descendingCutoffs.length; // cutoffs doesn't include fail/f so this is only the passing grades
if(gradeLength > 3) { if(gradeLength > 3) {
// TODO shouldn't we disable the button // TODO shouldn't we disable the button
...@@ -541,6 +541,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({ ...@@ -541,6 +541,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
}, },
removeGrade: function(e) { removeGrade: function(e) {
e.preventDefault();
var domElement = $(e.currentTarget).closest('li'); var domElement = $(e.currentTarget).closest('li');
var index = domElement.index(); var index = domElement.index();
// copy the boundary up to the next higher grade then remove // copy the boundary up to the next higher grade then remove
...@@ -614,8 +615,9 @@ CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({ ...@@ -614,8 +615,9 @@ CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({
} }
}, },
deleteModel : function() { deleteModel : function(e) {
this.model.destroy(); this.model.destroy();
e.preventDefault();
} }
}); });
\ No newline at end of file
cms/static/sass/_assets.scss
...@@ -5,14 +5,6 @@ ...@@ -5,14 +5,6 @@
background-color: #fff; background-color: #fff;
} }
.upload-button {
@include blue-button;
float: left;
margin-right: 20px;
padding: 8px 30px 10px;
font-size: 12px;
}
.asset-library { .asset-library {
@include clearfix; @include clearfix;
......
cms/static/sass/_base.scss
...@@ -6,11 +6,15 @@ ...@@ -6,11 +6,15 @@
body { body {
min-width: 980px; min-width: 980px;
background: #f3f4f5; background: rgb(240, 241, 245);
font-family: 'Open Sans', sans-serif;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
color: #3c3c3c; color: $baseFontColor;
}
body,
input {
font-family: 'Open Sans', sans-serif;
} }
a { a {
...@@ -26,7 +30,8 @@ a { ...@@ -26,7 +30,8 @@ a {
h1 { h1 {
float: left; float: left;
font-size: 28px; font-size: 28px;
margin: 36px 6px; font-weight: 300;
margin: 24px 6px;
} }
.waiting { .waiting {
...@@ -34,8 +39,7 @@ h1 { ...@@ -34,8 +39,7 @@ h1 {
} }
.page-actions { .page-actions {
float: right; margin-bottom: 30px;
margin-top: 42px;
} }
.main-wrapper { .main-wrapper {
...@@ -53,13 +57,6 @@ h1 { ...@@ -53,13 +57,6 @@ h1 {
} }
} }
.window {
background: #fff;
border: 1px solid $darkGrey;
border-radius: 3px;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
}
.sidebar { .sidebar {
float: right; float: right;
width: 28%; width: 28%;
...@@ -80,17 +77,18 @@ footer { ...@@ -80,17 +77,18 @@ footer {
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"] { input[type="password"],
textarea.text {
padding: 6px 8px 8px; padding: 6px 8px 8px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #b0b6c2; border: 1px solid $mediumGrey;
border-radius: 2px; border-radius: 2px;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); @include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: #edf1f5; background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 11px; font-size: 11px;
color: #3c3c3c; color: $baseFontColor;
outline: 0; outline: 0;
&::-webkit-input-placeholder, &::-webkit-input-placeholder,
...@@ -98,6 +96,11 @@ input[type="password"] { ...@@ -98,6 +96,11 @@ input[type="password"] {
&:-ms-input-placeholder { &:-ms-input-placeholder {
color: #979faf; color: #979faf;
} }
&:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0;
}
} }
input.search { input.search {
...@@ -107,7 +110,7 @@ input.search { ...@@ -107,7 +110,7 @@ input.search {
border-radius: 20px; border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5; background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
color: #3c3c3c; color: $baseFontColor;
outline: 0; outline: 0;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
...@@ -126,12 +129,18 @@ code { ...@@ -126,12 +129,18 @@ code {
font-family: Monaco, monospace; font-family: Monaco, monospace;
} }
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
.text-editor { .text-editor {
width: 100%; width: 100%;
min-height: 80px; min-height: 80px;
padding: 10px; padding: 10px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #b0b6c2; border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5; background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset); @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
...@@ -173,27 +182,32 @@ code { ...@@ -173,27 +182,32 @@ code {
padding: 10px 0; padding: 10px 0;
} }
.details {
display: none;
margin-bottom: 30px;
font-size: 14px;
}
.window { .window {
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid $mediumGrey;
border-radius: 3px;
background: #fff;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
.window-contents { .window-contents {
padding: 20px; padding: 20px;
} }
.details {
margin-bottom: 30px;
font-size: 14px;
}
h4 { h4 {
padding: 6px 14px; padding: 6px 14px;
border-bottom: 1px solid #cbd1db; border-bottom: 1px solid $mediumGrey;
border-radius: 3px 3px 0 0; border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: #edf1f5; background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
font-size: 14px; font-size: 14px;
font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
} }
label { label {
...@@ -345,8 +359,9 @@ body.show-wip { ...@@ -345,8 +359,9 @@ body.show-wip {
} }
.new-button { .new-button {
@include grey-button; @include green-button;
padding: 20px 0; font-size: 13px;
padding: 8px 20px 10px;
text-align: center; text-align: center;
&.big { &.big {
...@@ -369,6 +384,13 @@ body.show-wip { ...@@ -369,6 +384,13 @@ body.show-wip {
} }
} }
.delete-button.standard {
&:hover {
background-color: tint($orange, 75%);
}
}
.tooltip { .tooltip {
position: absolute; position: absolute;
top: 0; top: 0;
......
cms/static/sass/_cms_mixins.scss
...@@ -48,18 +48,19 @@ ...@@ -48,18 +48,19 @@
} }
@mixin white-button { @mixin white-button {
@include button; @include button;
border: 1px solid $darkGrey; border: 1px solid $mediumGrey;
border-radius: 3px; border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-color: #dfe5eb; background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #778192; color: rgb(92, 103, 122);
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
&:hover {
background-color: #f2f6f9; &:hover {
color: #778192; background-color: rgb(222, 236, 247);
} color: rgb(92, 103, 122);
}
} }
@mixin orange-button { @mixin orange-button {
...@@ -92,6 +93,28 @@ ...@@ -92,6 +93,28 @@
} }
} }
@mixin green-button {
@include button;
border: 1px solid $darkGreen;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $green;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #fff;
&:hover {
background-color: $brightGreen;
color: #fff;
}
&.disabled {
border: 1px solid $disabledGreen !important;
background: $disabledGreen !important;
color: #fff !important;
@include box-shadow(none);
}
}
@mixin dark-grey-button { @mixin dark-grey-button {
@include button; @include button;
border: 1px solid #1c1e20; border: 1px solid #1c1e20;
...@@ -109,18 +132,17 @@ ...@@ -109,18 +132,17 @@
@mixin edit-box { @mixin edit-box {
padding: 15px 20px; padding: 15px 20px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #5597dd; background-color: $lightBluishGrey2;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); color: #3c3c3c;
background-color: #5597dd;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset); @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
label { label {
color: #fff; color: $baseFontColor;
} }
input, input,
textarea { textarea {
border: 1px solid #3c3c3c; border: 1px solid $darkGrey;
} }
textarea { textarea {
...@@ -140,21 +162,19 @@ ...@@ -140,21 +162,19 @@
} }
.save-button { .save-button {
@include orange-button; @include blue-button;
border-color: #3c3c3c;
margin-top: 0; margin-top: 0;
} }
.cancel-button { .cancel-button {
@include white-button; @include white-button;
border-color: #30649C;
margin-top: 0; margin-top: 0;
} }
} }
@mixin tree-view { @mixin tree-view {
border: 1px solid #ced2db; border: 1px solid $mediumGrey;
background: #edf1f5; background: $lightGrey;
.branch { .branch {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -200,15 +220,10 @@ ...@@ -200,15 +220,10 @@
content: "- draft"; content: "- draft";
} }
.public-item:after {
content: "- public";
}
.private-item:after { .private-item:after {
content: "- private"; content: "- private";
} }
.public-item,
.private-item { .private-item {
color: #a4aab7; color: #a4aab7;
} }
...@@ -219,7 +234,11 @@ ...@@ -219,7 +234,11 @@
} }
a { a {
color: #2c2e33; color: $baseFontColor;
&.new-unit-item {
color: #6d788b;
}
} }
ol { ol {
......
cms/static/sass/_courseware.scss
input.courseware-unit-search-input { input.courseware-unit-search-input {
float: left; float: left;
width: 260px; width: 260px;
background-color: #fff; background-color: #fff;
} }
.courseware-overview {
}
.courseware-section { .courseware-section {
position: relative; position: relative;
background: #fff; background: #fff;
border: 1px solid $darkGrey;
border-radius: 3px; border-radius: 3px;
margin: 10px 0; border: 1px solid $mediumGrey;
margin-top: 15px;
padding-bottom: 12px; padding-bottom: 12px;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
...@@ -139,6 +136,10 @@ input.courseware-unit-search-input { ...@@ -139,6 +136,10 @@ input.courseware-unit-search-input {
} }
} }
.section-name-form {
margin-bottom: 15px;
}
.section-name-edit { .section-name-edit {
input { input {
font-size: 16px; font-size: 16px;
...@@ -192,6 +193,17 @@ input.courseware-unit-search-input { ...@@ -192,6 +193,17 @@ input.courseware-unit-search-input {
} }
} }
.collapse-all-button {
float: right;
margin-top: 10px;
font-size: 13px;
color: $darkGrey;
.collapse-all-icon {
margin-right: 6px;
}
}
.new-section-name, .new-section-name,
.new-subsection-name-input { .new-subsection-name-input {
width: 515px; width: 515px;
...@@ -200,7 +212,7 @@ input.courseware-unit-search-input { ...@@ -200,7 +212,7 @@ input.courseware-unit-search-input {
.new-section-name-save, .new-section-name-save,
.new-subsection-name-save { .new-subsection-name-save {
@include blue-button; @include blue-button;
padding: 6px 20px 8px; padding: 4px 20px 7px;
margin: 0 5px; margin: 0 5px;
color: #fff !important; color: #fff !important;
} }
...@@ -208,7 +220,7 @@ input.courseware-unit-search-input { ...@@ -208,7 +220,7 @@ input.courseware-unit-search-input {
.new-section-name-cancel, .new-section-name-cancel,
.new-subsection-name-cancel { .new-subsection-name-cancel {
@include white-button; @include white-button;
padding: 2px 20px 5px; padding: 4px 20px 7px;
color: #8891a1 !important; color: #8891a1 !important;
} }
...@@ -291,4 +303,11 @@ input.courseware-unit-search-input { ...@@ -291,4 +303,11 @@ input.courseware-unit-search-input {
.cancel-button { .cancel-button {
font-size: 16px; font-size: 16px;
} }
}
.collapse-all-button {
float: right;
margin-top: 10px;
font-size: 13px;
color: $darkGrey;
} }
\ No newline at end of file
cms/static/sass/_dashboard.scss
...@@ -36,13 +36,6 @@ ...@@ -36,13 +36,6 @@
} }
} }
.new-course-button {
@include grey-button;
display: block;
padding: 20px;
text-align: center;
}
.new-course { .new-course {
padding: 15px 25px; padding: 15px 25px;
margin-top: 20px; margin-top: 20px;
......
cms/static/sass/_graphics.scss
...@@ -34,6 +34,14 @@ ...@@ -34,6 +34,14 @@
background: url(../img/video-icon.png) no-repeat; background: url(../img/video-icon.png) no-repeat;
} }
.upload-icon {
display: inline-block;
width: 22px;
height: 13px;
margin-right: 5px;
background: url(../img/upload-icon.png) no-repeat;
}
.list-icon { .list-icon {
display: inline-block; display: inline-block;
width: 14px; width: 14px;
...@@ -56,6 +64,27 @@ ...@@ -56,6 +64,27 @@
background: url(../img/home-icon.png) no-repeat; background: url(../img/home-icon.png) no-repeat;
} }
.small-home-icon {
display: inline-block;
width: 16px;
height: 14px;
background: url(../img/small-home-icon.png) no-repeat;
}
.log-out-icon {
display: inline-block;
width: 15px;
height: 13px;
background: url(../img/log-out-icon.png) no-repeat;
}
.collapse-all-icon {
display: inline-block;
width: 15px;
height: 9px;
background: url(../img/collapse-all-icon.png) no-repeat;
}
.calendar-icon { .calendar-icon {
display: inline-block; display: inline-block;
width: 12px; width: 12px;
......
cms/static/sass/_header.scss
...@@ -5,18 +5,15 @@ body.no-header { ...@@ -5,18 +5,15 @@ body.no-header {
} }
@mixin active { @mixin active {
@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset); background-color: rgba(255, 255, 255, .3);
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
} }
.primary-header { .primary-header {
width: 100%; width: 100%;
height: 36px; margin-bottom: 30px;
border-bottom: 1px solid #2c2e33;
@include linear-gradient(top, #686b76, #54565e);
font-size: 13px;
color: #fff;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
&.active-tab-courseware #courseware-tab { &.active-tab-courseware #courseware-tab {
@include active; @include active;
...@@ -34,23 +31,16 @@ body.no-header { ...@@ -34,23 +31,16 @@ body.no-header {
@include active; @include active;
} }
&.active-tab-import #import-tab { &.active-tab-settings #settings-tab {
@include active; @include active;
} }
#import-tab { &.active-tab-import #import-tab {
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44); @include active;
}
.left {
width: 750px;
} }
.class-name { &.active-tab-export #export-tab {
max-width: 350px; @include active;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.drop-icon { .drop-icon {
...@@ -63,26 +53,57 @@ body.no-header { ...@@ -63,26 +53,57 @@ body.no-header {
line-height: 18px; line-height: 18px;
} }
a, .class-nav-bar {
.username { clear: both;
float: left; @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
display: inline-block; background-color: $lightBluishGrey;
height: 29px; @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
padding: 7px 15px 0;
color: #e4e6ee;
} }
.class-nav, .class-nav {
.class-nav li { @include clearfix;
float: left;
a {
float: left;
display: inline-block;
padding: 15px 25px 17px;
font-size: 15px;
color: #3c3c3c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
&:hover {
@include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
}
}
li {
float: left;
}
} }
a { .class {
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44); @include clearfix;
height: 100%;
font-size: 12px;
color: rgb(163, 171, 184);
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
background-color: rgb(47, 53, 63);
a {
display: inline-block;
height: 20px;
padding: 5px 10px 6px;
color: rgb(163, 171, 184);
}
&:hover { .home {
background: rgba(255, 255, 255, .1); position: relative;
top: 1px;
} }
.log-out {
position: relative;
top: 3px;
}
} }
} }
\ No newline at end of file
cms/static/sass/_settings.scss
...@@ -139,24 +139,25 @@ ...@@ -139,24 +139,25 @@
} }
&.time { &.time {
display: block !important; width: 85px !important;
width: 75px !important; min-width: 85px !important;
min-width: 75px !important;
}
&:focus {
@include linear-gradient(tint($blue, 80%), tint($blue, 90%));
border-color: $blue;
outline: 0;
} }
&:disabled { &:disabled {
border-color: $mediumGrey; border: none;
color: $mediumGrey; @include box-shadow(none);
padding: 0;
color: $darkGrey !important;
font-weight: bold;
background: #fff; background: #fff;
} }
} }
textarea.tinymce {
border: 1px solid $darkGrey;
height: 300px;
}
input[type="checkbox"], input[type="radio"] { input[type="checkbox"], input[type="radio"] {
} }
...@@ -241,7 +242,7 @@ ...@@ -241,7 +242,7 @@
&.multi { &.multi {
display: block; display: block;
background: tint($lightGrey, 50%); background: tint($lightGrey, 50%);
padding: 20px 15px; padding: 20px;
@include border-radius(4px); @include border-radius(4px);
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -290,10 +291,6 @@ ...@@ -290,10 +291,6 @@
width: 100%; width: 100%;
} }
} }
.remove-item {
float: right;
}
} }
} }
...@@ -304,6 +301,7 @@ ...@@ -304,6 +301,7 @@
margin-bottom: 15px; margin-bottom: 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px dotted $lightGrey; border-bottom: 1px dotted $lightGrey;
@include clearfix();
&:last-child { &:last-child {
border: 0; border: 0;
...@@ -392,20 +390,8 @@ ...@@ -392,20 +390,8 @@
// editing controls - removing // editing controls - removing
.remove-item { .delete-button {
clear: both; float: right;
display: block;
margin-top: 10px;
opacity: 0.75;
font-size: 13px;
text-align: right;
@include transition(opacity 0.25s ease-in-out);
&:hover {
color: $blue;
opacity: 0.99;
}
} }
// editing controls - preview // editing controls - preview
...@@ -497,15 +483,17 @@ ...@@ -497,15 +483,17 @@
.settings-grading { .settings-grading {
.course-grading-assignment-list-item { .setting-grading-assignment-types {
.row:nth-child(4) { .row .field.enum {
border: none; width: 684px;
margin-bottom: 0;
padding-bottom: 0;
} }
} }
.course-grading-assignment-list-item {
}
.input-list { .input-list {
.row { .row {
...@@ -718,7 +706,7 @@ ...@@ -718,7 +706,7 @@
} }
.grade-specific-bar { .grade-specific-bar {
height: 50px; height: 50px !important;
} }
.grades { .grades {
......
cms/static/sass/_static-pages.scss
...@@ -7,7 +7,12 @@ ...@@ -7,7 +7,12 @@
} }
.unit-body { .unit-body {
padding: 30px 40px; padding: 0;
}
.component-editor {
border: none;
border-radius: 0;
} }
.components > li { .components > li {
...@@ -36,7 +41,7 @@ ...@@ -36,7 +41,7 @@
} }
.drag-handle { .drag-handle {
background: url(../img/drag-handles.png) center no-repeat $lightGrey; background: url(../img/drag-handles.png) center no-repeat #fff;
} }
} }
...@@ -46,10 +51,10 @@ ...@@ -46,10 +51,10 @@
z-index: 11; z-index: 11;
width: 35px; width: 35px;
border: none; border: none;
background: url(../img/drag-handles.png) center no-repeat $lightGrey; background: url(../img/drag-handles.png) center no-repeat #fff;
&:hover { &:hover {
background: url(../img/drag-handles.png) center no-repeat $lightGrey; background: url(../img/drag-handles.png) center no-repeat #fff;
} }
} }
...@@ -60,16 +65,24 @@ ...@@ -60,16 +65,24 @@
} }
.component.editing { .component.editing {
border-left: 1px solid $mediumGrey;
border-right: 1px solid $mediumGrey;
.xmodule_display { .xmodule_display {
display: none; display: none;
} }
} }
.new .xmodule_display {
background: $yellow;
}
.xmodule_display { .xmodule_display {
padding: 20px 20px 22px; padding: 20px 20px 22px;
font-size: 24px; font-size: 24px;
font-weight: 300; font-weight: 300;
background: $lightGrey; background: #fff;
@include transition(background-color 3s);
} }
.static-page-item { .static-page-item {
......
cms/static/sass/_unit.scss
...@@ -57,14 +57,10 @@ ...@@ -57,14 +57,10 @@
margin: 20px 40px; margin: 20px 40px;
&.new-component-item { &.new-component-item {
padding: 0; padding: 20px;
border: none; border: none;
border-radius: 0; border-radius: 3px;
background: $lightGrey;
&.adding {
background-color: $blue;
border-color: #437fbf;
}
.new-component-button { .new-component-button {
display: block; display: block;
...@@ -85,12 +81,13 @@ ...@@ -85,12 +81,13 @@
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
.new-component-type, .new-component-template { .new-component-type {
@include clearfix; a,
li {
display: inline-block;
}
a { a {
position: relative;
float: left;
width: 100px; width: 100px;
height: 100px; height: 100px;
margin-right: 10px; margin-right: 10px;
...@@ -98,14 +95,8 @@ ...@@ -98,14 +95,8 @@
border-radius: 8px; border-radius: 8px;
font-size: 13px; font-size: 13px;
line-height: 14px; line-height: 14px;
color: #fff;
text-align: center; text-align: center;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset); @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
@include transition(background-color .15s);
&:hover {
background-color: rgba(255, 255, 255, .2);
}
.name { .name {
position: absolute; position: absolute;
...@@ -118,23 +109,62 @@ ...@@ -118,23 +109,62 @@
} }
} }
.new-component-type,
.new-component-template { .new-component-template {
@include clearfix;
a { a {
height: 60px; position: relative;
border: 1px solid $darkGreen;
background: $green;
color: #fff;
@include transition(background-color .15s);
&:hover {
background: $brightGreen;
}
} }
} }
.new-component, .new-component-template {
margin-bottom: 20px;
li:first-child {
a {
border-radius: 3px 3px 0 0;
}
}
li:last-child {
a {
border-radius: 0 0 3px 3px;
}
}
a {
display: block;
padding: 7px 20px;
border-bottom: none;
font-weight: 300;
}
}
.new-component {
text-align: center;
h5 {
color: $green;
}
}
.new-component-templates { .new-component-templates {
display: none; display: none;
position: absolute;
width: 100%;
padding: 20px; padding: 20px;
@include clearfix; @include clearfix;
.cancel-button { .cancel-button {
@include blue-button; @include white-button;
border-color: #30649c;
} }
} }
} }
...@@ -142,7 +172,7 @@ ...@@ -142,7 +172,7 @@
} }
.component { .component {
border: 1px solid #d1ddec; border: 1px solid $lightBluishGrey2;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
@include transition(none); @include transition(none);
...@@ -157,7 +187,8 @@ ...@@ -157,7 +187,8 @@
} }
&.editing { &.editing {
border-color: #6696d7; border: 1px solid $lightBluishGrey2;
z-index: 9999;
.drag-handle, .drag-handle,
.component-actions { .component-actions {
...@@ -173,11 +204,6 @@ ...@@ -173,11 +204,6 @@
position: absolute; position: absolute;
top: 7px; top: 7px;
right: 9px; right: 9px;
@include transition(opacity .15s);
a {
color: $darkGrey;
}
} }
.drag-handle { .drag-handle {
...@@ -189,10 +215,10 @@ ...@@ -189,10 +215,10 @@
width: 15px; width: 15px;
height: 100%; height: 100%;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
border: 1px solid #d1ddec; border: 1px solid $lightBluishGrey2;
background: url(../img/white-drag-handles.png) center no-repeat #d1ddec; background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
cursor: move; cursor: move;
@include transition(all .15s); @include transition(none);
} }
} }
...@@ -205,9 +231,6 @@ ...@@ -205,9 +231,6 @@
display: none; display: none;
padding: 20px; padding: 20px;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
background-color: $blue;
color: #fff;
@include box-shadow(none); @include box-shadow(none);
.metadata_edit { .metadata_edit {
...@@ -224,12 +247,6 @@ ...@@ -224,12 +247,6 @@
} }
} }
.CodeMirror {
border: 1px solid #3c3c3c;
background: #fff;
color: #3c3c3c;
}
h3 { h3 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; font-size: 18px;
...@@ -446,3 +463,22 @@ ...@@ -446,3 +463,22 @@
display: none; display: none;
} }
} }
// editing units from courseware
body.unit {
.component {
padding-top: 30px;
.component-actions {
@include box-sizing(border-box);
position: absolute;
width: 811px;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
}
}
}
cms/static/sass/_users.scss
.users { .users {
.user-overview {
@extend .window;
padding: 30px 40px;
}
.new-user-button {
@include grey-button;
margin: 5px 8px;
padding: 3px 10px 4px 10px;
font-size: 12px;
.plus-icon {
position: relative;
top: 1px;
}
}
.list-header {
@include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
background-color: #ced2db;
border-radius: 3px 3px 0 0;
}
.new-user-form { .new-user-form {
display: none; display: none;
padding: 15px 20px; padding: 15px 20px;
background: $mediumGrey; background-color: $lightBluishGrey2;
#result { #result {
display: none; display: none;
...@@ -55,21 +32,22 @@ ...@@ -55,21 +32,22 @@
.add-button { .add-button {
@include blue-button; @include blue-button;
padding: 5px 20px 9px;
} }
.cancel-button { .cancel-button {
@include white-button; @include white-button;
padding: 5px 20px 9px;
} }
} }
.user-list { .user-list {
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
border-top: none; background: #fff;
background: $lightGrey;
li { li {
position: relative; position: relative;
padding: 10px 20px; padding: 20px;
border-bottom: 1px solid $mediumGrey; border-bottom: 1px solid $mediumGrey;
&:last-child { &:last-child {
...@@ -81,12 +59,19 @@ ...@@ -81,12 +59,19 @@
} }
.user-name { .user-name {
width: 30%; margin-right: 10px;
font-weight: 700; font-size: 24px;
font-weight: 300;
}
.user-email {
font-size: 14px;
font-style: italic;
color: $mediumGrey;
} }
.item-actions { .item-actions {
top: 9px; top: 24px;
} }
} }
} }
......
cms/static/sass/_variables.scss
...@@ -13,13 +13,23 @@ $body-line-height: golden-ratio(.875em, 1); ...@@ -13,13 +13,23 @@ $body-line-height: golden-ratio(.875em, 1);
$pink: rgb(182,37,104); $pink: rgb(182,37,104);
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$baseFontColor: #3c3c3c;
$offBlack: #3c3c3c; $offBlack: #3c3c3c;
$black: rgb(0,0,0);
$white: rgb(255,255,255);
$blue: #5597dd; $blue: #5597dd;
$orange: #edbd3c; $orange: #edbd3c;
$red: #b20610; $red: #b20610;
$green: #108614; $green: #108614;
$lightGrey: #edf1f5; $lightGrey: #edf1f5;
$mediumGrey: #ced2db; $mediumGrey: #b0b6c2;
$darkGrey: #8891a1; $darkGrey: #8891a1;
$extraDarkGrey: #3d4043; $extraDarkGrey: #3d4043;
$paleYellow: #fffcf1; $paleYellow: #fffcf1;
\ No newline at end of file $yellow: rgb(255, 254, 223);
$green: rgb(37, 184, 90);
$brightGreen: rgb(22, 202, 87);
$disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228);
cms/templates/asset_index.html
...@@ -35,10 +35,11 @@ ...@@ -35,10 +35,11 @@
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<h1>Asset Library</h1>
<div class="page-actions"> <div class="page-actions">
<a href="#" class="upload-button">Upload New File</a> <a href="#" class="upload-button new-button">
<input type="text" class="asset-search-input search wip-box" placeholder="search assets" style="display:none"/> <span class="upload-icon"></span>Upload New Asset
</a>
<input type="text" class="asset-search-input search wip-box" placeholder="search assets" style="display:none"/>
</div> </div>
<article class="asset-library"> <article class="asset-library">
<table> <table>
......
cms/templates/edit-tabs.html
...@@ -17,10 +17,12 @@ ...@@ -17,10 +17,12 @@
<%block name="content"> <%block name="content">
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<div> <div class="page-actions">
<h1>Static Tabs</h1> <a href="#" class="new-button new-tab">
<span class="plus-icon white"></span>New Page
</a>
</div> </div>
<article class="unit-body window"> <article class="unit-body">
<div class="details"> <div class="details">
<p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p> <p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
</div> </div>
...@@ -31,9 +33,7 @@ ...@@ -31,9 +33,7 @@
% endfor % endfor
<li class="new-component-item"> <li class="new-component-item">
<a href="#" class="new-button big new-tab">
<span class="plus-icon"></span>New Tab
</a>
</li> </li>
</ol> </ol>
</div> </div>
......
cms/templates/import.html
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
<%block name="content"> <%block name="content">
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<h1>Import</h1>
<article class="import-overview"> <article class="import-overview">
<div class="description"> <div class="description">
<h2>Please <a href="https://edge.edx.org/courses/edX/edx101/edX_Studio_Reference/about" target="_blank">read the documentation</a> before attempting an import!</h2> <h2>Please <a href="https://edge.edx.org/courses/edX/edx101/edX_Studio_Reference/about" target="_blank">read the documentation</a> before attempting an import!</h2>
......
cms/templates/index.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<h1>My Courses</h1> <h1>My Courses</h1>
<article class="my-classes"> <article class="my-classes">
% if user.is_active: % if user.is_active:
<a href="#" class="new-course-button"><span class="plus-icon"></span> New Course</a> <a href="#" class="new-button new-course-button"><span class="plus-icon white"></span> New Course</a>
<ul class="class-list"> <ul class="class-list">
%for course, url in courses: %for course, url in courses:
<li> <li>
......
cms/templates/manage_users.html
...@@ -5,28 +5,28 @@ ...@@ -5,28 +5,28 @@
<%block name="content"> <%block name="content">
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<h1>Users</h1> <div class="page-actions">
%if allow_actions:
<a href="#" class="new-button new-user-button">
<span class="plus-icon white"></span>New User
</a>
%endif
</div>
<article class="user-overview"> <div class="details">
<div class="details"> <p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
<p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p> </div>
</div>
<div class="list-header"> <article class="user-overview">
%if allow_actions:
<a href="#" class="new-user-button">
<span class="plus-icon"></span>New User
</a>
%endif
</div>
%if allow_actions: %if allow_actions:
<div class="new-user-form"> <form class="new-user-form">
<div id="result"></div> <div id="result"></div>
<div class="form-elements"> <div class="form-elements">
<label>email: </label><input type="text" id="email" class="email-input" autocomplete="off" placeholder="email@example.com"> <label>email: </label><input type="text" id="email" class="email-input" autocomplete="off" placeholder="email@example.com">
<a href="#" id="add_user" class="add-button">add user</a> <input type="submit" value="Add User" id="add_user" class="add-button" />
<a href="#" class="cancel-button">cancel</a> <input type="button" value="Cancel" class="cancel-button" />
</div> </div>
</div> </form>
%endif %endif
<div> <div>
<ol class="user-list"> <ol class="user-list">
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
function showNewUserForm(e) { function showNewUserForm(e) {
e.preventDefault(); e.preventDefault();
$newUserForm.slideDown(150); $newUserForm.slideDown(150);
$newUserForm.find('.email-input').focus();
} }
function hideNewUserForm(e) { function hideNewUserForm(e) {
...@@ -66,26 +67,37 @@ ...@@ -66,26 +67,37 @@
$('#email').val(''); $('#email').val('');
} }
function checkForCancel(e) {
if(e.which == 27) {
e.data.$cancelButton.click();
}
}
function addUser(e) {
e.preventDefault();
$.ajax({
url: '${add_user_postback_url}',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data:JSON.stringify({ 'email': $('#email').val()}),
}).done(function(data) {
if (data.ErrMsg != undefined)
$('#result').show().empty().append(data.ErrMsg);
else
location.reload();
});
}
$(document).ready(function() { $(document).ready(function() {
$newUserForm = $('.new-user-form'); $newUserForm = $('.new-user-form');
$newUserForm.find('.cancel-button').bind('click', hideNewUserForm); var $cancelButton = $newUserForm.find('.cancel-button');
$newUserForm.bind('submit', addUser);
$cancelButton.bind('click', hideNewUserForm);
$('.new-user-button').bind('click', showNewUserForm); $('.new-user-button').bind('click', showNewUserForm);
$body.bind('keyup', { $cancelButton: $cancelButton }, checkForCancel);
$('#add_user').click(function() {
$.ajax({
url: '${add_user_postback_url}',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data:JSON.stringify({ 'email': $('#email').val()}),
}).done(function(data) {
if (data.ErrMsg != undefined)
$('#result').show().empty().append(data.ErrMsg);
else
location.reload();
})
});
$('.remove-user').click(function() { $('.remove-user').click(function() {
$.ajax({ $.ajax({
......
cms/templates/overview.html
...@@ -98,10 +98,11 @@ ...@@ -98,10 +98,11 @@
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<h1>Courseware</h1> <div class="page-actions">
<div class="page-actions"></div> <a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
<article class="courseware-overview" data-course-id="${context_course.location.url()}"> <a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>
<a href="#" class="new-button big new-courseware-section-button"><span class="plus-icon"></span> New Section</a> </div>
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
% for section in sections: % for section in sections:
<section class="courseware-section branch" data-id="${section.location}"> <section class="courseware-section branch" data-id="${section.location}">
<header> <header>
......
cms/templates/settings.html
...@@ -93,7 +93,6 @@ from contentstore import utils ...@@ -93,7 +93,6 @@ from contentstore import utils
<div class="field"> <div class="field">
<div class="input"> <div class="input">
<input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled"> <input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
<span class="tip tip-inline">e.g. 101x</span>
<span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_item(context_course.location, True)}">your course URL</a>, and cannot be changed</span> <span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_item(context_course.location, True)}">your course URL</a>, and cannot be changed</span>
</div> </div>
</div> </div>
...@@ -231,8 +230,8 @@ from contentstore import utils ...@@ -231,8 +230,8 @@ from contentstore import utils
</div> </div>
<div class="input"> <div class="input">
<input type="text" class="new-item new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="speed:id,speed:id" autocomplete="off"> <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="speed:id,speed:id" autocomplete="off">
<span class="tip tip-inline">Video restrictions go here</span> <span class="tip tip-stacked">Video restrictions go here</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -251,7 +250,7 @@ from contentstore import utils ...@@ -251,7 +250,7 @@ from contentstore import utils
<div class="field"> <div class="field">
<div class="input"> <div class="input">
<input type="text" class="short time" id="course-effort" placeholder="HH:MM"> <input type="text" class="short time" id="course-effort" placeholder="HH:MM">
<span class="tip tip-stacked">Time students should spend on all course work</span> <span class="tip tip-inline">Time spent on all course work</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -405,7 +404,7 @@ from contentstore import utils ...@@ -405,7 +404,7 @@ from contentstore import utils
<div class="field"> <div class="field">
<div class="input"> <div class="input">
<input type="text" class="short time" id="course-grading-graceperiod" value="0:00" placeholder="e.g. 10 minutes"> <input type="text" class="short time" id="course-grading-graceperiod" value="0:00" placeholder="e.g. 10 minutes">
<span class="tip tip-stacked">leeway on due dates</span> <span class="tip tip-inline">leeway on due dates</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -421,8 +420,8 @@ from contentstore import utils ...@@ -421,8 +420,8 @@ from contentstore import utils
<ul class="input-list course-grading-assignment-list"> <ul class="input-list course-grading-assignment-list">
</ul> </ul>
<a href="#" class="new-item new-course-grading-item add-grading-data"> <a href="#" class="new-button new-course-grading-item add-grading-data">
<span class="plus-icon"></span>New Assignment Type <span class="plus-icon white"></span>New Assignment Type
</a> </a>
</div> </div>
</div> </div>
...@@ -727,4 +726,5 @@ from contentstore import utils ...@@ -727,4 +726,5 @@ from contentstore import utils
</article> </article>
</div> </div>
</div> </div>
<footer></footer>
</%block> </%block>
cms/templates/unit.html
...@@ -32,12 +32,9 @@ ...@@ -32,12 +32,9 @@
% for id in components: % for id in components:
<li class="component" data-id="${id}"/> <li class="component" data-id="${id}"/>
% endfor % endfor
<li class="new-component-item"> <li class="new-component-item adding">
<a href="#" class="new-component-button new-button big">
<span class="plus-icon"></span>New Component
</a>
<div class="new-component"> <div class="new-component">
<h5>Select Component Type</h5> <h5>Add New Component</h5>
<ul class="new-component-type"> <ul class="new-component-type">
% for type in sorted(component_templates.keys()): % for type in sorted(component_templates.keys()):
<li> <li>
...@@ -48,7 +45,6 @@ ...@@ -48,7 +45,6 @@
</li> </li>
% endfor % endfor
</ul> </ul>
<a href="#" class="cancel-button">Cancel</a>
</div> </div>
% for type, templates in sorted(component_templates.items()): % for type, templates in sorted(component_templates.items()):
<div class="new-component-templates new-component-${type}"> <div class="new-component-templates new-component-${type}">
......
cms/templates/widgets/header.html
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %> <% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
<header class="primary-header ${active_tab_class}"> <header class="primary-header ${active_tab_class}">
<nav class="inner-wrapper"> <div class="class">
<div class="left"> <div class="inner-wrapper">
<a href="/"><span class="home-icon"></span></a> <div class="left">
% if context_course: % if context_course:
<% ctx_loc = context_course.location %> <% ctx_loc = context_course.location %>
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a> <a href="/" class="home"><span class="small-home-icon"></span></a> ›
<ul class="class-nav"> <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a> ›
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li> % endif
<li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li> </div>
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Tabs</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li> <div class="right">
<li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}" id='users-tab'>Users</a></li> <span class="username">${ user.username }</span>
<li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li> % if user.is_authenticated():
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li> <a href="${reverse('logout')}" class="log-out"><span class="log-out-icon"></span></a>
</ul> % else:
% endif <a href="${reverse('login')}">Log in</a>
</div> % endif
<div class="right"> </div>
<span class="username">${ user.username }</span>
% if user.is_authenticated():
<a href="${reverse('logout')}">Log out</a>
% else:
<a href="${reverse('login')}">Log in</a>
% endif
</div> </div>
</div>
<nav class="class-nav-bar">
% if context_course:
<% ctx_loc = context_course.location %>
<ul class="class-nav inner-wrapper">
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Pages</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
<li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
</ul>
% endif
</nav> </nav>
</header> </header>
cms/templates/widgets/metadata-edit.html
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
hlskey = hashlib.md5(module.location.url()).hexdigest() hlskey = hashlib.md5(module.location.url()).hexdigest()
%> %>
<section class="metadata_edit"> <section class="metadata_edit">
<h3>Metadata</h3>
<ul> <ul>
% for keyname in editable_metadata_fields: % for keyname in editable_metadata_fields:
<li> <li>
......
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