Merge pull request #82 from ralder/fix-mentions-dropdown

gui: fix mentions dropdown list for pc browsers

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

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