(Feat): Menu should show username on sm screens

(Feat): Menu should show username on sm screens

(Feat): Menu should show username on sm screens

(Feat): Menu should show username on sm screens
This commit is contained in:
Adegbuyi Ademola
2016-09-24 19:46:03 +01:00
parent 23b0ee7aef
commit 5cbe98c3eb
3 changed files with 12 additions and 7 deletions

View File

@ -3,7 +3,7 @@ import { Link } from 'react-router';
// this is separated out to prevent react bootstrap's // this is separated out to prevent react bootstrap's
// NavBar from injecting unknown props to the li component // NavBar from injecting unknown props to the li component
export default function AvatarPointsNavItem({ picture, points }) { export default function AvatarPointsNavItem({ picture, points, username }) {
return ( return (
<li <li
className='avatar-points' className='avatar-points'
@ -11,7 +11,8 @@ export default function AvatarPointsNavItem({ picture, points }) {
> >
<Link to='/settings'> <Link to='/settings'>
<span className='brownie-points-nav'> <span className='brownie-points-nav'>
[ { points || 1 } ] <span className='hidden-md hidden-lg'> { username } </span>
<span class='brownie-points'> [ { points || 1 } ] </span>
</span> </span>
<span className='hidden-xs hidden-sm avatar'> <span className='hidden-xs hidden-sm avatar'>
<img <img
@ -25,6 +26,7 @@ export default function AvatarPointsNavItem({ picture, points }) {
} }
AvatarPointsNavItem.propTypes = { AvatarPointsNavItem.propTypes = {
username: PropTypes.string,
picture: PropTypes.string, picture: PropTypes.string,
points: React.PropTypes.number points: PropTypes.number
}; };

View File

@ -171,6 +171,7 @@ export default class extends React.Component {
<AvatarPointsNavItem <AvatarPointsNavItem
picture={ picture } picture={ picture }
points={ points } points={ points }
username={ username }
/> />
); );
} else { } else {

View File

@ -25,6 +25,8 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
else else
li.avatar-points li.avatar-points
a(href='/settings') a(href='/settings')
span.brownie-points-nav [&thinsp;#{user.points}&thinsp;] span.brownie-points-nav
span.hidden-md.hidden-lg #{user.username}
span.brownie-points [&thinsp;#{user.points}&thinsp;]
span.hidden-xs.hidden-sm.avatar span.hidden-xs.hidden-sm.avatar
img.profile-picture.float-right(src='#{user.picture}') img.profile-picture.float-right(src='#{user.picture}')