FED clean up of studio outline page

This commit is contained in:
Frances Botsford
2013-12-04 11:13:23 -05:00
parent 724cc02556
commit a2d5500f9e
14 changed files with 996 additions and 770 deletions

View File

@@ -0,0 +1,19 @@
<section class="courseware-section new-section">
<header>
<a href="#" data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
<div class="item-details">
<h3 class="section-name">
<span class="section-name-span">Click here to set the section name</span>
<form class="section-name-form">
<input type="text" value="${_('New Section Name')}" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
data-category="${new_section_category}" value="${_('Save')}" />
<input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
</form>
</div>
<div class="item-actions">
<a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
</div>
</header>
</section>

View File

@@ -0,0 +1,15 @@
<section class="courseware-section new-section is-collapsible is-draggable">
<header>
<a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
<div class="item-details">
<h3 class="section-name">
<form class="section-name-form">
<input type="text" value="New Section Name" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
data-category="${new_section_category}" value="Save" />
<input type="button" class="new-section-name-cancel" value="Cancel" />
</form>
</h3>
</div>
</header>
</section>

View File

@@ -0,0 +1,18 @@
<li class="collapsed">
<div class="section-item editing">
<form class="new-subsection-form">
<span class="subsection-name">
<input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
</span>
<input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
<input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
</form>
</div>
<ol>
<li>
<a href="unit.html" class="new-unit-item">
<i class="icon-plus"></i> ${_('New Unit')}
</a>
</li>
</ol>
</li>

View File

@@ -0,0 +1,3 @@
<div class="no-outline-content">
<p><%= gettext("You haven't added any sections to your course outline.") %><a href="#" class="button new-button"><i class="icon-plus"></i><%= gettext("Add your first section") %></a></p>
</div>

View File

@@ -7,7 +7,7 @@
from xmodule.modulestore.django import loc_mapper
%>
<%block name="title">${_("Course Outline")}</%block>
<%block name="bodyclass">is-signedin course view-outline</%block>
<%block name="bodyclass">is-signedin course view-outline feature-edit-dialog</%block>
<%namespace name='static' file='static_content.html'/>
<%namespace name="units" file="widgets/units.html" />
@@ -49,64 +49,71 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
<%block name="header_extras">
<script type="text/template" id="new-section-template">
<section class="courseware-section branch new-section">
<section class="courseware-section new-section is-collapsible is-draggable">
<header>
<a href="#" data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
<a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
<div class="item-details">
<h3 class="section-name">
<form class="section-name-form">
<input type="text" value="${_('New Section Name')}" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
data-category="${new_section_category}" value="${_('Save')}" />
<input type="button" class="new-section-name-cancel" value="${_('Cancel')}" /></h3>
</form>
<form class="section-name-form">
<input type="text" value="${_('New Section Name')}" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
data-category="${new_section_category}" value="${_('Save')}" />
<input type="button" class="new-section-name-cancel" value="${_('Cancel')}" />
</form>
</h3>
</div>
</header>
</section>
</script>
<script type="text/template" id="blank-slate-template">
<section class="courseware-section branch new-section">
<header>
<a href="#" data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
<div class="item-details">
<h3 class="section-name">
<span class="section-name-span">Click here to set the section name</span>
<form class="section-name-form">
<input type="text" value="${_('New Section Name')}" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
data-category="${new_section_category}" value="${_('Save')}" />
<input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
</form>
</div>
<div class="item-actions">
<a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
</div>
</header>
</section>
<section class="courseware-section new-section">
<header>
<a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
<div class="item-details">
<h3 class="section-name">
<span class="section-name-span">Click here to set the section name</span>
<form class="section-name-form">
<input type="text" value="${_('New Section Name')}" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
data-category="${new_section_category}" value="${_('Save')}" />
<input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
</form>
</div>
<div class="item-actions">
<a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
</div>
</header>
</section>
</script>
<script type="text/template" id="new-subsection-template">
<li class="branch collapsed">
<div class="section-item editing">
<form class="new-subsection-form">
<span class="folder-icon"></span>
<span class="subsection-name">
<input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
</span>
<input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
<input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
</form>
</div>
<ol>
<li>
<a href="unit.html" class="new-unit-item">
<span class="new-unit-icon"></span>${_('New Unit')}
</a>
</li>
</ol>
</li>
<li class="collapsed">
<div class="section-item editing">
<form class="new-subsection-form">
<span class="subsection-name">
<input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
</span>
<input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
<input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
</form>
</div>
<ol>
<li>
<a href="unit.html" class="new-unit-item">
<i class="icon-plus"></i> ${_('New Unit')}
</a>
</li>
</ol>
</li>
</script>
<script type="text/template" id="no-outline-content">
<div class="no-outline-content">
<p>${_("You haven't added any sections to your course outline yet.")} <a href="#" class="button new-button"><i class="icon-plus"></i>${_("Add your first section")}</a></p>
</div>
</script>
</%block>
@@ -135,130 +142,182 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<div class="wrapper-dnd">
<%
course_locator = loc_mapper().translate_location(
context_course.location.course_id, context_course.location, False, True
)
%>
<article class="courseware-overview" data-locator="${course_locator}">
% for section in sections:
<%
section_locator = loc_mapper().translate_location(
context_course.location.course_id, section.location, False, True
)
%>
<section class="courseware-section branch is-draggable" data-parent="${course_locator}"
data-locator="${section_locator}">
<%include file="widgets/_ui-dnd-indicator-before.html" />
<div class="wrapper-dnd">
<%
course_locator = loc_mapper().translate_location(
context_course.location.course_id, context_course.location, False, True
)
%>
<article class="courseware-overview" data-locator="${course_locator}">
% for section in sections:
<%
section_locator = loc_mapper().translate_location(
context_course.location.course_id, section.location, False, True
)
%>
<section class="courseware-section is-collapsible is-draggable" data-parent="${course_locator}"
data-locator="${section_locator}">
<%include file="widgets/_ui-dnd-indicator-before.html" />
<header>
<a href="#" data-tooltip="${_('Expand/collapse this section')}" class="expand-collapse-icon collapse"></a>
<header class="section">
<a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
<div class="item-details" data-locator="${section_locator}">
<h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
<div class="section-published-date">
<%
if section.start is not None:
start_date_str = section.start.strftime('%m/%d/%Y')
start_time_str = section.start.strftime('%H:%M')
else:
start_date_str = ''
start_time_str = ''
%>
%if section.start is None:
<span class="published-status">${_("This section has not been released.")}</span>
<a href="#" class="schedule-button" data-date="" data-time="" data-locator="${section_locator}">${_("Schedule")}</a>
%else:
<span class="published-status"><strong>${_("Will Release:")}</strong>
${date_utils.get_default_time_display(section.start)}</span>
<a href="#" class="edit-button" data-date="${start_date_str}"
data-time="${start_time_str}" data-locator="${section_locator}">${_("Edit")}</a>
%endif
</div>
</div>
<div class="item-actions">
<a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle"></span>
</div>
</header>
<div class="subsection-list">
<div class="list-header">
<a href="#" class="new-subsection-item" data-category="${new_subsection_category}">
<span class="new-folder-icon"></span>${_("New Subsection")}
</a>
</div>
<ol class="sortable-subsection-list">
% for subsection in section.get_children():
<%
subsection_locator = loc_mapper().translate_location(
context_course.location.course_id, subsection.location, False, True
)
%>
<li class="courseware-subsection branch collapsed id-holder is-draggable"
data-parent="${section_locator}" data-locator="${subsection_locator}">
<%include file="widgets/_ui-dnd-indicator-before.html" />
<div class="section-item">
<div class="details">
<a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="expand-collapse-icon expand"></a>
<a href="${subsection_locator.url_reverse('subsection')}">
<span class="folder-icon"></span>
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
</a>
</div>
<div class="gradable-status" data-initial-status="${subsection.format if subsection.format is not None else _('Not Graded')}">
</div>
<div class="item-actions">
<a href="#" data-tooltip="${_('Delete this subsection')}" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>
<span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle"></span>
</div>
<div class="item-details" data-locator="${section_locator}">
<h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
</div>
${units.enum_units(subsection)}
<div class="item-actions">
<%include file="widgets/_ui-dnd-indicator-after.html" />
</li>
% endfor
<li class="ui-splint ui-splint-indicator">
<%include file="widgets/_ui-dnd-indicator-initial.html" />
</li>
</ol>
</div>
<ul class="actions-list">
<%include file="widgets/_ui-dnd-indicator-after.html" />
</section>
% endfor
</article>
</div>
</div>
<li class="actions-item pubdate">
<div class="section-published-date">
<%
if section.start is not None:
start_date_str = section.start.strftime('%m/%d/%Y')
start_time_str = section.start.strftime('%H:%M')
else:
start_date_str = ''
start_time_str = ''
%>
%if section.start is None:
<span class="published-status">${_("This section is not scheduled for release")}</span>
<a href="#" class="edit-release-date action" data-date="" data-time="" data-locator="${section_locator}"><i class="icon-time"></i> <span class="sr">${_("Schedule")}</span></a>
%else:
<span class="published-status"><strong>${_("Release date:")}</strong>
${date_utils.get_default_time_display(section.start)}</span>
<a href="#" class="edit-release-date action" data-date="${start_date_str}" data-time="${start_time_str}" data-locator="${section_locator}"><i class="icon-time"></i> <span class="sr">${_("Edit section release date")}</span></a>
%endif
</div>
</li>
<li class="actions-item delete">
<a href="#" data-tooltip="${_('Delete this section')}" class="action delete-section-button"><i class="icon-trash"></i> <span class="sr">Delete section</span></a>
</li>
<li class="actions-item drag">
<span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle action"><i class="icon-ellipsis-vertical"></i><span class="sr"> ${_("Drag to reorder section")}</span></span>
</li>
</ul>
</div>
</header>
<div class="subsection-list">
<ol class="sortable-subsection-list">
% for subsection in section.get_children():
<%
subsection_locator = loc_mapper().translate_location(
context_course.location.course_id, subsection.location, False, True
)
%>
<li class="courseware-subsection collapsed id-holder is-draggable"
data-parent="${section_locator}" data-locator="${subsection_locator}">
<%include file="widgets/_ui-dnd-indicator-before.html" />
<div class="section-item">
<div class="details">
<a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this subsection')}</span></a>
<a href="${subsection_locator.url_reverse('subsection')}">
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
</a>
</div>
<div class="item-actions">
<ul class="actions-list">
<li class="actions-item grades">
<div class="gradable-status" data-initial-status="${subsection.format if subsection.format is not None else _('Not Graded')}"></div>
</li>
<li class="actions-item delete">
<a href="#" data-tooltip="${_('Delete this subsection')}" class="action delete-subsection-button"><i class="icon-trash"></i> <span class="sr">${_("Delete subsection")}</span></a>
</li>
<li class="actions-item drag">
<span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle action"><i class="icon-ellipsis-vertical"></i></span>
</li>
</ul>
</div>
</div>
${units.enum_units(subsection)}
<%include file="widgets/_ui-dnd-indicator-after.html" />
</li>
% endfor
<li class="ui-splint ui-splint-indicator">
<%include file="widgets/_ui-dnd-indicator-initial.html" />
</li>
</ol>
<div class="list-header new-subsection">
<a href="#" class="new-subsection-item" data-category="${new_subsection_category}">
<i class="icon-plus"></i> ${_("New Subsection")}
</a>
</div>
</div>
<%include file="widgets/_ui-dnd-indicator-after.html" />
</section>
% endfor
</article>
</div>
</article>
<aside class="content-supplementary" role="complimentary">
<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>
<footer></footer>
<div class="edit-subsection-publish-settings showAsModal">
<div class="settings">
<h3>${_("Section Release Date")}</h3>
<div class="picker datepair">
<div class="field field-start-date">
<label for="">${_("Release Day")}</label>
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
</div>
<div class="field field-start-time">
<label for="">${_("Release Time")} (<abbr title="${_("Coordinated Universal Time")}">UTC</abbr>)</label>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
</div>
<div
class="wrapper wrapper-dialog wrapper-dialog-edit-sectionrelease edit-section-publish-settings"
aria-describedby="dialog-edit-sectionrelease-description"
aria-labelledby="dialog-edit-sectionrelease-title"
aria-hidden=""
role="dialog">
<div class="dialog confirm">
<form class="edit-sectionrelease-dialog" method="POST" action="#" enctype="multipart/form-data">
<div class="form-content">
<h2 class="title dialog-edit-sectionrelease-title">${_("Section Release Date")}</h2>
<p id="dialog-edit-sectionrelease-description" class="message">${_('On the date set below, this section - {name} - will be released to students. Any units marked private will only be visible to admins.').format(name='<strong class="section-name"></strong>')}</p>
<ul class="list-input picker datepair">
<li class="field field-start-date">
<label for="start_date">${_("Release Day")}</label>
<input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
</li>
<li class="field field-start-time">
<label for="start_time">${_("Release Time")} (<abbr title="${_("Coordinated Universal Time")}">UTC</abbr>)</label>
<input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
</li>
</ul>
</div>
<div class="actions">
<h3 class="sr">${_("Form 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-secondary action-cancel">${_("Cancel")}</a>
</li>
</ul>
</div>
</form>
<div class="description">
<p>${_('On the date set above, this section - {name} - will be released to students. Any units marked private will only be visible to admins.').format(name='<strong class="section-name"></strong>')}</p>
</div>
</div>
<a href="#" class="save-button">${_("Save")}</a><a href="#" class="cancel-button">${_("Cancel")}</a>
</div>
</div>
</%block>

View File

@@ -191,7 +191,6 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
<ol>
<li>
<a href="${subsection_url}" class="section-item">
<span class="folder-icon"></span>
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
</a>
${units.enum_units(subsection, actions=False, selected=unit.location)}

View File

@@ -18,7 +18,7 @@ This def will enumerate through a passed in subsection and list all of the units
<%
unit_locator = loc_mapper().translate_location(context_course.location.course_id, unit.location, False, True)
%>
<li class="courseware-unit leaf unit is-draggable" data-locator="${unit_locator}"
<li class="courseware-unit unit is-draggable" data-locator="${unit_locator}"
data-parent="${subsection_locator}">
<%include file="_ui-dnd-indicator-before.html" />
@@ -32,14 +32,18 @@ This def will enumerate through a passed in subsection and list all of the units
%>
<div class="section-item ${selected_class}">
<a href="${unit_locator.url_reverse('unit')}" class="${unit_state}-item">
<span class="${unit.scope_ids.block_type}-icon"></span>
<span class="unit-name">${unit.display_name_with_default}</span>
</a>
% if actions:
<div class="item-actions">
<a href="#" data-tooltip="Delete this unit" class="delete-button" data-locator="${unit_locator}">
<span class="delete-icon"></span></a>
<span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle"></span>
<ul class="actions-list">
<li class="actions-item delete">
<a href="#" data-tooltip="Delete this unit" class="delete-unit-button action" data-locator="${unit_locator}"><i class="icon-trash"></i><span class="sr">Delete unit</span></a>
</li>
<li class="actions-item drag">
<span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle action"><i class="icon-ellipsis-vertical"></i></span>
</li>
</ul>
</div>
% endif
</div>
@@ -47,11 +51,11 @@ This def will enumerate through a passed in subsection and list all of the units
<%include file="_ui-dnd-indicator-after.html" />
</li>
% endfor
<li>
<li class="courseware-unit add-new-unit">
<%include file="_ui-dnd-indicator-initial.html" />
<a href="#" class="new-unit-item" data-category="${new_unit_category}" data-parent="${subsection_locator}">
<span class="new-unit-icon"></span>New Unit
<i class="icon-plus"></i> New Unit
</a>
</li>
</ol>