Skip to content

E
edx-platform
Commit d57aa315 by Chris Dodge
Options

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
parents 20a8395f f43c340c
Showing with 162 additions and 57 deletions
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
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