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 729 additions and 375 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;
}
&:hover {
border-top-color: $red;
.icon-error {
color: $red;
}
}
} }
&.wrapper-notification-confirm { &.wrapper-notification-confirmation {
border-color: shade($green, 30%); border-top-color: $green;
background: tint($green, 40%);
color: shade($green, 30%); .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); }
.icon {
@include transition (color 0.5s ease-in-out);
@include font-size(28);
width: flex-grid(1, 12);
margin-right: flex-gutter(); margin-right: flex-gutter();
margin-top: 5px; text-align: right;
font-size: 14px; color: $white;
}
.copy {
@include font-size(13);
width: flex-grid(10, 12);
color: $gray-l2;
.title {
@include font-size(14);
margin-bottom: 0;
color: $white;
}
}
// 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 { .icon {
display: inline-block; width: flex-grid(1, 12);
vertical-align: top; }
margin-right: 5px;
font-size: 20px; .copy {
width: flex-grid(7, 12);
margin-right: flex-gutter();
}
.nav-actions {
width: flex-grid(4, 12);
float: right;
margin-top: ($baseline/2);
text-align: right;
.nav-item {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
.action-primary {
@include font-size(13);
font-weight: 600;
}
.action-secondary {
@include font-size(13);
}
}
}
}
// notification types
&.warning {
.action-notification-close {
&:hover {
background: $orange;
}
} }
p { .action-primary {
width: flex-grid(8, 9); @include orange-button;
display: inline-block; border-color: $orange-d2;
vertical-align: top; }
a {
color: $orange;
&:hover {
color: $orange-s2;
}
} }
} }
.actions { &.error {
float: right;
width: flex-grid(3, 12);
margin-top: ($baseline/2);
text-align: right;
li { .action-notification-close {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
&:last-child { &:hover {
margin-right: 0; background: $red-l1;
} }
} }
.save-button { .action-primary {
@include blue-button; @include red-button;
border-color: $red-d2;
} }
.cancel-button { a {
@include white-button; color: $red-l1;
&:hover {
color: $red;
}
} }
} }
strong { &.confirmation {
font-weight: 700;
.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;
...@@ -24,4 +54,4 @@ ...@@ -24,4 +54,4 @@
@include animation-duration($duration); @include animation-duration($duration);
@include animation-timing-function($timing); @include animation-timing-function($timing);
@include animation-fill-mode(both); @include animation-fill-mode(both);
} }
\ No newline at end of file
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,375 +13,484 @@ ...@@ -13,375 +13,484 @@
<%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.
if (!window.graderTypes) { if (!window.graderTypes) {
window.graderTypes = new CMS.Models.Settings.CourseGraderCollection(); window.graderTypes = new CMS.Models.Settings.CourseGraderCollection();
window.graderTypes.course_location = new CMS.Models.Location('${parent_location}'); window.graderTypes.course_location = new CMS.Models.Location('${parent_location}');
window.graderTypes.reset(${course_graders|n}); window.graderTypes.reset(${course_graders|n});
} }
$(".gradable-status").each(function(index, ele) {
var gradeView = new CMS.Views.OverviewAssignmentGrader({
el : ele,
graders : window.graderTypes
});
});
});
</script> $(".gradable-status").each(function(index, ele) {
var gradeView = new CMS.Views.OverviewAssignmentGrader({
el : ele,
graders : window.graderTypes
});
});
});
</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>
<div class="item-details"> <div class="item-details">
<h3 class="section-name"> <h3 class="section-name">
<form class="section-name-form"> <form class="section-name-form">
<input type="text" value="New Section Name" class="new-section-name" /> <input type="text" value="New Section Name" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}" value="Save" /> <input type="submit" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}" value="Save" />
<input type="button" class="new-section-name-cancel" value="Cancel" /></h3> <input type="button" class="new-section-name-cancel" value="Cancel" /></h3>
</form>
</div>
</header>
</section>
</script>
<script type="text/template" id="blank-slate-template">
<section class="courseware-section branch new-section">
<header>
<a href="#" data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a>
<div class="item-details">
<h3 class="section-name">
<span class="section-name-span">Click here to set the section name</span>
<form class="section-name-form">
<input type="text" value="New Section Name" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}" value="Save" />
<input type="button" class="new-section-name-cancel" value="Cancel" /></h3>
</form>
</div>
<div class="item-actions">
<a href="#" data-tooltip="Delete this section" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<a href="#" data-tooltip="Drag to re-order" class="drag-handle"></a>
</div>
</header>
</section>
</script>
<script type="text/template" id="new-subsection-template">
<li class="branch collapsed">
<div class="section-item editing">
<form class="new-subsection-form">
<span class="folder-icon"></span>
<span class="subsection-name">
<input type="text" value="New Subsection" class="new-subsection-name-input" />
</span>
<input type="submit" value="Save" class="new-subsection-name-save" />
<input type="button" value="Cancel" class="new-subsection-name-cancel" />
</form> </form>
</div> </div>
<ol> </header>
<li> </section>
<a href="unit.html" class="new-unit-item"> </script>
<span class="new-unit-icon"></span>New Unit
</a> <script type="text/template" id="blank-slate-template">
</li> <section class="courseware-section branch new-section">
</ol> <header>
</li> <a href="#" data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a>
</script> <div class="item-details">
<h3 class="section-name">
<span class="section-name-span">Click here to set the section name</span>
<form class="section-name-form">
<input type="text" value="New Section Name" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}" value="Save" />
<input type="button" class="new-section-name-cancel" value="Cancel" /></h3>
</form>
</div>
<div class="item-actions">
<a href="#" data-tooltip="Delete this section" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<a href="#" data-tooltip="Drag to re-order" class="drag-handle"></a>
</div>
</header>
</section>
</script>
<script type="text/template" id="new-subsection-template">
<li class="branch collapsed">
<div class="section-item editing">
<form class="new-subsection-form">
<span class="folder-icon"></span>
<span class="subsection-name">
<input type="text" value="New Subsection" class="new-subsection-name-input" />
</span>
<input type="submit" value="Save" class="new-subsection-name-save" />
<input type="button" value="Cancel" class="new-subsection-name-cancel" />
</form>
</div>
<ol>
<li>
<a href="unit.html" class="new-unit-item">
<span class="new-unit-icon"></span>New Unit
</a>
</li>
</ol>
</li>
</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>
<div class="copy"> <div class="copy">
<h2 class="title title-3">You are editing a draft</h2> <h2 class="title title-3">You are editing a draft</h2>
<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>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" class="button save-button action-primary">Save Draft</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button action-secondary">Disgard Draft</a>
</li>
</ul>
</nav>
</div> </div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button save-button action-primary">Save Draft</a>
</li>
<li class="nav-item">
<a href="#" class="button cancel-button action-secondary">Disgard Draft</a>
</li>
</ul>
</nav>
</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>
<div class="copy"> <div class="copy">
<h2 class="title title-3">A Newer Version of This Exists</h2> <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> <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 action-primary">View Newer Version</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button action-secondary">Continue Editing</a>
</li>
</ul>
</nav>
</div> </div>
<nav class="nav-actions">
<h3 class="sr">Alert 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>
</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>
<div class="copy"> <div class="copy">
<h2 class="title title-3">Your changes have been saved</h2> <h2 class="title title-3">Your changes have been saved</h2>
<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>
<div class="copy"> <div class="copy">
<h2 class="title title-3">X Has been removed</h2> <h2 class="title title-3">X Has been removed</h2>
<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>
<div class="copy"> <div class="copy">
<h2 class="title title-3">We're sorry, there was a error with Studio</h2> <h2 class="title title-3">We're sorry, there was a error with Studio</h2>
<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>
<div class="copy"> <div class="copy">
<h2 class="title title-3">There was an error in your submission</h2> <h2 class="title title-3">There was an error in your submission</h2>
<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>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" class="button cancel-button action-primary">Cancel Your Submission</a>
</li>
</ul>
</nav>
</div> </div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button cancel-button action-primary">Cancel Your Submission</a>
</li>
</ul>
</nav>
</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>
<div class="copy"> <div class="copy">
<h2 class="title title-3">Studio will be unavailable this weekend</h2> <h2 class="title title-3">Studio will be unavailable this weekend</h2>
<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>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" class="action-primary">Contact edX Staff</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Manage Your edX Notifications</a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="nav-actions"> <!-- alert: announcement -->
<h3 class="sr">Alert Actions</h3> <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<ul> <div class="alert announcement">
<li class="nav-item"> <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<a href="#" rel="external" class="action-primary">Contact edX Staff</a>
</li> <div class="copy">
<li class="nav-item"> <h2 class="title title-3">Studio will be unavailable this weekend</h2>
<a href="#" rel="external" class="action-secondary">Manage Your edX Notifications</a> <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>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
</div>
<!-- alert: step required -->
<div class="wrapper wrapper-alert wrapper-alert-step-required is-shown">
<div class="alert step-required has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
<!-- alert: announcement --> <div class="copy">
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown"> <h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2>
<div class="alert announcement"> <p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i> </div>
<div class="copy"> <nav class="nav-actions">
<h2 class="title title-3">Studio will be unavailable this weekend</h2> <h3 class="sr">Alert Actions</h3>
<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> <ul>
<li class="nav-item">
<a href="#" class="action-primary">Re-send Activation Message</a>
</li>
<li class="nav-item">
<a href="#" rel="external" class="action-secondary">Contact edX Support</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="edit-subsection-publish-settings">
<div class="settings">
<h3>Section Release Date</h3>
<div class="picker datepair">
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
<div class="description">
<p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
</div> </div>
</div> </div>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div> </div>
</div>
<!-- alert: step required --> <div class="wrapper wrapper-testing">
<div class="wrapper wrapper-alert wrapper-alert-step-required is-shown"> <div class="testing">
<div class="alert step-required has-actions"> <ul>
<i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i> <li><a href="#" class="test-notification">Toggle Notification</a></li>
</ul>
</div>
</div>
<div class="copy"> <div class="wrapper-mast wrapper">
<h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2> <header class="mast has-actions has-subtitle">
<p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p> <div class="title">
</div> <span class="title-sub">Course Content</span>
<h1 class="title-1">Course Outline</h1>
</div>
<nav class="nav-actions"> <nav class="nav-actions">
<h3 class="sr">Alert Actions</h3> <h3 class="sr">Page 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="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block icon">up</i> <span class="label">Collapse All Sections</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" rel="external" class="action-secondary">Contact edX Support</a> <a href="#" class="button new-button new-courseware-section-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Section</a>
</li> </li>
</ul> <li class="nav-item">
</nav> <a href="${lms_link}" rel="external" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
% for section in sections:
<section class="courseware-section branch" data-id="${section.location}">
<header>
<a href="#" data-tooltip="Expand/collapse this section" class="expand-collapse-icon collapse"></a>
<div class="item-details" data-id="${section.location}">
<h3 class="section-name">
<span data-tooltip="Edit this section's name" class="section-name-span">${section.display_name}</span>
<form class="section-name-edit" style="display:none">
<input type="text" value="${section.display_name}" class="edit-section-name" autocomplete="off"/>
<input type="submit" class="save-button edit-section-name-save" value="Save" />
<input type="button" class="cancel-button edit-section-name-cancel" value="Cancel" />
</form>
</h3>
<div class="section-published-date">
<%
start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None
start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else ''
start_time_str = start_date.strftime('%H:%M') if start_date is not None else ''
%>
%if start_date is None:
<span class="published-status">This section has not been released.</span>
<a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">Schedule</a>
%else:
<span class="published-status"><strong>Will Release:</strong> ${start_date_str} at ${start_time_str}</span>
<a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
%endif
</div>
</div>
<div class="item-actions">
<a href="#" data-tooltip="Delete this section" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>
</div>
</header>
<div class="subsection-list">
<div class="list-header">
<a href="#" class="new-subsection-item" data-template="${new_subsection_template}">
<span class="new-folder-icon"></span>New Subsection
</a>
</div>
<ol data-section-id="${section.location.url()}">
% for subsection in section.get_children():
<li class="branch collapsed id-holder" data-id="${subsection.location}">
<div class="section-item">
<div class="details">
<a href="#" data-tooltip="Expand/collapse this subsection" class="expand-collapse-icon expand"></a>
<a href="${reverse('edit_subsection', args=[subsection.location])}">
<span class="folder-icon"></span>
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name}</span></span>
</a>
</div>
<div class="gradable-status" data-initial-status="${subsection.metadata.get('format', 'Not Graded')}">
</div>
<div class="item-actions">
<a href="#" data-tooltip="Delete this subsection" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
<a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>
</div>
</div>
${units.enum_units(subsection)}
</li>
% endfor
</ol>
</div>
</section>
% endfor
</article>
</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> </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>
</div>
<div class="edit-subsection-publish-settings"> <!-- notification: newer version exists -->
<div class="settings"> <div class="wrapper wrapper-notification wrapper-notification-warning">
<h3>Section Release Date</h3> <div class="notification warning has-actions">
<div class="picker datepair"> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/> <div class="copy">
<div class="description"> <h2 class="title title-3">A Newer Version of This Exists</h2>
<p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div> </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>
</div>
<div class="wrapper-mast wrapper"> <!-- notification: warning about editing something dangerous -->
<header class="mast has-actions has-subtitle"> <div class="wrapper wrapper-notification wrapper-notification-warning">
<div class="title"> <div class="notification warning has-actions">
<span class="title-sub">Course Content</span> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<h1 class="title-1">Course Outline</h1>
</div> <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"> <nav class="nav-actions">
<h3 class="sr">Page Actions</h3> <h3 class="sr">Notification Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block icon">up</i> <span class="label">Collapse All Sections</span></a> <a href="#" class="action-primary">Yes, I want to Edit X</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="button new-button new-courseware-section-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Section</a> <a href="#" class="action-secondary">No, I do not</a>
</li> </li>
<li class="nav-item"> </ul>
<a href="${lms_link}" rel="external" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a> </nav>
</li>
</ul>
</nav>
</header>
</div> </div>
</div>
<div class="main-wrapper"> <!-- notification: status - saving -->
<div class="inner-wrapper"> <div class="wrapper wrapper-notification wrapper-notification-status">
<article class="courseware-overview" data-course-id="${context_course.location.url()}"> <div class="notification saving">
% for section in sections: <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
<section class="courseware-section branch" data-id="${section.location}">
<header> <div class="copy">
<a href="#" data-tooltip="Expand/collapse this section" class="expand-collapse-icon collapse"></a> <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 class="item-details" data-id="${section.location}"> </div>
<h3 class="section-name"> </div>
<span data-tooltip="Edit this section's name" class="section-name-span">${section.display_name}</span> </div>
<form class="section-name-edit" style="display:none">
<input type="text" value="${section.display_name}" class="edit-section-name" autocomplete="off"/> <!-- notification: status - helper -->
<input type="submit" class="save-button edit-section-name-save" value="Save" /> <div class="wrapper wrapper-notification wrapper-notification-status">
<input type="button" class="cancel-button edit-section-name-cancel" value="Cancel" /> <div class="notification helping">
</form> <i class="ss-icon ss-symbolicons-block icon icon-helping">&#x2753;</i>
</h3>
<div class="section-published-date"> <div class="copy">
<% <h2 class="title title-3">Fun Fact:</h2>
start_date = datetime.fromtimestamp(mktime(section.start)) if section.start is not None else None <p>Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
start_date_str = start_date.strftime('%m/%d/%Y') if start_date is not None else ''
start_time_str = start_date.strftime('%H:%M') if start_date is not None else ''
%>
%if start_date is None:
<span class="published-status">This section has not been released.</span>
<a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">Schedule</a>
%else:
<span class="published-status"><strong>Will Release:</strong> ${start_date_str} at ${start_time_str}</span>
<a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
%endif
</div>
</div>
<div class="item-actions">
<a href="#" data-tooltip="Delete this section" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>
</div>
</header>
<div class="subsection-list">
<div class="list-header">
<a href="#" class="new-subsection-item" data-template="${new_subsection_template}">
<span class="new-folder-icon"></span>New Subsection
</a>
</div>
<ol data-section-id="${section.location.url()}">
% for subsection in section.get_children():
<li class="branch collapsed id-holder" data-id="${subsection.location}">
<div class="section-item">
<div class="details">
<a href="#" data-tooltip="Expand/collapse this subsection" class="expand-collapse-icon expand"></a>
<a href="${reverse('edit_subsection', args=[subsection.location])}">
<span class="folder-icon"></span>
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name}</span></span>
</a>
</div>
<div class="gradable-status" data-initial-status="${subsection.metadata.get('format', 'Not Graded')}">
</div>
<div class="item-actions">
<a href="#" data-tooltip="Delete this subsection" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
<a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>
</div>
</div>
${units.enum_units(subsection)}
</li>
% endfor
</ol>
</div>
</section>
% endfor
</article>
</div> </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