From 818042aeaedee13bb45606ca4709200a339a0c24 Mon Sep 17 00:00:00 2001
From: Bashar Jabbour <basharjabbour@gmail.cim>
Date: Tue, 18 Nov 2014 14:48:50 -0500
Subject: [PATCH] added tooltip of map contributors in mapinfo lightbox

---
 app/assets/stylesheets/application.css | 51 ++++++++++++++++++++++++--
 app/assets/stylesheets/base.css        | 16 +++++++-
 app/views/maps/_mapinfobox.html.erb    |  7 +++-
 3 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 1c72ee8e..6a525026 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1598,10 +1598,19 @@ float: left;
     float: left;
 }
 
+
+#mapContribsTip {
+    border: 2px solid #424242;
+    background-color: #fff;
+    width: 25px;
+    height: 25px;
+    border-radius: 15px;
+}
+
 .infoStatIcon .tip {
     display: none;
     position: absolute;
-    background: white;
+    background: black;
     min-width: 180px;
     max-width: 250px;
     text-align: center;
@@ -1609,20 +1618,54 @@ float: left;
     border-radius: 4px;
     font-size: 15px !important;
     line-height: 17px;
-    padding: 3px 5px 2px;
+    padding: 3px 10px 2px;
     z-index: 100;
 }
 .mapContributors .tip {
-    top: 38px;
+    top: 45px;
     left: 6px;
 }
+
+.mapContributors .tip li {
+    list-style-type: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 11px 36px;
+    display: block;
+    height: 14px;
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 14px;
+    line-height: 14px;
+    position: relative;
+    text-align: left;
+    color: white;
+}
+
+.mapContributors div:after{
+    content: '';
+    position: absolute;
+    margin-top: -115px;
+    left: inherit;
+    width: 0;
+    height: 0;
+    border-bottom: 4px solid #000000;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+.mapContributors .tip img {
+    border: 2px solid #424242
+}
+
 .mapInfoBox .mapPermission .tip {
     top: 0;
     right: 32px;
 }
 .mapInfoBox .hoverForTip:hover .tip {
-    display: none;
+    display: block;
 }
+
 .mapTopics {
     background-image: url(topic32.png);
     background-position: 13px center;
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 3cce20a2..486bffc1 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -456,7 +456,21 @@ background-color: #E0E0E0;
   bottom: 0;
 }
 
-.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
+.tip li {
+  list-style-type: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 10px 34px;
+  display: block;
+  height: 14px;
+  font-family: 'din-regular', helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 14px;
+  position: relative;
+}
+
+.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip, #mapContribs:hover .tip {
   display:block;
 }
 .CardOnGraph .tip, .mapCard .tip {
diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb
index 4989f1c2..4f592e3f 100644
--- a/app/views/maps/_mapinfobox.html.erb
+++ b/app/views/maps/_mapinfobox.html.erb
@@ -18,6 +18,7 @@
         <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:square) %>" />
       <% elsif @map.contributors.count == 2 %>
         <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:square) %>" class="multiple mTwo" />
+        <div class="mapContribsDrop"> 
       <% elsif @map.contributors.count > 2 %>
         <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:square) %>" class="multiple" />
       <% end %>
@@ -30,7 +31,11 @@
          if @map.contributors.count == 0
            contributorList = 'No one has added anything yet.'
          end %>
-      <div class="tip"><%= contributorList %></div>
+      <div class="tip"> <ul><%    @map.contributors.each_with_index do |c, index| %>
+           <li > <img class="rtUserImage" width="25" height="25" src="<%= @map.contributors[index].image.url(:square) %>"  />
+            <%= @map.contributors[index].name %> 
+            </li>         
+        <% end %></ul></div>
     </div>
     <div class="infoStatIcon mapTopics">
       <%= @map.topics.count %>