diff --git a/browser/main/Components/PlanetNavigator.jsx b/browser/main/Components/PlanetNavigator.jsx index a3a0816f..3e1fd65c 100644 --- a/browser/main/Components/PlanetNavigator.jsx +++ b/browser/main/Components/PlanetNavigator.jsx @@ -23,7 +23,10 @@ var PlanetNavigator = React.createClass({ render: function () { var users = this.props.currentPlanet.Users.map(function (user) { return ( -
  • +
  • + +
    {user.profileName}
    +
  • ) }) diff --git a/browser/main/Components/UserNavigator.jsx b/browser/main/Components/UserNavigator.jsx index 92e18d69..cfd7df30 100644 --- a/browser/main/Components/UserNavigator.jsx +++ b/browser/main/Components/UserNavigator.jsx @@ -44,7 +44,10 @@ module.exports = React.createClass({ var planets = this.props.currentUser.Planets.map(function (planet, index) { return (
  • - {planet.name[0]} + + {planet.name[0]} +
    {planet.userName}/{planet.name}
    +
    ⌘{index + 1}
  • ) diff --git a/browser/styles/main/containers/PlanetContainer.styl b/browser/styles/main/containers/PlanetContainer.styl index b30c98d3..ed9d6e7f 100644 --- a/browser/styles/main/containers/PlanetContainer.styl +++ b/browser/styles/main/containers/PlanetContainer.styl @@ -135,6 +135,20 @@ circle() margin 3px line-height 44px + .userTooltip + position absolute + z-index 500 + background-color transparentify(invBackgroundColor, 80%) + color invTextColor + padding 10px + line-height 1em + border-radius 5px + margin-top -15px + opacity 0 + transition 0.1s + pointer-events none + &:hover .userTooltip + opacity 1 .PlanetArticleList diff --git a/browser/styles/main/containers/UserContainer.styl b/browser/styles/main/containers/UserContainer.styl index d234a331..0eb13efb 100644 --- a/browser/styles/main/containers/UserContainer.styl +++ b/browser/styles/main/containers/UserContainer.styl @@ -46,6 +46,21 @@ transition 0.1s &:hover, &:active background-color white + .planetTooltip + position absolute + z-index 500 + background-color transparentify(invBackgroundColor, 80%) + color invTextColor + padding 10px + line-height 1em + border-radius 5px + margin-top -41px + margin-left 52px + opacity 0 + transition 0.1s + pointer-events none + &:hover .planetTooltip + opacity 1 img circle() width 44px