diff options
| -rw-r--r-- | web/react/components/mention.jsx | 4 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_mentions.scss | 25 |
2 files changed, 16 insertions, 13 deletions
diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index ba758688b..86a423138 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -8,8 +8,8 @@ module.exports = React.createClass({ render: function() { return ( <div className="mentions-name" onClick={this.handleClick}> - <img className="pull-left mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/> - <span>@{this.props.username}</span><span style={{'color':'grey', 'marginLeft':'10px'}}>{this.props.name}</span> + <img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/> + <span>@{this.props.username}</span><span className="mention-fullname">{this.props.name}</span> </div> ); } diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index 11cd4e9e4..cb6ff16c5 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -3,21 +3,19 @@ background: $primary-color; position: relative; z-index: 10; - padding-bottom: 1px; + padding-bottom: 2px; @include border-radius(3px); - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } .mentions--top { position: absolute; - z-index:99999; + z-index: 1040; .mentions-box { position:absolute; background-color:#fff; - border:1px solid #ddd; - overflow:scroll; + border: $border-gray; + overflow-x: hidden; + overflow-y: scroll; bottom:0; } } @@ -29,10 +27,10 @@ height:37px; padding:2px; z-index:101; -} - -.mentions-name:hover { - background-color:#e8eaed; + cursor: pointer; + &:hover { + background-color:#e8eaed; + } } .mentions-text { @@ -46,6 +44,11 @@ border-radius: 10%; } +.mention-fullname { + color: grey; + padding-left: 10px; +} + .mention-highlight { background-color:#fff2bb; } |