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 { .alert {
padding: 15px 20px; @include font-size(14);
margin-bottom: 30px; @include box-sizing(border-box);
border-radius: 3px; margin: 0 auto;
border: 1px solid #edbd3c; width: flex-grid(12);
border-radius: 3px; max-width: $fg-max-width;
background: #fbf6e1; min-width: $fg-min-width;
// background: #edbd3c; color: $white;
font-size: 14px;
@include clearfix; strong {
font-weight: 700;
.alert-message { }
float: left;
margin-top: 4px; .copy {
} @include font-size(14);
strong { .icon {
font-weight: 700; @include font-size(24);
} @include border-radius(50px);
display: inline-block;
.alert-action { vertical-align: top;
float: right; margin-right: ($baseline/2);
padding: ($baseline/4) ($baseline/2) ($baseline/10) ($baseline/2);
&.secondary { }
@include orange-button;
} 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 { // artifact styles
background: $darkGrey; // .alert {
color: #3c3c3c; // padding: 15px 20px;
// margin-bottom: 30px;
.primary-header { // border-radius: 3px;
display: none; // border: 1px solid #edbd3c;
} // border-radius: 3px;
// background: #fbf6e1;
.error-prompt { // // background: #edbd3c;
width: 700px; // font-size: 14px;
margin: 150px auto; // @include clearfix;
padding: 60px 50px 90px;
border-radius: 3px; // .alert-message {
background: #fff; // float: left;
text-align: center; // margin-top: 4px;
} // }
h1 { // strong {
float: none; // font-weight: 700;
margin: 0; // }
font-size: 60px;
font-weight: 300; // .alert-action {
color: #3c3c3c; // float: right;
}
// &.secondary {
.description { // @include orange-button;
margin-bottom: 50px; // }
font-size: 21px; // }
} // }
.back-button { // body.error {
@include blue-button; // background: $darkGrey;
padding: 14px 40px 18px; // color: #3c3c3c;
font-size: 18px;
} // .primary-header {
} // display: none;
\ No newline at end of file // }
// .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 @@ ...@@ -10,7 +10,7 @@
height: 76px; height: 76px;
position: relative; position: relative;
width: 100%; width: 100%;
z-index: 10; z-index: 1000;
a { a {
color: $baseFontColor; color: $baseFontColor;
......
cms/static/sass/_variables.scss
...@@ -39,6 +39,12 @@ $blue-d1: shade($blue,20%); ...@@ -39,6 +39,12 @@ $blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%); $blue-d2: shade($blue,40%);
$blue-d3: shade($blue,60%); $blue-d3: shade($blue,60%);
$blue-d4: shade($blue,80%); $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: rgb(183, 37, 103);
$pink-l1: tint($pink,20%); $pink-l1: tint($pink,20%);
...@@ -50,6 +56,12 @@ $pink-d1: shade($pink,20%); ...@@ -50,6 +56,12 @@ $pink-d1: shade($pink,20%);
$pink-d2: shade($pink,40%); $pink-d2: shade($pink,40%);
$pink-d3: shade($pink,60%); $pink-d3: shade($pink,60%);
$pink-d4: shade($pink,80%); $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: rgb(37, 184, 90);
$green-l1: tint($green,20%); $green-l1: tint($green,20%);
...@@ -61,8 +73,14 @@ $green-d1: shade($green,20%); ...@@ -61,8 +73,14 @@ $green-d1: shade($green,20%);
$green-d2: shade($green,40%); $green-d2: shade($green,40%);
$green-d3: shade($green,60%); $green-d3: shade($green,60%);
$green-d4: shade($green,80%); $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-l1: tint($yellow,20%);
$yellow-l2: tint($yellow,40%); $yellow-l2: tint($yellow,40%);
$yellow-l3: tint($yellow,60%); $yellow-l3: tint($yellow,60%);
...@@ -72,9 +90,33 @@ $yellow-d1: shade($yellow,20%); ...@@ -72,9 +90,33 @@ $yellow-d1: shade($yellow,20%);
$yellow-d2: shade($yellow,40%); $yellow-d2: shade($yellow,40%);
$yellow-d3: shade($yellow,60%); $yellow-d3: shade($yellow,60%);
$yellow-d4: shade($yellow,80%); $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: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1); $shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4); $shadow-d1: rgba(0,0,0,0.4);
// colors - inherited // colors - inherited
......
cms/templates/unit.html
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
}); });
$(document).ready(function() { $(document).ready(function() {
$('body').addClass('js');
// tabs // tabs
$('.tab-group').tabs(); $('.tab-group').tabs();
...@@ -32,9 +31,32 @@ ...@@ -32,9 +31,32 @@
</%block> </%block>
<%block name="content"> <%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="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
<div class="inner-wrapper"> <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> <p class="alert-message"><strong>You are editing a draft.</strong>
% if published_date: % if published_date:
This unit was originally published on ${published_date}. This unit was originally published on ${published_date}.
...@@ -144,7 +166,7 @@ ...@@ -144,7 +166,7 @@
<option value="private">Private</option> <option value="private">Private</option>
</select> </select>
</div> </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="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> <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> </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