112 lines
4.5 KiB
HTML
112 lines
4.5 KiB
HTML
<%inherit file="base.html" />
|
|
<%block name="title">Course Checklists</%block>
|
|
<%block name="bodyclass">is-signedin course uxdesign checklists</%block>
|
|
|
|
<%namespace name='static' file='static_content.html'/>
|
|
<%block name="jsextra">
|
|
|
|
<script type="text/javascript" src="${static.url('js/views/checklists_view.js')}"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
|
|
var editor = new CMS.Views.Checklists({
|
|
el: $('.course-checklists')
|
|
});
|
|
|
|
// No need to call render yet-- state is not being injected.
|
|
// editor.render();
|
|
|
|
});
|
|
|
|
</script>
|
|
</%block>
|
|
|
|
|
|
<%block name="content">
|
|
<div class="wrapper-mast wrapper">
|
|
<header class="mast has-actions has-subtitle">
|
|
<div class="title">
|
|
<span class="title-sub">Tools</span>
|
|
<h1 class="title-1">Course Tasks & Checklists</h1>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
|
|
<div class="wrapper-content wrapper">
|
|
<section class="content">
|
|
<div class="introduction">
|
|
<p class="copy">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|
</div>
|
|
|
|
<article class="content-primary" role="main">
|
|
<form id="course-checklists" class="course-checklists" method="post" action="">
|
|
<h2 class="title title-3 sr">Current Checklists</h2>
|
|
|
|
|
|
% for checklist in checklists:
|
|
<section class="course-checklist" id=${'course-checklist' + str(loop.index)}>
|
|
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
|
|
<header>
|
|
<h3 class="checklist-title title-2" title="Collapse/Expand this Checklist">
|
|
<i class="ss-icon ss-symbolicons-standard icon-arrow ui-toggle-expansion">▾</i>
|
|
|
|
<i class="ss-icon ss-symbolicons-standard icon-confirm">✓</i>${checklist['short_description']}</h3>
|
|
|
|
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
|
|
</header>
|
|
|
|
<ul class="list list-tasks">
|
|
|
|
% for item in checklist['items']:
|
|
<li class="task">
|
|
<label for=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}>
|
|
<input type="checkbox" class="task-input" name=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
|
|
id=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
|
|
value=${item['is_checked']}>
|
|
|
|
<div class="task-details">
|
|
<h4 class="task-name title title-3">${item['short_description']}</h4>
|
|
<p class="task-description">${item['long_description']}</p>
|
|
</div>
|
|
</label>
|
|
|
|
% if item['action_text'] is not '' and item['action_url'] is not '':
|
|
<ul class="list-actions task-actions">
|
|
<li>
|
|
<a href=${item['action_url']} class="action action-primary">${item['action_text']}</a>
|
|
</li>
|
|
</ul>
|
|
% endif
|
|
</li>
|
|
% endfor
|
|
|
|
</ul>
|
|
</section>
|
|
% endfor
|
|
</form>
|
|
</article>
|
|
|
|
<aside class="content-supplementary" role="complimentary">
|
|
<div class="bit">
|
|
<h3 class="title title-3">What are Checklists?</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
|
|
</div>
|
|
|
|
<div class="bit">
|
|
<h3 class="title title-3">Studio Checklists</h3>
|
|
<nav class="nav-page checklists-current">
|
|
<ol>
|
|
% for checklist in checklists:
|
|
<li class="nav-item">
|
|
<a href="${'#course-checklist' + str(loop.index)}">${checklist['short_description']}</a>
|
|
</li>
|
|
% endfor
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</div>
|
|
</%block>
|