Skip to content

E
edx-platform
Commit 72c58cd4 by Brian Talbot
Options

studio - alerts: refactored styles for common content types across UI, got… 

studio - alerts: refactored styles for common content types across UI, got prompts set up and styled, and refactored base template for future prompt/notification/alert use
parent 47aacc70
Showing with 202 additions and 182 deletions
cms/static/js/base.js
......@@ -62,10 +62,16 @@ $(document).ready(function () {
$(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
});
// prompt pop
$('.action-prompt').click(function(e){
(e).preventDefault();
$body.toggleClass('prompt-is-shown');
});
// prompt close
$('.prompt .action-cancel').click(function(e) {
$('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
(e).preventDefault();
$(this).closest('.wrapper-prompt').removeClass('is-shown').addClass('is-hiding');
$body.removeClass('prompt-is-shown');
});
// nav - dropdown related
......
cms/static/sass/_alerts.scss
// studio alerts and notifications
// ====================
// shared
.wrapper-notification, .wrapper-alert, .prompt {
@include box-sizing(border-box);
background: $gray-d3;
border-top: 4px solid $gray-d4;
.copy {
@include font-size(13);
color: $gray-l2;
.title {
color: $white;
}
.nav-actions {
.action-primary {
color: $gray-d4;
}
}
}
}
// prompts
.wrapper-prompt {
@include transition(all 0.05s ease-in-out);
position: fixed;
top: 0;
background: $black-t1;
background: $black-t0;
width: 100%;
height: 100%;
text-align: center;
......@@ -20,36 +44,93 @@
}
.prompt {
@include border-radius(3px);
@include box-sizing(border-box);
@include box-shadow(0 0 4px $shadow-d1);
@include border-radius(($baseline/5));
@include box-shadow(0 0 3px $shadow-d1);
display: inline-block;
vertical-align: middle;
width: $baseline*15;
padding: $baseline;
background: $white;
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 blue-button();
@include font-size(13);
border-color: $blue-d2;
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 box-shadow(0 -1px 3px $shadow);
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
border-top: 4px solid $gray-l1;
padding: ($baseline*0.75) ($baseline*2);
background: $gray-d3;
&.wrapper-notification-warning {
border-top-color: $orange;
......@@ -67,7 +148,7 @@
}
}
&.wrapper-cation-error {
&.wrapper-notification-error {
border-top-color: $red-l1;
.icon-error {
......@@ -208,29 +289,6 @@
}
}
// with cancel
.action-notification-close {
@include border-top-radius(3px);
position: absolute;
top: -34px;
right: $baseline;
padding: ($baseline/5) ($baseline/2.5) 0 ($baseline/2.5);
background: $gray-l1;
text-align: center;
.label {
@include text-sr();
}
.icon {
@include font-size(14);
color: $white;
width: auto;
margin: 0;
padding: 2px;
}
}
// with actions
&.has-actions {
......@@ -272,108 +330,17 @@
}
}
// notification types
&.warning {
.action-notification-close {
background: $orange;
&:hover {
background: $orange-s2;
}
}
.action-primary {
@include orange-button();
@include font-size(13);
border-color: $orange-d2;
}
a {
color: $orange;
&:hover {
color: $orange-s2;
}
}
}
&.error {
.action-notification-close {
background: $red-l1;
&:hover {
background: $red;
}
}
.action-primary {
@include red-button();
@include font-size(13);
border-color: $red-d2;
}
a {
color: $red-l1;
&:hover {
color: $red;
}
}
}
&.confirmation {
.copy {
margin-top: ($baseline/5);
}
.action-notification-close {
background: $green;
&:hover {
background: $green-s2;
}
}
.action-primary {
@include green-button();
@include font-size(13);
border-color: $green-d2;
}
a {
color: $green;
&:hover {
color: $green-s2;
}
}
}
&.announcement {
.action-notification-close {
background: $blue;
&:hover {
background: $blue-s1;
}
}
.action-primary {
@include blue-button();
@include font-size(13);
border-color: $blue-d2;
}
}
&.saving {
.icon-saving {
@include anim-rotateClockwise(3s, linear, infinite);
width: 22px;
}
......@@ -559,12 +526,12 @@
// with cancel
.action-alert-close {
@include border-bottom-radius(3px);
@include border-bottom-radius(($baseline/5));
position: absolute;
top: -($baseline/10);
right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-d1;
background: $gray-d4;
text-align: center;
.label {
......@@ -580,16 +547,20 @@
}
&:hover {
background: $gray-l1;
background: $gray-d1;
}
}
}
// alert types
.alert, .notification, .prompt {
// types - warning
&.warning {
.action-primary {
.nav-actions .action-primary {
@include orange-button();
border-color: $orange-d2;
color: $gray-d4;
}
a {
......@@ -601,9 +572,10 @@
}
}
// types - error
&.error {
.action-primary {
.nav-actions .action-primary {
@include red-button();
border-color: $red-d2;
}
......@@ -617,9 +589,27 @@
}
}
// types - announcement
&.announcement {
.nav-actions .action-primary {
@include blue-button();
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
// types - confirmation
&.confirmation {
.action-primary {
.nav-actions .action-primary {
@include green-button();
border-color: $green-d2;
}
......@@ -633,17 +623,10 @@
}
}
&.announcement {
.action-primary {
@include blue-button();
border-color: $blue-d2;
}
}
// types - step required
&.step-required {
.action-primary {
.nav-actions .action-primary {
border-color: $pink-d2;
@include pink-button();
}
......@@ -661,26 +644,31 @@
// js enabled
.js {
// prompt set-up
.wrapper-prompt {
display: none;
visibility: hidden;
pointer-events: none;
.prompt {
@include anim-bounceIn(0.5s);
opacity: 0.1;
opacity: 0;
}
}
&.is-shown {
display: block;
// prompt showing
&.prompt-is-shown {
.prompt {
opacity: 1.0;
}
.wrapper-view {
-webkit-filter: blur(2px) grayscale(25%);
filter: blur(2px) grayscale(25%);
}
&.is-hiding {
.wrapper-prompt.is-shown {
visibility: visible;
pointer-events: auto;
.prompt {
@include anim-bounceOut(0.5s);
@include anim-bounceIn(0.5s);
opacity: 1.0;
}
}
}
......
cms/static/sass/_base.scss
......@@ -103,6 +103,13 @@ p, ul, ol, dl {
// ====================
// layout - basic
.wrapper-view {
}
// ====================
// layout - basic page header
.wrapper-mast {
margin: 0;
......
cms/static/sass/_keyframes.scss
......@@ -17,12 +17,14 @@
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
@keyframes rotateClockwise { @include rotateClockwise();}
@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1) {
@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-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -47,12 +49,14 @@
@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@keyframes notificationsSlideUp { @include notificationsSlideUp();}
@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1) {
@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-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -77,12 +81,13 @@
@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@keyframes notificationsSlideDown { @include notificationsSlideDown();}
@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1) {
@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-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -107,12 +112,13 @@
@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}
@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1) {
@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-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -139,12 +145,13 @@
@-o-keyframes bounceIn { @include bounceIn(); }
@keyframes bounceIn { @include bounceIn();}
@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1) {
@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-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -185,10 +192,11 @@
@-o-keyframes bounceOut { @include bounceOut(); }
@keyframes bounceOut { @include bounceOut();}
@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1) {
@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-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
\ No newline at end of file
cms/static/sass/_variables.scss
......@@ -16,10 +16,12 @@ $error-red: rgb(253, 87, 87);
// colors - new for re-org
$black: rgb(0,0,0);
$black-t0: rgba(0,0,0,0.125);
$black-t1: rgba(0,0,0,0.25);
$black-t2: rgba(0,0,0,0.50);
$black-t3: rgba(0,0,0,0.75);
$white: rgb(255,255,255);
$white-t0: rgba(255,255,255,0.125);
$white-t1: rgba(255,255,255,0.25);
$white-t2: rgba(255,255,255,0.50);
$white-t3: rgba(255,255,255,0.75);
......
cms/templates/base.html
......@@ -6,12 +6,12 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
<%block name="title"></%block> |
% if context_course:
<% ctx_loc = context_course.location %>
${context_course.display_name} |
% endif
edX Studio
<%block name="title"></%block> |
% if context_course:
<% ctx_loc = context_course.location %>
${context_course.display_name} |
% endif
edX Studio
</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
......@@ -22,14 +22,13 @@
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
<%block name="header_extras"></%block>
</head>
<body class="<%block name='bodyclass'></%block> hide-wip">
<%include file="widgets/header.html" />
<%include file="courseware_vendor_js.html"/>
<%include file="courseware_vendor_js.html"/>
<script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
......@@ -48,15 +47,23 @@
<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>
<%block name="content"></%block>
<%include file="widgets/footer.html" />
<!-- view -->
<div class="wrapper wrapper-view">
<%include file="widgets/header.html" />
<%block name="jsextra"></%block>
</body>
</html>
<%block name="view_alerts"></%block>
<%block name="content"></%block>
<%include file="widgets/footer.html" />
<%block name="view_notifications"></%block>
</div>
<%block name="view_prompts"></%block>
<%block name="jsextra"></%block>
</body>
</html>
\ 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