Skip to content

Commit

Permalink
fix(doc): component pages
Browse files Browse the repository at this point in the history
megamenu
local navigation
stepbar
pagination
pointed tabs
footer
  • Loading branch information
ygatesoupe committed Jan 13, 2016
1 parent f5098f9 commit ec34d40
Show file tree
Hide file tree
Showing 23 changed files with 922 additions and 275 deletions.
2 changes: 1 addition & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -520,7 +520,7 @@ module.exports = function (grunt) {
},
docs: {
/* boosted mod */
files: ['docs/examples/**/*', 'docs/_includes/**/*', 'docs-orange/**/*', '!docs/assets/**/*'],
files: ['docs-orange/**/*'],
tasks: ['dist-css', 'docs']
/* end mod */
}
Expand Down
82 changes: 82 additions & 0 deletions docs-orange/_data/nav.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
- title: Getting started
pages:
- title: Introduction
- title: Download
- title: Browsers & devices
- title: Options
- title: Flexbox
- title: Build tools
- title: Best practices

- title: Layout
pages:
- title: Overview
- title: Grid
- title: Media object
- title: Responsive utilities

- title: Content
pages:
- title: Reboot
- title: Typography
- title: Code
- title: Images
- title: Tables
- title: Figures

- title: Components
pages:
- title: Buttons
- title: Button group
- title: Button dropdown
- title: Forms
- title: Input group
- title: Dropdowns
- title: Jumbotron
- title: Label
- title: Alerts
- title: Card
- title: Navs
- title: Navbar
# boosted mod
- title: Orange pointed tabs
- title: Local navigation
- title: Orange megamenu
- title: Orange footer
# end mod
- title: Breadcrumb
# boosted mod
- title: Stepbar
# end mod
- title: Pagination
# boosted mod
- title: Orange Pagination
# end mod
- title: Progress
- title: List group
- title: Modal
- title: Scrollspy
- title: Tooltips
- title: Popovers
- title: Collapse
# boosted mod
- title: Orange accordion
# end mod
- title: Carousel
- title: Utilities

# - title: Extend
# pages:
# - title: Approach
# - title: Icon fonts

- title: About
pages:
- title: History
- title: Team
- title: Accessibility
- title: Brand
- title: License
- title: Translations

- title: Migration
155 changes: 71 additions & 84 deletions docs-orange/_includes/boostwatch/navLocal.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,98 +3,85 @@ <h2 id="local" class="">Local navigation bar</h2>
<h3 id="local1">Default local navigation</h3>
<div class="" data-example-id="">
<div class="container-fluid">
<div class="row">
<nav class="navbar nav-local" role="navigation">
<!--<div class="container-fluid">-->
<!-- Brand and toggle get grouped for better mobile display -->
<!--<div class="navbar-header">-->
<div class="row">
<nav class="navbar nav-local" role="navigation">
<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>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<!--</div>-->

<!-- Collect the nav links, forms, and other content for toggling -->
<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="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>
</div>
<!--</div>-->
</nav>
</div>
</div><!-- /.container-fluid -->
<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="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>
</div>
</nav>
</div>
</div>
</div>

<h3 id="local2">Two levels local navigation</h3>
<div class="" data-example-id="">
<div class="container-fluid">
<div class="row">
<nav class="navbar nav-local" role="navigation">
<!--<div class="container-fluid">-->
<!-- Brand and toggle get grouped for better mobile display -->
<!--<div class="navbar-header">-->
<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>-->
<div class="container-fluid">
<div class="row">
<nav class="navbar nav-local" role="navigation">
<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>

<!-- Local nav with 2 level : 1st level -->
<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="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 role="presentation" class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
</div>
<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="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 role="presentation" class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
</div>

<!-- Local nav with 2 level : 2nd level. Be careful about small devices, this component is not completely adapted -->
<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>-->
</nav>
<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>
</nav>
</div>
</div>
</div><!-- /.container-fluid -->
</div>
5 changes: 2 additions & 3 deletions docs-orange/_includes/boostwatch/ofooter.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<h2 id="footer" class="">Footer</h2>
<h3 id="footer-default">Default footer</h3>
<!-- Footer -->
<footer class="navbar" role="contentinfo">
<div class="container-fluid">
<div class="o-footer">
Expand Down Expand Up @@ -86,5 +85,5 @@ <h1 class="sr-only">footer - site map & informations</h1>
</ul>
</div>
</div>
</div><!-- /.container-fluid -->
</footer>
</div>
</footer>
2 changes: 1 addition & 1 deletion docs-orange/_includes/nav-boostwatch.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<a class="bd-toc-link" href="#bulletpoint">Bullet point</a>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="#local">Local navigation bar</a>
<a class="bd-toc-link" href="#local">Local navigation</a>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="#accordion">Accordions</a>
Expand Down
63 changes: 63 additions & 0 deletions docs-orange/_includes/nav-docs.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<div class="bd-sidebar">

<form class="bd-search hidden-sm-down">
<input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
<div class="dropdown-menu bd-search-results" id="search-results"></div>
</form>

<nav class="bd-links" id="docsNavbarContent">
{% for group in site.data.nav %}
{% assign link = group.pages | first %}
{% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
{% assign active = nil %}

{% if page.url contains slug %}
{% assign active = 'active' %}
{% endif %}

<div class="bd-toc-item {{ active }}">
{% if slug == "examples" %}
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/">
{% else %}
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' }}">
{% endif %}
{{ group.title }}
</a>

<ul class="nav bd-sidenav">
{% for doc in group.pages %}
{% assign slug = doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
{% assign active = nil %}

{% if page.url contains slug %}
{% assign active = 'active bd-sidenav-active' %}
{% endif %}

<li class="{{ active }}">
<a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}">
{{ doc.title }}
</a>

{% comment %}
{% unless doc.sections == nil %}
<ul class="nav">
{% for section in doc.sections %}
<li>
<a href="#{{ section.title | downcase | replace: ' ', '-' }}">
{{ section.title }}
</a>
</li>
{% endfor %}
</ul>
{% endunless %}
{% endcomment %}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</nav>
<!-- boosted mod -->
<a href="#" class="scrollup"><span class="sr-only">scroll to top</span></a>
<!-- end mod -->
</div>
Binary file added docs-orange/assets/img/logo-orange.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 11 additions & 6 deletions docs-orange/assets/scss/_boosted-docs.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
.bd-masthead {
background-color: $brand-orange-black;
color: $brand-orange-white;
border: 2px solid $gray-dark;
border: none;
border-top: 2px solid $gray-dark;
padding-top: 4rem;
background-image: none;

.lead {
font-size: 2.1rem;
Expand All @@ -20,13 +22,14 @@
}

.btn {
font-size: $font-size-base;
font-size: $font-size-lg;
font-weight: $btn-font-weight;
color: $brand-orange;
text-decoration: none;

&.btn-lg {
font-size: $font-size-lg;
padding: 1.2rem 2rem;
padding: $btn-padding-y-lg $btn-padding-x-lg;
}

&:active,
Expand Down Expand Up @@ -189,12 +192,14 @@
}

.scrollup {
width: 40px;
height: 40px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid #ccc;
position: fixed;
bottom: 50px;
right: 20rem;
display: none;
background-color: #ccc;
z-index: 100;
}
Loading

0 comments on commit ec34d40

Please sign in to comment.