Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brian Talbot
2013-02-25 14:19:22 -05:00
parent b1f5d67a96
commit 8179b9fadc
6 changed files with 738 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
cms/static/js/base.js
View File

@@ -43,6 +43,25 @@ $(document).ready(function () {
$('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
$('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
$('a.action-modal-close').click(function(e){

297
cms/static/sass/_alerts.scss
View File

@@ -5,17 +5,19 @@
.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));
// @include transition (bottom 1.5s ease-in-out 0.25s);
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;
bottom: -100px;
bottom: -1000px;
z-index: 1000;
width: 100%;
overflow: hidden;
opacity: 0;
border-top: 1px solid $gray-d1;
padding: $baseline ($baseline*2);
background: $white;
border-top: 4px solid $gray-l1;
padding: ($baseline*0.75) ($baseline*2);
background: $gray-d3;
&.is-shown {
bottom: 0;
@@ -23,78 +25,263 @@
}
&.wrapper-notification-warning {
border-color: shade($yellow, 25%);
background: tint($yellow, 25%);
border-top-color: $orange;
.icon-warning {
color: $orange;
}
&:hover {
border-top-color: $orange-s2;
.icon-warning {
color: $orange-s2;
}
}
}
&.wrapper-notification-error {
border-color: shade($red, 50%);
background: tint($red, 20%);
color: $white;
border-top-color: $red-l1;
.icon-error {
color: $red-l1;
}
&:hover {
border-top-color: $red;
.icon-error {
color: $red;
}
}
}
&.wrapper-notification-confirm {
border-color: shade($green, 30%);
background: tint($green, 40%);
color: shade($green, 30%);
&.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 {
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
width: flex-grid(12);
max-width: $fg-max-width;
min-width: $fg-min-width;
.copy {
strong {
font-weight: 700;
}
.icon, .copy {
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-top: 5px;
font-size: 14px;
text-align: right;
color: $white;
}
.icon {
display: inline-block;
vertical-align: top;
margin-right: 5px;
font-size: 20px;
}
.copy {
@include font-size(13);
width: flex-grid(10, 12);
color: $gray-l2;
p {
width: flex-grid(8, 9);
display: inline-block;
vertical-align: top;
.title {
@include font-size(14);
margin-bottom: 0;
color: $white;
}
}
.actions {
float: right;
width: flex-grid(3, 12);
margin-top: ($baseline/2);
text-align: right;
// 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;
li {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
.label {
@include text-sr();
}
&:last-child {
margin-right: 0;
.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;
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;
}
}
.save-button {
@include blue-button;
.action-primary {
@include orange-button;
border-color: $orange-d2;
}
.cancel-button {
@include white-button;
a {
color: $orange;
&:hover {
color: $orange-s2;
}
}
}
strong {
font-weight: 700;
&.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 @@
// alerts
.wrapper-alert {
@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 5px $shadow-d1);
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1);
position: relative;
top: -($baseline*1.5);
top: -($baseline*20);
z-index: 100;
overflow: hidden;
width: 100%;
@@ -117,7 +303,6 @@
background: $gray-d3;
&.is-shown {
bottom: 0;
opacity: 1.0;
}
@@ -222,14 +407,14 @@
.icon {
@include transition (color 0.5s ease-in-out);
@include font-size(28);
@include font-size(22);
width: flex-grid(1, 12);
margin-right: flex-gutter();
text-align: right;
}
.copy {
@include font-size(14);
@include font-size(13);
width: flex-grid(10, 12);
color: $gray-l2;
@@ -332,14 +517,6 @@
@include blue-button;
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
&.step-required {

21
cms/static/sass/_base.scss
View File

@@ -25,7 +25,7 @@ a {
@include transition(color .15s);
&:hover {
color: #cb9c40;
color: $orange-d1;
}
}
@@ -885,7 +885,7 @@ body.js {
// ====================
// works in progress
// works in progress & testing
body.hide-wip {
.wip-box {
@@ -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

32
cms/static/sass/_keyframes.scss
View File

@@ -1,3 +1,33 @@
// 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 {
0% {
opacity: 0;
@@ -24,4 +54,4 @@
@include animation-duration($duration);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
}
}

2
cms/static/sass/base-style.scss
View File

@@ -1,5 +1,6 @@
@import 'bourbon/bourbon';
@import 'bourbon/addons/button';
@import "variables";
@import 'vendor/normalize';
@import 'keyframes';
@@ -7,7 +8,6 @@
@import 'mixins';
@import "fonts";
@import "variables";
@import "cms_mixins";
@import "extends";
@import "base";

753
cms/templates/overview.html
View File

@@ -13,375 +13,484 @@
<%namespace name="units" file="widgets/units.html" />
<%block name="jsextra">
<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/datepair.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/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/models/settings/course_grading_policy.js')}"></script>
<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/datepair.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/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/models/settings/course_grading_policy.js')}"></script>
<script type="text/javascript">
$(document).ready(function(){
// 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
// but we really should change that behavior.
if (!window.graderTypes) {
window.graderTypes = new CMS.Models.Settings.CourseGraderCollection();
window.graderTypes.course_location = new CMS.Models.Location('${parent_location}');
window.graderTypes.reset(${course_graders|n});
}
$(".gradable-status").each(function(index, ele) {
var gradeView = new CMS.Views.OverviewAssignmentGrader({
el : ele,
graders : window.graderTypes
});
});
});
<script type="text/javascript">
$(document).ready(function(){
// 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
// but we really should change that behavior.
if (!window.graderTypes) {
window.graderTypes = new CMS.Models.Settings.CourseGraderCollection();
window.graderTypes.course_location = new CMS.Models.Location('${parent_location}');
window.graderTypes.reset(${course_graders|n});
}
</script>
$(".gradable-status").each(function(index, ele) {
var gradeView = new CMS.Views.OverviewAssignmentGrader({
el : ele,
graders : window.graderTypes
});
});
});
</script>
</%block>
<%block name="header_extras">
<script type="text/template" id="new-section-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">
<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>
</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" />
<script type="text/template" id="new-section-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">
<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>
<ol>
<li>
<a href="unit.html" class="new-unit-item">
<span class="new-unit-icon"></span>New Unit
</a>
</li>
</ol>
</li>
</script>
</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>
</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 name="content">
<!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions">
<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>
<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>
<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="#" 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>
<!-- alert: newer version -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<!-- alert: newer version -->
<div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
<div class="alert warning has-actions">
<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>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<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>
<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>
<!-- alert: save confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<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>
</div>
</div>
</div>
<!-- alert: save confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<!-- alert: delete confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy">
<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>
</div>
<div class="copy">
<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>
</div>
</div>
</div>
<!-- alert: delete confirmed -->
<div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
<div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<!-- alert: system error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown">
<div class="alert error">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<div class="copy">
<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>
</div>
<div class="copy">
<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>
</div>
</div>
</div>
<!-- alert: system error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown">
<div class="alert error">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<!-- alert: user error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown">
<div class="alert error has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<div class="copy">
<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>
</div>
<div class="copy">
<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>
</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>
<!-- alert: announcement w/ actions -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<div class="alert announcement has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<div class="copy">
<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>
</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>
<!-- alert: announcement -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<div class="alert announcement">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<div class="copy">
<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>
</div>
</div>
</div>
<!-- alert: user error -->
<div class="wrapper wrapper-alert wrapper-alert-error is-shown">
<div class="alert error has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
<!-- 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>
<div class="copy">
<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>
</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 class="copy">
<h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2>
<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>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<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>
<!-- alert: announcement w/ actions -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<div class="alert announcement has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<div class="copy">
<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>
</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="#" rel="external" class="action-secondary">Manage Your edX Notifications</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- alert: announcement -->
<div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
<div class="alert announcement">
<i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
<div class="copy">
<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>
<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>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</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>
<div class="wrapper wrapper-testing">
<div class="testing">
<ul>
<li><a href="#" class="test-notification">Toggle Notification</a></li>
</ul>
</div>
</div>
<div class="copy">
<h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2>
<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>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#" rel="external" 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 class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Course Outline</h1>
</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>
<a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
</div>
</div>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
<ul>
<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>
</li>
<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>
</li>
<li class="nav-item">
<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="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Course Outline</h1>
</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>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
<ul>
<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>
</li>
<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>
</li>
<li class="nav-item">
<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 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>
</section>
% endfor
</article>
<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>
<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>
<footer></footer>
</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>
</%block>