From d115861584d10423739dd714b3a546e9ab5f3b86 Mon Sep 17 00:00:00 2001
From: Shai Mor <sj1mor@gmail.com>
Date: Mon, 22 Sep 2014 11:36:53 -0400
Subject: [PATCH] collabCompass img and p for content and styling

---
 app/assets/javascripts/src/Metamaps.js |  9 ++++-----
 app/assets/stylesheets/application.css | 25 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index fcbedaf3..45c6240c 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -1418,7 +1418,7 @@ Metamaps.Realtime = {
         });
         $('body').click(self.close);
 
-        self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');   
+        self.socket = io.connect('http://localhost:5001'); 
         self.startActiveMap();
     },
     toggleBox: function (event) {
@@ -1598,9 +1598,9 @@ Metamaps.Realtime = {
         $('#compass' + data.userid).remove();
         $('<div/>', {
             id: 'compass' + data.userid,
-            text: data.username,
             class: 'collabCompass'
-        }).appendTo('#wrapper');
+        }).html('<img width="28" height="28" src="'+data.userimage+'" /><p>'+data.username+'</p>').appendTo('#wrapper');
+
     },
     newPeerOnMap: function (data) {
         var self = Metamaps.Realtime;
@@ -1629,9 +1629,8 @@ Metamaps.Realtime = {
         $('#compass' + data.userid).remove();
         $('<div/>', {
             id: 'compass' + data.userid,
-            text: data.username,
             class: 'collabCompass'
-        }).appendTo('#wrapper');
+        }).html('<img width="28" height="28" src="'+data.userimage+'" /><p>'+data.username+'</p>').appendTo('#wrapper');
 
         Metamaps.GlobalUI.notifyUser(data.username + ' just joined the map');
 
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 8cdea3d6..3474ec04 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1924,3 +1924,28 @@ float: left;
 .templates {
     display: none;
 }
+
+/* collabCompass section */
+.collabCompass:hover p {
+    display: block;
+}
+.collabCompass p {
+    display: none;
+    background-color: #4fb5c0;
+    color: #FFFFFF;
+    padding: 0 8px 0 8px; 
+    position: absolute;
+    top: 9px;
+    left:30px;
+    z-index: 1;
+    font-size: 14px;
+    line-height: 14px;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+.collabCompass img {
+    border-radius: 16px;
+    border: 2px solid #4fb5c0;
+    z-index: 2;
+
+}
\ No newline at end of file