fix(Nav): Avatar should light up brownie #10581

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;
   }
 }
 

common/app/components/Nav/Avatar-Nav-Item.jsx

@@ -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 (
-    <li
-      className='hidden-xs hidden-sm avatar'
-      key='user'
-      >
-      <Link to='/settings'>
-        <img
-          className='profile-picture float-right'
-          src={ picture }
-        />
-      </Link>
-    </li>
-  );
-}
-
-AvatarNavItem.propTypes = { picture: PropTypes.string };

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 (
+    <li
+      className='avatar-points'
+      key='user'
+      >
+      <Link to='/settings'>
+        <span className='brownie-points-nav'>
+          [ { points || 1 } ]
+        </span>
+        <span className='hidden-xs hidden-sm avatar'>
+          <img
+            className='profile-picture float-right'
+            src={ picture }
+          />
+        </span>
+      </Link>
+    </li>
+  );
+}
+
+AvatarPointsNavItem.propTypes = {
+  picture: PropTypes.string,
+  points: React.PropTypes.number
+};

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 (
-      <LinkContainer
-        eventKey={ navLinks.length + 1 }
-        key='points'
-        to='/settings'
-        >
-        <PointsNavItem
-          className='brownie-points-nav'
-          points={ points }
-        />
-      </LinkContainer>
-    );
-  }
-
-  renderSignIn(username, picture, shouldShowSignIn) {
+  renderSignIn(username, points, picture, shouldShowSignIn) {
     if (!shouldShowSignIn) {
       return null;
     }
     if (username) {
-      return <AvatarNavItem picture={ picture } />;
+      return (
+        <AvatarPointsNavItem
+          picture={ picture }
+          points={ points }
+        />
+      );
     } else {
       return (
         <NavItem
@@ -216,19 +202,21 @@ export default class extends React.Component {
         className='nav-height'
         fixedTop={ true }
         >
-        <NavbarBrand>
-          <a
-            href='/challenges/current-challenge'
-            onClick={ this.handleLogoClick }
-            >
-            <img
-              alt='learn to code javascript at Free Code Camp logo'
-              className='img-responsive nav-logo'
-              src={ fCClogo }
-            />
-          </a>
-        </NavbarBrand>
-        <Navbar.Toggle children={ toggleButtonChild } />
+        <Navbar.Header>
+          <Navbar.Toggle children={ toggleButtonChild } />
+          <NavbarBrand>
+            <a
+              href='/challenges/current-challenge'
+              onClick={ this.handleLogoClick }
+              >
+              <img
+                alt='learn to code javascript at Free Code Camp logo'
+                className='img-responsive nav-logo'
+                src={ fCClogo }
+              />
+            </a>
+          </NavbarBrand>
+        </Navbar.Header>
         <Navbar.Collapse>
           <Nav
             className='hamburger-dropdown'
@@ -238,8 +226,7 @@ export default class extends React.Component {
             { this.renderMapLink(isOnMap, toggleMapDrawer) }
             { this.renderChat(toggleMainChat) }
             { this.renderLinks() }
-            { this.renderPoints(username, points, shouldShowSignIn) }
-            { this.renderSignIn(username, picture, shouldShowSignIn) }
+            { this.renderSignIn(username, points, picture, shouldShowSignIn) }
           </Nav>
         </Navbar.Collapse>
       </Navbar>

common/app/components/Nav/Points-Nav-Item.jsx

@@ -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 (
-      <li role='presentation'>
-        <a { ...linkProps }>[ { points || 1 } ]</a>
-      </li>
-    );
-  }
-});

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}')