Skip to content

E
edx-platform
Commit 72c58cd4 by Brian Talbot
Options

studio - alerts: refactored styles for common content types across UI, got… 

studio - alerts: refactored styles for common content types across UI, got prompts set up and styled, and refactored base template for future prompt/notification/alert use
parent 47aacc70
Showing with 374 additions and 305 deletions
cms/static/js/base.js
......@@ -62,10 +62,16 @@ $(document).ready(function () {
$(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
});
// prompt pop
$('.action-prompt').click(function(e){
(e).preventDefault();
$body.toggleClass('prompt-is-shown');
});
// prompt close
$('.prompt .action-cancel').click(function(e) {
$('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
(e).preventDefault();
$(this).closest('.wrapper-prompt').removeClass('is-shown').addClass('is-hiding');
$body.removeClass('prompt-is-shown');
});
// nav - dropdown related
......
cms/static/sass/_alerts.scss
// studio alerts and notifications
// ====================
// shared
.wrapper-notification, .wrapper-alert, .prompt {
@include box-sizing(border-box);
background: $gray-d3;
border-top: 4px solid $gray-d4;
.copy {
@include font-size(13);
color: $gray-l2;
.title {
color: $white;
}
.nav-actions {
.action-primary {
color: $gray-d4;
}
}
}
}
// prompts
.wrapper-prompt {
@include transition(all 0.05s ease-in-out);
position: fixed;
top: 0;
background: $black-t1;
background: $black-t0;
width: 100%;
height: 100%;
text-align: center;
......@@ -20,36 +44,93 @@
}
.prompt {
@include border-radius(3px);
@include box-sizing(border-box);
@include box-shadow(0 0 4px $shadow-d1);
@include border-radius(($baseline/5));
@include box-shadow(0 0 3px $shadow-d1);
display: inline-block;
vertical-align: middle;
width: $baseline*15;
padding: $baseline;
background: $white;
width: $baseline*17.5;
border: 4px solid $black;
text-align: left;
.copy {
border-top: 4px solid $blue;
padding: $baseline;
}
.nav-actions {
@include box-shadow(inset 0 1px 2px $shadow-d1);
border-top: 1px solid $black-t1;
padding: ($baseline*0.75) $baseline;
background: $gray-d4;
.nav-item {
display: inline-block;
margin-right: ($baseline*0.75);
&:last-child {
margin-right: 0;
}
}
.action-primary {
@include blue-button();
@include font-size(13);
border-color: $blue-d2;
font-weight: 600;
}
.action-secondary {
@include font-size(13);
}
}
}
// types of prompts - error
.prompt.error {
.icon-error {
color: $red-l1;
}
.copy {
border-top-color: $red-l1;
}
}
// types of prompts - confirmation
.prompt.confirmation {
.icon-error {
color: $green;
}
.copy {
border-top-color: $green;
}
}
// types of prompts - error
.prompt.warning {
.icon-warning {
color: $orange;
}
.copy {
border-top-color: $orange;
}
}
}
// notifications
.wrapper-notification {
@include clearfix();
@include box-sizing(border-box);
@include box-shadow(0 -1px 3px $shadow);
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
border-top: 4px solid $gray-l1;
padding: ($baseline*0.75) ($baseline*2);
background: $gray-d3;
&.wrapper-notification-warning {
border-top-color: $orange;
......@@ -67,7 +148,7 @@
}
}
&.wrapper-cation-error {
&.wrapper-notification-error {
border-top-color: $red-l1;
.icon-error {
......@@ -208,29 +289,6 @@
}
}
// with cancel
.action-notification-close {
@include border-top-radius(3px);
position: absolute;
top: -34px;
right: $baseline;
padding: ($baseline/5) ($baseline/2.5) 0 ($baseline/2.5);
background: $gray-l1;
text-align: center;
.label {
@include text-sr();
}
.icon {
@include font-size(14);
color: $white;
width: auto;
margin: 0;
padding: 2px;
}
}
// with actions
&.has-actions {
......@@ -272,108 +330,17 @@
}
}
// notification types
&.warning {
.action-notification-close {
background: $orange;
&:hover {
background: $orange-s2;
}
}
.action-primary {
@include orange-button();
@include font-size(13);
border-color: $orange-d2;
}
a {
color: $orange;
&:hover {
color: $orange-s2;
}
}
}
&.error {
.action-notification-close {
background: $red-l1;
&:hover {
background: $red;
}
}
.action-primary {
@include red-button();
@include font-size(13);
border-color: $red-d2;
}
a {
color: $red-l1;
&:hover {
color: $red;
}
}
}
&.confirmation {
.copy {
margin-top: ($baseline/5);
}
.action-notification-close {
background: $green;
&:hover {
background: $green-s2;
}
}
.action-primary {
@include green-button();
@include font-size(13);
border-color: $green-d2;
}
a {
color: $green;
&:hover {
color: $green-s2;
}
}
}
&.announcement {
.action-notification-close {
background: $blue;
&:hover {
background: $blue-s1;
}
}
.action-primary {
@include blue-button();
@include font-size(13);
border-color: $blue-d2;
}
}
&.saving {
.icon-saving {
@include anim-rotateClockwise(3s, linear, infinite);
width: 22px;
}
......@@ -559,12 +526,12 @@
// with cancel
.action-alert-close {
@include border-bottom-radius(3px);
@include border-bottom-radius(($baseline/5));
position: absolute;
top: -($baseline/10);
right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-d1;
background: $gray-d4;
text-align: center;
.label {
......@@ -580,16 +547,20 @@
}
&:hover {
background: $gray-l1;
background: $gray-d1;
}
}
}
// alert types
.alert, .notification, .prompt {
// types - warning
&.warning {
.action-primary {
.nav-actions .action-primary {
@include orange-button();
border-color: $orange-d2;
color: $gray-d4;
}
a {
......@@ -601,9 +572,10 @@
}
}
// types - error
&.error {
.action-primary {
.nav-actions .action-primary {
@include red-button();
border-color: $red-d2;
}
......@@ -617,9 +589,27 @@
}
}
// types - announcement
&.announcement {
.nav-actions .action-primary {
@include blue-button();
border-color: $blue-d2;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
// types - confirmation
&.confirmation {
.action-primary {
.nav-actions .action-primary {
@include green-button();
border-color: $green-d2;
}
......@@ -633,17 +623,10 @@
}
}
&.announcement {
.action-primary {
@include blue-button();
border-color: $blue-d2;
}
}
// types - step required
&.step-required {
.action-primary {
.nav-actions .action-primary {
border-color: $pink-d2;
@include pink-button();
}
......@@ -661,26 +644,31 @@
// js enabled
.js {
// prompt set-up
.wrapper-prompt {
display: none;
visibility: hidden;
pointer-events: none;
.prompt {
@include anim-bounceIn(0.5s);
opacity: 0.1;
opacity: 0;
}
}
&.is-shown {
display: block;
// prompt showing
&.prompt-is-shown {
.prompt {
opacity: 1.0;
}
.wrapper-view {
-webkit-filter: blur(2px) grayscale(25%);
filter: blur(2px) grayscale(25%);
}
&.is-hiding {
.wrapper-prompt.is-shown {
visibility: visible;
pointer-events: auto;
.prompt {
@include anim-bounceOut(0.5s);
@include anim-bounceIn(0.5s);
opacity: 1.0;
}
}
}
......
cms/static/sass/_base.scss
......@@ -103,6 +103,13 @@ p, ul, ol, dl {
// ====================
// layout - basic
.wrapper-view {
}
// ====================
// layout - basic page header
.wrapper-mast {
margin: 0;
......
cms/static/sass/_keyframes.scss
......@@ -17,12 +17,14 @@
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
@keyframes rotateClockwise { @include rotateClockwise();}
@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1) {
@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(rotateClockwise);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -47,12 +49,14 @@
@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
@keyframes notificationsSlideUp { @include notificationsSlideUp();}
@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1) {
@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(notificationsSlideUp);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -77,12 +81,13 @@
@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
@keyframes notificationsSlideDown { @include notificationsSlideDown();}
@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1) {
@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(notificationsSlideDown);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -107,12 +112,13 @@
@-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
@keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}
@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1) {
@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(notificationsSlideUpDown);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -139,12 +145,13 @@
@-o-keyframes bounceIn { @include bounceIn(); }
@keyframes bounceIn { @include bounceIn();}
@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1) {
@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(bounceIn);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
// ====================
......@@ -185,10 +192,11 @@
@-o-keyframes bounceOut { @include bounceOut(); }
@keyframes bounceOut { @include bounceOut();}
@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1) {
@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
@include animation-name(bounceOut);
@include animation-duration($duration);
@include animation-delay($delay);
@include animation-timing-function($timing);
@include animation-fill-mode(both);
@include animation-iteration-count($count);
@include animation-fill-mode(both);
}
\ No newline at end of file
cms/static/sass/_variables.scss
......@@ -16,10 +16,12 @@ $error-red: rgb(253, 87, 87);
// colors - new for re-org
$black: rgb(0,0,0);
$black-t0: rgba(0,0,0,0.125);
$black-t1: rgba(0,0,0,0.25);
$black-t2: rgba(0,0,0,0.50);
$black-t3: rgba(0,0,0,0.75);
$white: rgb(255,255,255);
$white-t0: rgba(255,255,255,0.125);
$white-t1: rgba(255,255,255,0.25);
$white-t2: rgba(255,255,255,0.50);
$white-t3: rgba(255,255,255,0.75);
......
cms/templates/alerts.html
......@@ -37,15 +37,15 @@
$(this.hash).addClass('is-shown');
});
$('.hide-prompt').click(function(e) {
(e).preventDefault();
$('.wrapper-prompt').removeClass('is-hiding is-shown');
$(this.hash).addClass('is-hiding');
$('.hide-prompt').click(function(e){
(e).preventDefault();
$body.removeClass('prompt-is-shown');
});
$('.show-prompt').click(function(e) {
(e).preventDefault();
$('.wrapper-prompt').removeClass('is-shown is-hiding');
(e).preventDefault();
$body.toggleClass('prompt-is-shown');
$('.wrapper-prompt').removeClass('is-shown');
$(this.hash).addClass('is-shown');
});
});
......@@ -53,6 +53,122 @@
</%block>
<%block name="content">
<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>
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">UX Design</span>
<h1 class="title-1">Alerts &amp; Notifications</h1>
</div>
</header>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<section>
<header>
<h2 class="title-2">Alerts</h2>
<span class="tip">persistant, static messages to the user</span>
</header>
<p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>
<h3 class="title-3">Different Static Examples of Alerts</h3>
<p>Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display</p>
<ul>
<li><a href="#alert-draft" class="show-alert">Show Draft</a></li>
<li><a href="#alert-version" class="show-alert">Show Version</a></li>
<li><a href="#alert-saved" class="show-alert">Show Previous View/Action</a></li>
<li><a href="#alert-close" class="show-alert">Show Alert with Close Option</a></li>
<li><a href="#alert-removed" class="show-alert">Show Previous View/Action Removed</a></li>
<li><a href="#alert-system-error" class="show-alert">Show System Error</a></li>
<li><a href="#alert-user-error" class="show-alert">Show User Error</a></li>
<li><a href="#alert-announcement2" class="show-alert">Show Announcement</a></li>
<li><a href="#alert-announcement1" class="show-alert">Show Announcement with Actions</a></li>
<li><a href="#alert-activation" class="show-alert">Show Activiation</a></li>
</ul>
</section>
<section>
<header>
<h2 class="title-2">Notifications</h2>
<span class="tip">contextual, feedback-based, and temporal messages to the user</span>
</header>
<p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>
<h3 class="title-3">Different Static Examples of Notifications</h3>
<ul>
<li>
<a href="#notification-change" class="show-notification">Show Change Warning</a>
<a href="#notification-change" class="hide-notification">Hide Change Warning</a>
</li>
<li>
<a href="#notification-version" class="show-notification">Show New Version Warning</a>
<a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
</li>
<li>
<a href="#notification-dangerous" class="show-notification">Show Editing Warning</a>
<a href="#notification-dangerous" class="hide-notification">Hide Editing Warning</a>
</li>
<li>
<a href="#notification-confirmation" class="show-notification-fleeting">Show Confirmation (Fleeting Notification)</a>
</li>
<li>
<a href="#notification-saving" class="show-notification">Show Saving</a>
<a href="#notification-saving" class="hide-notification">Hide Saving</a>
</li>
<li>
<a href="#notification-help" class="show-notification">Show Help</a>
<a href="#notification-help" class="hide-notification">Hide Help</a>
</li>
</ul>
</section>
<section>
<header>
<h2 class="title-2">Prompts</h2>
<span class="tip">presents a user with a choice, based on their previous interaction, that must be decided before they can proceed</span>
</header>
<p>In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).</p>
<h3 class="title-3">Different Static Examples of Prompts</h3>
<ul>
<li>
<a href="#prompt-confirm" class="show-prompt">Show Confirm Prompt</a>
</li>
<li>
<a href="#prompt-warning" class="show-prompt">Show Warning Prompt</a>
</li>
<li>
<a href="#prompt-error" class="show-prompt">Show Error Prompt</a>
</li>
</ul>
</section>
</article>
</section>
</div>
</%block>
<%block name="view_alerts">
<!-- alert: you're editing a draft -->
<div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
<div class="alert warning has-actions">
......@@ -234,115 +350,9 @@
</nav>
</div>
</div>
</%block>
<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>
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">UX Design</span>
<h1 class="title-1">Alerts &amp; Notifications</h1>
</div>
</header>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<section>
<header>
<h2 class="title-2">Alerts</h2>
<span class="tip">persistant, static messages to the user</span>
</header>
<p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>
<h3 class="title-3">Different Static Examples of Alerts</h3>
<p>Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display</p>
<ul>
<li><a href="#alert-draft" class="show-alert">Show Draft</a></li>
<li><a href="#alert-version" class="show-alert">Show Version</a></li>
<li><a href="#alert-saved" class="show-alert">Show Previous View/Action</a></li>
<li><a href="#alert-close" class="show-alert">Show Alert with Close Option</a></li>
<li><a href="#alert-removed" class="show-alert">Show Previous View/Action Removed</a></li>
<li><a href="#alert-system-error" class="show-alert">Show System Error</a></li>
<li><a href="#alert-user-error" class="show-alert">Show User Error</a></li>
<li><a href="#alert-announcement2" class="show-alert">Show Announcement</a></li>
<li><a href="#alert-announcement1" class="show-alert">Show Announcement with Actions</a></li>
<li><a href="#alert-activation" class="show-alert">Show Activiation</a></li>
</ul>
</section>
<section>
<header>
<h2 class="title-2">Notifications</h2>
<span class="tip">contextual, feedback-based, and temporal messages to the user</span>
</header>
<p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>
<h3 class="title-3">Different Static Examples of Notifications</h3>
<ul>
<li>
<a href="#notification-change" class="show-notification">Show Change Warning</a>
<a href="#notification-change" class="hide-notification">Hide Change Warning</a>
</li>
<li>
<a href="#notification-version" class="show-notification">Show New Version Warning</a>
<a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
</li>
<li>
<a href="#notification-dangerous" class="show-notification">Show Editing Warning</a>
<a href="#notification-dangerous" class="hide-notification">Hide Editing Warning</a>
</li>
<li>
<a href="#notification-confirmation" class="show-notification-fleeting">Show Confirmation (Fleeting Notification)</a>
</li>
<li>
<a href="#notification-saving" class="show-notification">Show Saving</a>
<a href="#notification-saving" class="hide-notification">Hide Saving</a>
</li>
<li>
<a href="#notification-help" class="show-notification">Show Help</a>
<a href="#notification-help" class="hide-notification">Hide Help</a>
</li>
</ul>
</section>
<section>
<header>
<h2 class="title-2">Prompts</h2>
<span class="tip">presents a user with a choice, based on their previous interaction, that must be decided before they can proceed</span>
</header>
<p>In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).</p>
<h3 class="title-3">Different Static Examples of Notifications</h3>
<ul>
<li>
<a href="#prompt-confirm" class="show-prompt">Show Confirm Prompt</a>
</li>
</ul>
</section>
</article>
</section>
</div>
<%block name="view_notifications">
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-change" id="notification-change">
<div class="notification change has-actions">
......@@ -388,11 +398,6 @@
</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>
......@@ -458,22 +463,66 @@
</a>
</div>
</div>
</%block>
<!-- prompt: confirm -->
<%block name="view_prompts">
<!-- prompt - confirm deletion -->
<div class="wrapper wrapper-prompt wrapper-prompt-confirm" id="prompt-confirm">
<div class="prompt confirm">
<div class="copy">
<h2 class="title title-3">Are You Sure You Want to Do That?</h2>
<h2 class="title title-3">Delete "Introduction &amp; Overview"?</h2>
<p>Deleting a section cannot be undone and its contents cannot be recovered.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Prompt Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary action-proceed">Yes, delete this section</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary action-cancel">Cancel</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- prompt - warning -->
<div class="wrapper wrapper-prompt wrapper-prompt-warning" id="prompt-warning">
<div class="prompt warning">
<div class="copy">
<h2 class="title title-3">Use Advanced Problem Editor?</h2>
<p>If you proceed, you cannot edit this problem using the simple problem editor.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Prompt Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary action-proceed">Yes</a>
<a href="#" class="action-primary action-proceed">Continue to Advanced Editor</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary action-cancel">Cancel</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- prompt - error -->
<div class="wrapper wrapper-prompt wrapper-prompt-error" id="prompt-error">
<div class="prompt error">
<div class="copy">
<h2 class="title title-3">There Were Errors in Your Submission</h2>
<p>Please correct the errors noted on the page and try again.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Prompt Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-secondary action-cancel">No</a>
<a href="#" class="action-primary action-proceed">Correct errors &amp; try again</a>
</li>
</ul>
</nav>
......
cms/templates/base.html
......@@ -6,12 +6,12 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
<%block name="title"></%block> |
% if context_course:
<% ctx_loc = context_course.location %>
${context_course.display_name} |
% endif
edX Studio
<%block name="title"></%block> |
% if context_course:
<% ctx_loc = context_course.location %>
${context_course.display_name} |
% endif
edX Studio
</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
......@@ -22,14 +22,13 @@
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
<%block name="header_extras"></%block>
</head>
<body class="<%block name='bodyclass'></%block> hide-wip">
<%include file="widgets/header.html" />
<%include file="courseware_vendor_js.html"/>
<%include file="courseware_vendor_js.html"/>
<script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
......@@ -48,15 +47,23 @@
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
<script type="text/javascript">
document.write('\x3Cscript type="text/javascript" src="' +
document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
document.write('\x3Cscript type="text/javascript" src="' +
document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
</script>
<%block name="content"></%block>
<%include file="widgets/footer.html" />
<!-- view -->
<div class="wrapper wrapper-view">
<%include file="widgets/header.html" />
<%block name="jsextra"></%block>
</body>
</html>
<%block name="view_alerts"></%block>
<%block name="content"></%block>
<%include file="widgets/footer.html" />
<%block name="view_notifications"></%block>
</div>
<%block name="view_prompts"></%block>
<%block name="jsextra"></%block>
</body>
</html>
\ 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