Merge branch 'feature/cale/cms-master' of github.com:MITx/mitx into…

Merge branch 'feature/cale/cms-master' of github.com:MITx/mitx into feature/cdodge/subsection-edit-page

cms/static/js/base.js

@@ -295,5 +295,36 @@ function removeDateSetter(e) {
     $block.find('.time').val('');
 }
 
+function showToastMessage(message, $button, lifespan) {
+    var $toast = $('<div class="toast-notification"></div>');
+    var $closeBtn = $('<a href="#" class="close-button">×</a>');
+    $toast.append($closeBtn);
+    var $content = $('<div class="notification-content"></div>');
+    $content.html(message);
+    $toast.append($content);
+    if($button) {
+        $button.addClass('action-button');
+        $button.bind('click', hideToastMessage);
+        $content.append($button);
+    }
+    $closeBtn.bind('click', hideToastMessage);
+
+    if($('.toast-notification')[0]) {
+        var targetY = $('.toast-notification').offset().top + $('.toast-notification').outerHeight();
+        $toast.css('top', (targetY + 10) + 'px');
+    }
+
+    $body.prepend($toast);
+    $toast.fadeIn(200);
 
+    if(lifespan) {
+        $toast.timer = setTimeout(function() {
+            $toast.fadeOut(300);
+        }, lifespan * 1000);
+    }
+}
 
+function hideToastMessage(e) {
+    e.preventDefault();
+    $(this).closest('.toast-notification').remove();
+}

cms/static/sass/_assets.scss

@@ -28,7 +28,8 @@
       }
 
       thead th {
-        background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db;
+        @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
+        background-color: #ced2db;
         font-size: 12px;
         font-weight: 700;
         text-shadow: 0 1px 0 rgba(255, 255, 255, .5);

cms/static/sass/_base.scss

@@ -16,7 +16,7 @@ body {
 a {
     text-decoration: none;
     color: $blue;
-    -webkit-transition: color .15s;
+    @include transition(color .15s);
 
     &:hover {
         color: #cb9c40;
@@ -53,7 +53,7 @@ h1 {
     background: #fff;
     border: 1px solid $darkGrey;
     border-radius: 3px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 }
 
 .sidebar {
@@ -78,24 +78,27 @@ input[type="text"],
 input[type="email"],
 input[type="password"] {
     padding: 6px 8px 8px;
-    box-sizing: border-box;
+    @include box-sizing(border-box);
     border: 1px solid #b0b6c2;
     border-radius: 2px;
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)) #edf1f5;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
+    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
+    background-color: #edf1f5;
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
     font-family: 'Open Sans', sans-serif;
     font-size: 11px;
     color: #3c3c3c;
     outline: 0;
 
-    &::-webkit-input-placeholder {
+    &::-webkit-input-placeholder,
+    &:-moz-placeholder,
+    &:-ms-input-placeholder {
         color: #979faf;
     }
 }
 
 input.search {
     padding: 6px 15px 8px 30px;
-    box-sizing: border-box;
+    @include box-sizing(border-box);
     border: 1px solid $darkGrey;
     border-radius: 20px;
     background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
@@ -116,10 +119,11 @@ label {
     width: 100%;
     min-height: 80px;
     padding: 10px;
-    box-sizing: border-box;
+    @include box-sizing(border-box);
     border: 1px solid #b0b6c2;
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)) #edf1f5;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
+    background-color:  #edf1f5;
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
     font-family: Monaco, monospace;
 }
 
@@ -169,8 +173,9 @@ label {
         padding: 6px 14px;
         border-bottom: 1px solid #cbd1db;
         border-radius: 3px 3px 0 0;
-        background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
-        box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
+        @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
+        background-color: #edf1f5;
+        @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
         font-size: 14px;
         font-weight: 600;
     }
@@ -218,4 +223,62 @@ body.show-wip {
             @include position(absolute, 0px 0px 0 0);
         }
     }
+}
+
+.toast-notification {
+  display: none;
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 99999;
+  max-width: 350px;
+  padding: 15px 20px 17px;
+  border-radius: 3px;
+  border: 1px solid #333;
+  @include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
+  background-color: rgba(30, 30, 30, .92);
+  @include box-shadow(0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset);
+  font-size: 13px;
+  text-align: center;
+  color: #fff;
+  @include transition(all .2s);
+
+  p, span {
+    color: #fff;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 27px;
+    height: 27px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 25px;
+    color: #aaa;
+    text-align: center;
+
+    .close-icon {
+      font-size: 16px;
+      font-weight: 700;
+    }
+  }
+
+  .action-button {
+    @include blue-button;
+    @include box-sizing(border-box);
+    width: 100%;
+    margin-top: 10px;
+    font-size: 12px;
+    text-align: center;
+  }
 }
\ No newline at end of file

cms/static/sass/_cms_mixins.scss

@@ -13,11 +13,11 @@
 	padding: 4px 20px 6px;
 	font-size: 14px;
 	font-weight: 700;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
-	-webkit-transition: background-color .15s, box-shadow .15s;
+	@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);
 
 	&:hover {
-		box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
+		@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
 	}
 }
 
@@ -25,7 +25,8 @@
 	@include button;
 	border: 1px solid #437fbf;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) $blue;
+	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+	background-color: $blue;
 	color: #fff;
 
 	&:hover {
@@ -38,8 +39,9 @@
 	@include button;
 	border: 1px solid $darkGrey;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%) #dfe5eb;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+	@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%);
+	background-color: #dfe5eb;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
 	color: #5d6779;
 
 	&:hover {
@@ -52,8 +54,9 @@
 	@include button;
 	border: 1px solid #bda046;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%) #edbd3c;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+	@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 {
@@ -66,8 +69,9 @@
 	@include button;
 	border: 1px solid $darkGrey;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+	background-color: #d1dae3;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
 	color: #6d788b;
 
 	&:hover {
@@ -80,8 +84,9 @@
 	padding: 15px 20px;
 	border-radius: 3px;
 	border: 1px solid #5597dd;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #5597dd;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
+	@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+	background-color: #5597dd;
+	@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
 
 	label {
 		color: #fff;
@@ -165,10 +170,6 @@
 		.has-new-draft-item {
 			color: #9f7d10;
 		}
-
-		.item-actions {
-			// display: none;
-		}
 	}
 
 	a {

cms/static/sass/_courseware.scss

@@ -20,7 +20,7 @@ input.courseware-unit-search-input {
 	border-radius: 3px;
 	margin: 10px 0;
 	padding-bottom: 12px;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+	@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 
 	&:first-child {
 		margin-top: 0;
@@ -88,7 +88,8 @@ input.courseware-unit-search-input {
 	}
 
 	.list-header {
-		background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db;
+		@include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
+		background-color: #ced2db;
 		border-radius: 3px 3px 0 0;
 	}
 
@@ -127,7 +128,7 @@ input.courseware-unit-search-input {
 	left: 110px;
 	z-index: 9999;
 	border: 1px solid #3C3C3C;
-	box-shadow: 0 1px 15px rgba(0, 0, 0, .2);	
+	@include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
 }
 
 .unit-name-input {

cms/static/sass/_dashboard.scss

@@ -3,7 +3,7 @@
 	border-radius: 3px;
 	border: 1px solid $darkGrey;	
 	background: #fff;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+	@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 
 	li {
 		border-bottom: 1px solid $mediumGrey;

cms/static/sass/_header.scss

@@ -8,10 +8,10 @@ body.no-header {
 	width: 100%;
 	height: 36px;
 	border-bottom: 1px solid #2c2e33;
-	background: -webkit-linear-gradient(top, #686b76, #54565e);
+	@include linear-gradient(top, #686b76, #54565e);
 	font-size: 13px;
 	color: #fff;
-	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset;
+	@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
 
 	.drop-icon {
 		margin-left: 5px;
@@ -38,15 +38,15 @@ body.no-header {
 	}
 
 	a {
-		box-shadow: 1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44;
+		@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
 
 		&:hover {
 			background: rgba(255, 255, 255, .1);
 		}
 
 		&.active {
-			background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
-			box-shadow: 0 2px 8px rgba(0, 0, 0, .7) inset;
+			@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
+			@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
 		}
 	}
 }
\ No newline at end of file

cms/static/sass/_login.scss

@@ -8,9 +8,9 @@
 		height: 36px;
 		border-radius: 3px 3px 0 0;
 		border: 1px solid #2c2e33;
-		background: -webkit-linear-gradient(top, #686b76, #54565e);
+		@include linear-gradient(top, #686b76, #54565e);
 		color: #fff;
-		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset;
+		@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset);
 
 		h1 {
 			float: none;
@@ -27,7 +27,7 @@
 		border-top-width: 0;
 		border-radius: 0 0 3px 3px;
 		background: #fff;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+		@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 	}
 
 	label {

cms/static/sass/_modal.scss

@@ -28,7 +28,8 @@
 
 	.modal-actions {
 		height: 60px;
-		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #d1dae3;
+		@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+		background-color: #d1dae3;
 	}
 
 	h2 {

cms/static/sass/_unit.scss

@@ -22,8 +22,9 @@
   .breadcrumbs {
     border-radius: 3px 3px 0 0;
     border-bottom: 1px solid #cbd1db;
-    background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
+    @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
+    background-color: #edf1f5;
+    @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
     @include clearfix;
 
     li {
@@ -56,7 +57,7 @@
       border: 1px solid #d1ddec;
       border-radius: 3px;
       background: #fff;
-      -webkit-transition: border-color .15s;
+      @include transition(border-color .15s);
 
       &:hover {
         border-color: #6696d7;
@@ -94,7 +95,7 @@
         position: absolute;
         top: 4px;
         right: 4px;
-        -webkit-transition: opacity .15s;
+        @include transition(opacity .15s);
       }
 
       .edit-button,
@@ -107,7 +108,7 @@
         background: #d1ddec;
         font-size: 12px;
         color: #fff;
-        -webkit-transition: all .15s;
+        @include transition(all .15s);
 
         &:hover {
           background-color: $blue;
@@ -132,16 +133,17 @@
         border: 1px solid #d1ddec;
         background: url(../img/drag-handles.png) center no-repeat #d1ddec;
         cursor: move;
-        -webkit-transition: all .15s;
+        @include transition(all .15s);
       }
 
       &.new-component-item {
         padding: 0;
         border: 1px solid #8891a1;
         border-radius: 3px;
-        background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
-        box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
-        -webkit-transition: background-color .15s, border-color .15s;
+        @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+        background-color: #d1dae3;
+        @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
+        @include transition(background-color .15s, border-color .15s);
 
         &.adding {
           background-color: $blue;
@@ -182,8 +184,8 @@
             line-height: 14px;
             color: #fff;
             text-align: center;
-            box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset;
-            -webkit-transition: background-color .15s;
+            @include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset);
+            @include transition(background-color .15s);
 
             &:hover {
               background-color: rgba(255, 255, 255, .2);
@@ -195,7 +197,7 @@
               left: 0;
               width: 100%;
               padding: 10px;
-              box-sizing: border-box;
+              @include box-sizing(border-box);
             }
           }
         }
@@ -229,7 +231,8 @@
     display: none;
     padding: 20px;
     border-radius: 0 0 3px 3px;
-    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue;
+    @include linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
+    background-color: $blue;
     color: #fff;
 
     .metadata_edit {
@@ -364,7 +367,7 @@
   .url {
     width: 100%;
     margin-bottom: 10px;
-    box-shadow: none;
+    @include box-shadow(none);
   }
 
   .window-contents > ol {

cms/templates/unit.html

@@ -113,4 +113,5 @@
       </div>
     </div>
   </div>
-</%block>
+
+</%block>
\ No newline at end of file