finished up map info box in terms of dynamically switching pages to other maps. styled other tips.

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -165,6 +165,9 @@ Metamaps.GlobalUI = {
 
         clearTimeout(self.notifyTimeOut);
         Metamaps.Famous.toast.hide();
+    },
+    shareInvite: function(inviteLink) {
+        window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
     }
 };
 

app/assets/javascripts/src/Metamaps.js

@@ -1335,7 +1335,7 @@ Metamaps.SynapseCard = {
     add_user_info: function (synapse) {
         var u = '<div id="edgeUser" class="hoverForTip">';
         u += '<img src="" width="24" height="24" />'
-        u += '<div class="tip">Created by ' + synapse.get("user_name") + '</div></div>';
+        u += '<div class="tip">' + synapse.get("user_name") + '</div></div>';
         $('#editSynLowerBar').append(u);
 
         // get mapper image
@@ -4503,7 +4503,7 @@ Metamaps.Map.InfoBox = {
     isOpen: false,
     changing: false,
     selectingPermission: false,
-    changePermissionText: "<div class='tip'>As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>",
+    changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>",
     nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
     descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
     init: function () {
@@ -4631,9 +4631,17 @@ Metamaps.Map.InfoBox = {
     createContributorList: function () {
         var self = Metamaps.Map.InfoBox;
 
-        var mapperNames = Metamaps.Mappers.pluck("name");
+        var string = ""; 
 
-        return mapperNames.length > 0 ? mapperNames.join(", ") : "No one has added anything yet.";
+        string += "<ul>";
+
+        Metamaps.Mappers.each(function(m){
+            string += '<li><img class="rtUserImage" width="25" height="25" src="' + m.get("image") + '" />' + m.get("name") + '</li>';
+        });
+        
+        string += "</ul>";
+
+        return string;
     },
     updateNumbers: function () {
         var self = Metamaps.Map.InfoBox;

app/assets/stylesheets/application.css

@@ -531,7 +531,7 @@ input[type="submit"]:active {
     background: #FFFFFF;
     height: 14px;
     margin: 0;
-    padding: 10px 6px;
+    padding: 14px 6px;
     border: none;
     border-radius: 2px;
     outline: none;
@@ -1360,9 +1360,14 @@ float: left;
 #new_topic .tt-suggestion, 
 #new_synapse .tt-suggestion {
     background: #F5F5F5;
-    width: 270px;
     position: relative;
 }
+#new_topic .tt-suggestion {
+    width: 256px;
+}
+#new_synapse .tt-suggestion {
+    width: 270px;
+}
 #new_topic .autocompleteSection {
     float: left;
 }
@@ -1460,25 +1465,25 @@ float: left;
 #new_topic .topicOriginatorIcon img {
     border-radius: 12px;
 }
-#new_topic .topicOriginatorIcon:hover .tip,
+#new_topic .topicOriginatorIcon .tooltips {
-#new_synapse .synapseOriginatorIcon:hover .tip {
+    left: 32px;
-    display: block;
+    top: -2px;
+    right: auto;
 }
-#new_topic .tip,
+#new_topic .topicOriginatorIcon .tooltips:after {
-#new_synapse .tip {
+    content: '';
-    display: none;
     position: absolute;
-    background: white;
+    top: 57%;
-    width: auto;
+    left: -4px;
-    top: 0;
+    margin-top: -6px;
-    left: 23px;
+    width: 0;
-    color: black;
+    height: 0;
-    white-space: nowrap;
+    border-right: 4px solid #000000;
-    border-radius: 4px;
+    border-top: 5px solid transparent;
-    font-size: 15px !important;
+    border-bottom: 5px solid transparent;
-    line-height: 15px;
+}
-    padding: 2px 5px 2px;
+#new_topic .topicOriginatorIcon:hover .tooltips {
-    z-index: 100;
+    display:block;
 }
 
 #new_synapse .tt-dropdown-menu {
@@ -1509,7 +1514,7 @@ float: left;
     top: 4px;
 }
 #new_synapse .synapseOriginatorIcon .tooltips {
-    right: 36px;
+    right: 32px;
     top: -2px;
 }
 #new_synapse .synapseOriginatorIcon .tooltips:after {
@@ -1609,7 +1614,6 @@ float: left;
     margin: 9px 0px 9px 56px;
     padding: 0;
     width: 64px;
-    cursor: pointer;
 }
 #mapContribs {
     float: left;
@@ -1647,8 +1651,6 @@ float: left;
     background: #202020;
     min-width: 180px;
     max-width: 250px;
-    min-height: 44px;
-    max-height: 188px;
     text-align: center;
     color: black;
     border-radius: 4px;
@@ -1663,6 +1665,11 @@ float: left;
     left: -10px;
 }
 
+.mapContributors .tip ul {
+    max-height: 188px;
+    overflow-y: auto;
+}
+
 .mapContributors .tip li {
     list-style-type: none;
     white-space: nowrap;
@@ -1682,7 +1689,7 @@ float: left;
 .mapContributors div:after {
     content: '';
     position: absolute;
-    margin-top: -124px;
+    top: -4px;
     left: 21px;
     width: 0;
     height: 0;
@@ -1699,14 +1706,32 @@ float: left;
     border-radius: 14px;
 }
 
-.mapInfoBox .mapPermission .tip {
-    top: 0;
-    right: 32px;
-}
 .mapInfoBox .hoverForTip:hover .tip {
     display: block;
 }
 
+.mapInfoBox .mapPermission .tooltips {
+    top: -20px;
+    right: 36px;
+    width: 155px;
+    white-space: normal;
+    text-align: center;
+}
+.mapInfoBox .mapPermission .tooltips:after {
+    content: '';
+    position: absolute;
+    right: -4px;
+    top: 24px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid black;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}
+.mapInfoBox.yourMap .mapPermission.hoverForTip:hover .tooltips {
+    display: block;
+}
+
 .mapTopics {
     background-image: url(topic32.png);
     background-position: 13px center;
@@ -2318,6 +2343,9 @@ and it won't be important on password protected instances */
 #joinCodesBox {
     margin-top: 30px;
 }
+#joinCodesBox button {
+    margin: 16px 198px 0;
+}
 /* new map */
 
 .new_map {

app/views/layouts/_lightboxes.html.erb

@@ -227,12 +227,13 @@
           <h3>SHARE INVITE</h3>
             
 <div class="leaveSpace"></div>  
-<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, as well as building an active community of contributors and healthy culture. As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
+<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, a diverse community of contributors and a culture of collaboration and curiosity.</p>
-<p>Copy and send the link + access code below. The access code below is your personal code and can be used multiple times.</p>
+<p>As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
+<p>Below is a personal invite link containing your unique access code, which can be used multiple times.</p>
             <div id="joinCodesBox">
-          <p class="joinCodes">HTTP://METAMAPS.CC/JOIN</p>
             <% mapper = current_user %>
-          <p class="joinCodes">ACCESS CODE: <%= mapper.code %></p>
+            <p class="joinCodes">http://metamaps.cc/join?code=<%= mapper.code %></p>
+            <button class="button" onclick="Metamaps.GlobalUI.shareInvite('http://metamaps.cc/join?code=<%= mapper.code %>');">COPY INVITE LINK!</button>
             </div>
             
         </div>

app/views/layouts/_templates.html.erb

@@ -13,7 +13,7 @@
       <img id="mapContribs" class="{{contributors_class}}"
         width="25" height="25" src="{{contributor_image}}" />
       <span>{{contributor_count}}</span>
-      <div class="tip">{{contributor_list}}</div>
+      <div class="tip">{{{contributor_list}}}</div>
     </div>
     <div class="infoStatIcon mapTopics">
       {{topic_count}}
@@ -177,7 +177,7 @@
           <div class="topicNumSynapses">{{synapseCount}}</div>
           <div class="topicOriginatorIcon hoverForTip">
               <img width="24" height="24" src="{{originatorImage}}" />
-              <span class="tip topicOriginator">{{originator}}</span>
+              <span class="tooltips topicOriginator">{{originator}}</span>
           </div>
           <div class="topicPermission {{permission}}"></div>
         </div>

app/views/maps/_mapinfobox.html.erb

@@ -23,17 +23,9 @@
         <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:square) %>" class="multiple" />
       <% end %>
       <span><%= @map.contributors.count %></span>
-      <% contributorList = ''
-         @map.contributors.each_with_index do |c, index|
-            comma = (index+1) == @map.contributors.count ? '' : ', '
-            contributorList += c.name + comma
-         end 
-         if @map.contributors.count == 0
-           contributorList = 'No one has added anything yet.'
-         end %>
       <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) %>"  />
+           <li > <img class="rtUserImage" width="25" height="25" src="<%= c.image.url(:square) %>"  />
-            <%= @map.contributors[index].name %> 
+            <%= c.name %> 
             </li>         
         <% end %></ul></div>
     </div>
@@ -44,9 +36,7 @@
       <%= @map.synapses.count %>
     </div>
     <div class="infoStatIcon mapPermission <%= @map.permission %> hoverForTip">
-      <% if @map.user == user %>
+        <div class="tooltips">As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>
-        <div class="tip">As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>
-      <% end %>
     </div>
     <div class="clearfloat"></div>
   </div>