Skip to content

E
edx-platform
Commit 8179b9fa by Brian Talbot
Options

studio - alerts: initial pass at alert styling and markup complete

parent b1f5d67a
Showing with 466 additions and 113 deletions
cms/static/js/base.js
...@@ -43,6 +43,25 @@ $(document).ready(function () { ...@@ -43,6 +43,25 @@ $(document).ready(function () {
$('body').addClass('js'); $('body').addClass('js');
// notifications
$('.testing .test-notification').click(function(e) {
(e).preventDefault();
manageNotification(e);
});
function manageNotification(e) {
var $notificationRibbon = $('.wrapper-notification');
// showing
$notificationRibbon.toggleClass('is-shown');
// controls for closing notification
$notificationRibbon.find('.action-notification-close').click(function(e) {
(e).preventDefault();
$notificationRibbon.toggleClass('is-shown');
});
}
// lean/simple modal // lean/simple modal
$('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' }); $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
$('a.action-modal-close').click(function(e){ $('a.action-modal-close').click(function(e){
......
cms/static/sass/_alerts.scss
...@@ -5,17 +5,19 @@ ...@@ -5,17 +5,19 @@
.wrapper-notification { .wrapper-notification {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition (bottom 2.0s ease-in-out 5s, opacity 2.0s ease-in-out 5s); // @include transition (bottom 1.5s ease-in-out 0.25s);
@include box-shadow(0 -1px 2px rgba(0,0,0,0.1)); transition: bottom 1.5s ease-in-out 0.25s;
-webkit-transition: bottom 1.5s ease-in-out 0.25s;
@include box-shadow(0 -1px 3px $shadow);
position: fixed; position: fixed;
bottom: -100px; bottom: -1000px;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
border-top: 1px solid $gray-d1; border-top: 4px solid $gray-l1;
padding: $baseline ($baseline*2); padding: ($baseline*0.75) ($baseline*2);
background: $white; background: $gray-d3;
&.is-shown { &.is-shown {
bottom: 0; bottom: 0;
...@@ -23,78 +25,263 @@ ...@@ -23,78 +25,263 @@
} }
&.wrapper-notification-warning { &.wrapper-notification-warning {
border-color: shade($yellow, 25%); border-top-color: $orange;
background: tint($yellow, 25%);
.icon-warning {
color: $orange;
}
&:hover {
border-top-color: $orange-s2;
.icon-warning {
color: $orange-s2;
}
}
} }
&.wrapper-notification-error { &.wrapper-notification-error {
border-color: shade($red, 50%); border-top-color: $red-l1;
background: tint($red, 20%);
color: $white; .icon-error {
color: $red-l1;
} }
&.wrapper-notification-confirm { &:hover {
border-color: shade($green, 30%); border-top-color: $red;
background: tint($green, 40%);
color: shade($green, 30%); .icon-error {
color: $red;
}
}
}
&.wrapper-notification-confirmation {
border-top-color: $green;
.icon-error {
color: $green;
}
&:hover {
border-top-color: $green-s1;
.icon-error {
color: $green-s1;
}
}
}
// shorter/status notifications
&.wrapper-notification-status {
width: ($baseline*10);
right: ($baseline);
padding: ($baseline/2) $baseline;
.notification {
background: red;
@include box-sizing(border-box);
@include clearfix();
width: 100%;
max-width: none;
min-width: none;
.icon {
width: auto;
}
.copy {
width: auto;
}
}
} }
} }
.notification { .notification {
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix();
margin: 0 auto; margin: 0 auto;
width: flex-grid(12); width: flex-grid(12);
max-width: $fg-max-width; max-width: $fg-max-width;
min-width: $fg-min-width; min-width: $fg-min-width;
.copy { strong {
font-weight: 700;
}
.icon, .copy {
float: left; float: left;
width: flex-grid(9, 12); }
margin-right: flex-gutter();
margin-top: 5px;
font-size: 14px;
.icon { .icon {
display: inline-block; @include transition (color 0.5s ease-in-out);
vertical-align: top; @include font-size(28);
margin-right: 5px; width: flex-grid(1, 12);
font-size: 20px; margin-right: flex-gutter();
text-align: right;
color: $white;
} }
p { .copy {
width: flex-grid(8, 9); @include font-size(13);
display: inline-block; width: flex-grid(10, 12);
vertical-align: top; color: $gray-l2;
.title {
@include font-size(14);
margin-bottom: 0;
color: $white;
} }
} }
.actions { // with cancel
.action-notification-close {
@include transition(top .25s ease-in-out);
@include border-bottom-radius(3px);
position: absolute;
top: -($baseline/4);
left: ($baseline/2);
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-d2;
text-align: center;
.label {
@include text-sr();
}
.ss-icon {
@include font-size(14);
color: $white;
}
&:hover {
background: $blue;
top: 0;
}
}
// with actions
&.has-actions {
.icon {
width: flex-grid(1, 12);
}
.copy {
width: flex-grid(7, 12);
margin-right: flex-gutter();
}
.nav-actions {
width: flex-grid(4, 12);
float: right; float: right;
width: flex-grid(3, 12);
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: right; text-align: right;
li { .nav-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 10px; margin-right: ($baseline/2);
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
.action-primary {
@include font-size(13);
font-weight: 600;
} }
.save-button { .action-secondary {
@include blue-button; @include font-size(13);
}
}
}
} }
.cancel-button { // notification types
@include white-button; &.warning {
.action-notification-close {
&:hover {
background: $orange;
} }
} }
strong { .action-primary {
font-weight: 700; @include orange-button;
border-color: $orange-d2;
}
a {
color: $orange;
&:hover {
color: $orange-s2;
}
}
}
&.error {
.action-notification-close {
&:hover {
background: $red-l1;
}
}
.action-primary {
@include red-button;
border-color: $red-d2;
}
a {
color: $red-l1;
&:hover {
color: $red;
}
}
}
&.confirmation {
.action-notification-close {
&:hover {
background: $green;
}
}
.action-primary {
@include green-button;
border-color: $green-d2;
}
a {
color: $green;
&:hover {
color: $green-s2;
}
}
}
&.announcement {
.action-notification-close {
&:hover {
background: $blue;
}
}
.action-primary {
@include blue-button;
border-color: $blue-d2;
}
} }
} }
...@@ -103,10 +290,9 @@ ...@@ -103,10 +290,9 @@
// alerts // alerts
.wrapper-alert { .wrapper-alert {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition (opacity 2.0s ease-in-out 5s, border 0.5s ease-in-out); @include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1);
@include box-shadow(0 1px 1px $white, inset 0 2px 5px $shadow-d1);
position: relative; position: relative;
top: -($baseline*1.5); top: -($baseline*20);
z-index: 100; z-index: 100;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
...@@ -117,7 +303,6 @@ ...@@ -117,7 +303,6 @@
background: $gray-d3; background: $gray-d3;
&.is-shown { &.is-shown {
bottom: 0;
opacity: 1.0; opacity: 1.0;
} }
...@@ -222,14 +407,14 @@ ...@@ -222,14 +407,14 @@
.icon { .icon {
@include transition (color 0.5s ease-in-out); @include transition (color 0.5s ease-in-out);
@include font-size(28); @include font-size(22);
width: flex-grid(1, 12); width: flex-grid(1, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
text-align: right; text-align: right;
} }
.copy { .copy {
@include font-size(14); @include font-size(13);
width: flex-grid(10, 12); width: flex-grid(10, 12);
color: $gray-l2; color: $gray-l2;
...@@ -332,14 +517,6 @@ ...@@ -332,14 +517,6 @@
@include blue-button; @include blue-button;
border-color: $blue-d2; border-color: $blue-d2;
} }
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
} }
&.step-required { &.step-required {
......
cms/static/sass/_base.scss
...@@ -25,7 +25,7 @@ a { ...@@ -25,7 +25,7 @@ a {
@include transition(color .15s); @include transition(color .15s);
&:hover { &:hover {
color: #cb9c40; color: $orange-d1;
} }
} }
...@@ -885,7 +885,7 @@ body.js { ...@@ -885,7 +885,7 @@ body.js {
// ==================== // ====================
// works in progress // works in progress & testing
body.hide-wip { body.hide-wip {
.wip-box { .wip-box {
...@@ -893,6 +893,23 @@ body.hide-wip { ...@@ -893,6 +893,23 @@ body.hide-wip {
} }
} }
.wrapper-testing {
background: $black;
width: 100%;
height: auto;
.testing {
@include font-size(14);
position: relative;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto $baseline auto;
padding: $baseline;
color: $white;
}
}
// ==================== // ====================
// needed fudges for now // needed fudges for now
......
cms/static/sass/_keyframes.scss
// studio animations & keyframes
// ====================
// rotate clockwise
@mixin rotateClockwise {
0% {
@include transform(rotate(0deg));
}
25% {
@include transform(rotate(90deg));
}
50% {
@include transform(rotate(180deg));
}
100% {
@include transform(rotate(360deg));
}
}
@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
@keyframes rotateClockwise { @include rotateClockwise();}
// ====================
// bounce in
@mixin bounce-in { @mixin bounce-in {
0% { 0% {
opacity: 0; opacity: 0;
......
cms/static/sass/base-style.scss
@import 'bourbon/bourbon'; @import 'bourbon/bourbon';
@import 'bourbon/addons/button'; @import 'bourbon/addons/button';
@import "variables";
@import 'vendor/normalize'; @import 'vendor/normalize';
@import 'keyframes'; @import 'keyframes';
...@@ -7,7 +8,6 @@ ...@@ -7,7 +8,6 @@
@import 'mixins'; @import 'mixins';
@import "fonts"; @import "fonts";
@import "variables";
@import "cms_mixins"; @import "cms_mixins";
@import "extends"; @import "extends";
@import "base"; @import "base";
......
cms/templates/overview.html
...@@ -13,17 +13,17 @@ ...@@ -13,17 +13,17 @@
<%namespace name="units" file="widgets/units.html" /> <%namespace name="units" file="widgets/units.html" />
<%block name="jsextra"> <%block name="jsextra">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script> <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
<script src="${static.url('js/vendor/timepicker/datepair.js')}"></script> <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
<script src="${static.url('js/vendor/date.js')}"></script> <script src="${static.url('js/vendor/date.js')}"></script>
<script type="text/javascript" src="${static.url('js/models/course_relative.js')}"></script> <script type="text/javascript" src="${static.url('js/models/course_relative.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/grader-select-view.js')}"></script> <script type="text/javascript" src="${static.url('js/views/grader-select-view.js')}"></script>
<script type="text/javascript" src="${static.url('js/views/overview.js')}"></script> <script type="text/javascript" src="${static.url('js/views/overview.js')}"></script>
<script type="text/javascript" src="${static.url('js/models/settings/course_grading_policy.js')}"></script> <script type="text/javascript" src="${static.url('js/models/settings/course_grading_policy.js')}"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
// TODO figure out whether these should be in window or someplace else or whether they're only needed as local vars // TODO figure out whether these should be in window or someplace else or whether they're only needed as local vars
// I believe that current (New Section/New Subsection) cause full page reloads which means these aren't needed globally // I believe that current (New Section/New Subsection) cause full page reloads which means these aren't needed globally
// but we really should change that behavior. // but we really should change that behavior.
...@@ -39,13 +39,13 @@ ...@@ -39,13 +39,13 @@
graders : window.graderTypes graders : window.graderTypes
}); });
}); });
}); });
</script> </script>
</%block> </%block>
<%block name="header_extras"> <%block name="header_extras">
<script type="text/template" id="new-section-template"> <script type="text/template" id="new-section-template">
<section class="courseware-section branch new-section"> <section class="courseware-section branch new-section">
<header> <header>
<a href="#" data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a> <a href="#" data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a>
...@@ -59,9 +59,9 @@ ...@@ -59,9 +59,9 @@
</div> </div>
</header> </header>
</section> </section>
</script> </script>
<script type="text/template" id="blank-slate-template"> <script type="text/template" id="blank-slate-template">
<section class="courseware-section branch new-section"> <section class="courseware-section branch new-section">
<header> <header>
<a href="#" data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a> <a href="#" data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a>
...@@ -80,9 +80,9 @@ ...@@ -80,9 +80,9 @@
</div> </div>
</header> </header>
</section> </section>
</script> </script>
<script type="text/template" id="new-subsection-template"> <script type="text/template" id="new-subsection-template">
<li class="branch collapsed"> <li class="branch collapsed">
<div class="section-item editing"> <div class="section-item editing">
<form class="new-subsection-form"> <form class="new-subsection-form">
...@@ -102,12 +102,12 @@ ...@@ -102,12 +102,12 @@
</li> </li>
</ol> </ol>
</li> </li>
</script> </script>
</%block> </%block>
<%block name="content"> <%block name="content">
<!-- alert: you're editing a draft --> <!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown"> <div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions"> <div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
...@@ -120,18 +120,18 @@ ...@@ -120,18 +120,18 @@
<h3 class="sr">Alert Actions</h3> <h3 class="sr">Alert Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="button save-button action-primary">Save Draft</a> <a href="#" class="button save-button action-primary">Save Draft</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="button cancel-button action-secondary">Disgard Draft</a> <a href="#" class="button cancel-button action-secondary">Disgard Draft</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>
<!-- alert: newer version --> <!-- alert: newer version -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown"> <div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions"> <div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
...@@ -144,18 +144,18 @@ ...@@ -144,18 +144,18 @@
<h3 class="sr">Alert Actions</h3> <h3 class="sr">Alert Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="button save-button action-primary">View Newer Version</a> <a href="#" class="button save-button action-primary">Go to Newer Version</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="button cancel-button action-secondary">Continue Editing</a> <a href="#" class="button cancel-button action-secondary">Continue Editing</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>
<!-- alert: save confirmed --> <!-- alert: save confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown"> <div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
<div class="alert confirmation"> <div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i> <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
...@@ -164,10 +164,10 @@ ...@@ -164,10 +164,10 @@
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
</div> </div>
</div> </div>
</div> </div>
<!-- alert: delete confirmed --> <!-- alert: delete confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown"> <div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
<div class="alert confirmation"> <div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i> <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
...@@ -176,10 +176,10 @@ ...@@ -176,10 +176,10 @@
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div> </div>
</div> </div>
</div> </div>
<!-- alert: system error --> <!-- alert: system error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown"> <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
<div class="alert error"> <div class="alert error">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
...@@ -188,10 +188,10 @@ ...@@ -188,10 +188,10 @@
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div> </div>
</div> </div>
</div> </div>
<!-- alert: user error --> <!-- alert: user error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown"> <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
<div class="alert error has-actions"> <div class="alert error has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
...@@ -204,15 +204,15 @@ ...@@ -204,15 +204,15 @@
<h3 class="sr">Alert Actions</h3> <h3 class="sr">Alert Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="button cancel-button action-primary">Cancel Your Submission</a> <a href="#" class="button cancel-button action-primary">Cancel Your Submission</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>
<!-- alert: announcement w/ actions --> <!-- alert: announcement w/ actions -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown"> <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<div class="alert announcement has-actions"> <div class="alert announcement has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i> <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
...@@ -228,15 +228,15 @@ ...@@ -228,15 +228,15 @@
<a href="#" rel="external" class="action-primary">Contact edX Staff</a> <a href="#" rel="external" class="action-primary">Contact edX Staff</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="action-secondary">Manage Your edX Notifications</a> <a href="#" class="action-secondary">Manage Your edX Notifications</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>
<!-- alert: announcement --> <!-- alert: announcement -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown"> <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<div class="alert announcement"> <div class="alert announcement">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i> <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
...@@ -245,10 +245,10 @@ ...@@ -245,10 +245,10 @@
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div> </div>
</div> </div>
</div> </div>
<!-- alert: step required --> <!-- alert: step required -->
<div class="wrapper wrapper-alert wrapper-alert-step-required is-shown"> <div class="wrapper wrapper-alert wrapper-alert-step-required is-shown">
<div class="alert step-required has-actions"> <div class="alert step-required has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i> <i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
...@@ -261,7 +261,7 @@ ...@@ -261,7 +261,7 @@
<h3 class="sr">Alert Actions</h3> <h3 class="sr">Alert Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="action-primary">Re-send Activation Message</a> <a href="#" class="action-primary">Re-send Activation Message</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="action-secondary">Contact edX Support</a> <a href="#" rel="external" class="action-secondary">Contact edX Support</a>
...@@ -269,9 +269,9 @@ ...@@ -269,9 +269,9 @@
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>
<div class="edit-subsection-publish-settings"> <div class="edit-subsection-publish-settings">
<div class="settings"> <div class="settings">
<h3>Section Release Date</h3> <h3>Section Release Date</h3>
<div class="picker datepair"> <div class="picker datepair">
...@@ -283,9 +283,17 @@ ...@@ -283,9 +283,17 @@
</div> </div>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a> <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div> </div>
</div>
<div class="wrapper wrapper-testing">
<div class="testing">
<ul>
<li><a href="#" class="test-notification">Toggle Notification</a></li>
</ul>
</div> </div>
</div>
<div class="wrapper-mast wrapper"> <div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle"> <header class="mast has-actions has-subtitle">
<div class="title"> <div class="title">
<span class="title-sub">Course Content</span> <span class="title-sub">Course Content</span>
...@@ -307,9 +315,9 @@ ...@@ -307,9 +315,9 @@
</ul> </ul>
</nav> </nav>
</header> </header>
</div> </div>
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<article class="courseware-overview" data-course-id="${context_course.location.url()}"> <article class="courseware-overview" data-course-id="${context_course.location.url()}">
% for section in sections: % for section in sections:
...@@ -382,6 +390,107 @@ ...@@ -382,6 +390,107 @@
% endfor % endfor
</article> </article>
</div> </div>
</div>
<footer></footer>
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-change">
<div class="notification change has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
<div class="copy">
<h2 class="title title-3">You've Made Some Changes</h2>
<p><strong>Note:</strong> Your changes will not take effect until you <strong>save your progress</strong>.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Save Changes</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Don't Save</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: newer version exists -->
<div class="wrapper wrapper-notification wrapper-notification-warning">
<div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">A Newer Version of This Exists</h2>
<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">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button save-button action-primary">Go to Newer Version</a>
</li>
<li class="nav-item">
<a href="#" class="button cancel-button action-secondary">Continue Editing</a>
</li>
</ul>
</nav>
<a href="#" rel="view" class="action action-notification-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close notification</span>
</a>
</div>
</div>
<!-- notification: warning about editing something dangerous -->
<div class="wrapper wrapper-notification wrapper-notification-warning">
<div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy">
<h2 class="title title-3">Are You Sure You Want to Edit That?</h2>
<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">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Yes, I want to Edit X</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">No, I do not</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: status - saving -->
<div class="wrapper wrapper-notification wrapper-notification-status">
<div class="notification saving">
<i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
<div class="copy">
<h2 class="title title-3">Saving</h2>
<p>Hamster wheels are turning pretty fast right now. Hang on! Saving will be done soon.</p>
</div>
</div>
</div>
<!-- notification: status - helper -->
<div class="wrapper wrapper-notification wrapper-notification-status">
<div class="notification helping">
<i class="ss-icon ss-symbolicons-block icon icon-helping">&#x2753;</i>
<div class="copy">
<h2 class="title title-3">Fun Fact:</h2>
<p>Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
</div>
</div> </div>
<footer></footer> </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