Commit ae52b9c4 by Andy Armstrong

Merge pull request #12057 from edx/alasdair/fedx-118-pattern-library-styles-with-current-partials

Alasdair/fedx 118 pattern library styles with current partials
parents 56d003e4 fe884029
......@@ -14,14 +14,17 @@ source =
omit =
cms/envs/*
cms/manage.py
cms/djangoapps/contentstore/views/dev.py
cms/djangoapps/*/migrations/*
cms/djangoapps/*/features/*
lms/debug/*
lms/envs/*
lms/djangoapps/*/migrations/*
lms/djangoapps/*/features/*
common/djangoapps/terrain/*
common/djangoapps/*/migrations/*
openedx/core/djangoapps/*/migrations/*
openedx/core/djangoapps/debug/*
[report]
ignore_errors = True
......
......@@ -12,17 +12,3 @@ from django.http import HttpResponseNotFound
def dev_mode(request):
"Sample static view"
return render_to_response("dev/dev_mode.html")
def dev_show_template(request, template):
"""
Shows the specified template as an HTML page.
e.g. /template/ux/reference/container.html shows the template under ux/reference/container.html
Note: dynamic parameters can also be passed to the page.
e.g. /template/ux/reference/container.html?name=Foo
"""
try:
return render_to_response(template, request.GET.dict())
except TopLevelLookupException:
return HttpResponseNotFound("Couldn't find template {tpl}".format(tpl=template))
<%inherit file="../../base.html" />
<%block name="view_notes">
<%include file="_note-usage.html" />
</%block>
<%!
import logging
from util.date_utils import get_default_time_display
from django.utils.translation import ugettext as _
from contentstore.utils import reverse_usage_url
%>
<%block name="title">Container</%block>
<%block name="bodyclass">is-signedin course uploads view-container</%block>
<%namespace name='static' file='../../static_content.html'/>
<%block name="content">
<div id="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-navigation has-subtitle">
<div class="page-header">
<small class="navigation navigation-parents subtitle">
<a href="" class="navigation-item navigation-link navigation-parent">
Section parent
</a>
<span class="navigation-item navigation-parent">Subsection parent</span>
</small>
<div class="wrapper-xblock-field" data-field="display_name">
<h1 class="page-header-title is-editable xblock-field-value">Unit Example</h1>
</div>
</div>
<nav class="nav-actions" aria-label="${_('Page Actions')}">
<h3 class="sr">Page Actions</h3>
<ul>
<!-- begin publishing changes -->
<li class="action-item action-view nav-item">
<a href="#" class="button view-button action-button">
<span class="action-button-text">View Published Version</span>
</a>
</li>
<li class="action-item action-preview nav-item">
<a href="#" class="button preview-button action-button">
<span class="action-button-text">Preview</span>
</a>
</li>
<!-- end publishing changes -->
</ul>
</nav>
</header>
</div>
<div class="wrapper-content wrapper">
<div class="inner-wrapper">
<section class="content-area">
<article class="content-primary">
<div class="ui-loading">
<p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
</div>
<div class="no-container-content">
<p>This page has no content yet.</p>
</div>
<section class="wrapper-xblock level-page">
<header class="xblock-header">
<div class="header-details">
Container Name
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon fa fa-edit"></i>
<span class="action-button-text">Edit</span>
</a>
</li>
</ul>
</div>
</header>
<article class="xblock-render">
<ol class="xblock-list">
<li class="xblock-list-item">
<section class="wrapper-xblock level-nesting is-collapsible">
<header class="xblock-header">
<div class="header-details">
<a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
<i class="icon fa fa-caret-down ui-toggle-expansion"></i>
<span class="sr">Expand or Collapse</span>
</a>
<span>Condition 1</span>
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="sr action-item">No Actions</li>
</ul>
</div>
</header>
<article class="xblock-render">
<ol class="xblock-list">
<li class="xblock-list-item">
<section class="wrapper-xblock level-element">
<header class="xblock-header">
<div class="header-details">
Video
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon fa fa-edit"></i>
<span class="action-button-text">Edit</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
<i class="icon fa fa-copy"></i>
<span class="sr">Duplicate this component</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="sr">Delete this component</span>
</a>
</li>
</ul>
</div>
</header>
<article class="xblock-render">
<section class="xblock xblock-student_view xmodule_display xmodule_VideoModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_72b5a0d74e8c4ed4a4d4e6bf67837c09/handler" data-type="Video">
<h2>Video</h2>
<div id="video_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" class="video closed is-initialized" data-streams="1.00:OEoXaMPEzfM" data-save-state-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_72b5a0d74e8c4ed4a4d4e6bf67837c09/handler/xmodule_handler/save_user_state" data-caption-data-dir="None" data-show-captions="true" data-general-speed="1.0" data-speed="null" data-start="0.0" data-end="0.0" data-caption-asset-path="/c4x/AndyA/ABT101/asset/subs_" data-autoplay="False" data-yt-test-timeout="1500" data-yt-test-url="https://www.googleapis.com/youtube/v3/videos/" data-autohide-html5="False" tabindex="-1">
<div class="focus_grabber first" tabindex="-1"></div>
<div class="tc-wrapper">
<a href="#before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" class="nav-skip sr">Skip to a navigable version of this video transcript.</a>
<article class="video-wrapper">
<span tabindex="-1" class="spinner" aria-hidden="true" aria-label="Loading video player"></span>
<span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="Play video"></span>
<div class="video-player-pre"></div>
<section class="video-player">
<iframe id="i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/OEoXaMPEzfM?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;html5=1&amp;origin=http%3A%2F%2Flocalhost%3A8001" style="height: 411.75px; width: 732px; top: -22.875px; left: 0px;"></iframe>
<h3 class="hidden">ERROR: No playable video sources found!</h3>
</section>
<div class="video-player-post"></div>
<section class="video-controls" style="">
<div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" title="Video position" aria-disabled="false" tabindex="-1" style=""><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Video position" aria-disabled="false" aria-valuetext="0 seconds" style="left: 0%;"></a></div>
<div>
<ul class="vcr">
<li><a class="video_control play" href="#" title="Play" role="button" aria-disabled="false"></a></li>
<li><div class="vidtime">0:00 / 1:56</div></li>
</ul>
<div class="secondary-controls"><div class="speeds">
<a href="#" title="Speeds" role="button" aria-disabled="false">
<h3>Speed</h3>
<p class="active">1.0x</p>
</a>
<ol class="video_speeds"><li data-speed="2.0"><a class="speed_link" href="#">2.0x</a></li><li data-speed="1.50"><a class="speed_link" href="#">1.50x</a></li><li data-speed="1.0" class="active"><a class="speed_link" href="#">1.0x</a></li><li data-speed="0.50"><a class="speed_link" href="#">0.50x</a></li></ol>
</div><div class="volume">
<a href="#" title="Volume" role="button" aria-disabled="false" aria-label="Volume"></a>
<div class="volume-slider-container">
<div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Volume" aria-disabled="false" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="Maximum" style="bottom: 100%;"></a></div>
</div>
</div>
<a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill browser</a>
<a href="#" class="quality_control" title="HD off" role="button" aria-disabled="false" style="display: inline;">HD off</a>
<a href="#" class="hide-subtitles" title="Turn on captions" role="button" aria-disabled="false" style="display: none;">Turn on captions</a>
</div>
</div>
</section>
<a class="nav-skip sr" id="before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" href="#after-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09">Skip to end of transcript.</a>
</article>
<ol id="transcript-captions" class="subtitles" tabindex="0" title="Captions" role="group" aria-label="Activating an item in this group will spool the video to the corresponding time point. To skip transcript, go to previous item." style="max-height: 411px;">
<li style=""></li>
</ol>
</div>
<a class="nav-skip sr" id="after-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" href="#before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09">Go back to start of transcript.</a>
<div class="focus_grabber last" tabindex="-1"></div>
<ul class="wrapper-downloads">
</ul>
</div>
</section>
</article>
</section>
</li><li class="xblock-list-item">
<section class="wrapper-xblock xblock-type-container level-element">
<header class="xblock-header">
<div class="header-details">
Randomize Block
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="action-item action-view">
<a href="#" class="action-button">
<span class="action-button-text">View</span>
<i class="icon fa fa-arrow-right"></i>
</a>
</li>
</ul>
</div>
</header>
<article class="xblock-render">Shows Element - Example Randomize Block could be here.</article>
</section>
</li><li class="xblock-list-item">
<section class="wrapper-xblock level-element">
<header class="xblock-header">
<div class="header-details">
Element Level Header
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon fa fa-edit"></i>
<span class="action-button-text">Edit</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
<i class="icon fa fa-copy"></i>
<span class="sr">Duplicate this component</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="sr">Delete this component</span>
</a>
</li>
</ul>
</div>
</header>
<article class="xblock-render" style="height:200px;">Shows Element - Example HTML could be here.</article>
</section>
</li>
</ol>
</article>
</section>
</li>
<li class="xblock-list-item xblock-list-item">
<section class="wrapper-xblock level-nesting is-collapsible">
<header class="xblock-header">
<div class="header-details">
<a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
<i class="icon fa fa-caret-down ui-toggle-expansion"></i>
<span class="sr">Expand or Collapse</span>
</a>
<span>Condition 2</span>
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="sr action-item">No Actions</li>
</ul>
</div>
</header>
<article class="xblock-render">
<ol class="xblock-list">
<li class="xblock-list-item">
<section class="wrapper-xblock level-element">
<header class="xblock-header">
<div class="header-details">
Video
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon fa fa-edit"></i>
<span class="action-button-text">Edit</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
<i class="icon fa fa-copy"></i>
<span class="sr">Duplicate this component</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="sr">Delete this component</span>
</a>
</li>
<ul>
</ul></ul></div>
</header>
<article class="xblock-render" >Shows Element - Example Video could be here. </article>
</section>
</li><li class="xblock-list-item">
<section class="wrapper-xblock level-element">
<header class="xblock-header">
<div class="header-details">
Common Problem
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon fa fa-edit"></i>
<span class="action-button-text">Edit</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
<i class="icon fa fa-copy"></i>
<span class="sr">Duplicate this component</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="sr">Delete this component</span>
</a>
</li>
<ul>
</ul></ul></div>
</header>
<article class="xblock-render">
<section class="xblock xblock-student_view xmodule_display xmodule_CapaModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_AndyA;_ABT101;_problem;_46d2b65d793549e2876729d55df9a2cb/handler" data-type="Problem" data-block-type="problem">
<section id="problem_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb" class="problems-wrapper" data-problem-id="i4x://AndyA/ABT101/problem/46d2b65d793549e2876729d55df9a2cb" data-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_problem;_46d2b65d793549e2876729d55df9a2cb/handler/xmodule_handler" data-progress_status="none" data-progress_detail="0/1">
<h3 class="hd hd-2 problem-header">
Multiple Choice
</h3>
<section class="problem-progress">(1 point possible)</section>
<section class="problem">
<div>
<p>
A multiple choice problem presents radio buttons for student
input. Students can only select a single option presented. Multiple Choice questions have been the subject of many areas of research due to the early invention and adoption of bubble sheets.</p>
<p> One of the main elements that goes into a good multiple choice question is the existence of good distractors. That is, each of the alternate responses presented to the student should be the result of a plausible mistake that a student might make.
</p>
<p>What Apple device competed with the portable CD player?</p>
<span><form class="choicegroup capa_inputtype" id="inputtype_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1">
<div class="indicator-container">
<span class="unanswered" style="display:inline-block;" id="status_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1"></span>
</div>
<fieldset>
<label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipad">
<input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipad" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_ipad"> The iPad
</label>
<label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_beatles">
<input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_beatles" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_beatles"> Napster
</label>
<label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipod">
<input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipod" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_ipod"> The iPod
</label>
<label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_peeler">
<input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_peeler" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_peeler"> The vegetable peeler
</label>
<span id="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1"></span>
</fieldset>
</form></span>
<section class="solution-span">
<span id="solution_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_solution_1"></span>
</section></div>
<section class="action">
<input type="hidden" name="problem_id" value="Multiple Choice">
<input class="check Check" type="button" value="Check">
</section>
</section>
</section>
</section>
</article>
</section>
</li><li class="xblock-list-item">
<section class="wrapper-xblock level-element">
<header class="xblock-header">
<div class="header-details">
HTML
</div>
<div class="header-actions">
<ul class="actions-list">
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon fa fa-edit"></i>
<span class="action-button-text">Edit</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
<i class="icon fa fa-copy"></i>
<span class="sr">Duplicate this component</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="sr">Delete this component</span>
</a>
</li>
<ul>
</ul></ul></div>
</header>
<article class="xblock-render">
<section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_html;_c8fb4780eb554aec95c6231680eb82cf/handler" data-type="HTMLModule" data-block-type="html">
<ol>
<li>
<h2> September 21 </h2>
<section class="update-description">
<section class="primary">
<p> Words of encouragement! This is a short note that most students will read. </p>
<p class="author">Anant Agarwal (6.002x Principal Instructor)</p>
</section>
<p></p><h3>Primary versus Secondary Updates:</h3> Unfortunately, the internet throws a lot of text at students, and they
do not read everything that they are given. However, many students <em>do</em> read all that they are
given, and so detailed explanations in this section will benefit the most conscientious.
Any essential information should be extremely quickly summarized in the primary section for skimmers.<p></p>
<p></p><h3>Star Forum Poster</h3>
Students appreciate knowing that the course staff is reading what they post, and one of several ways
that you can do this is by acknowledging the star posters in your announcements.
<p></p>
</section>
</li>
</ol>
</section>
</article>
</section>
</li>
</ol>
</article>
</section>
</li>
</ol>
</article>
</section>
</article>
<aside class="content-supplementary" role="complementary">
<!-- begin publishing changes 1 -->
<!-- case never published, future release no staff lock -->
<div class="bit-publishing ">
<h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Draft (Never published)</h3>
<div class="wrapper-last-draft bar-mod-content">
<!-- case: unpubbed changes -->
<p class="copy meta">
Draft saved on 6/15/2014 at 12:45pm by amako
</p>
</div>
<!-- case: future release -->
<div class="wrapper-release bar-mod-content">
<h5 class="title">Scheduled to Release:</h5>
<p class="copy">
<span class="release-date">July 25, 2014</span> with
<span class="release-with">Section "Week 1"</span>
</p>
</div>
<!-- case: staff and students - no lock -->
<div class="wrapper-visibility bar-mod-content">
<h5 class="title">Will be Visible to:</h5>
<p class="copy">Staff and Students</p>
<p class="action-inline">
<a href="">
<i class="icon fa fa-unlock"></i> Hide from Students
</a>
</p>
</div>
<!-- case: future release -->
<div class="wrapper-pub-actions bar-mod-actions">
<ul class="action-list">
<li class="action-item"><a class="action-publish action-primary" href="">Publish</a></li>
<li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
</ul>
</div>
</div>
<!-- end publishing changes 1 -->
<!-- begin publishing changes 2 -->
<!-- case published no changes, future release no staff lock -->
<div class="bit-publishing is-published">
<h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Published</h3>
<div class="wrapper-last-draft bar-mod-content">
<!-- case: unpubbed changes -->
<p class="copy meta">
Last published on 6/15/2014 at 12:45pm by amako
</p>
</div>
<!-- case: future release -->
<div class="wrapper-release bar-mod-content">
<h5 class="title">Scheduled to Release:</h5>
<p class="copy">
<span class="release-date">July 25, 2014</span> with
<span class="release-with">Section "Week 1"</span>
</p>
</div>
<!-- case: staff and students - no lock -->
<div class="wrapper-visibility bar-mod-content">
<h5 class="title">Will be Visible to:</h5>
<p class="copy">Staff and Students</p>
<p class="action-inline">
<a href="">
<i class="icon fa fa-unlock"></i> Hide from Students
</a>
</p>
</div>
<!-- case: future release -->
<div class="wrapper-pub-actions bar-mod-actions">
<ul class="action-list">
<li class="action-item"><a class="action-publish action-primary is-disabled" href="" aria-disabled="true" >Publish</a></li>
<li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
</ul>
</div>
</div>
<!-- end publishing changes 2 -->
<!-- begin publishing changes 3 -->
<!-- case unpubbed changes, future release no staff lock -->
<div class="bit-publishing is-draft">
<h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Draft (Unpublished changes)</h3>
<div class="wrapper-last-draft bar-mod-content">
<!-- case: unpubbed changes -->
<p class="copy meta">
Draft saved on 6/15/2014 at 12:45pm by amako
</p>
</div>
<!-- case: future release -->
<div class="wrapper-release bar-mod-content">
<h5 class="title">Scheduled to Release:</h5>
<p class="copy">
<span class="release-date">July 25, 2014</span> with
<span class="release-with">Section "Week 1"</span>
</p>
</div>
<!-- case: staff and students - no lock -->
<div class="wrapper-visibility bar-mod-content">
<h5 class="title">Will be Visible to:</h5>
<p class="copy">Staff and Students</p>
<p class="action-inline">
<a href="">
<i class="icon fa fa-unlock"></i> Hide from Students
</a>
</p>
</div>
<!-- case: future release -->
<div class="wrapper-pub-actions bar-mod-actions">
<ul class="action-list">
<li class="action-item"><a class="action-publish action-primary" href="">Publish</a></li>
<li class="action-item"><a class="action-discard action-secondary" href="">Discard Changes</a></li>
</ul>
</div>
</div>
<!-- end publishing changes 3 -->
<!-- begin publishing changes 4 -->
<!-- case unpubbed changes, future release with staff lock -->
<div class="bit-publishing is-draft is-staff-only">
<h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Draft (Unpublished changes)</h3>
<div class="wrapper-last-draft bar-mod-content">
<!-- case: unpubbed changes -->
<p class="copy meta">
Draft saved on 6/15/2014 at 12:45pm by amako
</p>
</div>
<!-- case: future release -->
<div class="wrapper-release bar-mod-content">
<h5 class="title">Scheduled to Release:</h5>
<p class="copy">
<span class="release-date">July 25, 2014</span> with
<span class="release-with">Section "Week 1"</span>
</p>
</div>
<!-- case: staff and students - no lock -->
<div class="wrapper-visibility bar-mod-content">
<h5 class="title">Will be Visible to:</h5>
<p class="copy">Staff only</p>
<p class="action-inline">
<a href="">
<i class="icon fa fa-lock"></i> Hidden from Students
</a>
</p>
</div>
<!-- case: future release -->
<div class="wrapper-pub-actions bar-mod-actions">
<ul class="action-list">
<li class="action-item"><a class="action-publish action-primary" href="">Publish</a></li>
<li class="action-item"><a class="action-discard action-secondary" href="">Discard Changes</a></li>
</ul>
</div>
</div>
<!-- end publishing changes 4 -->
<!-- begin publishing changes 5 -->
<!-- case published no changes, release in past no staff lock -->
<div class="bit-publishing is-published">
<h3 class="bar-mod-title pub-status"><span class="sr">Publishing Status </span>Published</h3>
<div class="wrapper-last-draft bar-mod-content">
<!-- case: unpubbed changes -->
<p class="copy meta">
Last published on 6/15/2014 at 12:45pm by amako
</p>
</div>
<!-- case: future release -->
<div class="wrapper-release bar-mod-content">
<h5 class="title">Released:</h5>
<p class="copy">
<span class="release-date">May 25, 2014</span> with
<span class="release-with">Section "Week 1"</span>
</p>
</div>
<!-- case: staff and students - no lock -->
<div class="wrapper-visibility bar-mod-content">
<h5 class="title">Currently Visible to:</h5>
<p class="copy">Staff and Students</p>
<p class="action-inline">
<a href="">
<i class="icon fa fa-unlock"></i> Hide from Students
</a>
</p>
</div>
<!-- case: future release -->
<div class="wrapper-pub-actions bar-mod-actions">
<ul class="action-list">
<li class="action-item"><a class="action-publish action-primary is-disabled" href="" aria-disabled="true" >Publish</a></li>
<li class="action-item"><a class="action-discard action-secondary is-disabled" href="" aria-disabled="true" >Discard Changes</a></li>
</ul>
</div>
</div>
<!-- end publishing changes 2 -->
<div class="bit-publishing">
<h3 class="title-3">Publishing Status</h3>
<p class="copy">This content is published with unit <a href="">Unit 1</a>. To make changes to the content of this container, place <a href="">Unit 1</a> in draft mode.</p>
</div>
<div class="bit">
<h3 class="title-3">Container Reference Page</h3>
<ul class="list-details">
<li class="item-detail">This is a reference for the container page, meant to show visual states and general FED hierarchy for the both the HTML template and the SASS styling.</li>
</ul>
</div>
</aside>
</section>
</div>
</div>
</div>
</%block>
<%inherit file="../../base.html" />
<%block name="view_notes">
<%include file="_note-usage.html" />
</%block>
<%!
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
%>
<%block name="title">[template] Create a Course Rerun of HarvardX SW12.2x T2_2014</%block>
<%block name="bodyclass">is-signedin view-course-create view-course-create-rerun</%block>
<%block name="content">
<div id="content">
<div class="wrapper-mast wrapper">
<header class="mast mast-wizard has-actions">
<h1 class="page-header">
<span class="page-header-sub">Create a re-run of a course</span>
</h1>
<nav class="nav-actions" aria-label="${_('Page Actions')}">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="" rel="external" class="button cancel-button">Cancel</a>
</li>
</ul>
</nav>
<h2 class="page-header-super course-original">
<span class="sr">You are creating a re-run from:</span>
<span class="course-original-title-id">HarvardX SW12.2x T2_2014</span>
<span class="course-original-title">China (Part 2): The Creation and End of a Centralized Empire</span>
</h2>
</header>
</div> <!-- /mast -->
<div class="wrapper-content wrapper">
<div class="inner-wrapper">
<section class="content">
<article class="content-primary">
<div class="introduction">
<div class="copy">
<p>
Provide identifying information for this re-run of the course. The original course is not affected in any way by a re-run.
<strong>Note: Together, the organization, course number, and course run must uniquely identify this new course instance.</strong>
<p>
</div>
</div><!-- /introduction -->
<!-- - - - -->
<!-- STATE: initial form -->
<div class="wrapper-rerun-course">
<form class="form-create rerun-course course-info" id="rerun-course-form" name="rerun-course-form">
<!-- NOTE: this element's contents should be only included when they are needed and not kept in the DOM for all states -->
<div class="wrapper-error">
</div>
<div class="wrapper-form">
<fieldset>
<legend class="sr">Required Information to Create a re-run of a course</legend>
<ol class="list-input">
<li class="field text required" id="field-course-name">
<label for="rerun-course-name">Course Name</label>
<input class="rerun-course-name" id="rerun-course-name" type="text" name="rerun-course-name" aria-required="true" placeholder="e.g. Introduction to Computer Science" />
<span class="tip">
The public display name for the new course. (This name is often the same as the original course name.)
</span>
<span class="tip tip-error is-hidden"></span>
</li>
<li class="field text required" id="field-organization">
<label for="rerun-course-org">Organization</label>
<input class="rerun-course-org" id="rerun-course-org" type="text" name="rerun-course-org" aria-required="true" placeholder="e.g. UniversityX or OrganizationX" />
<span class="tip">
The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)
<strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hidden"></span>
</li>
<li class="row">
<div class="column field text required" id="field-course-number">
<label for="rerun-course-number">Course Number</label>
<input class="rerun-course-number" id="rerun-course-number" type="text" name="rerun-course-number" aria-required="true" placeholder="e.g. CS101" />
<span class="tip">
The unique number that identifies the new course within the organization. (This number is often the same as the original course number.)
<strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hidden"></span>
</div>
<div class="column field text required" id="field-course-run">
<label for="rerun-course-run">Course Run</label>
<input class="rerun-course-run" id="rerun-course-run" type="text" name="rerun-course-run" aria-required="true"placeholder="e.g. 2014_T1" />
<span class="tip">
The term in which the new course will run. (This value is often different than the original course run value.)
<strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hidden"></span>
</div>
</li>
</ol>
<input type="hidden" value="" class="allow-unicode-course-id" /> <!-- TODO: need to add support for allow_unicode_course_id in real view's template -->
</fieldset>
</div>
<div class="actions">
<button type="submit" class="action action-primary rerun-course-save is-disabled" aria-disabled="true" >Create Re-run</button>
<button type="button" class="action action-secondary action-cancel rerun-course-cancel">Cancel</button>
</div>
</form>
</div><!-- /rerun-course -->
<!-- - - - -->
<!-- STATE: error - all attributes match an existing course -->
<div class="wrapper-rerun-course">
<form class="form-create rerun-course course-info" id="rerun-course-form" name="rerun-course-form">
<div class="wrapper-error is-shown">
<!-- NOTE: this element's contents should be only included when they are needed and not kept in the DOM for all states -->
<div id="course_rerun_error" name="course_rerun_error" class="message message-status error" role="alert">
<p>A course already has that organization, course number, and course run. Change one or more of these values to give the new course a unique URL.</p>
</div>
</div>
<div class="wrapper-form">
<fieldset>
<legend class="sr">Required Information to Create a re-run of a course</legend>
<ol class="list-input">
<li class="field text required error" id="field-course-name">
<label for="rerun-course-name">Course Name</label>
<input class="rerun-course-name" id="rerun-course-name" type="text" name="rerun-course-name" aria-required="true" placeholder="e.g. Introduction to Computer Science" />
<span class="tip">
The public display name for the new course. (This name is often the same as the original course name.)
</span>
<span class="tip tip-error is-hiding"></span>
</li>
<li class="field text required error" id="field-organization">
<label for="rerun-course-org">Organization</label>
<input class="rerun-course-org" id="rerun-course-org" type="text" name="rerun-course-org" aria-required="true" placeholder="e.g. UniversityX or OrganizationX" />
<span class="tip">
The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)
<strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hiding"></span>
</li>
<li class="row">
<div class="column field text required error" id="field-course-number">
<label for="rerun-course-number">Course Number</label>
<input class="rerun-course-number" id="rerun-course-number" type="text" name="rerun-course-number" aria-required="true" placeholder="e.g. CS101" />
<span class="tip">
The unique number that identifies the new course within the organization. (This number is often the same as the original course number.)
<strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hiding"></span>
</div>
<div class="column field text required error" id="field-course-run">
<label for="rerun-course-run">Course Run</label>
<input class="rerun-course-run" id="rerun-course-run" type="text" name="rerun-course-run" aria-required="true"placeholder="e.g. 2014_T1" />
<span class="tip">
The term in which the new course will run. (This value is often different than the original course run value.)
<strong class="tip-note" class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hiding"></span>
</div>
</li>
</ol>
<input type="hidden" value="" class="allow-unicode-course-id" /> <!-- TODO: need to add support for allow_unicode_course_id in real view's template -->
</fieldset>
</div>
<div class="actions">
<button type="submit" class="action action-primary rerun-course-save is-disabled" aria-disabled="true" >Create Re-run</button>
<button type="button" class="action action-secondary action-cancel rerun-course-cancel">Cancel and Return to Dashboard</button>
</div>
</form>
</div><!-- /rerun-course -->
<!-- - - - -->
<!-- STATE: error - specific error fields -->
<div class="wrapper-rerun-course">
<form class="form-create rerun-course course-info" id="rerun-course-form" name="rerun-course-form">
<div class="wrapper-error is-shown">
<!-- NOTE: this element's contents should be only included when they are needed and not kept in the DOM for all states -->
<div id="course_rerun_error" name="course_rerun_error" class="message message-status error" role="alert">
<p>Please correct the highlighted fields below.</p>
</div>
</div>
<div class="wrapper-form">
<fieldset>
<legend class="sr">Required Information to Create a re-run of a course</legend>
<ol class="list-input">
<li class="field text required error" id="field-course-name">
<label for="rerun-course-name">Course Name</label>
<input class="rerun-course-name" id="rerun-course-name" type="text" name="rerun-course-name" aria-required="true" placeholder="e.g. Introduction to Computer Science" />
<span class="tip">
The public display name for the new course. (This name is often the same as the original course name.)
</span>
<span class="tip tip-error is-showing">Required field.</span>
</li>
<li class="field text required error" id="field-organization">
<label for="rerun-course-org">Organization</label>
<input class="rerun-course-org" id="rerun-course-org" type="text" name="rerun-course-org" aria-required="true" placeholder="e.g. UniversityX or OrganizationX" />
<span class="tip">
The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)
<strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-showing">Please do not use any spaces or special characters in this field.</span>
</li>
<li class="row">
<div class="column field text required error" id="field-course-number">
<label for="rerun-course-number">Course Number</label>
<input class="rerun-course-number" id="rerun-course-number" type="text" name="rerun-course-number" aria-required="true" placeholder="e.g. CS101" />
<span class="tip">
The unique number that identifies the new course within the organization. (This number is often the same as the original course number.)
<strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-showing">Please do not use any spaces or special characters in this field.</span>
</div>
<div class="column field text required error" id="field-course-run">
<label for="rerun-course-run">Course Run</label>
<input class="rerun-course-run" id="rerun-course-run" type="text" name="rerun-course-run" aria-required="true"placeholder="e.g. 2014_T1" />
<span class="tip">
The term in which the new course will run. (This value is often different than the original course run value.)
<strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-showing">Required field.</span>
</div>
</li>
</ol>
<input type="hidden" value="" class="allow-unicode-course-id" /> <!-- TODO: need to add support for allow_unicode_course_id in real view's template -->
</fieldset>
</div>
<div class="actions">
<button type="submit" class="action action-primary rerun-course-save is-disabled" aria-disabled="true" >Create Re-run</button>
<button type="button" class="action action-secondary action-cancel rerun-course-cancel">Cancel and Return to Dashboard</button>
</div>
</form>
</div><!-- /rerun-course -->
<!-- - - - -->
<!-- STATE: processing successful submission -->
<div class="wrapper-rerun-course">
<form class="form-create rerun-course course-info" id="rerun-course-form" name="rerun-course-form">
<div class="wrapper-error">
</div>
<div class="wrapper-form">
<fieldset>
<legend class="sr">Required Information to Create a re-run of a course</legend>
<ol class="list-input">
<li class="field text required" id="field-course-name">
<label for="rerun-course-name">Course Name</label>
<input class="rerun-course-name" id="rerun-course-name" type="text" name="rerun-course-name" aria-required="true" placeholder="e.g. Introduction to Computer Science" />
<span class="tip">
The public display name for the new course. (This name is often the same as the original course name.)
</span>
<span class="tip tip-error is-hiding"></span>
</li>
<li class="field text required" id="field-organization">
<label for="rerun-course-org">Organization</label>
<input class="rerun-course-org" id="rerun-course-org" type="text" name="rerun-course-org" aria-required="true" placeholder="e.g. UniversityX or OrganizationX" />
<span class="tip">
The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)
<strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hiding"></span>
</li>
<li class="row">
<div class="column field text required" id="field-course-number">
<label for="rerun-course-number">Course Number</label>
<input class="rerun-course-number" id="rerun-course-number" type="text" name="rerun-course-number" aria-required="true" placeholder="e.g. CS101" />
<span class="tip">
The unique number that identifies the new course within the organization. (This number is often the same as the original course number.)
<strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hiding"></span>
</div>
<div class="column field text required" id="field-course-run">
<label for="rerun-course-run">Course Run</label>
<input class="rerun-course-run" id="rerun-course-run" type="text" name="rerun-course-run" aria-required="true"placeholder="e.g. 2014_T1" />
<span class="tip">
The term in which the new course will run. (This value is often different than the original course run value.)
<strong class="tip-note">Note: No spaces or special characters are allowed.</strong>
</span>
<span class="tip tip-error is-hiding"></span>
</div>
</li>
</ol>
<input type="hidden" value="" class="allow-unicode-course-id" /> <!-- TODO: need to add support for allow_unicode_course_id in real view's template -->
</fieldset>
</div>
<div class="actions">
<button type="submit" class="action action-primary rerun-course-save is-disabled is-processing" aria-disabled="true">
<i class="icon fa fa-refresh fa-spin"></i>
Processing Re-run Request
</button>
</div>
</form>
</div><!-- /rerun-course -->
</article><!-- /content-primary -->
<aside class="content-supplementary" role="complementary">
<div class="bit">
<h3 class="title-3">When will my course re-run start?</h3>
<ul class="list-details">
<li class="item-detail">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum.</li>
</ul>
</div>
<div class="bit">
<h3 class="title-3">What transfers from the original course?</h3>
<ul class="list-details">
<li class="item-detail">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum.</li>
</ul>
</div>
<div class="bit">
<h3 class="title-3">What does not transfer from the original course?</h3>
<ul class="list-details">
<li class="item-detail">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum.</li>
</ul>
</div>
</aside><!-- /content-supplementary -->
</section>
</div><!-- /content -->
</div>
</div>
</%block>
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/>
<%inherit file="../../base.html" />
......@@ -22,8 +25,6 @@
</div>
<section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
<ul>
<li><a href="container.html">Container page</a></li>
<li><a href="unit.html">Unit page</a></li>
<li><a href="pattern-library-test.html">Pattern Library test page</a></li>
</ul>
</section>
......
<%page expression_filter="h"/>
<div class="wrapper wrapper-modal-window wrapper-modal-window-edit-xblock" aria-labelledby="modal-window-title" role="dialog">
<div class="modal-window-overlay"></div>
<div class="modal-window confirm modal-med modal-type-html modal-editor" style="top: 50px; left: 400px;" tabindex="-1" aria-labelledby="modal-window-title">
<div class="edit-xblock-modal">
<div class="modal-header">
<h2 id="modal-window-title" class="title modal-window-title">Editing visibility for: [Component Name]</h2>
</div>
<div class="modal-content">
<div class="xblock-editor" data-locator="i4x://TestU/cohorts001/chapter/748152225449412a846bc24811a5621c" data-course-key="">
<div class="xblock xblock-visibility_view">
<div class="modal-section visibility-summary">
<div class="summary-message summary-message-warning visibility-summary-message">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<p class="copy"><span class="sr">Warning: </span>This component is contained in a unit that is hidden from students. Component visibility settings are overridden by the unit visibility settings.</p>
</div>
<!-- NOTE: use when no group configuration has been set -->
<div class="is-not-configured has-actions">
<h4 class="title">You have not set up any groups</h4>
<div class="copy">
<p>Groups are a way for you to organize content in your course with a particular student experience in mind. They are commonly used to facilitate content and pedagogical experiments as well as to provide different tracks of content.</p>
</div>
<div class="actions">
<a href="" class="action action-primary action-settings">Manage groups in this course</a>
</div>
</div>
</div>
<form class="visibility-controls-form" method="post" action="">
<div class="modal-section visibility-controls">
<h3 class="modal-section-title">Set visibility to:</h3>
<div class="modal-section-content">
<section class="visibility-controls-primary">
<ul class="list-fields list-radio">
<li class="field field-radio field-visibility-level">
<input type="radio" id="visibility-level-all" name="visibility-level" value="" class="input input-radio visibility-level-all" />
<label for="visibility-level-all" class="label">All Students and Staff</label>
</li>
<li class="field field-radio field-visibility-level">
<input type="radio" id="visibility-level-specific" name="visibility-level" value="" class="input input-radio visibility-level-specific" checked="checked" />
<label for="visibility-level-specific" class="label">Specific Groups</label>
</li>
</ul>
</section>
<!-- NOTE: @andyarmstrong, if you need this wrapper to show and hide, great. If not, please remove it from the DOM -->
<div class="wrapper-visibility-specific">
<section class="visibility-controls-secondary">
<div class="visibility-controls-group">
<h4 class="visibility-controls-title modal-subsection-title sr">Content Groups</h4>
<ul class="list-fields list-checkbox">
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME1" />
<label for="visibility-content-group-NAME1" class="label">Content Group NAME 1</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME2" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME2" />
<label for="visibility-content-group-NAME2" class="label">Content Group NAME 2</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME3" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME3" />
<label for="visibility-content-group-NAME3" class="label">Content Group NAME 3</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME4" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME4" />
<label for="visibility-content-group-NAME4" class="label">Content Group NAME 4</label>
</li>
<!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
<li class="field field-checkbox field-visibility-content-group was-removed">
<input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
<label for="visibility-content-group-deleted1" class="label">
Deleted Content Group
</label>
<span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
</li>
<!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
<li class="field field-checkbox field-visibility-content-group was-removed">
<input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
<label for="visibility-content-group-deleted1" class="label">
Deleted Content Group
</label>
<span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</form>
</div><!-- .xblock -->
</div><!-- .xblock-editor -->
</div><!-- .modal-content -->
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-save">Save</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div><!-- .xblock-visibility-modal -->
</div><!-- .modal-window -->
</div><!-- .wrapper-modal-window -->
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-section" aria-labelledby="modal-window-title" role="dialog">
<div class="modal-window-overlay"></div>
<div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
<div class="bulkpublish-section-modal">
<div class="modal-header">
<h2 class="title modal-window-title">Publish [section name]</h2>
</div>
<div class="modal-content">
<div class="message modal-introduction">
<p>Publish all unpublished changes for this section?</p>
</div>
<div class="modal-section bulkpublish-included">
<h3 class="modal-section-title">The following will be published:</h3>
<div class="modal-section-content">
<div class="outline outline-simple outline-bulkpublish">
<ol class="list-subsections">
<li class="outline-item outline-subsection">
<h4 class="subsection-title item-title">Subsection Title</h4>
<div class="subsection-content">
<ol class="list-units">
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
</ol>
</div>
</li>
<li class="outline-item outline-subsection">
<h4 class="subsection-title item-title">Subsection Title</h4>
<div class="subsection-content">
<ol class="list-units">
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
</ol>
</div>
</li>
<li class="outline-item outline-subsection">
<h4 class="subsection-title item-title">Subsection Title</h4>
<div class="subsection-content">
<ol class="list-units">
<ol class="list-units">
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
</ol>
</ol>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-publish">Publish</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-subsection" aria-labelledby="modal-window-title" role="dialog">
<div class="modal-window-overlay"></div>
<div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
<div class="bulkpublish-subsection-modal">
<div class="modal-header">
<h2 class="title modal-window-title">Publish [subsection name]</h2>
</div>
<div class="modal-content">
<div class="message modal-introduction">
<p>Publish all unpublished changes for this subsection?</p>
</div>
<div class="modal-section bulkpublish-included">
<h3 class="modal-section-title">The following will be published:</h3>
<div class="modal-section-content">
<div class="outline outline-simple outline-bulkpublish">
<ol class="list-units">
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-publish">Publish</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-unit" aria-labelledby="modal-window-title" role="dialog">
<div class="modal-window-overlay"></div>
<div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
<div class="bulkpublish-unit-modal">
<div class="modal-header">
<h2 class="title modal-window-title">Publish [unit name]</h2>
</div>
<div class="modal-content">
<div class="message modal-introduction">
<p>Publish all unpublished changes for this unit?</p>
</div>
</div>
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-publish">Publish</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<%inherit file="../../base.html" />
<%block name="view_notes">
<%include file="_note-usage.html" />
</%block>
<%!
from django.core.urlresolvers import reverse
%>
<%block name="title">[template] Course Outline UI</%block>
<%block name="bodyclass">is-signedin course view-outline</%block>
<%block name="content">
<div id="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<h1 class="page-header">
<small class="subtitle">Content</small>
<span class="sr">&gt; </span>Course Outline
</h1>
<nav class="nav-actions" aria-label="${_('Page Actions')}">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button button-new" data-category="chapter" data-parent="" data-default-name="">
<i class="icon fa fa-plus"></i>New Section
</a>
</li>
<li class="nav-item">
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
<span class="collapse-all"><i class="icon fa fa-arrow-up"></i> <span class="label">Collapse All Sections</span></span>
<span class="expand-all"><i class="icon fa fa-arrow-down"></i> <span class="label">Expand All Sections</span></span>
</a>
</li>
<li class="nav-item">
<a href="" rel="external" class="button button-view view-live-button" title="This link will open in a new browser window/tab">View Live</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<div class="wrapper-dnd">
<article class="outline" data-locator="" data-course-key="">
<h2 class="sr outline-title">Your Course's Outline</h2>
<ol class="list-sections is-sortable">
<!-- section -->
<li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_section_header-expanded.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<ol class="list-subsections is-sortable">
<!-- subsection -->
<li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_subsection_header-expanded.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
<ol class="list-units is-sortable">
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
</ol>
<!-- /list: units -->
</div>
<%include file="outline_add-unit.html" />
<!-- /subsection-content -->
</li>
<!-- /subsection -->
<!-- subsection -->
<li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_subsection_header-expanded.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
<ol class="list-units is-sortable">
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
</ol>
<!-- /list: units -->
<%include file="outline_add-unit.html" />
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection -->
</ol>
<!-- /list: subsections -->
<%include file="outline_add-subsection.html" />
</div>
<!-- /section-content -->
</li>
<!-- /section -->
</ol>
<!-- /list: sections -->
<%include file="outline_add-section.html" />
<!-- ========== -->
<!-- STATES: sections -->
<ol class="list-sections is-sortable">
<!-- section: not published + not scheduled/released -->
<li class="outline-item outline-section is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: not published + not scheduled/released -->
<!-- section: published + scheduled -->
<li class="outline-item outline-section is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + scheduled -->
<!-- section: published + released -->
<li class="outline-item outline-section is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-released.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + released -->
<!-- section: published + scheduled + locked content -->
<li class="outline-item outline-section is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-lock.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + scheduled + locked content -->
<!-- section: published + released + locked content -->
<li class="outline-item outline-section is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-lock.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + released + locked content -->
<!-- section: locked content -->
<li class="outline-item outline-section is-collapsible is-draggable is-staff-only is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-lock.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: locked content -->
<!-- section: published + released + has unpublished content -->
<li class="outline-item outline-section is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-unpublished_changes.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + released + has unpublished content -->
<!-- section: published + scheduled + has unpublished content -->
<li class="outline-item outline-section is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-unpublished_changes.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + scheduled + has unpublished content -->
<!-- section: published + released + has error -->
<li class="outline-item outline-section is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-error.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + released + has error -->
<!-- section: published + scheduled + has error -->
<li class="outline-item outline-section is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-error.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + scheduled + has error -->
<!-- ========== -->
<!-- section: placeholder -->
<li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_section_header-expanded.html" />
<div class="section-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<ol class="list-subsections is-sortable">
<!-- subsection: not published + not scheduled/released -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
<!-- units here -->
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: not published + not scheduled/released -->
<!-- subsection: not published + not scheduled/released + graded -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-draft.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: not published + not scheduled/released + graded -->
<!-- subsection: published + scheduled w/ section -->
<li class="outline-item outline-subsection is-collapsible is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled_with_parent.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled w/ section -->
<!-- subsection: published + scheduled + graded -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + graded -->
<!-- subsection: published + scheduled + graded + due date -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + graded + due date -->
<!-- subsection: published + scheduled + graded + due date + locked content -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
<%include file="outline_status_message-lock.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + graded + due date + locked content -->
<!-- subsection: published + released -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-live is-scheduled is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released_with_parent.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released -->
<!-- subsection: published + released (on specific date) + graded -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-check-square"></i>
Released <span class="sr">on</span>:
</span>
<span class="status-release-date">March 25, 2014</span>
</p>
</div>
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released (on specific date) + graded -->
<!-- subsection: published + released + graded + due date -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released_with_parent.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released + graded + due date -->
<!-- subsection: published + released + graded + due date + locked content -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released_with_parent.html" />
<%include file="outline_status_grading.html" />
<%include file="outline_status_message-lock.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released + graded + due date + locked content -->
<!-- subsection: locked content -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-staff-only is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-lock.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: locked content -->
<!-- subsection: published + scheduled + has unpublished content -->
<li class="outline-item outline-subsection is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-unpublished_units.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + has unpublished content -->
<!-- subsection: published + released + has unpublished content -->
<li class="outline-item outline-subsection is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-unpublished_changes.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released + has unpublished content -->
<!-- subsection: published + released + has error -->
<li class="outline-item outline-subsection is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-error.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released + has error -->
<!-- subsection: published + scheduled + has error -->
<li class="outline-item outline-subsection is-collapsible has-errors is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-error.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + has error -->
</ol>
</div>
</li>
<!-- /section: placeholder -->
<!-- ========== -->
<!-- section: placeholder -->
<li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_section_header-expanded.html" />
<div class="section-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<ol class="list-subsections is-sortable">
<!-- subsection: placeholder -->
<li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_subsection_header-expanded.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
<ol class="list-units is-sortable">
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
</div>
<!-- /unit-status -->
</li>
<!-- /unit -->
<!-- unit: not published -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: not published -->
<!-- unit: published -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
<!-- /unit: published -->
<!-- unit: not published + locked content -->
<li class="outline-item outline-unit is-draggable is-staff-only" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_message-lock.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: not published + locked content -->
<!-- unit: published + has unpublished content -->
<li class="outline-item outline-unit is-draggable has-warnings" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_message-unpublished_changes.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: published + has unpublished content -->
<!-- unit: not published + has unpublished content -->
<li class="outline-item outline-unit is-draggable has-warnings" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_message-unpublished_units.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: not published + has unpublished content -->
<!-- unit: has error -->
<li class="outline-item outline-unit is-draggable has-errors" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_message-error.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: has error -->
</ol>
<!-- /list: units -->
<%include file="outline_add-unit.html" />
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: placeholder -->
</ol>
<%include file="outline_add-subsection.html" />
</div>
</li>
<!-- /section: placeholder -->
</ol>
<%include file="outline_add-section.html" />
</article>
</div>
<div class="ui-loading is-hidden">
<p><span class="spin">
<i class="icon fa fa-refresh"></i></span>
<span class="copy">Loading</span>
</p>
</div>
</article>
<aside class="content-supplementary" role="complementary">
<div class="bit">
<h3 class="title-3">What can I do on this page?</h3>
<p>You can create new sections and subsections, set the release date for sections, and create new units in existing subsections. You can set the assignment type for subsections that are to be graded, and you can open a subsection for further editing.</p>
<p>In addition, you can drag and drop sections, subsections, and units to reorganize your course.</p>
</div>
</aside>
</section>
</div>
</div>
</%block>
<%page expression_filter="h"/>
<div class="add-section add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Section">
<i class="icon fa fa-plus"></i> New Section
</a>
</div>
<!-- /add-section -->
<%page expression_filter="h"/>
<div class="add-subsection add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Subsection">
<i class="icon fa fa-plus"></i> New Subsection
</a>
</div>
<!-- /add-subsection -->
<%page expression_filter="h"/>
<div class="add-unit add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Unit">
<i class="icon fa fa-plus"></i> New Unit
</a>
</div>
<!-- /add-unit -->
<%page expression_filter="h"/>
<div class="section-header">
<h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
<i class="icon fa fa-caret-down icon"></i>
<span class="wrapper-section-title is-editable wrapper-xblock-field">
<span class="section-title item-title xblock-field-value">Section Title</span>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish all content" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish all content</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /section-header -->
<%page expression_filter="h"/>
<div class="section-header">
<h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
<i class="icon fa fa-caret-down icon"></i>
<span class="wrapper-section-title is-editable wrapper-xblock-field">
<span class="section-title item-title xblock-field-value">Section Title</span>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish all content" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish all content</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /section-header -->
<%page expression_filter="h"/>
<div class="status-grading">
<p>
<span class="sr status-grading-label">Graded as:</span>
<i class="icon fa fa-check"></i>
<span class="status-grading-value">Homework</span>
<span class="status-grading-date">Due: December 31, 2014</span>
</p>
</div>
<%page expression_filter="h"/>
<div class="status-message">
<i class="icon fa fa-warning"></i>
<p class="status-message-copy">Critical error</p>
</div>
<%page expression_filter="h"/>
<div class="status-message">
<i class="icon fa fa-lock"></i>
<p class="status-message-copy">Contains Staff only content</p>
</div>
<%page expression_filter="h"/>
<div class="status-message">
<i class="icon fa fa-file-o"></i>
<p class="status-message-copy">Unpublished change(s) to live content</p>
</div>
<%page expression_filter="h"/>
<div class="status-message">
<i class="icon fa fa-file-o"></i>
<p class="status-message-copy">Unpublished unit(s) will not be released</p>
</div>
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-file-o"></i>
<span class="sr">This item is</span>
</span>
<span class="status-release-date">Unscheduled</span>
</p>
</div>
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-lock"></i>
Will never release - Contains Staff only content
</span>
</p>
</div>
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-check-square"></i>
Released <span class="sr">on</span>:
</span>
<span class="status-release-date">March 25, 2014</span>
</p>
</div>
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-check-square"></i>
Released with Section
</span>
</p>
</div>
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-clock-o"></i>
Scheduled: October 31, 2014
</span>
</p>
</div>
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-clock-o"></i>
Scheduled: with Section
</span>
</p>
</div>
<%page expression_filter="h"/>
<div class="subsection-header">
<h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
<i class="icon fa fa-caret-down icon"></i>
<span class="wrapper-subsection-title is-editable wrapper-xblock-field">
<span class="subsection-title item-title xblock-field-value">Subsection Title</span>
<!-- editor-title -->
<span class="editor">
<label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
<input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
</span>
<!-- /editor-title -->
</span>
</h3>
<div class="subsection-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /subsection-header -->
<%page expression_filter="h"/>
<div class="subsection-header">
<h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
<i class="icon fa fa-caret-down icon"></i>
<span class="wrapper-subsection-title is-editable wrapper-xblock-field">
<span class="subsection-title item-title xblock-field-value">Subsection Title</span>
<!-- editor-title -->
<span class="editor">
<label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
<input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
</span>
<!-- /editor-title -->
</span>
</h3>
<div class="subsection-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /subsection-header -->
<%page expression_filter="h"/>
<div class="unit-header">
<h3 class="unit-header-details">
<span class="unit-title item-title"><a class="unit-url" href="">Unit Name</a></span>
</h3>
<div class="unit-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /unit-header -->
......@@ -7,10 +7,10 @@
<%block name="bodyclass">is-signedin pattern-library</%block>
<%block name="content">
<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
<div class="example-set">
<div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
<span class="icon alert-icon icon-warning" aria-hidden="true"></span>
<h1>Pattern Library test page</h1>
<div class="alert alert-warning" role="alert" tabindex="-1">
<span class="icon alert-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<div class="alert-message">
<p class="alert-copy">
......@@ -18,6 +18,5 @@
</p>
</div>
</div>
</div>
</%block>
......@@ -7,5 +7,5 @@ from django.conf.urls import url
urlpatterns = (
url(r'^dev_mode$', 'contentstore.views.dev.dev_mode', name='dev_mode'),
url(r'^template/(?P<template>.+)$', 'contentstore.views.dev.dev_show_template'),
url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
)
......@@ -13,4 +13,4 @@ class LogoutPage(PageObject):
url = BASE_URL + "/logout"
def is_browser_on_page(self):
return self.q(css='.cta-login').present
return self.q(css='.btn-login').present
......@@ -45,18 +45,3 @@ def show_parameters(request):
for name, value in sorted(request.POST.items()):
html.append(escape("POST {}: {!r}".format(name, value)))
return HttpResponse("\n".join("<p>{}</p>".format(h) for h in html))
def show_reference_template(request, template):
"""
Shows the specified template as an HTML page. This is used only in debug mode to allow the UX team
to produce and work with static reference templates.
e.g. /template/ux/reference/container.html shows the template under ux/reference/container.html
Note: dynamic parameters can also be passed to the page.
e.g. /template/ux/reference/container.html?name=Foo
"""
try:
return render_to_response(template, request.GET.dict())
except TopLevelLookupException:
return HttpResponseNotFound("Couldn't find template {template}".format(template=template))
;(function (define) {
'use strict';
define([
'edx-ui-toolkit/js/dropdown-menu/dropdown-menu-view'
],
function (DropdownMenuView) {
return function() {
var dropdownMenuView = new DropdownMenuView({
el: '.js-header-user-menu'
}).postRender();
return dropdownMenuView;
};
});
}).call(this, define || RequireJS.define);
......@@ -23,6 +23,7 @@
'js/edxnotes/views/page_factory',
'js/financial-assistance/financial_assistance_form_factory',
'js/groups/views/cohorts_dashboard_factory',
'js/header_factory',
'js/search/course/course_search_factory',
'js/search/dashboard/dashboard_search_factory',
'js/student_account/logistration_factory',
......
......@@ -5,5 +5,9 @@
// Configuration
@import 'config';
@import 'base/variables';
// Extensions
@import 'shared-v2/base';
@import 'shared-v2/navigation';
@import 'shared-v2/header';
......@@ -139,7 +139,7 @@
.verification-process {
//overriding reset link style for nav/header
header.global {
.header-global {
.logo a:hover, .logo:active, .logo a:focus {
border: none;
......
......@@ -79,7 +79,7 @@
color: rgb(255, 255, 255);
}
.global {
.header-global {
h2 {
display: none;
}
......
......@@ -12,11 +12,11 @@ body.view-in-course {
}
// courseware header
header.global,
header.global.slim {
.header-global,
.header-global.slim {
width: auto;
.nav-wrapper {
.wrapper-header {
min-width: auto;
padding-right: 2%;
padding-left: 2%;
......
......@@ -72,7 +72,7 @@
}
}
header.global.slim {
.header-global.slim {
box-shadow: 0 1px 2px $shadow-l1;
height: auto;
padding: ($baseline/4) 0 ($baseline/2) 0;
......
......@@ -217,7 +217,7 @@
// aside
aside {
.cta {
.btn {
margin: 0 0 ($baseline*2) 0;
&:last-child {
......@@ -230,7 +230,7 @@
}
}
.cta-login {
.btn-login {
h3.title,
.instructions {
......@@ -238,7 +238,7 @@
margin-bottom: 0;
}
.cta-login-action {
.btn-login-action {
@extend %btn-secondary-grey-outline;
padding: ($baseline/10) ($baseline*0.75);
@include margin-left($baseline/4);
......@@ -631,7 +631,7 @@
// login
.view-login {
header.global .nav-courseware .cta-login {
.header-global .nav-courseware .btn-login {
display: none;
}
......@@ -657,7 +657,7 @@
// password reset
.view-passwordreset {
header.global .nav-courseware .cta-login {
.header-global .nav-courseware .btn-login {
display: none;
}
......
......@@ -456,7 +456,7 @@
}
// TYPE: facebook share
&.action-facebook, {
&.action-facebook {
color: $facebook-blue;
}
......@@ -931,7 +931,7 @@
@include float(left);
@include margin(0, 15px, 0, 0);
.btn, .cta {
.btn {
display: inline-block;
}
......@@ -954,7 +954,7 @@
}
}
.cta {
.btn {
@include float(left);
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
......@@ -1013,7 +1013,7 @@
&.course-status-certrendering {
.cta {
.btn {
margin-top: 2px;
}
}
......@@ -1093,7 +1093,7 @@
@include float(left);
position: relative;
.cta {
.btn {
@extend %btn-pl-green-base;
@include float(right);
}
......
// LMS base styles
.content-wrapper {
margin: 0 auto;
padding: 10px;
}
// LMS header styles
.header-global {
@extend %ui-depth1;
@include box-sizing(border-box);
position: relative;
width: 100%;
border-bottom: 4px solid $courseware-border-bottom-color;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
.wrapper-header {
@include clearfix();
@include box-sizing(border-box);
height: 74px;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%;
max-width: 1180px;
.logo {
@include float(left);
@include margin-right(39px);
@include margin-left(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.left {
@include float(left);
}
.right {
@include float(right);
}
.wrapper-user-menu {
@include float(right);
margin-top: 4px;
width: auto;
}
.dropdown-menu {
@include text-align(left);
top: inherit;
}
.list-inline {
&.nav-global {
margin-top: 12px;
}
&.nav-courseware {
margin-top: 5px;
}
.item {
font-weight: font-weight(semi-bold);
text-transform: uppercase;
&.active {
a {
text-decoration: none;
color: $link-color;
}
}
}
}
}
}
// LMS navigation styles
// skip navigation
.nav-skip {
font-size: font-size(small);
display: inline-block;
position: absolute;
left: 0;
top: -($baseline*30);
overflow: hidden;
background: $white;
border-bottom: 1px solid palette(grayscale, white);
padding: ($baseline*0.75) ($baseline/2);
&:focus,
&:active {
position: relative;
top: auto;
width: auto;
height: auto;
margin: 0;
}
}
@import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat
header.global {
.header-global {
@extend %ui-depth1;
border-bottom: 1px solid $gray-l1;
box-shadow: 0 1px 5px 0 $shadow-l1;
......@@ -330,7 +330,7 @@ header.global {
li, div {
display: inline-block;
.cta {
.btn {
@extend %m-btn-primary;
}
}
......@@ -340,7 +340,7 @@ header.global {
// marketing site design syncing
.view-register, .view-login, .view-passwordreset {
header.global nav {
.header-global nav {
width: 960px;
}
}
......@@ -360,7 +360,7 @@ header.global {
// ====================
// CASE: marketing/course discovery
header.global-new {
.header-global-new {
@extend %ui-depth1;
/* Temp. fix until applied globally */
@include box-sizing(border-box);
......@@ -852,13 +852,13 @@ header.global-new {
}
}
.view-register header.global-new .cta-register {
.view-register .header-global-new .btn-register {
text-decoration: none;
color: $courseware-hover-color;
border-bottom-color: $courseware-border-bottom-color;
}
.view-login header.global-new .cta-login {
.view-login .header-global-new .btn-login {
text-decoration: none;
color: $courseware-hover-color;
}
......@@ -866,7 +866,7 @@ header.global-new {
// marketing site design syncing
.view-register, .view-login {
header.global nav {
.header-global nav {
width: 960px;
}
}
......
......@@ -109,12 +109,12 @@
}
// reset: navigation (needed due to edX's new global-header styling)
.global-new .nav-global a {
.header-global-new .nav-global a {
padding-bottom: ($baseline +1);
}
// HACK: fix global header height in verification flow ECOM-1808
header.global {
.header-global {
height: 76px;
}
......
......@@ -62,6 +62,7 @@ from pipeline_mako import render_require_js_path_overrides
<%static:css group='style-vendor'/>
<%static:css group='${self.attr.main_css}'/>
% if not uses_pattern_library:
% if disable_courseware_js:
<%static:js group='base_vendor'/>
<%static:js group='base_application'/>
......@@ -69,6 +70,12 @@ from pipeline_mako import render_require_js_path_overrides
<%static:js group='main_vendor'/>
<%static:js group='application'/>
% endif
% else:
## TODO: Update to only bring in RequireJS
## https://openedx.atlassian.net/browse/FEDX-140
<%static:js group='base_vendor'/>
<%static:js group='base_application'/>
% endif
<script>
window.baseUrl = "${settings.STATIC_URL}";
......@@ -140,6 +147,7 @@ from pipeline_mako import render_require_js_path_overrides
% endif
<%block name="js_extra"/>
<%include file="widgets/segment-io-footer.html" />
<script type="text/javascript" src="${static.url('js/vendor/noreferrer.js')}" charset="utf-8"></script>
<script type="text/javascript" src="${static.url('js/utils/navigation.js')}" charset="utf-8"></script>
......
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/>
<%namespace file='main.html' import="login_query"/>
<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
from microsite_configuration.templatetags.microsite import platform_name
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
# App that handles subdomain specific branding
from branding import api as branding_api
# app that handles site status messages
from status.status import get_site_status_msg
%>
## Provide a hook for themes to inject branding on top.
<%block name="navigation_top" />
<%block>
<%
try:
course_id = course.id
except:
# can't figure out a better way to get at a possibly-defined course var
course_id = None
site_status_msg = get_site_status_msg(course_id)
%>
% if site_status_msg:
<div class="site-status">
<div class="inner-wrapper">
<span class="white-error-icon"></span>
<p>${site_status_msg}</p>
</div>
</div>
% endif
</%block>
<header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner">
<div class="${'rwd ' if responsive else ''}wrapper-header nav-container">
<h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="${marketing_link('ROOT')}" itemprop="url">
<%block name="navigation_logo">
<img src="${static.url(branding_api.get_logo_url())}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
</%block>
</a>
</h1>
% if course and not disable_courseware_header:
<h2 class="course-header">
<span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<span class="course-name">${course.display_name_with_default}</span>
</h2>
% endif
% if user.is_authenticated():
% if not course or disable_courseware_header:
% if not nav_hidden:
<nav aria-label="Main" class="nav-main">
<ul class="left nav-global authenticated">
<%block name="navigation_global_links_authenticated">
<li class="nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
<li class="nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</li>
<li class="nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</li>
</%block>
</ul>
</nav>
% endif
% endif
<ul class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="sr">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
<div class="label-username">${username}</div>
</a>
</li>
<li class="primary">
<button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</button>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
<%block name="navigation_dropdown_menu_links" >
<li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
<li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
</%block>
<li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
</ul>
</li>
</ul>
% if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
<ul class="user">
<li class="primary">
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")}
</a>
</li>
</ul>
% endif
% else:
<nav aria-label="Account" class="nav-account-management">
<div class="right nav-courseware">
<div class="nav-courseware-01">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</div>
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<div class="nav-courseware-02">
<a class="cta cta-register nav-courseware-button" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</div>
% else:
<div class="nav-courseware-02">
<a class="cta cta-register nav-courseware-button" href="/register">${_("Register")}</a>
</div>
% endif
% endif
</div>
</nav>
% endif
</div>
</header>
% if course:
<!--[if lte IE 9]>
<div class="ie-banner" aria-hidden="true">
${Text(_('{begin_strong}Warning:{end_strong} Your browser is not fully supported. We strongly recommend using {chrome_link} or {ff_link}.')).format(
begin_strong=HTML('<strong>'),
end_strong=HTML('</strong>'),
chrome_link=HTML('<a href="https://www.google.com/chrome" target="_blank">Chrome</a>'),
ff_link=HTML('<a href="http://www.mozilla.org/firefox" target="_blank">Firefox</a>'),
)
}
</div>
<![endif]-->
% endif
<%include file="help_modal.html"/>
......@@ -10,7 +10,6 @@ from lms.djangoapps.ccx.overrides import get_current_ccx
from microsite_configuration import microsite
from microsite_configuration.templatetags.microsite import platform_name
from openedx.core.djangolib.markup import Text, HTML
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
# App that handles subdomain specific branding
from branding import api as branding_api
......@@ -21,6 +20,15 @@ from status.status import get_site_status_msg
## Provide a hook for themes to inject branding on top.
<%block name="navigation_top" />
## Add UI Toolkit components if using the Pattern Library
% if uses_pattern_library:
<%block name="js_extra">
<%static:require_module module_name="js/header_factory" class_name="HeaderFactory">
HeaderFactory();
</%static:require_module>
</%block>
% endif
<%block>
<%
try:
......@@ -39,8 +47,8 @@ site_status_msg = get_site_status_msg(course_id)
</div>
% endif
</%block>
<header id="global-navigation" class="global ${"slim" if course else ""}" >
<nav class="nav-wrapper" aria-label="${_('Global')}">
<header id="global-navigation" class="header-global ${"slim" if course else ""}" >
<nav class="wrapper-header" aria-label="${_('Global')}">
<h1 class="logo">
<a href="${marketing_link('ROOT')}">
<%block name="navigation_logo">
......@@ -66,7 +74,7 @@ site_status_msg = get_site_status_msg(course_id)
<ol class="left nav-global authenticated">
<%block name="navigation_global_links_authenticated">
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
<li class="nav-global-01">
<li class="item nav-global-01">
<a href="${marketing_link('COURSES')}">${_('Explore courses')}</a>
</li>
% endif
......@@ -83,37 +91,16 @@ site_status_msg = get_site_status_msg(course_id)
</li>
% endif
%if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
<li>
<li class="item">
## Translators: This is short for "System administration".
<a href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
</li>
%endif
</%block>
</ol>
<ol class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="sr">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
<div class="label-username">${username}</div>
</a>
</li>
<li class="primary">
<button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></button>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
<%block name="navigation_dropdown_menu_links" >
<li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
<li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
</%block>
<li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
</ul>
</li>
</ol>
<%include file="user_dropdown.html"/>
% if should_display_shopping_cart_func() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
<ol class="user">
<li class="primary">
......@@ -124,18 +111,18 @@ site_status_msg = get_site_status_msg(course_id)
</ol>
% endif
% else:
<ol class="left nav-global">
<ol class="left list-inline nav-global">
<%block name="navigation_global_links">
% if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
<li class="nav-global-01">
<li class="item nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<li class="nav-global-02">
<li class="item nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Courses")}</a>
</li>
% endif
<li class="nav-global-03">
<li class="item nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
</li>
% endif
......@@ -144,32 +131,31 @@ site_status_msg = get_site_status_msg(course_id)
<%block name="navigation_other_global_links">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
<li class="nav-global-05">
<a class="cta cta-discovery" href="/courses">${_("Explore courses")}</a>
<li class="item nav-global-05">
<a class="btn" href="/courses">${_("Explore Courses")}</a>
</li>
%endif
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="nav-global-04">
<a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
<li class="item nav-global-04">
<a class="btn-neutral" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</li>
% else:
<li class="nav-global-04">
<a class="cta cta-register" href="/register${login_query()}">${_("Register")}</a>
<li class="item nav-global-04">
<a class="btn-neutral" href="/register${login_query()}">${_("Register")}</a>
</li>
% endif
% endif
</%block>
</ol>
<ol class="right nav-courseware">
<ol class="right nav-courseware list-inline">
<%block name="navigation_sign_in">
<li class="nav-courseware-01">
<li class="item nav-courseware-01">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
<a class="btn btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
<a class="btn btn-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</li>
......
......@@ -13,10 +13,10 @@ from django.core.urlresolvers import reverse
% if has_extauth_info is UNDEFINED:
<div class="cta cta-login">
<div class="btn-brand btn-login">
<h3 class="title">${_("Already registered?")}</h3>
<p class="instructions">
<a class="cta-login-action" href="${reverse('signin_user')}${login_query()}">
<a class="btn-login-action" href="${reverse('signin_user')}${login_query()}">
${_("Log in")}
</a>
</p>
......
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/>
<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
%>
% if uses_pattern_library:
<div class="wrapper-user-menu dropdown-menu-container logged-in js-header-user-menu">
<a href="${reverse('dashboard')}" class="menu-title">
<span class="sr-only">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="menu-image" src="${profile_image_url}" alt="">
${username}
</a>
<button type="button" class="menu-button button-more has-dropdown js-dropdown-button default-icon" aria-haspopup="true" aria-expanded="false" aria-controls="${_("Usermenu")}">
<span class="icon-fallback icon-fallback-img">
<span class="icon icon-angle-down" aria-hidden="true"></span>
<span class="text">${_("Usermenu dropdown")}</span>
</span>
</button>
<ul class="dropdown-menu list-divided is-hidden" id="${_("Usermenu")}" tabindex="-1">
<%block name="navigation_dropdown_menu_links" >
<li class="dropdown-item item has-block-link"><a href="${reverse('dashboard')}" class="action">${_("Dashboard")}</a></li>
<li class="dropdown-item item has-block-link"><a href="${reverse('learner_profile', kwargs={'username': user.username})}" class="action">${_("Profile")}</a></li>
<li class="dropdown-item item has-block-link"><a href="${reverse('account_settings')}" class="action">${_("Account")}</a></li>
</%block>
<li class="dropdown-item item has-block-link"><a href="${reverse('logout')}" role="menuitem" class="action">${_("Sign Out")}</a></li>
</ul>
</div>
% else:
<ol class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="sr">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
<div class="label-username">${username}</div>
</a>
</li>
<li class="primary">
<button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></button>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
${navigation_dropdown_menu_links()}
<li class="item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
</ul>
</li>
</ol>
% endif
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%block name="pagetitle">UX Reference</%block>
......@@ -12,10 +16,10 @@
<div class="inner-wrapper">
<div class="main-column">
<article class="window unit-body">
<h1>UX Style Reference</h1>
<h2>UX Style Reference</h2>
<section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
<h2>Page Types</h2>
<h3>Page Types</h3>
<ul>
<li><a href="pattern-library-test.html">Pattern Library test page</a></li>
</ul>
......
......@@ -10,17 +10,15 @@
<%block name="bodyclass">pattern-library</%block>
<%block name="content">
<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
<div class="example-set">
<div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
<span class="icon alert-icon icon-warning" aria-hidden="true"></span>
<h1>Pattern Library test page</h1>
<div class="alert alert-warning" role="alert" tabindex="-1">
<span class="icon alert-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<div class="alert-message">
<p class="alert-copy">
Interesting pattern library content to come...
</p>
</div>
</div>
</div>
</%block>
......@@ -966,7 +966,7 @@ if settings.DEBUG:
)
# in debug mode, allow any template to be rendered (most useful for UX reference templates)
urlpatterns += url(r'^template/(?P<template>.+)$', 'debug.views.show_reference_template'),
urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
if 'debug_toolbar' in settings.INSTALLED_APPS:
import debug_toolbar
......
"""
Views that are only activated when the project is running in development mode.
These views will NOT be shown on production: trying to access them will result
in a 404 error.
"""
from edxmako.shortcuts import render_to_response
from mako.exceptions import TopLevelLookupException
from django.http import HttpResponseNotFound
def show_reference_template(request, template):
"""
Shows the specified template as an HTML page. This is used only in
debug mode to allow the UX team to produce and work with static
reference templates.
e.g. http://localhost:8000/template/ux/reference/index.html
shows the template from ux/reference/index.html
Note: dynamic parameters can also be passed to the page.
e.g. /template/ux/reference/index.html?name=Foo
"""
try:
context = {
"disable_courseware_js": True,
"uses_pattern_library": True
}
context.update(request.GET.dict())
return render_to_response(template, context)
except TopLevelLookupException:
return HttpResponseNotFound("Couldn't find template {template}".format(template=template))
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/>
<%namespace file='main.html' import="login_query"/>
<%!
......@@ -9,13 +10,20 @@ from django.utils.translation import ugettext as _
import branding
# app that handles site status messages
from status.status import get_site_status_msg
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
%>
## Provide a hook for themes to inject branding on top.
<%block name="navigation_top" />
## Add UI Toolkit components if using the Pattern Library
% if uses_pattern_library:
<%block name="js_extra">
<%static:require_module module_name="js/header_factory" class_name="HeaderFactory">
HeaderFactory();
</%static:require_module>
</%block>
% endif
<%block>
<%
try:
......@@ -35,8 +43,12 @@ site_status_msg = get_site_status_msg(course_id)
% endif
</%block>
<header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner">
<div class="${'rwd ' if responsive else ''}wrapper-header nav-container">
% if uses_pattern_library:
<header class="header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
% else:
<header class="${"header-global slim" if course and not disable_courseware_header else "header-global-new"}" aria-label="Main" role="banner">
% endif
<div class="${"rwd" if responsive else ""} wrapper-header nav-container">
<h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="${marketing_link('ROOT')}" itemprop="url">
<%block name="navigation_logo">
......@@ -58,16 +70,16 @@ site_status_msg = get_site_status_msg(course_id)
% if not course or disable_courseware_header:
% if not nav_hidden or show_program_listing:
<nav aria-label="Main" class="nav-main">
<ul class="left nav-global authenticated">
<ul class="left list-inline nav-global authenticated">
% if not nav_hidden:
<%block name="navigation_global_links_authenticated">
<li class="nav-global-01">
<li class="item nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
<li class="nav-global-02">
<li class="item nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</li>
<li class="nav-global-03">
<li class="item nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</li>
</%block>
......@@ -89,30 +101,7 @@ site_status_msg = get_site_status_msg(course_id)
% endif
% endif
<ul class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="sr">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="user-image-frame" src="${profile_image_url}" alt="">
<div class="label-username">${username}</div>
</a>
</li>
<li class="primary">
<a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
<%block name="navigation_dropdown_menu_links" >
<li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
<li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
</%block>
<li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
</ul>
</li>
</ul>
<%include file="user_dropdown.html"/>
% if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
<ul class="user">
......@@ -126,24 +115,24 @@ site_status_msg = get_site_status_msg(course_id)
% else:
<nav aria-label="Account" class="nav-account-management">
<div class="right nav-courseware">
<div class="nav-courseware-01">
<div class="right nav-courseware list-inline">
<div class="item nav-courseware-01">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
<a class="btn btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
<a class="btn btn-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</div>
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<div class="nav-courseware-02">
<a class="cta cta-register nav-courseware-button" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
<div class="item nav-courseware-02">
<a class="btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</div>
% else:
<div class="nav-courseware-02">
<a class="cta cta-register nav-courseware-button" href="/register">${_("Register")}</a>
<div class="item nav-courseware-02">
<a class="btn-neutral btn-register" href="/register">${_("Register")}</a>
</div>
% endif
% endif
......
......@@ -138,11 +138,11 @@ site_status_msg = get_site_status_msg(course_id)
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="nav-global-04">
<a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
<a class="btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
</li>
% else:
<li class="nav-global-04">
<a class="cta cta-register" href="/register">${_("Register Now")}</a>
<a class="btn-neutral btn-register" href="/register">${_("Register Now")}</a>
</li>
% endif
% endif
......@@ -152,9 +152,9 @@ site_status_msg = get_site_status_msg(course_id)
<li class="nav-courseware-01">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
<a class="btn-brand btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
<a class="btn-brand btn-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</li>
......
......@@ -11,10 +11,10 @@ from django.core.urlresolvers import reverse
% if has_extauth_info is UNDEFINED:
<div class="cta cta-login">
<div class="btn-brand btn-login">
<h3 class="title">${_("Already registered?")}</h3>
<p class="instructions">
<a class="cta-login-action" href="${reverse('signin_user')}${login_query()}">
<a class="btn-login-action" href="${reverse('signin_user')}${login_query()}">
${_("Log in")}
</a>
</p>
......
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