Redesign sequence nav, move breadcrumbs out of sequence container

TNL-5555
This commit is contained in:
Brian Jacobel
2016-09-27 16:29:24 -04:00
parent caef3fe86c
commit 8b0b4f5ce2
7 changed files with 139 additions and 182 deletions

View File

@@ -2,20 +2,20 @@
<%! from django.utils.translation import ugettext as _ %>
<div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" data-next-url="${next_url}" data-prev-url="${prev_url}">
<div class="path"></div>
% if banner_text:
<div class="pattern-library-shim alert alert-information subsection-header" tabindex="-1">
<span class="pattern-library-shim icon alert-icon fa fa-bullhorn" aria-hidden="true"></span>
<div class="pattern-library-shim alert-message">
<p class="pattern-library-shim alert-copy">
${banner_text}
</p>
</div>
% if banner_text:
<div class="pattern-library-shim alert alert-information subsection-header" tabindex="-1">
<span class="pattern-library-shim icon alert-icon fa fa-bullhorn" aria-hidden="true"></span>
<div class="pattern-library-shim alert-message">
<p class="pattern-library-shim alert-copy">
${banner_text}
</p>
</div>
% endif
</div>
% endif
<div class="sequence-nav">
<button class="sequence-nav-button button-previous">
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
<span>${_('Previous')}</span>
</button>
<nav class="sequence-list-wrapper" aria-label="${_('Unit')}">
<ol id="sequence-list">
@@ -40,7 +40,8 @@
</ol>
</nav>
<button class="sequence-nav-button button-next">
<span class="icon fa fa-chevron-next" aria-hidden="true"></span><span class="sr">${_('Next')}</span>
<span>${_('Next')}</span>
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
</button>
</div>
@@ -58,10 +59,12 @@
<nav class="sequence-bottom" aria-label="${_('Section')}">
<button class="sequence-nav-button button-previous">
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
<span>${_('Previous')}</span>
</button>
<button class="sequence-nav-button button-next">
<span class="icon fa fa-chevron-next" aria-hidden="true"></span><span class="sr">${_('Next')}</span>
<span>${_('Next')}</span>
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
</button>
</nav>
</div>