NFB Balmoral

This site uses Just the Docs, a documentation theme for Jekyll.

Search

Navigation

WIP

  1. Side Navigation
  2. Horizontal Navigation
  3. Breadcrumbs
  4. Tabs
  5. Pagination
    1. Page selector
    2. Simple pager
    3. Alphabetical list

Side Navigation

Coming soon

Horizontal Navigation

WIP: Style conflicts

Horizontal nav is to be placed at the top of the page. On mobile, the navigation bar collapse into a hamberger menu

WIP: Style conflicts

NEED REFACT: Not semantic

Level 1

  1. Subjects (65)

Level 2

  1. Subjects (65)

  2. Arts (5)

Level 3

  1. Subjects (65)

  2. Arts (5)

Arts and Artists (10)

Alternate use

  1. Playlists

  2. Albert Ohayon

    Albert Ohayon

Tabs

WIP: Style conflicts

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Contenu 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Contenu 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="m-tabs">
  <ul>
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>
<div id="tab1"><p>Contenu 1</p></div>
<div id="tab2"><p>Contenu 2</p></div>
<div id="tab3"><p>Contenu 3</p></div>
<div id="tab4"><p>Contenu 4</p></div>
</div>

Pagination

Page selector

todo: replace double bracket by icons, normalize colour (grey)

<div class="paginationContainer">
  <ul class="pagination pagination-lg">
    <li><a href="#" rel="prev"><i class="icon-prev"></i></a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" rel="next"><i class="icon-next"></i></a></li>
  </ul>
</div>

Simple pager

  • Page 3
<ul class="m-pager-mobile list-inline" ng-if="pagination">
  <li><a href="#" ng-show="pagination.prevPage" ng-click="goToPage(pagination.prevPage)" class=""><i class="icon-prev"></i></a></li>
  <li ng-show="pagination.currentPage > 1" class="ng-binding">Page 3</li>
  <li><a href="#" ng-show="pagination.nextPage" ng-click="goToPage(pagination.nextPage)" class=""><i class="icon-next"></i></a></li>
</ul>

Alphabetical list

<div class="m-alphabetical-index">
  <ul>
  <li class="selected"><a href="">A</a></li>
  <li><a href="">B</a></li>
  <li><a href="" class="disabled">C</a></li>
  ...
  <li><span>Y</span> </li>
  <li><a href="">Z</a></li>
  </ul>
</div>