Skip to content

Commit

Permalink
fix(component): navbar
Browse files Browse the repository at this point in the history 
mobile view
doc pages using navbar
  • Loading branch information
@ygatesoupe
ygatesoupe committed Jun 8, 2016
1 parent c9ccdc8 commit 85bdfbc
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 95 deletions.
69 changes: 19 additions & 50 deletions docs-orange/_includes/nav-home.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,22 @@
<header class="navbar navbar-dark navbar-static-top bd-navbar" role="banner">
<div class="container">
{% comment %}
<nav class="nav navbar-nav pull-xs-right">
<div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item" href="#">v4.0.0-alpha</a>
<a class="dropdown-item" href="#">v3.3.5</a>
<a class="dropdown-item" href="#">v3.3.4</a>
<a class="dropdown-item" href="#">v3.3.2</a>
<a class="dropdown-item" href="#">v3.3.1</a>
<a class="dropdown-item" href="#">v3.3.0</a>
<a class="dropdown-item" href="#">v3.2.0</a>
<a class="dropdown-item" href="#">v3.1.1</a>
<a class="dropdown-item" href="#">v3.1.0</a>
<a class="dropdown-item" href="#">v3.0.3</a>
<a class="dropdown-item" href="#">v3.0.2</a>
<a class="dropdown-item" href="#">v3.0.1</a>
<a class="dropdown-item" href="#">v3.0.0</a>
<header class="" role="banner">
<nav class="navbar navbar-dark">
<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>
<div class="container" >
<a class="navbar-brand"><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 }}/">
B<span class="text-primary">oo</span>sted
</a>
</li>
<li class="nav-item"><a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/">Documentation</a></li>
<li class="nav-item"><a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link {% if page.title == "Boostwatch" %}active{% endif %}" href="{{ site.baseurl }}/boostwatch/">Boostwatch</a></li>
<li class="nav-item" id="id_li_for_cdu"></li>
</ul>
</div>
</div>
</nav>
{% endcomment %}

<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
&#9776;
</button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
B<span class="text-primary">oo</span>sted
</a>
</div>
<nav class="collapse navbar-toggleable-xs" id="bd-main-nav">
<a class="navbar-brand" 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">
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/">
B<span class="text-primary">oo</span>sted
</a>
</li>
<li class="nav-item"><a class="nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/">Documentation</a></li>
<li class="nav-item"><a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link {% if page.title == "Boostwatch" %}active{% endif %}" href="{{ site.baseurl }}/boostwatch/">Boostwatch</a></li>
<li class="nav-item" id="id_li_for_cdu"></li>
</ul>
</nav>
</div>
</header>
32 changes: 17 additions & 15 deletions docs-orange/assets/scss/_boosted-docs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,26 +45,31 @@
background-color: #000;
color: #fff;
border-top: 2px solid $gray-dark;
padding-top: 3.75rem;
padding-bottom: 3.75rem;

@include media-breakpoint-up(md) {
h1 {
font-size: $font-size-h1;
}

p {
font-size: $font-size-base;
}
}
padding: 0;

h1 {
font-size: $font-size-h1;
font-weight: bold;
margin: 2.6875rem 0;
}

p {
font-size: $font-size-base;
}

@include media-breakpoint-down(xs) {
h1 {
font-size: $font-size-h2;
font-weight: bold;
text-align: left;
line-height: 1;
margin: 1.25rem 0;
}

p {
font-size: $font-size-base;
}
}
}

.bd-featurette {
Expand Down Expand Up @@ -220,9 +225,6 @@ $back-top-btn-height: 3.75rem;
body {
margin-bottom: $back-top-btn-height;
}
.container {
margin: 0 .625rem;
}
}

.scroll-top {
Expand Down
74 changes: 44 additions & 30 deletions scss/_o-navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,23 @@
.navbar {
min-height: $navbar-height-sm;

.navbar-toggler {
float: right;
padding: .875rem;
font-size: 1.25rem;
background-color: transparent;
background-image: none;
border: 0;

@include hover-focus {
background-color: $brand-primary;
}

&:focus {
outline: 0;
}
}

.container {
max-width: none;
margin: 0;
Expand All @@ -152,14 +169,16 @@
.nav-item {
display: block;
float: none;
padding: calc((#{$font-size-h1} - #{$font-size-h5}) / 2) 0;
padding: 1rem 0;
padding-left: .625rem;
margin-left: 0;
font-size: $font-size-h5;
line-height: 1;
border-top: 1px solid $gray-dark;

.nav-link {
.nav-link,
.dropdown-toggle,
.nav-item-cdu {
margin-top: 0;
}

Expand All @@ -173,6 +192,10 @@
content: "\e93e";
}

.nav-link.active::before {
display: none;
}

.nav-link.icon {
padding: .625rem;
margin-top: 0;
Expand All @@ -181,6 +204,10 @@
&:first-child {
margin-left: 0;
}

.nav-item-cdu {
float: none;
}
}

.nav-item.folded {
Expand Down Expand Up @@ -226,23 +253,10 @@

}

.navbar-toggler {
padding: .625rem;
font-size: calc(#{$font-size-h4} - 1px);
background-color: transparent;
background-image: none;
border: 0;

@include hover-focus {
background-color: $brand-primary;
}

// We remove the `outline` here, but later compensate by attaching `:hover`
// styles to `:focus`.
&:focus {
outline: 0;
}
}

.navbar-brand {
@include focus {
Expand Down Expand Up @@ -280,24 +294,24 @@
padding-left: $navbar-padding-horizontal;
}

.navbar-toggle-complement {
position: relative;
float: right;
}
// .navbar-toggle-complement {
// position: relative;
// float: right;
// }

.navbar-toggle-complement .navbar-nav {
margin: $padding-base-vertical 0 0;
}
// .navbar-toggle-complement .navbar-nav {
// margin: $padding-base-vertical 0 0;
// }

.navbar-toggle-complement li {
float: left;
}
// .navbar-toggle-complement li {
// float: left;
// }

@include media-breakpoint-up(md) {
.navbar-toggle-complement {
display: none;
}
}
// @include media-breakpoint-up(md) {
// .navbar-toggle-complement {
// display: none;
// }
// }

// Navbar nav links
//
Expand Down

0 comments on commit 85bdfbc

Please sign in to comment.