Update to react-bootstrap 0.28.1 and widen react nav
+ Moved away from deprecated navbar components and props + Removed mixin from NavItem + Updated stylesheet so the `.container` react-bootstrap adds doesn't impact nav positioningpull/4579/head
parent
dfa5acde60
commit
3a9745974c
|
@ -150,6 +150,12 @@ ul {
|
|||
font-size: 26px;
|
||||
}
|
||||
|
||||
.navbar > .container {
|
||||
width: auto;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.nav-height {
|
||||
height: 50px;
|
||||
border: none;
|
||||
|
@ -770,7 +776,7 @@ iframe.iphone {
|
|||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
.navbar-toggle {
|
||||
width: 80px;
|
||||
padding-left: 0px;
|
||||
padding-right: 8px;
|
||||
|
|
|
@ -2,9 +2,8 @@ import React, { PropTypes } from 'react';
|
|||
import { LinkContainer } from 'react-router-bootstrap';
|
||||
import {
|
||||
Col,
|
||||
CollapsibleNav,
|
||||
Nav,
|
||||
NavBrand,
|
||||
NavbarBrand,
|
||||
Navbar,
|
||||
NavItem
|
||||
} from 'react-bootstrap';
|
||||
|
@ -24,12 +23,10 @@ const logoElement = (
|
|||
</a>
|
||||
);
|
||||
|
||||
const toggleButton = (
|
||||
<button className='hamburger'>
|
||||
const toggleButtonChild = (
|
||||
<Col xs={ 12 }>
|
||||
<span className='hamburger-text'>Menu</span>
|
||||
</Col>
|
||||
</button>
|
||||
);
|
||||
|
||||
function getDashedName() {
|
||||
|
@ -61,7 +58,7 @@ export default React.createClass({
|
|||
key={ content }
|
||||
to={ link }>
|
||||
<NavItem
|
||||
target={ target || null } >
|
||||
target={ target || null }>
|
||||
{ content }
|
||||
</NavItem>
|
||||
</LinkContainer>
|
||||
|
@ -100,10 +97,11 @@ export default React.createClass({
|
|||
return null;
|
||||
}
|
||||
return (
|
||||
<NavItem
|
||||
<FCCNavItem
|
||||
className='brownie-points-nav'
|
||||
href={ '/' + username }>
|
||||
[ { points } ]
|
||||
</NavItem>
|
||||
</FCCNavItem>
|
||||
);
|
||||
},
|
||||
|
||||
|
@ -123,7 +121,7 @@ export default React.createClass({
|
|||
} else {
|
||||
return (
|
||||
<FCCNavItem
|
||||
className='btn signup-btn signup-btn-nav'
|
||||
className='btn signup-btn signup-btn-nav signin-button-nav'
|
||||
eventKey={ 2 }
|
||||
href='/login'>
|
||||
Sign In
|
||||
|
@ -138,21 +136,20 @@ export default React.createClass({
|
|||
return (
|
||||
<Navbar
|
||||
className='nav-height'
|
||||
fixedTop={ true }
|
||||
toggleButton={ toggleButton }
|
||||
toggleNavKey={ 0 }>
|
||||
<NavBrand>{ logoElement }</NavBrand>
|
||||
<CollapsibleNav eventKey={ 0 }>
|
||||
fixedTop={ true }>
|
||||
<NavbarBrand>{ logoElement }</NavbarBrand>
|
||||
<Navbar.Toggle children={ toggleButtonChild } />
|
||||
<Navbar.Collapse eventKey={ 0 }>
|
||||
<Nav
|
||||
className='hamburger-dropdown'
|
||||
navbar={ true }
|
||||
right={ true }>
|
||||
pullRight={ true }>
|
||||
{ this.renderLearnBtn() }
|
||||
{ this.renderLinks() }
|
||||
{ this.renderPoints(username, points) }
|
||||
{ this.renderSignin(username, picture) }
|
||||
</Nav>
|
||||
</CollapsibleNav>
|
||||
</Navbar.Collapse>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,12 +1,9 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import BootstrapMixin from 'react-bootstrap/lib/BootstrapMixin';
|
||||
|
||||
export default React.createClass({
|
||||
displayName: 'FCCNavItem',
|
||||
|
||||
mixins: [BootstrapMixin],
|
||||
|
||||
propTypes: {
|
||||
active: React.PropTypes.bool,
|
||||
'aria-controls': React.PropTypes.string,
|
||||
|
|
|
@ -5,14 +5,14 @@
|
|||
"content": "Chat",
|
||||
"link": "//gitter.im/FreeCodeCamp/FreeCodeCamp",
|
||||
"target": "_blank"
|
||||
},{
|
||||
"content": "Wiki",
|
||||
"link": "https://github.com/freecodecamp/freecodecamp/wiki/",
|
||||
"target": "_blank"
|
||||
},{
|
||||
"content": "News",
|
||||
"link": "/news",
|
||||
"target": "_blank"
|
||||
},{
|
||||
"content": "Wiki",
|
||||
"link": "https://github.com/freecodecamp/freecodecamp/wiki/",
|
||||
"target": "_blank"
|
||||
},{
|
||||
"content": "Jobs",
|
||||
"link": "/jobs",
|
||||
|
@ -20,5 +20,4 @@
|
|||
},{
|
||||
"content": "Links",
|
||||
"link": "/links"
|
||||
},{
|
||||
}]
|
||||
|
|
|
@ -99,7 +99,7 @@
|
|||
"pmx": "~0.5.5",
|
||||
"ramda": "~0.18.0",
|
||||
"react": "~0.14.2",
|
||||
"react-bootstrap": "0.27.3",
|
||||
"react-bootstrap": "~0.28.1",
|
||||
"react-motion": "~0.3.1",
|
||||
"react-router": "^1.0.0",
|
||||
"react-router-bootstrap": "https://github.com/FreeCodeCamp/react-router-bootstrap.git#freecodecamp",
|
||||
|
|
Loading…
Reference in New Issue