Commit d9fa723e by Chris Dodge

Merge branch 'master' of github.com:MITx/mitx into fix/cdodge/export-draft-modules

Conflicts:
	common/lib/xmodule/xmodule/modulestore/xml_importer.py
parents 4cbb9253 276b86a7
......@@ -35,6 +35,7 @@ load-plugins=
# it should appear only once).
disable=
# C0301: Line too long
# C0302: Too many lines in module
# W0141: Used builtin function 'map'
# W0142: Used * or ** magic
# R0201: Method could be a function
......@@ -42,8 +43,11 @@ disable=
# R0902: Too many instance attributes
# R0903: Too few public methods (1/2)
# R0904: Too many public methods
# R0911: Too many return statements
# R0912: Too many branches
# R0913: Too many arguments
C0301,W0141,W0142,R0201,R0901,R0902,R0903,R0904,R0913
# R0914: Too many local variables
C0301,C0302,W0141,W0142,R0201,R0901,R0902,R0903,R0904,R0911,R0912,R0913,R0914
[REPORTS]
......@@ -92,7 +96,7 @@ zope=no
# List of members which are set dynamically and missed by pylint inference
# system, and so shouldn't trigger E0201 when accessed. Python regular
# expressions are accepted.
generated-members=REQUEST,acl_users,aq_parent,objects,DoesNotExist,can_read,can_write,get_url,size
generated-members=REQUEST,acl_users,aq_parent,objects,DoesNotExist,can_read,can_write,get_url,size,content
[BASIC]
......
......@@ -120,6 +120,12 @@ def howitworks(request):
else:
return render_to_response('howitworks.html', {})
# static/proof-of-concept views
def ux_alerts(request):
return render_to_response('ux-alerts.html', {})
# ==== Views for any logged-in user ==================================
......
if (!window.CmsUtils) window.CmsUtils = {};
var $body;
var $modal;
var $modalCover;
......@@ -48,6 +50,10 @@ $(document).ready(function () {
(e).preventDefault();
});
// alerts/notifications - manual close
$('.action-alert-close, .alert.has-actions .nav-actions a').bind('click', hideAlert);
$('.action-notification-close').bind('click', hideNotification);
// nav - dropdown related
$body.click(function (e) {
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
......@@ -87,7 +93,7 @@ $(document).ready(function () {
$('a[rel*="view"][href^="#"]').bind('click', smoothScrollLink);
// tender feedback window scrolling
$('a.show-tender').bind('click', smoothScrollTop);
$('a.show-tender').bind('click', window.CmsUtils.smoothScrollTop);
// toggling footer additional support
$('.cta-show-sock').bind('click', toggleSock);
......@@ -159,21 +165,24 @@ $(document).ready(function () {
function smoothScrollLink(e) {
(e).preventDefault();
$.smoothScroll({
offset: -200,
easing: 'swing',
$.smoothScroll({
offset: -200,
easing: 'swing',
speed: 1000,
scrollElement: null,
scrollTarget: $(this).attr('href')
});
}
function smoothScrollTop(e) {
// On AWS instances, this base.js gets wrapped in a separate scope as part of Django static
// pipelining (note, this doesn't happen on local runtimes). So if we set it on window,
// when we can access it from other scopes (namely Course Advanced Settings).
window.CmsUtils.smoothScrollTop = function (e) {
(e).preventDefault();
$.smoothScroll({
offset: -200,
easing: 'swing',
$.smoothScroll({
offset: -200,
easing: 'swing',
speed: 1000,
scrollElement: null,
scrollTarget: $('#view-top')
......@@ -483,9 +492,9 @@ function toggleSock(e) {
$sock.toggleClass('is-shown');
$sockContent.toggle('fast');
$.smoothScroll({
offset: -200,
easing: 'swing',
$.smoothScroll({
offset: -200,
easing: 'swing',
speed: 1000,
scrollElement: null,
scrollTarget: $sock
......@@ -538,6 +547,17 @@ function removeDateSetter(e) {
$block.find('.time').val('');
}
function hideNotification(e) {
(e).preventDefault();
$(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding').attr('aria-hidden','true');
}
function hideAlert(e) {
(e).preventDefault();
$(this).closest('.wrapper-alert').removeClass('is-shown');
}
function showToastMessage(message, $button, lifespan) {
var $toast = $('<div class="toast-notification"></div>');
var $closeBtn = $('<a href="#" class="close-button">×</a>');
......@@ -839,4 +859,4 @@ function saveSetSectionScheduleDate(e) {
hideModal();
});
}
\ No newline at end of file
}
......@@ -32,7 +32,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
var listEle$ = this.$el.find('.course-advanced-policy-list');
listEle$.empty();
// b/c we've deleted all old fields, clear the map and repopulate
this.fieldToSelectorMap = {};
this.selectorToField = {};
......@@ -101,13 +101,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
});
},
showMessage: function (type) {
this.$el.find(".message-status").removeClass("is-shown");
$(".wrapper-alert").removeClass("is-shown");
if (type) {
if (type === this.error_saving) {
this.$el.find(".message-status.error").addClass("is-shown");
$(".wrapper-alert-error").addClass("is-shown").attr('aria-hidden','false');
}
else if (type === this.successful_changes) {
this.$el.find(".message-status.confirm").addClass("is-shown");
$(".wrapper-alert-confirmation").addClass("is-shown").attr('aria-hidden','false');
this.hideSaveCancelButtons();
}
}
......@@ -117,17 +117,20 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
}
},
showSaveCancelButtons: function(event) {
if (!this.buttonsVisible) {
if (!this.notificationBarShowing) {
this.$el.find(".message-status").removeClass("is-shown");
$('.wrapper-notification').addClass('is-shown');
this.buttonsVisible = true;
$('.wrapper-notification').removeClass('is-hiding').addClass('is-shown').attr('aria-hidden','false');
this.notificationBarShowing = true;
}
},
hideSaveCancelButtons: function() {
$('.wrapper-notification').removeClass('is-shown');
this.buttonsVisible = false;
if (this.notificationBarShowing) {
$('.wrapper-notification').removeClass('is-shown').addClass('is-hiding').attr('aria-hidden','true');
this.notificationBarShowing = false;
}
},
saveView : function(event) {
window.CmsUtils.smoothScrollTop(event);
// TODO one last verification scan:
// call validateKey on each to ensure proper format
// check for dupes
......@@ -146,6 +149,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
});
},
revertView : function(event) {
event.preventDefault();
var self = event.data;
self.model.deleteKeys = [];
self.model.clear({silent : true});
......@@ -158,7 +162,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
var newKeyId = _.uniqueId('policy_key_'),
newEle = this.template({ key : key, value : JSON.stringify(value, null, 4),
keyUniqueId: newKeyId, valueUniqueId: _.uniqueId('policy_value_')});
this.fieldToSelectorMap[key] = newKeyId;
this.selectorToField[newKeyId] = key;
return newEle;
......@@ -169,4 +173,4 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
blurInput : function(event) {
$(event.target).prev().removeClass("is-focused");
}
});
\ No newline at end of file
});
......@@ -25,7 +25,7 @@ a {
@include transition(color 0.25s ease-in-out);
&:hover {
color: #cb9c40;
color: $orange-d1;
}
}
......@@ -50,11 +50,72 @@ h1 {
// ====================
// typography - basic
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
font-weight: 600;
color: $gray-d3;
margin: 0;
padding: 0;
}
.title-1 {
@include font-size(32);
margin-bottom: ($baseline*1.5);
}
.title-2 {
@include font-size(24);
margin-bottom: $baseline;
}
.title-3 {
@include font-size(18);
margin-bottom: ($baseline/2);
}
.title-4 {
@include font-size(14);
margin-bottom: $baseline;
font-weight: 500
}
.title-5 {
@include font-size(14);
color: $gray-l1;
margin-bottom: $baseline;
font-weight: 500
}
.title-6 {
@include font-size(14);
color: $gray-l2;
margin-bottom: $baseline;
font-weight: 500
}
p, ul, ol, dl {
margin-bottom: ($baseline/2);
&:last-child {
margin-bottom: 0;
}
}
// ====================
// layout - basic
.wrapper-view {
}
// ====================
// layout - basic page header
.wrapper-mast {
margin: ($baseline*1.5) 0 0 0;
padding: 0 $baseline;
position: relative;
.mast, .metadata {
@include clearfix();
@include font-size(16);
......@@ -62,7 +123,7 @@ h1 {
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: ($baseline*1.5) auto $baseline auto;
margin: 0 auto $baseline auto;
color: $gray-d2;
}
......@@ -284,18 +345,33 @@ h1 {
margin: 0 0 ($baseline/2) 0;
}
.title-4 {
}
header {
@include clearfix();
.title-5 {
.title-2 {
width: flex-grid(5, 12);
margin: 0 flex-gutter() 0 0;
float: left;
}
.tip {
@include font-size(13);
width: flex-grid(7, 12);
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-l2;
}
}
}
// layout - supplemental content
.content-supplementary {
> section {
margin: 0 0 $baseline 0;
}
.bit {
@include font-size(13);
margin: 0 0 $baseline 0;
......@@ -761,10 +837,10 @@ body.js {
// ====================
// works in progress
// works in progress & testing
body.hide-wip {
.wip-box {
display: none;
}
}
\ No newline at end of file
}
......@@ -15,17 +15,17 @@
// mixins - grandfathered
@mixin button {
display: inline-block;
padding: 4px 20px 6px;
font-size: 14px;
padding: ($baseline/5) $baseline ($baseline/4);
@include font-size(14);
font-weight: 700;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0));
@include transition(background-color .15s, box-shadow .15s);
&.disabled {
border: 1px solid $lightGrey !important;
border: 1px solid $gray-l1 !important;
border-radius: 3px !important;
background: $lightGrey !important;
color: $darkGrey !important;
background: $gray-l1 !important;
color: $gray-d1 !important;
pointer-events: none;
cursor: none;
&:hover {
......@@ -38,32 +38,111 @@
}
}
@mixin green-button {
@include button;
border: 1px solid $green-d1;
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: $white;
&:hover {
background-color: $green-s1;
color: $white;
}
&.disabled {
border: 1px solid $green-l3 !important;
background: $green-l3 !important;
color: $white !important;
@include box-shadow(none);
}
}
@mixin blue-button {
@include button;
border: 1px solid #437fbf;
border: 1px solid $blue-d1;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $blue;
color: #fff;
color: $white;
&:hover, &.active {
background-color: #62aaf5;
color: #fff;
background-color: $blue-s2;
color: $white;
}
&.disabled {
border: 1px solid $blue-l3 !important;
background: $blue-l3 !important;
color: $white !important;
@include box-shadow(none);
}
}
@mixin green-button {
@include button;
border: 1px solid #0d7011;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $green;
color: #fff;
@mixin red-button {
@include button;
border: 1px solid $red-d1;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $red;
color: $white;
&:hover {
background-color: #129416;
color: #fff;
}
&:hover, &.active {
background-color: $red-s1;
color: $white;
}
&.disabled {
border: 1px solid $red-l3 !important;
background: $red-l3 !important;
color: $white !important;
@include box-shadow(none);
}
}
@mixin pink-button {
@include button;
border: 1px solid $pink-d1;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $pink;
color: $white;
&:hover, &.active {
background-color: $pink-s1;
color: $white;
}
&.disabled {
border: 1px solid $pink-l3 !important;
background: $pink-l3 !important;
color: $white !important;
@include box-shadow(none);
}
}
@mixin orange-button {
@include button;
border: 1px solid $orange-d1;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
background-color: $orange;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: $gray-d2;
&:hover {
background-color: $orange-s2;
color: $gray-d2;
}
&.disabled {
border: 1px solid $orange-l3 !important;
background: $orange-l2 !important;
color: $gray-l1 !important;
@include box-shadow(none);
}
}
@mixin white-button {
......@@ -82,24 +161,9 @@
}
}
@mixin orange-button {
@include button;
border: 1px solid #bda046;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
background-color: #edbd3c;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #3c3c3c;
&:hover {
background-color: #ffcd46;
color: #3c3c3c;
}
}
@mixin grey-button {
@include button;
border: 1px solid $darkGrey;
border: 1px solid $gray-d2;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: #d1dae3;
......@@ -127,39 +191,17 @@
}
}
@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;
border: 1px solid $gray-d2;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $extraDarkGrey;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
color: #fff;
color: $white;
&:hover {
background-color: #595f64;
color: #fff;
background-color: $gray-d4;
color: $white;
}
}
......@@ -180,7 +222,7 @@
}
textarea {
min-height: 80px;
min-height: 80px;
}
h5 {
......@@ -225,7 +267,7 @@
.section-item {
position: relative;
display: block;
padding: 6px 8px 8px 16px;
padding: 6px 8px 8px 16px;
background: #edf1f5;
font-size: 13px;
......@@ -296,6 +338,9 @@
}
}
// ====================
// sunsetted mixins
@mixin active {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: rgba(255, 255, 255, .3);
......@@ -389,4 +434,4 @@
.depth2 { z-index: 100; }
.depth3 { z-index: 1000; }
.depth4 { z-index: 10000; }
.depth5 { z-index: 100000; }
\ No newline at end of file
.depth5 { z-index: 100000; }
......@@ -113,7 +113,7 @@ $green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%);
$yellow: rgb(231, 214, 143);
$yellow: rgb(237, 189, 60);
$yellow-l1: tint($yellow,20%);
$yellow-l2: tint($yellow,40%);
$yellow-l3: tint($yellow,60%);
......@@ -149,8 +149,13 @@ $orange-u3: desaturate($orange,45%);
$shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4);
// specific UI
$notification-height: ($baseline*10);
// colors - inherited
$baseFontColor: $gray-d2;
$offBlack: #3c3c3c;
......@@ -167,4 +172,4 @@ $disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228);
$error-red: rgb(253, 87, 87);
\ No newline at end of file
$error-red: rgb(253, 87, 87);
@mixin bounce-in {
// studio animations & keyframes
// ====================
// rotate clockwise
@mixin rotateClockwise {
0% {
@include transform(rotate(0deg));
}
100% {
@include transform(rotate(360deg));
}
}
@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
@keyframes rotateClockwise { @include rotateClockwise();}
@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(rotateClockwise);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
// notifications slide up
@mixin notificationsSlideUp {
0% {
@include transform(translateY(0));
}
90% {
@include transform(translateY(-($notification-height)));
}
100% {
@include transform(translateY(-($notification-height*0.99)));
}
}
@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@keyframes notificationsSlideUp { @include notificationsSlideUp();}
@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(notificationsSlideUp);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
// notifications slide down
@mixin notificationsSlideDown {
0% {
@include transform(translateY(-($notification-height*0.99)));
}
10% {
@include transform(translateY(-($notification-height)));
}
100% {
@include transform(translateY(0));
}
}
@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@keyframes notificationsSlideDown { @include notificationsSlideDown();}
@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(notificationsSlideDown);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
// notifications slide up then down
@mixin notificationsSlideUpDown {
0%, 100% {
@include transform(translateY(0));
}
15%, 85% {
@include transform(translateY(-($notification-height)));
}
20%, 80% {
@include transform(translateY(-($notification-height*0.99)));
}
}
@-moz-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@-webkit-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}
@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(notificationsSlideUpDown);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
// bounce in
@mixin bounceIn {
0% {
opacity: 0;
@include transform(scale(.3));
@include transform(scale(0.3));
}
50% {
......@@ -14,14 +140,63 @@
}
}
@-moz-keyframes bounce-in { @include bounce-in(); }
@-webkit-keyframes bounce-in { @include bounce-in(); }
@-o-keyframes bounce-in { @include bounce-in(); }
@keyframes bounce-in { @include bounce-in();}
@-moz-keyframes bounceIn { @include bounceIn(); }
@-webkit-keyframes bounceIn { @include bounceIn(); }
@-o-keyframes bounceIn { @include bounceIn(); }
@keyframes bounceIn { @include bounceIn();}
@mixin bounce-in-animation($duration, $timing: ease-in-out) {
@include animation-name(bounce-in);
@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(bounceIn);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
// bounce in
@mixin bounceOut {
0% {
opacity: 0;
@include transform(scale(0.3));
}
50% {
opacity: 1;
@include transform(scale(1.05));
}
100% {
@include transform(scale(1));
}
0% {
@include transform(scale(1));
}
50% {
opacity: 1;
@include transform(scale(1.05));
}
100% {
opacity: 0;
@include transform(scale(0.3));
}
}
@-moz-keyframes bounceOut { @include bounceOut(); }
@-webkit-keyframes bounceOut { @include bounceOut(); }
@-o-keyframes bounceOut { @include bounceOut(); }
@keyframes bounceOut { @include bounceOut();}
@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(bounceOut);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
\ No newline at end of file
......@@ -4,6 +4,7 @@
// bourbon libs and resets
@import 'bourbon/bourbon';
@import 'bourbon/addons/button';
@import "variables";
@import 'vendor/normalize';
@import 'reset';
......
// studio - elements - alerts, notifications, prompts
// studio alerts, prompts and notifications
// ====================
// shared
.wrapper-notification, .wrapper-alert, .prompt {
@include box-sizing(border-box);
.copy {
@include font-size(13);
}
}
.wrapper-notification, .wrapper-alert, .prompt {
background: $gray-d3;
.copy {
color: $gray-l2;
.title {
color: $white;
}
.nav-actions {
.action-primary {
color: $gray-d4;
}
}
}
}
.alert, .notification, .prompt {
// types - confirm
&.confirm {
.nav-actions .action-primary {
@include blue-button();
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
// types - warning
&.warning {
.nav-actions .action-primary {
@include orange-button();
border-color: $orange-d2;
color: $gray-d4;
}
a {
color: $orange;
&:hover {
color: $orange-s2;
}
}
}
// types - error
&.error {
.nav-actions .action-primary {
@include red-button();
border-color: $red-d2;
}
a {
color: $red-l1;
&:hover {
color: $red;
}
}
}
// types - announcement
&.announcement {
.nav-actions .action-primary {
@include blue-button();
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
// types - confirmation
&.confirmation {
.nav-actions .action-primary {
@include green-button();
border-color: $green-d2;
}
a {
color: $green;
&:hover {
color: $green-s2;
}
}
}
// types - step required
&.step-required {
.nav-actions .action-primary {
border-color: $pink-d2;
@include pink-button();
}
a {
color: $pink;
&:hover {
color: $pink-s1;
}
}
}
}
// prompts
.wrapper-prompt {
@include transition(all 0.05s ease-in-out);
position: fixed;
top: 0;
background: $black-t0;
width: 100%;
height: 100%;
text-align: center;
z-index: 10000;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.prompt {
@include border-radius(($baseline/5));
@include box-shadow(0 0 3px $shadow-d1);
display: inline-block;
vertical-align: middle;
width: $baseline*17.5;
border: 4px solid $black;
text-align: left;
.copy {
border-top: 4px solid $blue;
padding: $baseline;
}
.nav-actions {
@include box-shadow(inset 0 1px 2px $shadow-d1);
border-top: 1px solid $black-t1;
padding: ($baseline*0.75) $baseline;
background: $gray-d4;
.nav-item {
display: inline-block;
margin-right: ($baseline*0.75);
&:last-child {
margin-right: 0;
}
}
.action-primary {
@include font-size(13);
font-weight: 600;
}
.action-secondary {
@include font-size(13);
}
}
}
// types of prompts - error
.prompt.error {
.icon-error {
color: $red-l1;
}
.copy {
border-top-color: $red-l1;
}
}
// types of prompts - confirmation
.prompt.confirmation {
.icon-error {
color: $green;
}
.copy {
border-top-color: $green;
}
}
// types of prompts - error
.prompt.warning {
.icon-warning {
color: $orange;
}
.copy {
border-top-color: $orange;
}
}
}
// ====================
// notifications
.wrapper-notification {
@include clearfix();
@include box-sizing(border-box);
@include transition (bottom 2.0s ease-in-out 5s);
@include box-shadow(0 -1px 2px rgba(0,0,0,0.1));
position: fixed;
bottom: -100px;
z-index: 1000;
width: 100%;
overflow: hidden;
opacity: 0;
border-top: 1px solid $darkGrey;
padding: 20px 40px;
&.is-shown {
bottom: 0;
opacity: 1.0;
}
@include clearfix();
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
padding: $baseline ($baseline*2);
&.wrapper-notification-warning {
border-color: shade($yellow, 25%);
background: tint($yellow, 25%);
}
&.wrapper-notification-warning {
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $orange);
&.wrapper-notification-error {
border-color: shade($red, 50%);
background: tint($red, 20%);
color: $white;
}
.icon-warning {
color: $orange;
}
}
&.wrapper-notification-confirm {
border-color: shade($green, 30%);
background: tint($green, 40%);
color: shade($green, 30%);
}
&.wrapper-notification-error {
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $red-l1);
.icon-error {
color: $red-l1;
}
}
&.wrapper-notification-confirmation {
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $green);
.icon-confirmation {
color: $green;
}
}
&.wrapper-notification-saving {
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $pink);
}
// shorter/status notifications
&.wrapper-notification-status {
@include border-top-radius(3px);
width: ($baseline*8);
right: ($baseline);
border: 4px solid $black;
border-bottom: none;
padding: ($baseline/2) $baseline;
.notification {
@include box-sizing(border-box);
@include clearfix();
width: 100%;
max-width: none;
min-width: none;
.icon, .copy {
float: none;
display: inline-block;
vertical-align: middle;
}
.icon {
width: $baseline;
height: ($baseline*1.25);
margin-right: ($baseline*0.75);
line-height: 3rem;
}
.copy {
}
}
}
// help notifications
&.wrapper-notification-help {
@include border-top-radius(3px);
width: ($baseline*14);
right: ($baseline);
border: 4px solid $black;
border-bottom: none;
padding: $baseline;
.notification {
@include box-sizing(border-box);
@include clearfix();
width: 100%;
max-width: none;
min-width: none;
.icon-help {
width: $baseline;
margin-right: ($baseline*0.75);
}
.action-notification-close {
right: 0;
}
.copy {
width: ($baseline*10);
}
}
}
}
.notification {
@include box-sizing(border-box);
margin: 0 auto;
width: flex-grid(12);
max-width: $fg-max-width;
min-width: $fg-min-width;
.copy {
float: left;
width: flex-grid(9, 12);
margin-right: flex-gutter();
margin-top: 5px;
font-size: 14px;
.icon {
display: inline-block;
vertical-align: top;
margin-right: 5px;
font-size: 20px;
}
p {
width: flex-grid(8, 9);
display: inline-block;
vertical-align: top;
}
}
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
width: flex-grid(12);
max-width: $fg-max-width;
min-width: $fg-min-width;
.actions {
float: right;
width: flex-grid(3, 12);
margin-top: ($baseline/2);
text-align: right;
li {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
.save-button {
@include blue-button;
}
.cancel-button {
@include white-button;
}
}
strong {
font-weight: 700;
}
strong {
font-weight: 700;
}
.icon, .copy {
float: left;
display: inline-block;
vertical-align: middle;
}
.icon {
@include transition (color 0.5s ease-in-out);
@include font-size(22);
width: flex-grid(1, 12);
height: ($baseline*1.25);
margin-right: flex-gutter();
text-align: right;
color: $white;
}
.copy {
@include font-size(13);
width: flex-grid(10, 12);
color: $gray-l2;
.title {
@include font-size(14);
margin-bottom: 0;
color: $white;
}
}
// with actions
&.has-actions {
.icon {
width: flex-grid(1, 12);
}
.copy {
width: flex-grid(7, 12);
margin-right: flex-gutter();
}
.nav-actions {
width: flex-grid(4, 12);
float: right;
margin-top: ($baseline/4);
text-align: right;
.nav-item {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
}
}
.action-primary {
@include blue-button();
@include font-size(13);
border-color: $blue-d2;
font-weight: 600;
}
.action-secondary {
@include font-size(13);
}
}
&.confirmation {
.copy {
margin-top: ($baseline/5);
}
}
&.saving {
.icon-saving {
@include anim-rotateClockwise(3s, linear, infinite);
width: 22px;
}
.copy p {
@include text-sr();
}
}
}
// ====================
// alerts
.wrapper-alert {
@include box-sizing(border-box);
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
position: relative;
z-index: 100;
overflow: hidden;
width: 100%;
border-top: 1px solid $black;
padding: $baseline ($baseline*2) ($baseline*1.5) ($baseline*2);
background: $gray-d3;
// needed since page load is very slow
display: none;
// needed since page load is very slow
&.is-shown {
display: block;
}
&.wrapper-alert-warning {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange);
.icon-warning {
color: $orange;
}
}
&.wrapper-alert-error {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1);
.icon-error {
color: $red-l1;
}
}
&.wrapper-alert-confirmation {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green);
.icon-confirmation {
color: $green;
}
}
&.wrapper-alert-announcement {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
.icon-announcement {
color: $blue;
}
}
&.wrapper-alert-step-required {
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink);
.icon-step-required {
color: $pink;
}
}
}
// adopted alerts
.alert {
padding: 15px 20px;
margin-bottom: 30px;
border-radius: 3px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
// background: #edbd3c;
font-size: 14px;
@include clearfix;
.alert-message {
float: left;
margin-top: 4px;
}
@include font-size(14);
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
width: flex-grid(12);
max-width: $fg-max-width;
min-width: $fg-min-width;
color: $white;
strong {
font-weight: 700;
}
strong {
font-weight: 700;
}
.alert-action {
float: right;
.icon, .copy {
float: left;
}
&.secondary {
@include orange-button;
}
}
.icon {
@include transition (color 0.5s ease-in-out);
@include font-size(22);
width: flex-grid(1, 12);
margin: ($baseline/4) flex-gutter() 0 0;
text-align: right;
}
.copy {
@include font-size(13);
width: flex-grid(10, 12);
color: $gray-l2;
.title {
margin-bottom: 0;
color: $white;
}
}
// with actions
&.has-actions {
.icon {
width: flex-grid(1, 12);
}
.copy {
width: flex-grid(7, 12);
margin-right: flex-gutter();
}
.nav-actions {
width: flex-grid(4, 12);
float: right;
margin-top: ($baseline/2);
text-align: right;
.nav-item {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
.action-primary {
@include font-size(13);
font-weight: 600;
}
.action-secondary {
@include font-size(13);
}
}
}
}
// with cancel
.action-alert-close {
@include border-bottom-radius(($baseline/5));
position: absolute;
top: -($baseline/10);
right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-d4;
text-align: center;
.label {
@include text-sr();
}
.icon {
@include font-size(14);
color: $white;
width: auto;
margin: 0;
padding: 2px;
}
&:hover {
background: $gray-d1;
}
}
}
// ====================
// js enabled
.js {
// prompt set-up
.wrapper-prompt {
visibility: hidden;
pointer-events: none;
.prompt {
opacity: 0;
}
}
// prompt showing/hiding
&.prompt-is-shown {
.wrapper-view {
-webkit-filter: blur(2px) grayscale(25%);
filter: blur(2px) grayscale(25%);
}
.wrapper-prompt.is-shown {
visibility: visible;
pointer-events: auto;
.prompt {
@include anim-bounceIn(0.5s);
opacity: 1.0;
}
}
}
// alert showing/hiding
.wrapper-alert {
display: none;
&.is-shown {
display: block;
}
}
// notification showing/hiding
.wrapper-notification {
bottom: -($notification-height);
// varying animations
&.is-shown {
@include anim-notificationsSlideUp(1s);
}
&.is-hiding {
@include anim-notificationsSlideDown(0.25s);
}
&.is-fleeting {
@include anim-notificationsSlideUpDown(2s);
}
}
}
// ====================
// temporary
body.uxdesign.alerts {
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
.content-primary {
@extend .window;
width: flex-grid(12, 12);
margin-right: flex-gutter();
padding: $baseline ($baseline*1.5);
> section {
margin-bottom: ($baseline*2);
&:last-child {
margin-bottom: 0;
}
}
ul {
li {
@include clearfix();
width: flex-grid(12, 12);
margin-bottom: ($baseline/4);
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/4);
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
a {
float: left;
width: flex-grid(5, 12);
margin-right: flex-gutter();
}
}
}
}
}
// ====================
// artifact styles
.main-wrapper {
.alert {
padding: 15px 20px;
margin-bottom: 30px;
border-radius: 3px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
// background: #edbd3c;
font-size: 14px;
@include clearfix;
.alert-message {
float: left;
margin: 4px 0 0 0;
color: $gray-d3;
}
strong {
font-weight: 700;
}
.alert-action {
float: right;
&.secondary {
@include orange-button;
}
}
}
}
body.error {
background: $darkGrey;
color: #3c3c3c;
background: $gray-d4;
color: $gray-d3;
.primary-header {
display: none;
......@@ -140,7 +766,7 @@ body.error {
margin: 150px auto;
padding: 60px 50px 90px;
border-radius: 3px;
background: #fff;
background: $white;
text-align: center;
}
......@@ -148,8 +774,8 @@ body.error {
float: none;
margin: 0;
font-size: 60px;
font-weight: 300;
color: #3c3c3c;
font-weight: 300;
color: $gray-d3;
}
.description {
......@@ -162,4 +788,4 @@ body.error {
padding: 14px 40px 18px;
font-size: 18px;
}
}
\ No newline at end of file
}
......@@ -97,7 +97,7 @@
color: $blue;
&:hover, &:active {
background: $blue-l3;
background: $blue-l4;
color: $blue-s2;
}
......
......@@ -8,11 +8,11 @@ input[type="password"],
textarea.text {
padding: 6px 8px 8px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border: 1px solid $gray-l2;
border-radius: 2px;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
@include linear-gradient($gray-l5, $white);
background-color: $gray-l5;
@include box-shadow(inset 0 1px 2px $shadow-l1);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: $baseFontColor;
......@@ -21,7 +21,7 @@ textarea.text {
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
color: #979faf;
color: $gray-l2;
}
&:focus {
......@@ -30,7 +30,72 @@ textarea.text {
}
}
// forms - specific
// ====================
// forms - fields - not editable
.field.is-not-editable {
& label.is-focused {
color: $gray-d2;
}
label, input, textarea {
pointer-events: none;
}
}
// ====================
// field with error
.field.error {
input, textarea {
border-color: $red;
}
}
// ====================
// forms - additional UI
form {
.note {
@include box-sizing(border-box);
.title {
}
.copy {
}
// note with actions
&.has-actions {
@include clearfix();
.title {
}
.copy {
}
.list-actions {
}
}
}
.note-promotion {
}
}
// ====================
// forms - grandfathered
input.search {
padding: 6px 15px 8px 30px;
@include box-sizing(border-box);
......@@ -73,4 +138,4 @@ code {
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace;
}
\ No newline at end of file
}
......@@ -5,12 +5,12 @@
margin: 0;
padding: $baseline;
border-bottom: 1px solid $gray;
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.2));
background: $white;
height: 76px;
position: relative;
width: 100%;
z-index: 10;
z-index: 1000;
a {
color: $baseFontColor;
......
......@@ -4,7 +4,7 @@
body.signup, body.signin {
.wrapper-content {
margin: 0;
margin: ($baseline*1.5) 0 0 0;
padding: 0 $baseline;
position: relative;
width: 100%;
......@@ -18,7 +18,7 @@ body.signup, body.signin {
width: flex-grid(12);
margin: 0 auto;
color: $gray-d2;
header {
position: relative;
margin-bottom: $baseline;
......@@ -121,7 +121,7 @@ body.signup, body.signin {
@include font-size(16);
height: 100%;
width: 100%;
padding: ($baseline/2);
padding: ($baseline/2);
&.long {
width: 100%;
......@@ -136,15 +136,15 @@ body.signup, body.signin {
}
:-moz-placeholder {
color: $gray-l3;
color: $gray-l3;
}
::-moz-placeholder {
color: $gray-l3;
color: $gray-l3;
}
:-ms-input-placeholder {
color: $gray-l3;
:-ms-input-placeholder {
color: $gray-l3;
}
&:focus {
......
......@@ -147,7 +147,7 @@ body.course.settings {
}
label {
@include font-size(14);
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
font-weight: 400;
......@@ -161,7 +161,7 @@ body.course.settings {
@include placeholder($gray-l4);
@include font-size(16);
@include size(100%,100%);
padding: ($baseline/2);
padding: ($baseline/2);
&.long {
}
......@@ -212,7 +212,7 @@ body.course.settings {
padding: $baseline;
&:last-child {
padding-bottom: $baseline;
padding-bottom: $baseline;
}
.actions {
......@@ -238,33 +238,36 @@ body.course.settings {
}
}
// not editable fields
.field.is-not-editable {
& label.is-focused {
color: $gray-d2;
}
}
// field with error
.field.error {
input, textarea {
border-color: $red;
}
}
// specific fields - basic
&.basic {
.list-input {
@include clearfix();
padding: 0 ($baseline/2);
.field {
margin-bottom: 0;
}
}
// course details that should appear more like content than elements to change
.field.is-not-editable {
label {
}
input, textarea {
@extend .t-copy-lead1;
@include box-shadow(none);
border: none;
background: none;
padding: 0;
margin: 0;
font-weight: 600;
}
}
#field-course-organization {
float: left;
width: flex-grid(2, 9);
......@@ -281,6 +284,58 @@ body.course.settings {
float: left;
width: flex-grid(5, 9);
}
// course link note
.note-promotion-courseURL {
@include box-shadow(0 2px 1px $shadow-l1);
@include border-radius(($baseline/5));
margin-top: ($baseline*1.5);
border: 1px solid $gray-l2;
padding: ($baseline/2) 0 0 0;
.title {
@extend .t-copy-sub1;
margin: 0 0 ($baseline/10) 0;
padding: 0 ($baseline/2);
.tip {
display: inline;
margin-left: ($baseline/4);
}
}
.copy {
padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);
.link-courseURL {
@extend .t-copy-lead1;
&:hover {
}
}
}
.list-actions {
@include box-shadow(inset 0 1px 1px $shadow-l1);
border-top: 1px solid $gray-l2;
padding: ($baseline/2);
background: $gray-l5;
.action-primary {
@include blue-button();
@include font-size(13);
font-weight: 600;
.icon {
@extend .t-icon;
@include font-size(16);
display: inline-block;
vertical-align: middle;
}
}
}
}
}
// specific fields - schedule
......@@ -322,7 +377,7 @@ body.course.settings {
}
}
}
// specific fields - overview
#field-course-overview {
......@@ -468,7 +523,7 @@ body.course.settings {
}
}
}
.grade-specific-bar {
height: 50px !important;
}
......@@ -479,7 +534,7 @@ body.course.settings {
li {
position: absolute;
top: 0;
height: 50px;
height: 50px;
text-align: right;
@include border-radius(2px);
......@@ -600,8 +655,8 @@ body.course.settings {
}
#field-course-grading-assignment-shortname,
#field-course-grading-assignment-totalassignments,
#field-course-grading-assignment-gradeweight,
#field-course-grading-assignment-totalassignments,
#field-course-grading-assignment-gradeweight,
#field-course-grading-assignment-droppable {
width: flex-grid(2, 6);
}
......@@ -734,4 +789,4 @@ body.course.settings {
.content-supplementary {
width: flex-grid(3, 12);
}
}
\ No newline at end of file
}
......@@ -49,20 +49,30 @@
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
<script type="text/javascript">
document.write('\x3Cscript type="text/javascript" src="' +
document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
document.write('\x3Cscript type="text/javascript" src="' +
document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
</script>
<%include file="widgets/header.html" />
<%block name="content"></%block>
% if user.is_authenticated():
<%include file="widgets/sock.html" />
% endif
<%include file="widgets/footer.html" />
<%include file="widgets/tender.html" />
<!-- view -->
<div class="wrapper wrapper-view">
<%include file="widgets/header.html" />
<%block name="view_alerts"></%block>
<%block name="view_banners"></%block>
<%block name="content"></%block>
% if user.is_authenticated():
<%include file="widgets/sock.html" />
% endif
<%include file="widgets/footer.html" />
<%include file="widgets/tender.html" />
<%block name="view_notifications"></%block>
</div>
<%block name="view_prompts"></%block>
<%block name="jsextra"></%block>
</body>
......
......@@ -26,9 +26,9 @@
// I believe that current (New Section/New Subsection) cause full page reloads which means these aren't needed globally
// but we really should change that behavior.
if (!window.graderTypes) {
window.graderTypes = new CMS.Models.Settings.CourseGraderCollection();
window.graderTypes.course_location = new CMS.Models.Location('${parent_location}');
window.graderTypes.reset(${course_graders|n});
window.graderTypes = new CMS.Models.Settings.CourseGraderCollection();
window.graderTypes.course_location = new CMS.Models.Location('${parent_location}');
window.graderTypes.reset(${course_graders|n});
}
$(".gradable-status").each(function(index, ele) {
......
......@@ -4,7 +4,7 @@
<%namespace name='static' file='static_content.html'/>
<%!
from contentstore import utils
from contentstore import utils
%>
......@@ -13,17 +13,17 @@ from contentstore import utils
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
<script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
<script src="${static.url('js/vendor/date.js')}"></script>
<script type="text/javascript" src="${static.url('js/template_loader.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/server_error.js')}"></script>
<script type="text/javascript" src="${static.url('js/models/course_relative.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/validating_view.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/settings/main_settings_view.js')}"></script>
<script type="text/javascript" src="${static.url('js/models/settings/course_details.js')}"></script>
<script type="text/javascript">
$(document).ready(function(){
// hilighting labels when fields are focused in
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("is-focused");
......@@ -32,18 +32,18 @@ from contentstore import utils
});
var model = new CMS.Models.Settings.CourseDetails();
model.urlRoot = '${details_url}';
model.fetch({success :
model.fetch({success :
function(model) {
var editor = new CMS.Views.Settings.Details({
el: $('.settings-details'),
model: model
});
editor.render();
}
});
});
</script>
</%block>
......@@ -62,10 +62,10 @@ from contentstore import utils
<article class="content-primary" role="main">
<form id="settings_details" class="settings-details" method="post" action="">
<section class="group-settings basic">
<header>
<header>
<h2 class="title-2">Basic Information</h2>
<span class="tip">The nuts and bolts of your course</span>
</header>
</header>
<ol class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
......@@ -83,45 +83,57 @@ from contentstore import utils
<input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-name" value="[Course Name]" readonly />
</li>
</ol>
<span class="tip tip-stacked">These are used in <a rel="external" href="${utils.get_lms_link_for_about_page(course_location)}" />your course URL</a>, and cannot be changed</span>
<div class="note note-promotion note-promotion-courseURL has-actions">
<h3 class="title">Course Summary Page <span class="tip">(for student enrollment and access)</span></h3>
<div class="copy">
<p><a class="link-courseURL" rel="external" href="${utils.get_lms_link_for_about_page(course_location)}" />${utils.get_lms_link_for_about_page(course_location)}</a></p>
</div>
<ul class="list-actions">
<li class="action-item">
<a title="Send a note to students via email" href="mailto:john.doe@gmail.com?Subject=Enroll%20in%20COURSENAME&body=Hi,%20COURSENAME,%20provided%20by%20edX,%20is%20almost%20ready%20to%20begin.%20Please%20enroll%20for%20this%20course%20at%20${utils.get_lms_link_for_about_page(course_location)}." class="action action-primary"><i class="ss-icon icon ss-symbolicons-standard icon icon-inline icon-announcement">&#x2709;</i> Send an invitation to your students</a>
</li>
</ul>
</div>
</section>
<hr class="divide" />
<hr class="divide" />
<section class="group-settings schedule">
<header>
<header>
<h2 class="title-2">Course Schedule</h2>
<span class="tip">Important steps and segments of your course</span>
</header>
</header>
<ol class="list-input">
<li class="field-group field-group-course-start" id="course-start">
<div class="field date" id="field-course-start-date">
<label for="course-start-date">Course Start Date</label>
<input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">First day the course begins</span>
</div>
<span class="tip tip-stacked">First day the course begins</span>
</div>
<div class="field time" id="field-course-start-time">
<label for="course-start-time">Course Start Time</label>
<input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
<li class="field-group field-group-course-end" id="course-end">
<div class="field date" id="field-course-end-date">
<label for="course-end-date">Course End Date</label>
<input type="text" class="end-date date end" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">Last day your course is active</span>
</div>
<span class="tip tip-stacked">Last day your course is active</span>
</div>
<div class="field time" id="field-course-end-time">
<label for="course-end-time">Course End Time</label>
<input type="text" class="time end" id="course-end-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
</ol>
<ol class="list-input">
......@@ -129,33 +141,33 @@ from contentstore import utils
<div class="field date" id="field-enrollment-start-date">
<label for="course-enrollment-start-date">Enrollment Start Date</label>
<input type="text" class="start-date date start" id="course-enrollment-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">First day students can enroll</span>
</div>
<span class="tip tip-stacked">First day students can enroll</span>
</div>
<div class="field time" id="field-enrollment-start-time">
<label for="course-enrollment-start-time">Enrollment Start Time</label>
<input type="text" class="time start" id="course-enrollment-start-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
<li class="field-group field-group-enrollment-end" id="enrollment-end">
<div class="field date" id="field-enrollment-end-date">
<label for="course-enrollment-end-date">Enrollment End Date</label>
<input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off" />
<span class="tip tip-stacked">Last day students can enroll</span>
</div>
<span class="tip tip-stacked">Last day students can enroll</span>
</div>
<div class="field time" id="field-enrollment-end-time">
<label for="course-enrollment-end-time">Enrollment End Time</label>
<input type="text" class="time end" id="course-enrollment-end-time" value="" placeholder="HH:MM" autocomplete="off" />
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
<span class="tip tip-stacked" id="timezone"></span>
</div>
</li>
</ol>
</section>
<hr class="divide" />
<hr class="divide" />
<section class="group-settings marketing">
<header>
......@@ -167,45 +179,44 @@ from contentstore import utils
<li class="field text" id="field-course-overview">
<label for="course-overview">Course Overview</label>
<textarea class="tinymce text-editor" id="course-overview"></textarea>
<span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="${utils.get_lms_link_for_about_page(course_location)}">your course summary page</a></span>
<span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a class="link-courseURL" rel="external" href="${utils.get_lms_link_for_about_page(course_location)}">your course summary page</a></span>
</li>
<li class="field video" id="field-course-introduction-video">
<label for="course-overview">Course Introduction Video</label>
<div class="input input-existing">
<div class="current current-course-introduction-video">
<div class="input input-existing">
<div class="current current-course-introduction-video">
<iframe width="618" height="350" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="actions">
<a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Current Video</a>
</div>
</div>
</div>
<div class="input">
<div class="input">
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="your YouTube video's ID" autocomplete="off" />
<span class="tip tip-stacked">Enter your YouTube video's ID (along with any restriction parameters)</span>
</div>
</div>
</li>
</ol>
</section>
<hr class="divide" />
<hr class="divide" />
<section class="group-settings requirements">
<header>
<header>
<h2 class="title-2">Requirements</h2>
<span class="tip">Expectations of the students taking this course</span>
</header>
</header>
<ol class="list-input">
<li class="field text" id="field-course-effort">
<label for="course-effort">Hours of Effort per Week</label>
<input type="text" class="short time" id="course-effort" placeholder="HH:MM" />
<span class="tip tip-inline">Time spent on all course work</span>
</li>
</ol>
</section>
<span class="tip tip-inline">Time spent on all course work</span>
</li>
</ol>
</section>
</form>
</article>
......@@ -215,7 +226,7 @@ from contentstore import utils
<p>Your course's schedule settings determine when students can enroll in and begin a course as well as when the course.</p>
<p>Additionally, details provided on this page are also used in edX's catalog of courses, which new and returning students use to choose new courses to study.</p>
</div>
</div>
<div class="bit">
% if context_course:
......@@ -234,4 +245,4 @@ from contentstore import utils
</aside>
</section>
</div>
</%block>
\ No newline at end of file
</%block>
......@@ -42,13 +42,17 @@ editor.render();
</%block>
<%block name="content">
<div class="wrapper-content wrapper">
<section class="content">
<header class="page">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Advanced Settings</h1>
</header>
</div>
</header>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<form id="settings_advanced" class="settings-advanced" method="post" action="">
......@@ -69,7 +73,7 @@ editor.render();
<p class="instructions"><strong>Warning</strong>: Do not modify these policies unless you are familiar with their purpose.</p>
<ul class="list-input course-advanced-policy-list enum">
</ul>
</section>
</form>
......@@ -100,23 +104,61 @@ editor.render();
</aside>
</section>
</div>
</%block>
<%block name="view_notifications">
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-warning">
<div class="notification warning">
<div class="copy">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description">
<div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<p><strong>Note: </strong>Your changes will not take effect until you <strong>save your
progress</strong>. Take care with policy value formatting, as validation is <strong>not implemented</strong>.</p>
<div class="copy">
<h2 class="title title-3" id="notification-changesMade-title">You've Made Some Changes</h2>
<p id="notification-changesMade-description">Your changes will not take effect until you <strong>save your progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
</div>
<div class="actions">
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li><a href="#" class="save-button">Save</a></li>
<li><a href="#" class="cancel-button">Cancel</a></li>
<li class="nav-item">
<a href="" class="action-primary save-button">Save Changes</a>
</li>
<li class="nav-item">
<a href="" class="action-secondary cancel-button">Cancel</a>
</li>
</ul>
</nav>
</div>
</div>
</%block>
<%block name="view_alerts">
<!-- alert: save confirmed with close -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3">Your policy changes have been saved.</h2>
<p>Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.</p>
</div>
<a href="" rel="view" class="action action-alert-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close alert</span>
</a>
</div>
</div>
<!-- alert: error -->
<div class="wrapper wrapper-alert wrapper-alert-error" role="status">
<div class="alert error">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">There was an error saving your information</h2>
<p>Please see the error below and correct it to ensure there are no problems in rendering your course.</p>
</div>
</div>
</div>
</%block>
\ No newline at end of file
</%block>
......@@ -16,7 +16,6 @@
});
$(document).ready(function() {
$('body').addClass('js');
// tabs
$('.tab-group').tabs();
......
<%inherit file="base.html" />
<%block name="title">Studio Alerts</%block>
<%block name="bodyclass">is-signedin course uxdesign alerts</%block>
<%block name="jsextra">
<script type="text/javascript">
// notifications - demo
$(document).ready(function() {
// alert and notifications - manual close
$('.action-alert-close, .alert.has-actions .nav-actions a').click(function(e) {
(e).preventDefault();
console.log('closing alert');
$(this).closest('.wrapper-alert').removeClass('is-shown');
});
// alert and notifications - manual & action-based close
$('.action-notification-close').click(function(e) {
(e).preventDefault();
$(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
});
// prompt pop
$('.action-prompt').click(function(e){
(e).preventDefault();
$body.toggleClass('prompt-is-shown');
$(this).closest('.wrapper-prompt').attr('aria-hidden','false');
});
// prompt close
$('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
(e).preventDefault();
$body.removeClass('prompt-is-shown');
$(this).closest('.wrapper-prompt').attr('aria-hidden','true');
});
$('.hide-notification').click(function(e) {
(e).preventDefault();
$('.wrapper-notification').removeClass('is-hiding is-shown').attr('aria-hidden','true');
$(this.hash).addClass('is-hiding').attr('aria-hidden','true');
});
$('.show-notification').click(function(e) {
(e).preventDefault();
$('.wrapper-notification').removeClass('is-shown is-hiding');
$(this.hash).addClass('is-shown').attr('aria-hidden','false');
});
$('.show-notification-fleeting').click(function(e) {
(e).preventDefault();
$('.wrapper-notification').removeClass('is-fleeting').attr('aria-hidden','true');
$(this.hash).addClass('is-fleeting').attr('aria-hidden','false');
});
$('.hide-alert').click(function(e) {
(e).preventDefault();
$('.wrapper-alert').removeClass('is-hiding');
$(this.hash).addClass('is-hiding');
});
$('.show-alert').click(function(e) {
(e).preventDefault();
$('.wrapper-alert').removeClass('is-shown');
$(this.hash).addClass('is-shown');
});
$('.hide-prompt').click(function(e){
(e).preventDefault();
$body.removeClass('prompt-is-shown');
});
$('.show-prompt').click(function(e) {
(e).preventDefault();
$body.toggleClass('prompt-is-shown');
$('.wrapper-prompt').removeClass('is-shown');
$(this.hash).addClass('is-shown').attr('aria-hidden','false');
});
});
</script>
</%block>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">UX Design</span>
<h1 class="title-1">System Notifications</h1>
</div>
</header>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<section>
<header>
<h2 class="title-2">Alerts</h2>
<span class="tip">persistant, static messages to the user</span>
</header>
<p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>
<h3 class="title-3">Different Static Examples of Alerts</h3>
<p>Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display</p>
<ul>
<li><a href="#alert-draft" class="show-alert">Show Draft</a></li>
<li><a href="#alert-version" class="show-alert">Show Version</a></li>
<li><a href="#alert-saved" class="show-alert">Show Previous View/Action</a></li>
<li><a href="#alert-close" class="show-alert">Show Alert with Close Option</a></li>
<li><a href="#alert-removed" class="show-alert">Show Previous View/Action Removed</a></li>
<li><a href="#alert-system-error" class="show-alert">Show System Error</a></li>
<li><a href="#alert-user-error" class="show-alert">Show User Error</a></li>
<li><a href="#alert-announcement2" class="show-alert">Show Announcement</a></li>
<li><a href="#alert-announcement1" class="show-alert">Show Announcement with Actions</a></li>
<li><a href="#alert-activation" class="show-alert">Show Activiation</a></li>
</ul>
</section>
<section>
<header>
<h2 class="title-2">Notifications</h2>
<span class="tip">contextual, feedback-based, and temporal messages to the user</span>
</header>
<p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>
<h3 class="title-3">Different Static Examples of Notifications</h3>
<ul>
<li>
<a href="#notification-change" class="show-notification">Show Change Warning</a>
<a href="#notification-change" class="hide-notification">Hide Change Warning</a>
</li>
<li>
<a href="#notification-version" class="show-notification">Show New Version Warning</a>
<a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
</li>
<li>
<a href="#notification-dangerous" class="show-notification">Show Editing Warning</a>
<a href="#notification-dangerous" class="hide-notification">Hide Editing Warning</a>
</li>
<li>
<a href="#notification-confirmation" class="show-notification-fleeting">Show Confirmation (Fleeting Notification)</a>
</li>
<li>
<a href="#notification-saving" class="show-notification">Show Saving</a>
<a href="#notification-saving" class="hide-notification">Hide Saving</a>
</li>
<li>
<a href="#notification-help" class="show-notification">Show Help</a>
<a href="#notification-help" class="hide-notification">Hide Help</a>
</li>
</ul>
</section>
<section>
<header>
<h2 class="title-2">Prompts</h2>
<span class="tip">presents a user with a choice, based on their previous interaction, that must be decided before they can proceed</span>
</header>
<p>In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).</p>
<h3 class="title-3">Different Static Examples of Prompts</h3>
<ul>
<li>
<a href="#prompt-confirm" class="show-prompt">Show Confirm Prompt</a>
</li>
<li>
<a href="#prompt-warning" class="show-prompt">Show Warning Prompt</a>
</li>
<li>
<a href="#prompt-error" class="show-prompt">Show Error Prompt</a>
</li>
</ul>
</section>
</article>
</section>
</div>
</%block>
<%block name="view_alerts">
<!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
<div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">You are editing a draft</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button save-button action-primary">Save Draft</a>
</li>
<li class="nav-item">
<a href="#" class="button cancel-button action-secondary">Disgard Draft</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: newer version -->
<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-version">
<div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">A Newer Version of This Exists</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button save-button action-primary">Go to Newer Version</a>
</li>
<li class="nav-item">
<a href="#" class="button cancel-button action-secondary">Continue Editing</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: save confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-saved">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3">Your changes have been saved</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
</div>
</div>
</div>
<!-- alert: save confirmed with close -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-close">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3">Your changes have been saved</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
</div>
<a href="#" rel="view" class="action action-alert-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close alert</span>
</a>
</div>
</div>
<!-- alert: delete confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-removed">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3">X Has been removed</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<!-- alert: system error -->
<div class="wrapper wrapper-alert wrapper-alert-error" id="alert-system-error">
<div class="alert error">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">We're sorry, there was a error with Studio</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<!-- alert: user error -->
<div class="wrapper wrapper-alert wrapper-alert-error" id="alert-user-error">
<div class="alert error has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">There was an error in your submission</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button cancel-button action-primary">Cancel Your Submission</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: announcement w/ actions -->
<div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement1">
<div class="alert announcement has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<div class="copy">
<h2 class="title title-3">Studio will be unavailable this weekend</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" class="action-primary">Contact edX Staff</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Manage Your edX Notifications</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: announcement -->
<div class="wrapper wrapper-alert wrapper-alert-announcement" id="alert-announcement2">
<div class="alert announcement">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<div class="copy">
<h2 class="title title-3">Studio will be unavailable this weekend</h2>
<p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<!-- alert: step required -->
<div class="wrapper wrapper-alert wrapper-alert-step-required" id="alert-activation">
<div class="alert step-required has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
<div class="copy">
<h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2>
<p class="message">Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Re-send Activation Message</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="action-secondary">Contact edX Support</a>
</li>
</ul>
</nav>
</div>
</div>
</%block>
<%block name="view_notifications">
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-change" id="notification-change" role="status">
<div class="notification change has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
<div class="copy">
<h2 class="title title-3">You've Made Some Changes</h2>
<p class="message">Your changes will not take effect until you <strong>save your progress</strong>.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Save Changes</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Don't Save</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: newer version exists -->
<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-version" aria-hidden="true" role="dialog" aria-labelledby="notification-warning-title" aria-describedby="notification-warning-description">
<div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3" id="notification-warning-title">A Newer Version of This Exists</h2>
<p class="message" id="notification-warning-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button save-button action-primary">Go to Newer Version</a>
</li>
<li class="nav-item">
<a href="#" class="button cancel-button action-secondary">Continue Editing</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: warning about editing something dangerous -->
<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-dangerous" aria-hidden="true" role="dialog" aria-labelledby="notification-dangerous-title" aria-describedby="notification-dangerous-description">
<div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3" id="notification-dangerous-title">Are You Sure You Want to Edit That?</h2>
<p class="message" id="notification-dangerous-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Yes, I want to Edit X</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">No, I do not</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: status - saving -->
<div class="wrapper wrapper-notification wrapper-notification-status wrapper-notification-saving" id="notification-saving">
<div class="notification saving">
<i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
<div class="copy">
<h2 class="title title-3" role="status">Saving &hellip;</h2>
</div>
</div>
</div>
<!-- notification: status- confirmed -->
<div class="wrapper wrapper-notification wrapper-notification-confirmation" id="notification-confirmation">
<div class="notification confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<h2 class="title title-3" role="status"><a href="#">Your Section</a> Has Been Created</h2>
</div>
</div>
</div>
<!-- notification: help - DYK -->
<div class="wrapper wrapper-notification wrapper-notification-help" id="notification-help">
<div class="notification help">
<i class="ss-icon ss-symbolicons-block icon icon-help">&#x2753;</i>
<div class="copy">
<h2 class="title title-3">Fun Fact:</h2>
<p class="message">Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
</div>
<a href="#" rel="view" class="action action-notification-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close notification</span>
</a>
</div>
</div>
</%block>
<%block name="view_prompts">
<!-- prompt - confirm deletion -->
<div class="wrapper wrapper-prompt wrapper-prompt-confirm" id="prompt-confirm" aria-hidden="true" role="dialog" aria-labelledby="prompt-confirm-sectionDelete-title" aria-describedby="prompt-confirm-sectionDelete-description">
<div class="prompt confirm">
<div class="copy">
<h2 class="title title-3" id="prompt-confirm-sectionDelete-title">Delete "Introduction &amp; Overview"?</h2>
<p class="message" id="prompt-confirm-sectionDelete-description">Deleting a section cannot be undone and its contents cannot be recovered.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Prompt Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary action-proceed">Yes, delete this section</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary action-cancel">Cancel</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- prompt - warning -->
<div class="wrapper wrapper-prompt wrapper-prompt-warning" id="prompt-warning" aria-hidden="true" role="dialog" aria-labelledby="prompt-warning-useAdvanced-title" aria-describedby="prompt-warning-useAdvanced-description">
<div class="prompt warning">
<div class="copy">
<h2 class="title title-3" id="prompt-warning-useAdvanced-title">Use Advanced Problem Editor?</h2>
<p class="message" id="prompt-warning-useAdvanced-description">If you proceed, you cannot edit this problem using the simple problem editor.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Prompt Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary action-proceed">Continue to Advanced Editor</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary action-cancel">Cancel</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- prompt - error -->
<div class="wrapper wrapper-prompt wrapper-prompt-error" id="prompt-error" aria-hidden="true" role="dialog" aria-labelledby="prompt-errorUser-title" aria-describedby="prompt-errorUser-description">
<div class="prompt error">
<div class="copy">
<h2 class="title title-3" id="prompt-errorUser-title">There Were Errors in Your Submission</h2>
<p class="message" id="prompt-errorUser-description">Please correct the errors noted on the page and try again.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Prompt Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary action-proceed">Correct errors &amp; try again</a>
</li>
</ul>
</nav>
</div>
</div>
</%block>
......@@ -116,6 +116,8 @@ urlpatterns += (
url(r'^logout$', 'student.views.logout_user', name='logout'),
# static/proof-of-concept views
url(r'^ux-alerts$', 'contentstore.views.ux_alerts', name='ux-alerts')
)
if settings.ENABLE_JASMINE:
......
......@@ -7,18 +7,16 @@ from path import path
from xblock.core import Scope
from .xml import XMLModuleStore, ImportSystem, ParentTracker
from .exceptions import DuplicateItemError
from xmodule.modulestore import Location
from xmodule.contentstore.content import StaticContent, XASSET_SRCREF_PREFIX
from xmodule.contentstore.content import StaticContent
from .inheritance import own_metadata
from xmodule.errortracker import make_error_tracker
from collections import defaultdict
log = logging.getLogger(__name__)
def import_static_content(modules, course_loc, course_data_path, static_content_store, target_location_namespace,
subpath='static', verbose=False):
subpath='static', verbose=False):
remap_dict = {}
......@@ -109,10 +107,10 @@ def import_module_from_xml(modulestore, static_content_store, course_data_path,
# the caller passed in
if module.location.category != 'course':
module.location = module.location._replace(tag=target_location_namespace.tag, org=target_location_namespace.org,
course=target_location_namespace.course)
course=target_location_namespace.course)
else:
module.location = module.location._replace(tag=target_location_namespace.tag, org=target_location_namespace.org,
course=target_location_namespace.course, name=target_location_namespace.name)
course=target_location_namespace.course, name=target_location_namespace.name)
# then remap children pointers since they too will be re-namespaced
if module.has_children:
......@@ -121,7 +119,7 @@ def import_module_from_xml(modulestore, static_content_store, course_data_path,
for child in children_locs:
child_loc = Location(child)
new_child_loc = child_loc._replace(tag=target_location_namespace.tag, org=target_location_namespace.org,
course=target_location_namespace.course)
course=target_location_namespace.course)
new_locs.append(new_child_loc.url())
......@@ -141,8 +139,7 @@ def import_module_from_xml(modulestore, static_content_store, course_data_path,
# Note the dropped element closing tag. This causes the LMS to fail when rendering modules - that's
# no good, so we have to do this kludge
if isinstance(module.data, str) or isinstance(module.data, unicode): # some module 'data' fields are non strings which blows up the link traversal code
lxml_rewrite_links(module.data, lambda link: verify_content_links(module, course_data_path,
static_content_store, link, remap_dict))
lxml_rewrite_links(module.data, lambda link: verify_content_links(module, course_data_path, static_content_store, link, remap_dict))
for key in remap_dict.keys():
module.data = module.data.replace(key, remap_dict[key])
......@@ -165,9 +162,9 @@ def import_course_from_xml(modulestore, static_content_store, course_data_path,
# if there is *any* tabs - then there at least needs to be some predefined ones
if module.tabs is None or len(module.tabs) == 0:
module.tabs = [{"type": "courseware"},
{"type": "course_info", "name": "Course Info"},
{"type": "discussion", "name": "Discussion"},
{"type": "wiki", "name": "Wiki"}] # note, add 'progress' when we can support it on Edge
{"type": "course_info", "name": "Course Info"},
{"type": "discussion", "name": "Discussion"},
{"type": "wiki", "name": "Wiki"}] # note, add 'progress' when we can support it on Edge
# a bit of a hack, but typically the "course image" which is shown on marketing pages is hard coded to /images/course_image.jpg
# so let's make sure we import in case there are no other references to it in the modules
......@@ -177,7 +174,7 @@ def import_course_from_xml(modulestore, static_content_store, course_data_path,
def import_from_xml(store, data_dir, course_dirs=None,
default_class='xmodule.raw_module.RawDescriptor',
load_error_modules=True, static_content_store=None, target_location_namespace=None,
load_error_modules=True, static_content_store=None, target_location_namespace=None,
verbose=False, draft_store=None):
"""
Import the specified xml data_dir into the "store" modulestore,
......@@ -238,9 +235,9 @@ def import_from_xml(store, data_dir, course_dirs=None,
# if there is *any* tabs - then there at least needs to be some predefined ones
if module.tabs is None or len(module.tabs) == 0:
module.tabs = [{"type": "courseware"},
{"type": "course_info", "name": "Course Info"},
{"type": "discussion", "name": "Discussion"},
{"type": "wiki", "name": "Wiki"}] # note, add 'progress' when we can support it on Edge
{"type": "course_info", "name": "Course Info"},
{"type": "discussion", "name": "Discussion"},
{"type": "wiki", "name": "Wiki"}] # note, add 'progress' when we can support it on Edge
import_module(module, store, course_data_path, static_content_store)
......@@ -250,14 +247,13 @@ def import_from_xml(store, data_dir, course_dirs=None,
course_items.append(module)
# then import all the static content
if static_content_store is not None:
_namespace_rename = target_location_namespace if target_location_namespace is not None else course_location
# first pass to find everything in /static/
import_static_content(xml_module_store.modules[course_id], course_location, course_data_path, static_content_store,
_namespace_rename, subpath='static', verbose=verbose)
_namespace_rename, subpath='static', verbose=verbose)
# finally loop through all the modules
for module in xml_module_store.modules[course_id].itervalues():
......@@ -278,19 +274,20 @@ def import_from_xml(store, data_dir, course_dirs=None,
# now import any 'draft' items
if draft_store is not None:
import_course_draft(xml_module_store, draft_store, course_data_path,
static_content_store, target_location_namespace if target_location_namespace is not None
else course_location)
import_course_draft(xml_module_store, draft_store, course_data_path,
static_content_store, target_location_namespace if target_location_namespace is not None
else course_location)
finally:
# turn back on all write signalling
if pseudo_course_id in store.ignore_write_events_on_courses:
if pseudo_course_id in store.ignore_write_events_on_courses:
store.ignore_write_events_on_courses.remove(pseudo_course_id)
store.refresh_cached_metadata_inheritance_tree(target_location_namespace if
target_location_namespace is not None else course_location)
store.refresh_cached_metadata_inheritance_tree(target_location_namespace if
target_location_namespace is not None else course_location)
return xml_module_store, course_items
def import_module(module, store, course_data_path, static_content_store, allow_not_found=False):
content = {}
for field in module.fields:
......@@ -319,8 +316,7 @@ def import_module(module, store, course_data_path, static_content_store, allow_n
# Note the dropped element closing tag. This causes the LMS to fail when rendering modules - that's
# no good, so we have to do this kludge
if isinstance(module_data, str) or isinstance(module_data, unicode): # some module 'data' fields are non strings which blows up the link traversal code
lxml_rewrite_links(module_data, lambda link: verify_content_links(module, course_data_path,
static_content_store, link, remap_dict))
lxml_rewrite_links(module_data, lambda link: verify_content_links(module, course_data_path, static_content_store, link, remap_dict))
for key in remap_dict.keys():
module_data = module_data.replace(key, remap_dict[key])
......@@ -340,7 +336,7 @@ def import_module(module, store, course_data_path, static_content_store, allow_n
# NOTE: It's important to use own_metadata here to avoid writing
# inherited metadata everywhere.
store.update_metadata(module.location, dict(own_metadata(module)))
store.update_metadata(module.location, dict(own_metadata(module)))
def import_course_draft(xml_module_store, store, course_data_path, static_content_store, target_location_namespace):
......@@ -406,7 +402,7 @@ def import_course_draft(xml_module_store, store, course_data_path, static_conten
# HACK: since we are doing partial imports of drafts
# the vertical doesn't have the 'url-name' set in the attributes (they are normally in the parent
# object, aka sequential), so we have to replace the location.name with the XML filename
# object, aka sequential), so we have to replace the location.name with the XML filename
# that is part of the pack
fn, fileExtension = os.path.splitext(filename)
descriptor.location = descriptor.location._replace(name=fn)
......@@ -469,7 +465,6 @@ def check_module_metadata_editability(module):
allowed = allowed + ['xml_attributes', 'display_name']
err_cnt = 0
my_metadata = dict(own_metadata(module))
illegal_keys = set(own_metadata(module).keys()) - set(allowed)
if len(illegal_keys) > 0:
......@@ -512,7 +507,7 @@ def validate_data_source_path_existence(path, is_err=True, extra_msg=None):
_cnt = 0
if not os.path.exists(path):
print ("{0}: Expected folder at {1}. {2}".format('ERROR' if is_err == True else 'WARNING', path, extra_msg if
extra_msg is not None else ''))
extra_msg is not None else ''))
_cnt = 1
return _cnt
......@@ -524,13 +519,13 @@ def validate_data_source_paths(data_dir, course_dir):
warn_cnt = 0
err_cnt += validate_data_source_path_existence(course_path / 'static')
warn_cnt += validate_data_source_path_existence(course_path / 'static/subs', is_err=False,
extra_msg='Video captions (if they are used) will not work unless they are static/subs.')
extra_msg='Video captions (if they are used) will not work unless they are static/subs.')
return err_cnt, warn_cnt
def perform_xlint(data_dir, course_dirs,
default_class='xmodule.raw_module.RawDescriptor',
load_error_modules=True):
default_class='xmodule.raw_module.RawDescriptor',
load_error_modules=True):
err_cnt = 0
warn_cnt = 0
......@@ -586,7 +581,6 @@ def perform_xlint(data_dir, course_dirs,
print "WARN: Missing course marketing video. It is recommended that every course have a marketing video."
warn_cnt += 1
print "\n\n------------------------------------------\nVALIDATION SUMMARY: {0} Errors {1} Warnings\n".format(err_cnt, warn_cnt)
if err_cnt > 0:
......
......@@ -199,8 +199,8 @@ class PeerGradingModule(PeerGradingFields, XModule):
self.student_data_for_location = response
score_dict = {
'score': int(count_graded >= count_required),
'total': self.max_grade,
'score': int(count_graded >= count_required and count_graded>0) * int(self.weight),
'total': self.max_grade * int(self.weight),
}
return score_dict
......
......@@ -24,6 +24,11 @@ def strip_filenames(descriptor):
"""
print "strip filename from {desc}".format(desc=descriptor.location.url())
descriptor._model_data.pop('filename', None)
if hasattr(descriptor, 'xml_attributes'):
if 'filename' in descriptor.xml_attributes:
del descriptor.xml_attributes['filename']
for d in descriptor.get_children():
strip_filenames(d)
......
......@@ -11,11 +11,15 @@
font-size: ($sizeValue/10) + rem;
}
// ====================
// line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
// ====================
// image-replacement hidden text
@mixin text-hide() {
text-indent: 100%;
......@@ -35,6 +39,8 @@
width: 1px;
}
// ====================
// vertical and horizontal centering
@mixin vertically-and-horizontally-centered ($height, $width) {
left: 50%;
......@@ -46,6 +52,8 @@
top: 150px;
}
// ====================
// sizing
@mixin size($width: $baseline, $height: $baseline) {
height: $height;
......@@ -56,6 +64,8 @@
@include size($size);
}
// ====================
// placeholder styling
@mixin placeholder($color) {
:-moz-placeholder {
......
......@@ -3,17 +3,12 @@
# django management command: dump grades to csv files
# for use by batch processes
import os
import sys
import string
import datetime
import json
import csv
from instructor.views import *
from instructor.views import get_student_grade_summary_data
from courseware.courses import get_course_by_id
from xmodule.modulestore.django import modulestore
from django.conf import settings
from django.core.management.base import BaseCommand
......@@ -45,7 +40,7 @@ class Command(BaseCommand):
request = self.DummyRequest()
try:
course = get_course_by_id(course_id)
except Exception as err:
except Exception:
if course_id in modulestore().courses:
course = modulestore().courses[course_id]
else:
......
......@@ -11,7 +11,6 @@ import requests
from requests.status_codes import codes
import urllib
from collections import OrderedDict
import json
from StringIO import StringIO
......@@ -21,7 +20,6 @@ from django.http import HttpResponse
from django_future.csrf import ensure_csrf_cookie
from django.views.decorators.cache import cache_control
from mitxmako.shortcuts import render_to_response
import requests
from django.core.urlresolvers import reverse
from courseware import grades
......@@ -36,11 +34,7 @@ from django_comment_client.models import (Role,
from django_comment_client.utils import has_forum_access
from psychometrics import psychoanalyze
from student.models import CourseEnrollment, CourseEnrollmentAllowed
from xmodule.course_module import CourseDescriptor
from xmodule.modulestore import Location
from xmodule.modulestore.django import modulestore
from xmodule.modulestore.exceptions import InvalidLocationError, ItemNotFoundError, NoPathToItem
from xmodule.modulestore.search import path_to_location
import xmodule.graders as xmgraders
import track.views
......@@ -48,14 +42,15 @@ from .offline_gradecalc import student_grades, offline_grades_available
log = logging.getLogger(__name__)
template_imports = {'urllib': urllib}
# internal commands for managing forum roles:
FORUM_ROLE_ADD = 'add'
FORUM_ROLE_REMOVE = 'remove'
def split_by_comma_and_whitespace(s):
"""
Return string s, split by , or whitespace
"""
return re.split(r'[\s,]', s)
......@@ -141,7 +136,7 @@ def instructor_dashboard(request, course_id):
# 'beta', so adding it to get_access_group_name doesn't really make
# sense.
name = course_beta_test_group_name(course.location)
(group, created) = Group.objects.get_or_create(name=name)
(group, _) = Group.objects.get_or_create(name=name)
return group
# process actions from form POST
......@@ -237,13 +232,13 @@ def instructor_dashboard(request, course_id):
if '/' not in problem_to_reset: # allow state of modules other than problem to be reset
problem_to_reset = "problem/" + problem_to_reset # but problem is the default
try:
(org, course_name, run) = course_id.split("/")
(org, course_name, _) = course_id.split("/")
module_state_key = "i4x://" + org + "/" + course_name + "/" + problem_to_reset
module_to_reset = StudentModule.objects.get(student_id=student_to_reset.id,
course_id=course_id,
module_state_key=module_state_key)
msg += "Found module to reset. "
except Exception as e:
except Exception:
msg += "<font color='red'>Couldn't find module with that urlname. </font>"
if "Delete student state for problem" in action:
......@@ -352,7 +347,7 @@ def instructor_dashboard(request, course_id):
return_csv('', datatable, fp=fp)
fp.seek(0)
files = {'datafile': fp}
msg2, dataset = _do_remote_gradebook(request.user, course, 'post-grades', files=files)
msg2, _ = _do_remote_gradebook(request.user, course, 'post-grades', files=files)
msg += msg2
......@@ -423,7 +418,7 @@ def instructor_dashboard(request, course_id):
datatable = {'header': ['username', 'email'] + profkeys}
def getdat(u):
p = u.profile
return [u.username, u.email] + [getattr(p,x,'') for x in profkeys]
return [u.username, u.email] + [getattr(p, x, '') for x in profkeys]
datatable['data'] = [getdat(u) for u in enrolled_students]
datatable['title'] = 'Student profile data for course %s' % course_id
......@@ -433,17 +428,17 @@ def instructor_dashboard(request, course_id):
elif 'Download CSV of all responses to problem' in action:
problem_to_dump = request.POST.get('problem_to_dump','')
if problem_to_dump[-4:]==".xml":
problem_to_dump=problem_to_dump[:-4]
if problem_to_dump[-4:] == ".xml":
problem_to_dump = problem_to_dump[:-4]
try:
(org, course_name, run)=course_id.split("/")
module_state_key="i4x://"+org+"/"+course_name+"/problem/"+problem_to_dump
(org, course_name, run) = course_id.split("/")
module_state_key = "i4x://" + org + "/" + course_name + "/problem/" + problem_to_dump
smdat = StudentModule.objects.filter(course_id=course_id,
module_state_key=module_state_key)
smdat = smdat.order_by('student')
msg += "Found %d records to dump " % len(smdat)
except Exception as err:
msg+="<font color='red'>Couldn't find module with that urlname. </font>"
msg += "<font color='red'>Couldn't find module with that urlname. </font>"
msg += "<pre>%s</pre>" % escape(err)
smdat = []
......@@ -741,7 +736,7 @@ def _list_course_forum_members(course_id, rolename, datatable):
# make sure datatable is set up properly for display first, before checking for errors
datatable['header'] = ['Username', 'Full name', 'Roles']
datatable['title'] = 'List of Forum {0}s in course {1}'.format(rolename, course_id)
datatable['data'] = [];
datatable['data'] = []
try:
role = Role.objects.get(name=rolename, course_id=course_id)
except Role.DoesNotExist:
......@@ -923,7 +918,7 @@ def get_student_grade_summary_data(request, course, course_id, get_grades=True,
datarow = [student.id, student.username, student.profile.name, student.email]
try:
datarow.append(student.externalauthmap.external_email)
except: # ExternalAuthMap.DoesNotExist
except: # ExternalAuthMap.DoesNotExist
datarow.append('')
if get_grades:
......@@ -1040,7 +1035,8 @@ def _do_enroll_students(course, course_id, students, overload=False):
datatable['data'] = [[x, status[x]] for x in status]
datatable['title'] = 'Enrollment of students'
def sf(stat): return [x for x in status if status[x] == stat]
def sf(stat):
return [x for x in status if status[x] == stat]
data = dict(added=sf('added'), rejected=sf('rejected') + sf('exists'),
deleted=sf('deleted'), datatable=datatable)
......@@ -1136,7 +1132,7 @@ def dump_grading_context(course):
'''
msg = "-----------------------------------------------------------------------------\n"
msg += "Course grader:\n"
msg += '%s\n' % course.grader.__class__
graders = {}
if isinstance(course.grader, xmgraders.WeightedSubsectionsGrader):
......@@ -1151,7 +1147,7 @@ def dump_grading_context(course):
gc = course.grading_context
msg += "graded sections:\n"
msg += '%s\n' % gc['graded_sections'].keys()
for (gs, gsvals) in gc['graded_sections'].items():
msg += "--> Section %s:\n" % (gs)
......
......@@ -27,8 +27,6 @@ from mitxmako.shortcuts import render_to_string
log = logging.getLogger(__name__)
template_imports = {'urllib': urllib}
system = ModuleSystem(
ajax_url=None,
track_function=None,
......
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