3b0f71482e
* added in fixed state markup/logic * added in collection markup/logic * revised styling for page titles, collection, and fixed elements
194 lines
7.9 KiB
HTML
194 lines
7.9 KiB
HTML
<%inherit file="base.html" />
|
|
<%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="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>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</div>
|
|
|
|
<div class="wrapper-content wrapper">
|
|
<section class="content">
|
|
<article class="content-primary" role="main">
|
|
|
|
<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:
|
|
% if isinstance(tab, StaticTab):
|
|
<li class="component course-tab sortable-tab" data-locator="${tab.locator}" data-tab-id="${tab.tab_id}"></li>
|
|
% else:
|
|
|
|
<%
|
|
tab_name = _(tab.name)
|
|
item_names_formatted = ""
|
|
item_names = []
|
|
num_items = 0
|
|
if tab.is_collection:
|
|
item_names = [_(item.name) for item in tab.items(context_course)]
|
|
num_items = sum(1 for item in tab.items(context_course))
|
|
css_class = "course-nav-item course-nav-tab course-tab"
|
|
if tab.is_movable:
|
|
css_class = css_class + " sortable-tab"
|
|
%>
|
|
|
|
% if tab.is_hideable or tab.is_movable:
|
|
<li class="${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_name in item_names:
|
|
<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" 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>
|
|
|
|
% else:
|
|
<li class="course-nav-item course_tab is-fixed" data-tab-id="${tab.tab_id}">
|
|
<div class="course-nav-item-header">
|
|
<h3 class="title">${tab_name}</h3>
|
|
|
|
% if tab.is_collection:
|
|
<ul class="course-nav-item-children">
|
|
% for item_name in item_names:
|
|
<li class="course-nav-item-child">
|
|
${item_name}
|
|
</li>
|
|
% endfor
|
|
</ul>
|
|
% endif
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="drag-handle is-fixed" data-tooltip="${_('This page cannot be reordered')}">
|
|
<span class="sr">${_("This page cannot be reordered")}</span>
|
|
</div>
|
|
</li>
|
|
% endif
|
|
|
|
% 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>
|