Skip to content

Commit

Permalink
fix(component): local navigation
Browse files Browse the repository at this point in the history 
updated brand design
inverse version
  • Loading branch information
@ygatesoupe
ygatesoupe committed May 31, 2016
1 parent 3e629f2 commit 230700e
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 320 deletions.
97 changes: 21 additions & 76 deletions docs-orange/_includes/boostwatch/navLocal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,86 +2,31 @@ <h2 id="local">Local navigation bar</h2>
<p class="lead">Two types of local navigation.</p>
<h3 id="local1">Default local navigation</h3>
<div data-example-id="">
<div class="container-fluid">
<div class="row">
<nav class="navbar nav-local">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>

<div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar1">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu1">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav pull-md-right">
<li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu2">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="o-nav-local">
<hr>
<nav class="container">
<ul class="nav nav-inline">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
</ul>
</nav>
<hr>
</div>
</div>

<h3 id="local2">Two levels local navigation</h3>
<h3 id="local2">Inversed local navigation</h3>
<div data-example-id="">
<div class="container-fluid">
<div class="row">
<nav class="navbar nav-local">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>

<div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar2">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
</ul>
<ul class="nav navbar-nav pull-md-right">
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu5">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu5">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div role="presentation" class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
</div>

<div class="navbar-collapse sublocal">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Natus error sit<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link active" href="#">Totam rem aperiam<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Sed ut<div class='arrow' aria-hidden='true'></div></a></li>
</ul>
</div>
<div style="margin: 2rem 0; padding: 2rem 0; background-color: black;">
<div class="o-nav-local inverse">
<hr>
<nav class="container">
<ul class="nav nav-inline">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link active" href="#">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
</ul>
</nav>
<hr>
</div>
</div>
</div>
96 changes: 26 additions & 70 deletions docs-orange/components/local-navigation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,82 +6,38 @@ group: components

## Default local navigation

Add the `.nav-local` class to the nav tag, `.local` onto the nav links content, and a `div` tag with the class `arrow` with the `attribute aria-hidden='true'` to switch from classic navbar to Orange local navigation.
Wrap your `<ul>` list in a `<nav>` tag with `.container` class. Use `<hr>` tag on top and bottom outside the de `.container`. Wrap the whole in a `.o-nav-local` container.

{% example html %}
<nav class="navbar nav-local">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>

<div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar1">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu1">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav pull-md-right">
<li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu2">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
<div class="o-nav-local">
<hr>
<nav class="container">
<ul class="nav nav-inline">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
</ul>
</div>
</nav>
</nav>
<hr>
</div>
{% endexample %}

## Two level local navigation

{% example html %}
<nav class="navbar nav-local">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
## Inverse local navigation

<div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar2">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
</ul>
<ul class="nav navbar-nav pull-md-right">
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu3">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div role="presentation" class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
</div>
Simply add `.inverse` class to your `.o-nav-local` container.

<div class="navbar-collapse sublocal">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Natus error sit<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link active" href="#">Totam rem aperiam<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Sed ut<div class='arrow' aria-hidden='true'></div></a></li>
</ul>
{% example html %}
<div style="margin: 2rem 0; padding: 2rem 0; background-color: black;">
<div class="o-nav-local inverse">
<hr>
<nav class="container">
<ul class="nav nav-inline">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link active" href="#">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
</ul>
</nav>
<hr>
</div>
</nav>
</div>
{% endexample %}
41 changes: 29 additions & 12 deletions docs-orange/examples/orange-news/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,14 +191,30 @@ <h3 id="list_title_2"><a href="#">Mobile</a></h3>
</div>
</div>

<main class="container" id="content">
<div id="header" class="container">
<div class="row">
<h1 id="hide_supra_trigger">News</h1>
</div>
</div>
<main id="content">
<section class="container">
<h1>News</h1>
</section>

<div class="o-nav-local">
<hr>
<nav class="container">
<ul class="nav nav-inline">
<li class="nav-item"><a class="nav-link active" href="#">news home</a></li>
<li class="nav-item"><a class="nav-link" href="#">world</a></li>
<li class="nav-item"><a class="nav-link" href="#">entertainment</a></li>
<li class="nav-item"><a class="nav-link" href="#">finance</a></li>
<li class="nav-item"><a class="nav-link" href="#">technology</a></li>
<li class="nav-item"><a class="nav-link" href="#">weather</a></li>
<li class="nav-item"><a class="nav-link" href="#">sport</a></li>
<li class="nav-item"><a class="nav-link" href="#">video</a></li>
<li class="nav-item"><a class="nav-link" href="#">pictures</a></li>
</ul>
</nav>
<hr>
</div>

<div id="localNavigation" class="container">
<!--<div id="localNavigation" class="container">
<nav class="navbar nav-local">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">toggle navigation</span>
Expand Down Expand Up @@ -231,10 +247,11 @@ <h1 id="hide_supra_trigger">News</h1>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
</div>-->

<section class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8">
<h2 id="newsLeaderTitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit<small>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</small></h2>
Expand Down Expand Up @@ -492,10 +509,10 @@ <h4 class="panel-title">
</div><!-- fin de la div accordéon -->
</div><!--fin de la div de 4 colonnes -->
</div><!-- fin de la row globale-->
</section>
<hr>

<hr>

</main><!--/.container-->
</main>

<footer id="footer" role="contentinfo">
<div class="container">
Expand Down
Loading

0 comments on commit 230700e

Please sign in to comment.