Skip to content

Commit

Permalink
fix(component): navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ygatesoupe
ygatesoupe committed Oct 7, 2016
1 parent 6d2caed commit f0bd5d6
Show file tree
Hide file tree
Showing 10 changed files with 155 additions and 136 deletions.
114 changes: 78 additions & 36 deletions docs-orange/_includes/boostwatch/navbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,84 @@
<h2 id="navbar">Navbar<a class="doc-link" href="../components/navbar/" title="go to navbar documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
<nav class="navbar navbar-dark bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3">
&#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3">
<a class="navbar-brand" href="#"><img src="../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"></a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<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 class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3">
&#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3">
<a class="navbar-brand logo" href="#"><img src="../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"></a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<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 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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu4">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
<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="#">Link</a>
</ul>
</div>
</nav>
<h3>without logo</h3>
<nav class="navbar navbar-dark bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3">
&#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3">
<a class="navbar-brand" href="#">Navbar brand</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<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 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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu4">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
<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>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu4">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
<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>
</ul>
</div>
</nav>
2 changes: 1 addition & 1 deletion docs-orange/_includes/nav-home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<span class="icon-menu"></span>
</button>
<div class="container" >
<a class="navbar-brand" href="{{ site.baseurl }}/"><img src="dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<a class="navbar-brand logo" href="{{ site.baseurl }}/"><img src="dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar">
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/">
Expand Down
1 change: 1 addition & 0 deletions docs-orange/assets/scss/_boosted-docs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@
#supported-content,
#color-schemes,
#placement,
#collapsible-content,
#sizing {
@include brand-warning;
}
Expand Down
32 changes: 2 additions & 30 deletions docs-orange/components/navbar-orange.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,13 @@ Orange navbar is the main navigation of project website. It should always be inc
<span class="icon-menu"></span>
</button>
<div class="container" >
<a class="navbar-brand"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<a class="navbar-brand logo"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar3">
<li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
<li class="nav-item"><a href="#" class="nav-link">Help</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open basket</span>
<span class="icon-buy" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open search bar</span>
<span class="icon-search" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
</nav>
</header>
Expand Down Expand Up @@ -130,27 +116,13 @@ A supra bar should never be used on its own and always be included in header and
<span class="icon-menu"></span>
</button>
<div class="container" >
<a class="navbar-brand"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<a class="navbar-brand logo"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar2">
<li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
<li class="nav-item"><a href="#" class="nav-link">Help</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open basket</span>
<span class="icon-buy" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open search bar</span>
<span class="icon-search" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
</nav>
</header>
Expand Down
4 changes: 2 additions & 2 deletions docs-orange/examples/orange-brand-2015/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-toggleable-xs" id="orange-navbar-collapse">
<a class="navbar-brand" href="/"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<a class="navbar-brand logo" href="/"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<ul class="nav navbar-nav" role="tablist">
<li role="presentation" class="nav-item">
<a class="nav-link active" href="#">Discover<span class="sr-only">(current)</span></a>
Expand Down Expand Up @@ -98,7 +98,7 @@
<div class="title ">You can use any hero picture to illustrate your purpose insert your body text in here. Ommoditatur sendand amusanti nobisci psandae dolupta tatur, con corrum sam fugitatiunt aliae pa doluptatur sit aut alite excerei ctasimin. </div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item">
<img src="./images/offset_LARGE_123305_chemisier_jaune.jpg" alt="" class="img-fluid"/>
<div class="frame">
<img src="./images/Fun-frame_frame-carousel.png" alt="Fun" class="img-fluid"/>
Expand Down
2 changes: 1 addition & 1 deletion docs-orange/examples/orange-dashboard/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
<a class="navbar-brand" href="#">
<a class="navbar-brand logo" href="#">
<img id="orange_logo" src="images/logo-orange.png" alt=""/>
<span id="app_name">APP&NAME <span class="sr-only">Homepage</span></span>
</a>
Expand Down
2 changes: 1 addition & 1 deletion docs-orange/examples/orange-form/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
<a class="navbar-brand" href="#">
<a class="navbar-brand logo" href="#">
<img id="orange_logo" src="images/logo-orange.png" alt=""/>
<span id="app_name">APP&NAME <span class="sr-only">Homepage</span></span>
</a>
Expand Down
10 changes: 5 additions & 5 deletions docs-orange/examples/orange-news/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,20 +69,20 @@
</nav>

<nav class="navbar navbar-dark">
<!--<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="sr-only">toggle navigation</span>
<span class="icon-menu"></span>
</button>-->
</button>
<div class="container" >
<a class="navbar-brand"><img src="images/logo-orange.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<a class="navbar-brand logo"><img src="images/logo-orange.jpg" alt="Back to homepage" title="Back to homepage"/></a>
<ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar">
<li class="nav-item"><a class="nav-link" href="#collapseDiscover" data-parent="#collapsingNavbar" data-toggle="collapse" aria-expanded="false" aria-controls="collapseDiscover" title="open discover menu">Discover</a></li>
<li class="nav-item"><a class="nav-link" data-parent="#collapsingNavbar" data-toggle="collapse" href="#collapseShop" aria-expanded="false" aria-controls="collapseShop" title="open shop menu">Shop</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
<li class="nav-item"><a href="#" class="nav-link">Help</a></li>
<li class="nav-item" id="id_li_for_cdu"></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<!--<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open basket</span>
Expand All @@ -101,7 +101,7 @@
<span class="icon-menu" aria-hidden="true"></span>
</a>
</li>
</ul>
</ul>-->
</div>
</nav>
</header>
Expand Down
4 changes: 4 additions & 0 deletions docs/components/navbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,10 @@ Navbars can be statically placed (their default behavior), static without rounde

## Collapsible content

<!--- boosted mod -->
For brand responsive collapsible navbar please checkout the [Navbar Orange](/components/navbar-orange/) page.
<!--- end mod -->

Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.

{% example html %}
Expand Down
Loading

0 comments on commit f0bd5d6

Please sign in to comment.