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