metacode image working a bit better

app/assets/stylesheets/base.scss.erb

@@ -191,15 +191,12 @@
   background-color: #e0e0e0;
 
   .linkItem {
-    float:left;
-    height:46px;
+    float: left;
     z-index: 1;
     position: relative;
     color: #424242;
     font-size: 14px;
-    line-height:14px;
-    height:12px;
-    padding:17px 0;
+    line-height: 14px;
 
     a {
       color: #424242;
@@ -207,36 +204,37 @@
   }
 
   .icon {
-    position:absolute;
-    width:100%;
-    z-index:1;
+    position: absolute;
+    z-index: 1;
     padding: 0;
     height: 48px;
+    width: 100%;
+
+    .metacodeImage {
+      position: relative;
       left: -16px;
     }
+  }
   
   .contributor {
-    margin-left: 24px;
     bottom: 7px;
+    margin-left: 20px;
 
     .contributorIcon {
-      display: inline-block;
+      position: relative;
       vertical-align: middle;
-      border-radius: 14px;
+      border-radius: 16px;
       margin: 5px;
-    }
-    span {
-      font-family: 'din-regular', sans-serif;
-      font-size: 14px;
-    }
-
-    .contributorIcon {
-      position: absolute;
       top: 8px;
       left: 0;
       border-radius: 16px;
     }
 
+    span {
+      font-family: 'din-regular', sans-serif;
+      font-size: 14px;
+    }
+
     .contributorName {
       display: none;
       position: absolute;
@@ -249,8 +247,20 @@
       font-size: 12px;
       padding: 3px 5px 2px;
       white-space: nowrap;
-      margin-top: 36px;
-      margin-left: -32px;
+      margin-top: 8px;
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 26px;
+        left: 10px;
+        margin-top: -30px;
+        width: 0;
+        height: 0;
+        border-bottom: 4px solid #000000;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+      }
     }
 
     &:hover .contributorName {
@@ -259,8 +269,6 @@
   }
 
   .mapCount {
-    margin-left: 48px;
-    width: 24px;
     padding:17px 0 17px 36px;
 
     .mapCountIcon {

frontend/src/components/TopicCard.js

@@ -49,9 +49,8 @@ var funcs = {
     nodeValues.desc_html = Util.mdToHTML(nodeValues.desc_markdown)
     return nodeValues
   },
-  bindShowCardListeners: function(topic) {
-    var self = TopicCard
-
+  bindShowCardListeners: function(topic, ActiveMapper) {
+    var authorized = topic.authorizeToEdit(ActiveMapper)
     var selectingMetacode = false
     // attach the listener that shows the metacode title when you hover over the image
     $('.showcard .metacodeImage').mouseenter(function() {
@@ -133,7 +132,7 @@ var funcs = {
       })
       $('.metacodeSelect li li').click(metacodeLiClick)
 
-      var bipName = $(showCard).find('.best_in_place_name')
+      var bipName = $('.showcard').find('.best_in_place_name')
       bipName.bind('best_in_place:activate', function() {
         var $el = bipName.find('textarea')
         var el = $el[0]
@@ -165,7 +164,7 @@ var funcs = {
       })
 
       // this is for all subsequent renders after in-place editing the desc field
-      const bipDesc = $(showCard).find('.best_in_place_desc')
+      const bipDesc = $('.showcard').find('.best_in_place_desc')
       bipDesc.bind('ajax:success', function() {
         var desc = $(this).html() === $(this).data('bip-nil')
         ? ''
@@ -218,7 +217,7 @@ var funcs = {
     }
     // ability to change permission
     var selectingPermission = false
-    if (topic.authorizePermissionChange(Active.Mapper)) {
+    if (topic.authorizePermissionChange(ActiveMapper)) {
       $('.showcard .yourTopic .mapPerm').click(openPermissionSelect)
       $('.showcard').click(hidePermissionSelect)
     }
@@ -260,9 +259,10 @@ class ReactTopicCard extends Component {
   }
 
   componentDidMount = () => {
-    const { topic } = this.props
+    const { topic, ActiveMapper } = this.props
     embedly('on', 'card.rendered', this.embedlyCardRendered)
     topic.get('link') && topic.get('link') !== '' && this.loadLink()
+    funcs.bindShowCardListeners(topic, ActiveMapper)
   }
 
   componentWillUnmount = () => {
@@ -363,7 +363,7 @@ class ReactTopicCard extends Component {
             <div className="linkItem mapCount">
               <div className="mapCountIcon"></div>
               {values.map_count}
-              <div className ="hoverTip">Click to see which maps topic appears on</div>
+              <div className="hoverTip">Click to see which maps topic appears on</div>
               <div className="tip"><ul>{values.inmaps}</ul></div>
             </div>
             <a href={`/topics/${values.id}`} target="_blank" className="linkItem synapseCount">