diff --git a/client/less/main.less b/client/less/main.less index 334356617d..640cacdf5c 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -156,8 +156,13 @@ h1, h2, h3, h4, h5, h6, p, li { .navbar > .container { width: auto; - padding-left: 0px; padding-right: 0px; + + @media (max-width: 767px) { + // container default padding size + padding-left: 15px; + padding-right: 15px; + } } .nav-height { @@ -318,7 +323,7 @@ h1, h2, h3, h4, h5, h6, p, li { } } -li.avatar, li.avatar > a { padding:0; margin:0 } +li.avatar-points, li.avatar-points > a { padding:0; margin:0 } .thin-progress-bar { height: 8px; @@ -474,8 +479,14 @@ thead { } .brownie-points-nav { - @media (min-width: 991px) and (max-width: 999px) { - margin-right: -10px; + @media (min-width: 991px) and (max-width: 1030px) { + float: none !important; + padding-right: 10px; + display: inline-block; + } + @media (min-width: 991px) { + float: left; + padding: 15px; } } diff --git a/common/app/components/Nav/Avatar-Nav-Item.jsx b/common/app/components/Nav/Avatar-Nav-Item.jsx deleted file mode 100644 index e01c9b4501..0000000000 --- a/common/app/components/Nav/Avatar-Nav-Item.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, { PropTypes } from 'react'; -import { Link } from 'react-router'; - -// this is separated out to prevent react bootstrap's -// NavBar from injecting unknown props to the li component -export default function AvatarNavItem({ picture }) { - return ( -
  • - - - -
  • - ); -} - -AvatarNavItem.propTypes = { picture: PropTypes.string }; diff --git a/common/app/components/Nav/Avatar-Points-Nav-Item.jsx b/common/app/components/Nav/Avatar-Points-Nav-Item.jsx new file mode 100644 index 0000000000..098d538503 --- /dev/null +++ b/common/app/components/Nav/Avatar-Points-Nav-Item.jsx @@ -0,0 +1,30 @@ +import React, { PropTypes } from 'react'; +import { Link } from 'react-router'; + +// this is separated out to prevent react bootstrap's +// NavBar from injecting unknown props to the li component +export default function AvatarPointsNavItem({ picture, points }) { + return ( +
  • + + + [ { points || 1 } ] + + + + + +
  • + ); +} + +AvatarPointsNavItem.propTypes = { + picture: PropTypes.string, + points: React.PropTypes.number +}; diff --git a/common/app/components/Nav/Nav.jsx b/common/app/components/Nav/Nav.jsx index 646c2f0015..78d9d59254 100644 --- a/common/app/components/Nav/Nav.jsx +++ b/common/app/components/Nav/Nav.jsx @@ -10,8 +10,7 @@ import { } from 'react-bootstrap'; import navLinks from './links.json'; -import PointsNavItem from './Points-Nav-Item.jsx'; -import AvatarNavItem from './Avatar-Nav-Item.jsx'; +import AvatarPointsNavItem from './Avatar-Points-Nav-Item.jsx'; const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'; @@ -163,30 +162,17 @@ export default class extends React.Component { }); } - renderPoints(username, points, shouldShowSignIn) { - if (!username || !shouldShowSignIn) { - return null; - } - return ( - - - - ); - } - - renderSignIn(username, picture, shouldShowSignIn) { + renderSignIn(username, points, picture, shouldShowSignIn) { if (!shouldShowSignIn) { return null; } if (username) { - return ; + return ( + + ); } else { return ( - - - learn to code javascript at Free Code Camp logo - - - + + + + + learn to code javascript at Free Code Camp logo + + +