541d20ef83
This commit implements STUD-1490, allowing creation of components on the container page. It also enables the delete and duplicate buttons now that new content can be created that would benefit. Note that it also creates shared functionality for adding components, and refactors the unit page to use it too.
183 lines
7.4 KiB
HTML
183 lines
7.4 KiB
HTML
<%inherit file="base.html" />
|
|
<%def name="online_help_token()"><% return "pages" %></%def>
|
|
<%namespace name='static' file='static_content.html'/>
|
|
<%!
|
|
from django.utils.translation import ugettext as _
|
|
from django.core.urlresolvers import reverse
|
|
from xmodule.tabs import StaticTab
|
|
%>
|
|
<%block name="title">${_("Pages")}</%block>
|
|
<%block name="bodyclass">is-signedin course view-static-pages</%block>
|
|
|
|
<%block name="header_extras">
|
|
% for template_name in ["basic-modal", "modal-button", "edit-xblock-modal", "editor-mode-button"]:
|
|
<script type="text/template" id="${template_name}-tpl">
|
|
<%static:include path="js/${template_name}.underscore" />
|
|
</script>
|
|
% endfor
|
|
</%block>
|
|
|
|
<%block name="jsextra">
|
|
<script type='text/javascript'>
|
|
require(["js/models/explicit_url", "coffee/src/views/tabs",
|
|
"xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
|
|
function (TabsModel, TabsEditView) {
|
|
var model = new TabsModel({
|
|
id: "${course_locator}",
|
|
explicit_url: "${course_locator.url_reverse('tabs')}"
|
|
});
|
|
|
|
new TabsEditView({
|
|
el: $('.tab-list'),
|
|
model: model,
|
|
mast: $('.wrapper-mast')
|
|
});
|
|
});
|
|
</script>
|
|
</%block>
|
|
|
|
<%block name="content">
|
|
<div class="wrapper-mast wrapper">
|
|
<header class="mast has-actions has-subtitle">
|
|
<h1 class="page-header">
|
|
<small class="subtitle">${_("Content")}</small>
|
|
## Translators: Pages refer to the tabs that appear in the top navigation of each course.
|
|
<span class="sr">> </span>${_("Pages")}
|
|
</h1>
|
|
|
|
<nav class="nav-actions">
|
|
<h3 class="sr">${_("Page Actions")}</h3>
|
|
<ul>
|
|
<li class="nav-item">
|
|
<a href="#" class="button new-button new-tab"><i class="icon-plus"></i> ${_("New Page")}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</div>
|
|
|
|
<div class="wrapper-content wrapper">
|
|
<section class="content">
|
|
<article class="content-primary" role="main">
|
|
|
|
<div class="notice-incontext">
|
|
<p class="copy">${_("Note: Pages are publicly visible. If users know the URL of a page, they can view the page even if they are not registered for or logged in to your course.")}</p>
|
|
</div>
|
|
|
|
|
|
<div class="inner-wrapper">
|
|
<article class="unit-body">
|
|
|
|
<div class="tab-list">
|
|
<ol class="course-nav-list course components">
|
|
|
|
% for tab in tabs_to_render:
|
|
<%
|
|
css_class = "course-tab"
|
|
if tab.is_movable:
|
|
css_class = css_class + " is-movable"
|
|
elif (not tab.is_movable) and (not tab.is_hideable):
|
|
css_class = css_class + " is-fixed"
|
|
%>
|
|
|
|
% if isinstance(tab, StaticTab):
|
|
<li class="component ${css_class}" data-locator="${tab.locator}" data-tab-id="${tab.tab_id}"></li>
|
|
|
|
% else:
|
|
<li class="course-nav-item ${css_class}" data-tab-id="${tab.tab_id}">
|
|
<div class="course-nav-item-header">
|
|
|
|
% if tab.is_collection:
|
|
|
|
<h3 class="title-sub">${_(tab.name)}</h3>
|
|
<ul class="course-nav-item-children">
|
|
% for item in tab.items(context_course):
|
|
<li class="course-nav-item-child title">
|
|
${_(item.name)}
|
|
</li>
|
|
% endfor
|
|
</ul>
|
|
|
|
% else:
|
|
<h3 class="title">${_(tab.name)}</h3>
|
|
% endif
|
|
</div>
|
|
|
|
<div class="course-nav-item-actions wrapper-actions-list">
|
|
<ul class="actions-list">
|
|
|
|
% if tab.is_hideable:
|
|
<li class="action-item action-visible">
|
|
<label><span class="sr">${_("Show this page")}</span></label>
|
|
% if tab.is_hidden:
|
|
<input type="checkbox" class="toggle-checkbox" data-tooltip="${_('Show/hide page')}" checked />
|
|
% else:
|
|
<input type="checkbox" class="toggle-checkbox" data-tooltip="${_('Show/hide page')}" />
|
|
% endif
|
|
<div class="action-button"><i class="icon-eye-open"></i><i class="icon-eye-close"></i></div>
|
|
</li>
|
|
% endif
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
% if tab.is_movable:
|
|
<div class="drag-handle action" data-tooltip="${_('Drag to reorder')}">
|
|
<span class="sr">${_("Drag to reorder")}</span>
|
|
</div>
|
|
% else:
|
|
<div class="drag-handle is-fixed" data-tooltip="${_('This page cannot be reordered')}">
|
|
<span class="sr">${_("This page cannot be reordered")}</span>
|
|
</div>
|
|
% endif
|
|
</li>
|
|
|
|
% endif
|
|
% endfor
|
|
|
|
<li class="new-component-item"></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="add-pages">
|
|
<p>${_("You can add additional custom pages to your course.")} <a href="#" class="button new-button new-tab"><i class="icon-plus"></i>${_("Add a New Page")}</a></p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</article>
|
|
|
|
<aside class="content-supplementary" role="complimentary">
|
|
<div class="bit">
|
|
<h3 class="title-3">${_("What are pages?")}</h3>
|
|
<p>${_("Pages are listed horizontally at the top of your course. Default pages (Courseware, Course info, Discussion, Wiki, and Progress) are followed by textbooks and custom pages that you create.")}</p>
|
|
</div>
|
|
<div class="bit">
|
|
<h3 class="title-3">${_("Custom pages")}</h3>
|
|
<p>${_("You can create and edit custom pages to provide students with additional course content. For example, you can create pages for the grading policy, course slides, and a course calendar. ")} </p>
|
|
</div>
|
|
<div class="bit">
|
|
<h3 class="title-3">${_("How do pages look to students in my course?")}</h3>
|
|
<p>${_("Students see the default and custom pages at the top of your course and use these links to navigate.")} <br /> <a rel="modal" href="#preview-lms-staticpages">${_("See an example")}</a></p>
|
|
</div>
|
|
</aside>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
<div class="content-modal" id="preview-lms-staticpages">
|
|
<h3 class="title">${_("Pages in Your Course")}</h3>
|
|
<figure>
|
|
<img src="${static.url("img/preview-lms-staticpages.png")}" alt="${_('Preview of Pages in your course')}" />
|
|
<figcaption class="description">${_("Pages appear in your course's top navigation bar. The default pages (Courseware, Course Info, Discussion, Wiki, and Progress) are followed by textbooks and custom pages.")}</figcaption>
|
|
</figure>
|
|
|
|
<a href="#" rel="view" class="action action-modal-close">
|
|
<i class="icon-remove-sign"></i>
|
|
<span class="label">${_("close modal")}</span>
|
|
</a>
|
|
</div>
|
|
</%block>
|