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):
course_details = CourseDetails.fetch(location)
return render_to_response('settings.html', {
'active_tab': 'settings-tab',
'active_tab': 'settings',
'context_course': course_module,
'course_details' : json.dumps(course_details, cls=CourseSettingsEncoder)
})
......
cms/static/client_templates/course_grade_policy.html
......@@ -64,6 +64,6 @@
<span class="tip tip-inline">total exercises that won't be graded</span>
</div>
</div>
</div> <a href="#" class="remove-item remove-grading-data"><span
class="delete-icon"></span> Delete Assignment Type</a>
</div>
<a href="#" class="delete-button standard remove-item remove-grading-data"><span class="delete-icon"></span>Delete</a>
</li>
cms/static/coffee/src/views/module_edit.coffee
......@@ -56,6 +56,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
event.preventDefault()
data = @module.save()
data.metadata = @metadata()
$modalCover.hide()
@model.save(data).done( =>
# # showToastMessage("Your changes have been saved.", null, 3)
@module = null
......@@ -69,9 +70,11 @@ class CMS.Views.ModuleEdit extends Backbone.View
event.preventDefault()
@$el.removeClass('editing')
@$component_editor().slideUp(150)
$modalCover.hide()
clickEditButton: (event) ->
event.preventDefault()
@$el.addClass('editing')
$modalCover.show()
@$component_editor().slideDown(150)
@loadEdit()
cms/static/coffee/src/views/tabs.coffee
......@@ -33,6 +33,10 @@ class CMS.Views.TabsEdit extends Backbone.View
)
$('.new-component-item').before(editor.$el)
editor.$el.addClass('new')
setTimeout(=>
editor.$el.removeClass('new')
, 500)
editor.cloneTemplate(
@model.get('id'),
......
cms/static/coffee/src/views/unit.coffee
......@@ -4,7 +4,6 @@ class CMS.Views.UnitEdit extends Backbone.View
'click .new-component .cancel-button': 'closeNewComponent'
'click .new-component-templates .new-component-template a': 'saveNewComponent'
'click .new-component-templates .cancel-button': 'closeNewComponent'
'click .new-component-button': 'showNewComponentForm'
'click .delete-draft': 'deleteDraft'
'click .create-draft': 'createDraft'
'click .publish-draft': 'publishDraft'
......@@ -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) =>
event.preventDefault()
type = $(event.currentTarget).data('type')
@$newComponentTypePicker.fadeOut(250)
@$(".new-component-#{type}").fadeIn(250)
@$newComponentTypePicker.slideUp(250)
@$(".new-component-#{type}").slideDown(250)
closeNewComponent: (event) =>
event.preventDefault()
@$newComponentTypePicker.slideUp(250)
@$newComponentTypePicker.slideDown(250)
@$newComponentTemplatePickers.slideUp(250)
@$newComponentButton.fadeIn(250)
@$newComponentItem.removeClass('adding')
@$newComponentItem.find('.rendered-component').remove()
@$newComponentItem.css('height', @$newComponentButton.outerHeight())
saveNewComponent: (event) =>
event.preventDefault()
......
cms/static/js/base.js
......@@ -43,6 +43,8 @@ $(document).ready(function() {
$('.unit .item-actions .delete-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit);
$('.collapse-all-button').bind('click', collapseAll);
// autosave when a field is updated on the subsection page
$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) {
......@@ -128,6 +130,11 @@ $(document).ready(function() {
});
});
function collapseAll(e) {
$('.branch').addClass('collapsed');
$('.expand-collapse-icon').removeClass('collapse').addClass('expand');
}
function editSectionPublishDate(e) {
e.preventDefault();
$modal = $('.edit-subsection-publish-settings').show();
......@@ -597,9 +604,11 @@ function hideToastMessage(e) {
function addNewSection(e, isTemplate) {
e.preventDefault();
$(e.target).addClass('disabled');
var $newSection = $($('#new-section-template').html());
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('.section-name-form').bind('submit', saveNewSection);
$cancelButton.bind('click', cancelNewSection);
......@@ -636,11 +645,14 @@ function saveNewSection(e) {
function cancelNewSection(e) {
e.preventDefault();
$('.new-courseware-section-button').removeClass('disabled');
$(this).parents('section.new-section').remove();
}
function addNewCourse(e) {
e.preventDefault();
$(e.target).hide();
var $newCourse = $($('#new-course-template').html());
var $cancelButton = $newCourse.find('.new-course-cancel');
$('.new-course-button').after($newCourse);
......@@ -681,6 +693,7 @@ function saveNewCourse(e) {
function cancelNewCourse(e) {
e.preventDefault();
$('.new-course-button').show();
$(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({
return this;
},
addAssignmentType : function() {
addAssignmentType : function(e) {
e.preventDefault();
this.model.get('graders').push({});
},
fieldToSelectorMap : {
......@@ -461,7 +462,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
// 0th ele doesn't have a bar; so, will never invoke this
var cachethis = this;
return function(event, ui) {
ui.element.height("50px");
var barIndex = ui.element.index();
// 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);
......@@ -487,7 +487,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
var cachethis = this;
return function(event, ui) {
// for some reason the resize is setting height to 0
ui.element.height("50px");
cachethis.saveCutoffs();
}
},
......@@ -503,6 +502,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
},
addNewGrade: function(e) {
e.preventDefault();
var gradeLength = this.descendingCutoffs.length; // cutoffs doesn't include fail/f so this is only the passing grades
if(gradeLength > 3) {
// TODO shouldn't we disable the button
......@@ -541,6 +541,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
},
removeGrade: function(e) {
e.preventDefault();
var domElement = $(e.currentTarget).closest('li');
var index = domElement.index();
// copy the boundary up to the next higher grade then remove
......@@ -614,8 +615,9 @@ CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({
}
},
deleteModel : function() {
deleteModel : function(e) {
this.model.destroy();
e.preventDefault();
}
});
\ No newline at end of file
cms/static/sass/_assets.scss
......@@ -5,14 +5,6 @@
background-color: #fff;
}
.upload-button {
@include blue-button;
float: left;
margin-right: 20px;
padding: 8px 30px 10px;
font-size: 12px;
}
.asset-library {
@include clearfix;
......
cms/static/sass/_base.scss
......@@ -6,11 +6,15 @@
body {
min-width: 980px;
background: #f3f4f5;
font-family: 'Open Sans', sans-serif;
background: rgb(240, 241, 245);
font-size: 16px;
line-height: 1.6;
color: #3c3c3c;
color: $baseFontColor;
}
body,
input {
font-family: 'Open Sans', sans-serif;
}
a {
......@@ -26,7 +30,8 @@ a {
h1 {
float: left;
font-size: 28px;
margin: 36px 6px;
font-weight: 300;
margin: 24px 6px;
}
.waiting {
......@@ -34,8 +39,7 @@ h1 {
}
.page-actions {
float: right;
margin-top: 42px;
margin-bottom: 30px;
}
.main-wrapper {
......@@ -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 {
float: right;
width: 28%;
......@@ -80,17 +77,18 @@ footer {
input[type="text"],
input[type="email"],
input[type="password"] {
input[type="password"],
textarea.text {
padding: 6px 8px 8px;
@include box-sizing(border-box);
border: 1px solid #b0b6c2;
border: 1px solid $mediumGrey;
border-radius: 2px;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
background-color: #edf1f5;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: #3c3c3c;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder,
......@@ -98,6 +96,11 @@ input[type="password"] {
&:-ms-input-placeholder {
color: #979faf;
}
&:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0;
}
}
input.search {
......@@ -107,7 +110,7 @@ input.search {
border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif;
color: #3c3c3c;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder {
......@@ -126,12 +129,18 @@ code {
font-family: Monaco, monospace;
}
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
.text-editor {
width: 100%;
min-height: 80px;
padding: 10px;
@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));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
......@@ -173,27 +182,32 @@ code {
padding: 10px 0;
}
.details {
display: none;
margin-bottom: 30px;
font-size: 14px;
}
.window {
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 {
padding: 20px;
}
.details {
margin-bottom: 30px;
font-size: 14px;
}
h4 {
padding: 6px 14px;
border-bottom: 1px solid #cbd1db;
border-radius: 3px 3px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
border-bottom: 1px solid $mediumGrey;
border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
font-size: 14px;
font-weight: 600;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
label {
......@@ -345,8 +359,9 @@ body.show-wip {
}
.new-button {
@include grey-button;
padding: 20px 0;
@include green-button;
font-size: 13px;
padding: 8px 20px 10px;
text-align: center;
&.big {
......@@ -369,6 +384,13 @@ body.show-wip {
}
}
.delete-button.standard {
&:hover {
background-color: tint($orange, 75%);
}
}
.tooltip {
position: absolute;
top: 0;
......
cms/static/sass/_cms_mixins.scss
......@@ -48,18 +48,19 @@
}
@mixin white-button {
@include button;
border: 1px solid $darkGrey;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #778192;
&:hover {
background-color: #f2f6f9;
color: #778192;
}
@include button;
border: 1px solid $mediumGrey;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: rgb(92, 103, 122);
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
&:hover {
background-color: rgb(222, 236, 247);
color: rgb(92, 103, 122);
}
}
@mixin orange-button {
......@@ -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 {
@include button;
border: 1px solid #1c1e20;
......@@ -109,18 +132,17 @@
@mixin edit-box {
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #5597dd;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
background-color: #5597dd;
background-color: $lightBluishGrey2;
color: #3c3c3c;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
label {
color: #fff;
color: $baseFontColor;
}
input,
textarea {
border: 1px solid #3c3c3c;
border: 1px solid $darkGrey;
}
textarea {
......@@ -140,21 +162,19 @@
}
.save-button {
@include orange-button;
border-color: #3c3c3c;
@include blue-button;
margin-top: 0;
}
.cancel-button {
@include white-button;
border-color: #30649C;
margin-top: 0;
}
}
@mixin tree-view {
border: 1px solid #ced2db;
background: #edf1f5;
border: 1px solid $mediumGrey;
background: $lightGrey;
.branch {
margin-bottom: 10px;
......@@ -200,15 +220,10 @@
content: "- draft";
}
.public-item:after {
content: "- public";
}
.private-item:after {
content: "- private";
}
.public-item,
.private-item {
color: #a4aab7;
}
......@@ -219,7 +234,11 @@
}
a {
color: #2c2e33;
color: $baseFontColor;
&.new-unit-item {
color: #6d788b;
}
}
ol {
......
cms/static/sass/_courseware.scss
input.courseware-unit-search-input {
float: left;
width: 260px;
background-color: #fff;
}
.courseware-overview {
}
.courseware-section {
position: relative;
background: #fff;
border: 1px solid $darkGrey;
border-radius: 3px;
margin: 10px 0;
border: 1px solid $mediumGrey;
margin-top: 15px;
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 {
margin-top: 0;
......@@ -139,6 +136,10 @@ input.courseware-unit-search-input {
}
}
.section-name-form {
margin-bottom: 15px;
}
.section-name-edit {
input {
font-size: 16px;
......@@ -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-subsection-name-input {
width: 515px;
......@@ -200,7 +212,7 @@ input.courseware-unit-search-input {
.new-section-name-save,
.new-subsection-name-save {
@include blue-button;
padding: 6px 20px 8px;
padding: 4px 20px 7px;
margin: 0 5px;
color: #fff !important;
}
......@@ -208,7 +220,7 @@ input.courseware-unit-search-input {
.new-section-name-cancel,
.new-subsection-name-cancel {
@include white-button;
padding: 2px 20px 5px;
padding: 4px 20px 7px;
color: #8891a1 !important;
}
......@@ -291,4 +303,11 @@ input.courseware-unit-search-input {
.cancel-button {
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 @@
}
}
.new-course-button {
@include grey-button;
display: block;
padding: 20px;
text-align: center;
}
.new-course {
padding: 15px 25px;
margin-top: 20px;
......
cms/static/sass/_graphics.scss
......@@ -34,6 +34,14 @@
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 {
display: inline-block;
width: 14px;
......@@ -56,6 +64,27 @@
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 {
display: inline-block;
width: 12px;
......
cms/static/sass/_header.scss
......@@ -5,18 +5,15 @@ body.no-header {
}
@mixin active {
@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
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 {
width: 100%;
height: 36px;
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);
margin-bottom: 30px;
&.active-tab-courseware #courseware-tab {
@include active;
......@@ -34,23 +31,16 @@ body.no-header {
@include active;
}
&.active-tab-import #import-tab {
&.active-tab-settings #settings-tab {
@include active;
}
#import-tab {
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
}
.left {
width: 750px;
&.active-tab-import #import-tab {
@include active;
}
.class-name {
max-width: 350px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&.active-tab-export #export-tab {
@include active;
}
.drop-icon {
......@@ -63,26 +53,57 @@ body.no-header {
line-height: 18px;
}
a,
.username {
float: left;
display: inline-block;
height: 29px;
padding: 7px 15px 0;
color: #e4e6ee;
.class-nav-bar {
clear: both;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
}
.class-nav,
.class-nav li {
float: left;
.class-nav {
@include clearfix;
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 {
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
.class {
@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 {
background: rgba(255, 255, 255, .1);
.home {
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 @@
}
&.time {
display: block !important;
width: 75px !important;
min-width: 75px !important;
}
&:focus {
@include linear-gradient(tint($blue, 80%), tint($blue, 90%));
border-color: $blue;
outline: 0;
width: 85px !important;
min-width: 85px !important;
}
&:disabled {
border-color: $mediumGrey;
color: $mediumGrey;
border: none;
@include box-shadow(none);
padding: 0;
color: $darkGrey !important;
font-weight: bold;
background: #fff;
}
}
textarea.tinymce {
border: 1px solid $darkGrey;
height: 300px;
}
input[type="checkbox"], input[type="radio"] {
}
......@@ -241,7 +242,7 @@
&.multi {
display: block;
background: tint($lightGrey, 50%);
padding: 20px 15px;
padding: 20px;
@include border-radius(4px);
@include box-sizing(border-box);
......@@ -290,10 +291,6 @@
width: 100%;
}
}
.remove-item {
float: right;
}
}
}
......@@ -304,6 +301,7 @@
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dotted $lightGrey;
@include clearfix();
&:last-child {
border: 0;
......@@ -392,20 +390,8 @@
// editing controls - removing
.remove-item {
clear: both;
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;
}
.delete-button {
float: right;
}
// editing controls - preview
......@@ -497,15 +483,17 @@
.settings-grading {
.course-grading-assignment-list-item {
.setting-grading-assignment-types {
.row:nth-child(4) {
border: none;
margin-bottom: 0;
padding-bottom: 0;
.row .field.enum {
width: 684px;
}
}
.course-grading-assignment-list-item {
}
.input-list {
.row {
......@@ -718,7 +706,7 @@
}
.grade-specific-bar {
height: 50px;
height: 50px !important;
}
.grades {
......
cms/static/sass/_static-pages.scss
......@@ -7,7 +7,12 @@
}
.unit-body {
padding: 30px 40px;
padding: 0;
}
.component-editor {
border: none;
border-radius: 0;
}
.components > li {
......@@ -36,7 +41,7 @@
}
.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 @@
z-index: 11;
width: 35px;
border: none;
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
background: url(../img/drag-handles.png) center no-repeat #fff;
&: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 @@
}
.component.editing {
border-left: 1px solid $mediumGrey;
border-right: 1px solid $mediumGrey;
.xmodule_display {
display: none;
}
}
.new .xmodule_display {
background: $yellow;
}
.xmodule_display {
padding: 20px 20px 22px;
font-size: 24px;
font-weight: 300;
background: $lightGrey;
background: #fff;
@include transition(background-color 3s);
}
.static-page-item {
......
cms/static/sass/_unit.scss
......@@ -57,14 +57,10 @@
margin: 20px 40px;
&.new-component-item {
padding: 0;
padding: 20px;
border: none;
border-radius: 0;
&.adding {
background-color: $blue;
border-color: #437fbf;
}
border-radius: 3px;
background: $lightGrey;
.new-component-button {
display: block;
......@@ -85,12 +81,13 @@
border-radius: 3px 3px 0 0;
}
.new-component-type, .new-component-template {
@include clearfix;
.new-component-type {
a,
li {
display: inline-block;
}
a {
position: relative;
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
......@@ -98,14 +95,8 @@
border-radius: 8px;
font-size: 13px;
line-height: 14px;
color: #fff;
text-align: center;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset);
@include transition(background-color .15s);
&:hover {
background-color: rgba(255, 255, 255, .2);
}
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
.name {
position: absolute;
......@@ -118,23 +109,62 @@
}
}
.new-component-type,
.new-component-template {
@include clearfix;
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 {
display: none;
position: absolute;
width: 100%;
padding: 20px;
@include clearfix;
.cancel-button {
@include blue-button;
border-color: #30649c;
@include white-button;
}
}
}
......@@ -142,7 +172,7 @@
}
.component {
border: 1px solid #d1ddec;
border: 1px solid $lightBluishGrey2;
border-radius: 3px;
background: #fff;
@include transition(none);
......@@ -157,7 +187,8 @@
}
&.editing {
border-color: #6696d7;
border: 1px solid $lightBluishGrey2;
z-index: 9999;
.drag-handle,
.component-actions {
......@@ -173,11 +204,6 @@
position: absolute;
top: 7px;
right: 9px;
@include transition(opacity .15s);
a {
color: $darkGrey;
}
}
.drag-handle {
......@@ -189,10 +215,10 @@
width: 15px;
height: 100%;
border-radius: 0 3px 3px 0;
border: 1px solid #d1ddec;
background: url(../img/white-drag-handles.png) center no-repeat #d1ddec;
border: 1px solid $lightBluishGrey2;
background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
cursor: move;
@include transition(all .15s);
@include transition(none);
}
}
......@@ -205,9 +231,6 @@
display: none;
padding: 20px;
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);
.metadata_edit {
......@@ -224,12 +247,6 @@
}
}
.CodeMirror {
border: 1px solid #3c3c3c;
background: #fff;
color: #3c3c3c;
}
h3 {
margin-bottom: 10px;
font-size: 18px;
......@@ -446,3 +463,22 @@
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 {
.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 {
display: none;
padding: 15px 20px;
background: $mediumGrey;
background-color: $lightBluishGrey2;
#result {
display: none;
......@@ -55,21 +32,22 @@
.add-button {
@include blue-button;
padding: 5px 20px 9px;
}
.cancel-button {
@include white-button;
padding: 5px 20px 9px;
}
}
.user-list {
border: 1px solid $mediumGrey;
border-top: none;
background: $lightGrey;
background: #fff;
li {
position: relative;
padding: 10px 20px;
padding: 20px;
border-bottom: 1px solid $mediumGrey;
&:last-child {
......@@ -81,12 +59,19 @@
}
.user-name {
width: 30%;
font-weight: 700;
margin-right: 10px;
font-size: 24px;
font-weight: 300;
}
.user-email {
font-size: 14px;
font-style: italic;
color: $mediumGrey;
}
.item-actions {
top: 9px;
top: 24px;
}
}
}
......
cms/static/sass/_variables.scss
......@@ -13,13 +13,23 @@ $body-line-height: golden-ratio(.875em, 1);
$pink: rgb(182,37,104);
$error-red: rgb(253, 87, 87);
$baseFontColor: #3c3c3c;
$offBlack: #3c3c3c;
$black: rgb(0,0,0);
$white: rgb(255,255,255);
$blue: #5597dd;
$orange: #edbd3c;
$red: #b20610;
$green: #108614;
$lightGrey: #edf1f5;
$mediumGrey: #ced2db;
$mediumGrey: #b0b6c2;
$darkGrey: #8891a1;
$extraDarkGrey: #3d4043;
$paleYellow: #fffcf1;
\ No newline at end of file
$paleYellow: #fffcf1;
$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 @@
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Asset Library</h1>
<div class="page-actions">
<a href="#" class="upload-button">Upload New File</a>
<input type="text" class="asset-search-input search wip-box" placeholder="search assets" style="display:none"/>
<a href="#" class="upload-button new-button">
<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>
<article class="asset-library">
<table>
......
cms/templates/edit-tabs.html
......@@ -17,10 +17,12 @@
<%block name="content">
<div class="main-wrapper">
<div class="inner-wrapper">
<div>
<h1>Static Tabs</h1>
<div class="page-actions">
<a href="#" class="new-button new-tab">
<span class="plus-icon white"></span>New Page
</a>
</div>
<article class="unit-body window">
<article class="unit-body">
<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>
</div>
......@@ -31,9 +33,7 @@
% endfor
<li class="new-component-item">
<a href="#" class="new-button big new-tab">
<span class="plus-icon"></span>New Tab
</a>
</li>
</ol>
</div>
......
cms/templates/import.html
......@@ -8,7 +8,6 @@
<%block name="content">
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Import</h1>
<article class="import-overview">
<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>
......
cms/templates/index.html
......@@ -37,7 +37,7 @@
<h1>My Courses</h1>
<article class="my-classes">
% 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">
%for course, url in courses:
<li>
......
cms/templates/manage_users.html
......@@ -5,28 +5,28 @@
<%block name="content">
<div class="main-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">
<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 class="list-header">
%if allow_actions:
<a href="#" class="new-user-button">
<span class="plus-icon"></span>New User
</a>
%endif
</div>
<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>
</div>
<article class="user-overview">
%if allow_actions:
<div class="new-user-form">
<form class="new-user-form">
<div id="result"></div>
<div class="form-elements">
<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>
<a href="#" class="cancel-button">cancel</a>
<input type="submit" value="Add User" id="add_user" class="add-button" />
<input type="button" value="Cancel" class="cancel-button" />
</div>
</div>
</form>
%endif
<div>
<ol class="user-list">
......@@ -57,6 +57,7 @@
function showNewUserForm(e) {
e.preventDefault();
$newUserForm.slideDown(150);
$newUserForm.find('.email-input').focus();
}
function hideNewUserForm(e) {
......@@ -66,26 +67,37 @@
$('#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() {
$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);
$('#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();
})
});
$body.bind('keyup', { $cancelButton: $cancelButton }, checkForCancel);
$('.remove-user').click(function() {
$.ajax({
......
cms/templates/overview.html
......@@ -98,10 +98,11 @@
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Courseware</h1>
<div class="page-actions"></div>
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
<a href="#" class="new-button big new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
<div class="page-actions">
<a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
<a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>
</div>
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
% for section in sections:
<section class="courseware-section branch" data-id="${section.location}">
<header>
......
cms/templates/settings.html
......@@ -93,7 +93,6 @@ from contentstore import utils
<div class="field">
<div class="input">
<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>
</div>
</div>
......@@ -231,8 +230,8 @@ from contentstore import utils
</div>
<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">
<span class="tip tip-inline">Video restrictions go here</span>
<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-stacked">Video restrictions go here</span>
</div>
</div>
</div>
......@@ -251,7 +250,7 @@ from contentstore import utils
<div class="field">
<div class="input">
<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>
......@@ -405,7 +404,7 @@ from contentstore import utils
<div class="field">
<div class="input">
<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>
......@@ -421,8 +420,8 @@ from contentstore import utils
<ul class="input-list course-grading-assignment-list">
</ul>
<a href="#" class="new-item new-course-grading-item add-grading-data">
<span class="plus-icon"></span>New Assignment Type
<a href="#" class="new-button new-course-grading-item add-grading-data">
<span class="plus-icon white"></span>New Assignment Type
</a>
</div>
</div>
......@@ -727,4 +726,5 @@ from contentstore import utils
</article>
</div>
</div>
<footer></footer>
</%block>
cms/templates/unit.html
......@@ -32,12 +32,9 @@
% for id in components:
<li class="component" data-id="${id}"/>
% endfor
<li class="new-component-item">
<a href="#" class="new-component-button new-button big">
<span class="plus-icon"></span>New Component
</a>
<li class="new-component-item adding">
<div class="new-component">
<h5>Select Component Type</h5>
<h5>Add New Component</h5>
<ul class="new-component-type">
% for type in sorted(component_templates.keys()):
<li>
......@@ -48,7 +45,6 @@
</li>
% endfor
</ul>
<a href="#" class="cancel-button">Cancel</a>
</div>
% for type, templates in sorted(component_templates.items()):
<div class="new-component-templates new-component-${type}">
......
cms/templates/widgets/header.html
<%! from django.core.urlresolvers import reverse %>
<% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
<header class="primary-header ${active_tab_class}">
<nav class="inner-wrapper">
<div class="left">
<a href="/"><span class="home-icon"></span></a>
% if context_course:
<% 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>
<ul class="class-nav">
<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('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</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'>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>
<li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}" id='users-tab'>Users</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
</div>
<div class="right">
<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
<header class="primary-header ${active_tab_class}">
<div class="class">
<div class="inner-wrapper">
<div class="left">
% if context_course:
<% ctx_loc = context_course.location %>
<a href="/" class="home"><span class="small-home-icon"></span></a> ›
<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> ›
% endif
</div>
<div class="right">
<span class="username">${ user.username }</span>
% if user.is_authenticated():
<a href="${reverse('logout')}" class="log-out"><span class="log-out-icon"></span></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>
</header>
cms/templates/widgets/metadata-edit.html
......@@ -4,7 +4,6 @@
hlskey = hashlib.md5(module.location.url()).hexdigest()
%>
<section class="metadata_edit">
<h3>Metadata</h3>
<ul>
% for keyname in editable_metadata_fields:
<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