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 (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/common/app/components/Nav/Points-Nav-Item.jsx b/common/app/components/Nav/Points-Nav-Item.jsx
deleted file mode 100644
index a738c6da33..0000000000
--- a/common/app/components/Nav/Points-Nav-Item.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-export default React.createClass({
- displayName: 'Points',
-
- propTypes: {
- 'aria-controls': React.PropTypes.string,
- className: React.PropTypes.string,
- href: React.PropTypes.string,
- onClick: React.PropTypes.func,
- points: React.PropTypes.number,
- title: React.PropTypes.node
- },
-
- render() {
- let {
- href,
- title,
- points,
- 'aria-controls': ariaControls, // eslint-disable-line react/prop-types
- className,
- onClick
- } = this.props;
-
- let linkProps = {
- title,
- href,
- onClick,
- className,
- ref: 'anchor',
- 'aria-controls': ariaControls
- };
-
- return (
-
- [ { points || 1 } ]
-
- );
- }
-});
diff --git a/server/views/partials/navbar.jade b/server/views/partials/navbar.jade
index 4b62bd0c79..73b8e1af90 100644
--- a/server/views/partials/navbar.jade
+++ b/server/views/partials/navbar.jade
@@ -23,8 +23,8 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
li
a(href='/signup') Sign Up
else
- li.brownie-points-nav
- a(href='/settings') [ #{user.points} ]
- li.hidden-xs.hidden-sm.avatar
+ li.avatar-points
a(href='/settings')
+ span.brownie-points-nav [ #{user.points} ]
+ span.hidden-xs.hidden-sm.avatar
img.profile-picture.float-right(src='#{user.picture}')