diff options
author | Corey Hulen <corey@hulen.com> | 2015-06-27 21:50:03 -0800 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-06-27 21:50:03 -0800 |
commit | acc809ca885ec8bf06441aad70af5adfb0b31ba5 (patch) | |
tree | 4949bd823abc1a4ae3a1cc86c4f8f57e0f5bd68c | |
parent | b1c3bd37adb32f6ab84b27ec53165d15f656e9b7 (diff) | |
parent | 0104bf822c70eef7793b8a31b78d5c72c0f1514e (diff) | |
download | chat-acc809ca885ec8bf06441aad70af5adfb0b31ba5.tar.gz chat-acc809ca885ec8bf06441aad70af5adfb0b31ba5.tar.bz2 chat-acc809ca885ec8bf06441aad70af5adfb0b31ba5.zip |
Merge pull request #82 from ralder/fix-mentions-dropdown
gui: fix mentions dropdown list for pc browsers
-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; } |