Skip to content

E
edx-platform
Commit 22639adc by Brian Talbot
Options

studio - alerts WIP

parent 49cab68a
Showing with 347 additions and 68 deletions
cms/static/sass/_alerts.scss
// studio alerts and notifications
// ====================
// notifications
.wrapper-notification {
@include clearfix();
@include box-sizing(border-box);
@include transition (bottom 2.0s ease-in-out 5s, opacity 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 $gray-d1;
padding: $baseline ($baseline*2);
background: $white;
&.is-shown {
bottom: 0;
opacity: 1.0;
}
&.wrapper-notification-warning {
border-color: shade($yellow, 25%);
background: tint($yellow, 25%);
}
&.wrapper-notification-error {
border-color: shade($red, 50%);
background: tint($red, 20%);
color: $white;
}
&.wrapper-notification-confirm {
border-color: shade($green, 30%);
background: tint($green, 40%);
color: shade($green, 30%);
}
}
.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;
}
}
.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;
}
}
// ====================
// alerts
.wrapper-alert {
@include clearfix();
@include box-sizing(border-box);
@include transition (opacity 2.0s ease-in-out 5s);
@include box-shadow(0 1px 2px rgba(0,0,0,0.2));
position: relative;
top: -($baseline*1.5);
z-index: 100;
overflow: hidden;
width: 100%;
opacity: 0;
border-bottom: 2px solid $blue-d2;
padding: $baseline ($baseline*2);
background: $blue;
&.is-shown {
bottom: 0;
opacity: 1.0;
}
&.wrapper-alert-warning {
background: $orange-s1;
border-color: $orange-d1;
}
&.wrapper-alert-error {
border-color: shade($red, 50%);
color: $white;
}
&.wrapper-alert-confirm {
border-color: shade($green, 30%);
}
&.wrapper-alert-inform {
border-color: $blue-d1;
}
}
.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;
}
strong {
font-weight: 700;
}
.alert-action {
float: right;
&.secondary {
@include orange-button;
}
}
@include font-size(14);
@include box-sizing(border-box);
margin: 0 auto;
width: flex-grid(12);
max-width: $fg-max-width;
min-width: $fg-min-width;
color: $white;
strong {
font-weight: 700;
}
.copy {
@include font-size(14);
.icon {
@include font-size(24);
@include border-radius(50px);
display: inline-block;
vertical-align: top;
margin-right: ($baseline/2);
padding: ($baseline/4) ($baseline/2) ($baseline/10) ($baseline/2);
}
p {
width: flex-grid(8, 9);
display: inline-block;
vertical-align: top;
}
}
&.has-actions {
.copy {
float: left;
width: flex-grid(8, 12);
margin-right: flex-gutter();
}
.actions {
float: right;
width: flex-grid(4, 12);
margin-top: ($baseline/2);
text-align: right;
li {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
}
}
}
// alert types
&.warning {
color: $gray-d2;
.copy {
.icon {
background: $gray-d2;
color: $orange-s1;
}
}
}
}
body.error {
background: $darkGrey;
color: #3c3c3c;
.primary-header {
display: none;
}
.error-prompt {
width: 700px;
margin: 150px auto;
padding: 60px 50px 90px;
border-radius: 3px;
background: #fff;
text-align: center;
}
h1 {
float: none;
margin: 0;
font-size: 60px;
font-weight: 300;
color: #3c3c3c;
}
.description {
margin-bottom: 50px;
font-size: 21px;
}
.back-button {
@include blue-button;
padding: 14px 40px 18px;
font-size: 18px;
}
}
\ No newline at end of file
// artifact styles
// .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;
// }
// strong {
// font-weight: 700;
// }
// .alert-action {
// float: right;
// &.secondary {
// @include orange-button;
// }
// }
// }
// body.error {
// background: $darkGrey;
// color: #3c3c3c;
// .primary-header {
// display: none;
// }
// .error-prompt {
// width: 700px;
// margin: 150px auto;
// padding: 60px 50px 90px;
// border-radius: 3px;
// background: #fff;
// text-align: center;
// }
// h1 {
// float: none;
// margin: 0;
// font-size: 60px;
// font-weight: 300;
// color: #3c3c3c;
// }
// .description {
// margin-bottom: 50px;
// font-size: 21px;
// }
// .back-button {
// @include blue-button;
// padding: 14px 40px 18px;
// font-size: 18px;
// }
// }
\ No newline at end of file
cms/static/sass/_header.scss
......@@ -10,7 +10,7 @@
height: 76px;
position: relative;
width: 100%;
z-index: 10;
z-index: 1000;
a {
color: $baseFontColor;
......
cms/static/sass/_variables.scss
......@@ -39,6 +39,12 @@ $blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%);
$blue-d3: shade($blue,60%);
$blue-d4: shade($blue,80%);
$blue-s1: saturate($blue,15%);
$blue-s2: saturate($blue,30%);
$blue-s3: saturate($blue,45%);
$blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%);
$blue-u3: desaturate($blue,45%);
$pink: rgb(183, 37, 103);
$pink-l1: tint($pink,20%);
......@@ -50,6 +56,12 @@ $pink-d1: shade($pink,20%);
$pink-d2: shade($pink,40%);
$pink-d3: shade($pink,60%);
$pink-d4: shade($pink,80%);
$pink-s1: saturate($pink,15%);
$pink-s2: saturate($pink,30%);
$pink-s3: saturate($pink,45%);
$pink-u1: desaturate($pink,15%);
$pink-u2: desaturate($pink,30%);
$pink-u3: desaturate($pink,45%);
$green: rgb(37, 184, 90);
$green-l1: tint($green,20%);
......@@ -61,8 +73,14 @@ $green-d1: shade($green,20%);
$green-d2: shade($green,40%);
$green-d3: shade($green,60%);
$green-d4: shade($green,80%);
$green-s1: saturate($green,15%);
$green-s2: saturate($green,30%);
$green-s3: saturate($green,45%);
$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%);
......@@ -72,9 +90,33 @@ $yellow-d1: shade($yellow,20%);
$yellow-d2: shade($yellow,40%);
$yellow-d3: shade($yellow,60%);
$yellow-d4: shade($yellow,80%);
$yellow-s1: saturate($yellow,15%);
$yellow-s2: saturate($yellow,30%);
$yellow-s3: saturate($yellow,45%);
$yellow-u1: desaturate($yellow,15%);
$yellow-u2: desaturate($yellow,30%);
$yellow-u3: desaturate($yellow,45%);
$orange: rgb(237, 189, 60);
$orange-l1: tint($orange,20%);
$orange-l2: tint($orange,40%);
$orange-l3: tint($orange,60%);
$orange-l4: tint($orange,80%);
$orange-l5: tint($orange,90%);
$orange-d1: shade($orange,20%);
$orange-d2: shade($orange,40%);
$orange-d3: shade($orange,60%);
$orange-d4: shade($orange,80%);
$orange-s1: saturate($orange,15%);
$orange-s2: saturate($orange,30%);
$orange-s3: saturate($orange,45%);
$orange-u1: desaturate($orange,15%);
$orange-u2: desaturate($orange,30%);
$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);
// colors - inherited
......
cms/templates/unit.html
......@@ -16,7 +16,6 @@
});
$(document).ready(function() {
$('body').addClass('js');
// tabs
$('.tab-group').tabs();
......@@ -32,9 +31,32 @@
</%block>
<%block name="content">
<!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions">
<div class="copy">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<p>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="button save-button">Replace with Draft</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button">Delete Draft</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
<div class="inner-wrapper">
<div class="alert editing-draft-alert">
<div class="alert editing-draft-alert wip-box">
<p class="alert-message"><strong>You are editing a draft.</strong>
% if published_date:
This unit was originally published on ${published_date}.
......@@ -144,7 +166,7 @@
<option value="private">Private</option>
</select>
</div>
<div class="row published-alert">
<div class="row published-alert wip-box">
<p class="edit-draft-message">This unit has been published. To make changes, you must <a href="#" class="create-draft">edit a draft</a>.</p>
<p class="publish-draft-message">This is a draft of the published unit. To update the live version, you must <a href="#" class="publish-draft">replace it with this draft</a>.</p>
</div>
......
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