collabCompass img&p for content and styling

MacInstallation.md

@@ -1 +1,40 @@
-TODO
+install homebrew
+
+    \curl -sSL https://get.rvm.io | bash -s stable --rails
+
+    rvm install 1.9.3 --with-gcc=clang
+
+    rvm use 1.9.3
+
+    gem install lunchy 
+
+(http://www.moncefbelyamani.com/how-to-install-postgresql-on-a-mac-with-homebrew-and-lunchy/)
+
+
+    brew install postgresql
+    ln -sfv /usr/local/opt/postgresql/*.plist ~/Library/LaunchAgents
+    createuser metamaps -P -s -d
+
+set a password
+
+    lunchy start postgres
+
+
+cd into the metamaps directory
+
+    bundle install
+
+
+copy the database.yml.default file and rename it database.yml
+make sure the username and password match the POSTGRES username and password you set
+
+
+http://nodejs.org/ hit install, download, open, install
+
+
+    rake db:create
+    rake db:schema:load
+    rake db:fixtures:load
+    rails s 
+    
+( to start the server) 

app/assets/javascripts/lib/cloudcarousel.js

@@ -177,10 +177,20 @@ jQuery.browser = browser;
 		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
 		if (options.mouseWheel)
 		{
+			// START METAMAPS CODE
+			$('body').bind('mousewheel',this,function(event, delta) {					 
+					 if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) {
+					 	event.data.rotate(delta);
+					 	return false;
+					 }
+				 });
+			// END METAMAPS CODE
+			/* ORIGINAL CODE
 			$(container).bind('mousewheel',this,function(event, delta) {					 
 					 event.data.rotate(delta);
 					 return false;
 				 });
+			*/
 		}
 		$(container).bind('mouseover click',this,function(event){
 			

app/assets/javascripts/src/JIT.js

@@ -2450,9 +2450,13 @@ Extras.Classes.Navigation = new Class({
     
     // START METAMAPS CODE
 	  if (e.target.id != 'infovis-canvas') return;
+    if (Metamaps.Create.newTopic.beingCreated) return;
 	  // END METAMAPS CODE
   
-    $.event.stop($.event.get(e, win));
+    //$.event.stop($.event.get(e, win));
+    // END METAMAPS CODE
+    // ORIGINAL CODE $.event.stop($.event.get(e, win));
+
     var val = this.config.zooming / 1000,
         ans = 1 + scroll * val;
         

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

@@ -108,15 +108,6 @@ Metamaps.GlobalUI = {
                     'opacity': '0.42'
         }, 200);
         
-        if (Metamaps.Create && !Metamaps.Create.metacodeScrollerInit) {
-            $('.customMetacodeList, .metacodeSetList').mCustomScrollbar({
-                mouseWheelPixels: 200,
-                advanced: {
-                    updateOnContentResize: true
-                }
-            });
-            Metamaps.Create.metacodeScrollerInit = true;
-        }
         if (which == "switchMetacodes") {
             Metamaps.Create.isSwitchingSet = true;
         }

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

@@ -11,7 +11,6 @@ Metamaps.JIT = {
 
         $(".zoomIn").click(self.zoomIn);
         $(".zoomOut").click(self.zoomOut);
-        $(".centerMap").click(self.centerMap);
         $(".zoomExtents").click(self.zoomExtents);
     },
     /**
@@ -690,8 +689,6 @@ Metamaps.JIT = {
         var self = Metamaps.JIT;
 
         if (node && !node.nodeFrom) {
-            Metamaps.Create.newTopic.hide();
-            Metamaps.Create.newSynapse.hide();
             var pos = eventInfo.getPos();
             // if it's a left click, or a touch, move the node
             if (e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
@@ -738,6 +735,8 @@ Metamaps.JIT = {
                     tempNode = node;
                     tempInit = true;
 
+                    Metamaps.Create.newTopic.hide();
+                    Metamaps.Create.newSynapse.hide();
                     // set the draw synapse start positions
                     var l = Metamaps.Selected.Nodes.length;
                     if (l > 0) {
@@ -763,7 +762,6 @@ Metamaps.JIT = {
                 temp = eventInfo.getNode();
                 if (temp != false && temp.id != node.id && Metamaps.Selected.Nodes.indexOf(temp) == -1) { // this means a Node has been returned
                     tempNode2 = temp;
-                    Metamaps.Visualize.mGraph.plot();
                     
                     Metamaps.Mouse.synapseEndCoordinates = {
                         x: tempNode2.pos.getc().x,
@@ -775,8 +773,7 @@ Metamaps.JIT = {
                         n.setData('dim', 25, 'current');
                     });
                     temp.setData('dim', 35, 'current');
-                    Metamaps.Visualize.mGraph.fx.plotNode(tempNode, Metamaps.Visualize.mGraph.canvas);
+                    Metamaps.Visualize.mGraph.plot();
-                    Metamaps.Visualize.mGraph.fx.plotNode(temp, Metamaps.Visualize.mGraph.canvas);
                 } else if (!temp) {
                     tempNode2 = null;
                     Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
@@ -787,8 +784,6 @@ Metamaps.JIT = {
                     var myY = e.clientY - 30;
                     $('#new_topic').css('left', myX + "px");
                     $('#new_topic').css('top', myY + "px");
-                    $('#new_synapse').css('left', myX + "px");
-                    $('#new_synapse').css('top', myY + "px");
                     Metamaps.Create.newTopic.x = eventInfo.getPos().x;
                     Metamaps.Create.newTopic.y = eventInfo.getPos().y;
                     Metamaps.Visualize.mGraph.plot();
@@ -803,6 +798,7 @@ Metamaps.JIT = {
     }, // onDragMoveTopicHandler
     onDragCancelHandler: function (node, eventInfo, e) {
         tempNode = null;
+        if (tempNode2) tempNode2.setData('dim', 25, 'current');
         tempNode2 = null;
         tempInit = false;
         // reset the draw synapse positions to false
@@ -811,7 +807,7 @@ Metamaps.JIT = {
         Metamaps.Visualize.mGraph.plot();
     }, // onDragCancelHandler
     onDragEndTopicHandler: function (node, eventInfo, e) {
-        var mapping;
+        var midpoint = {}, pixelPos, mapping;
 
         if (tempInit && tempNode2 == null) {
             // this means you want to add a new topic, and then a synapse
@@ -822,6 +818,13 @@ Metamaps.JIT = {
             Metamaps.Create.newTopic.addSynapse = false;
             Metamaps.Create.newSynapse.topic1id = tempNode.id;
             Metamaps.Create.newSynapse.topic2id = tempNode2.id;
+            tempNode2.setData('dim', 25, 'current');
+            Metamaps.Visualize.mGraph.plot();
+            midpoint.x = tempNode.pos.getc().x + (tempNode2.pos.getc().x - tempNode.pos.getc().x) / 2;
+            midpoint.y = tempNode.pos.getc().y + (tempNode2.pos.getc().y - tempNode.pos.getc().y) / 2;
+            pixelPos = Metamaps.Util.coordsToPixels(midpoint);
+            $('#new_synapse').css('left', pixelPos.x + "px");
+            $('#new_synapse').css('top', pixelPos.y + "px");
             Metamaps.Create.newSynapse.open();
             tempNode = null;
             tempNode2 = null;
@@ -830,11 +833,22 @@ Metamaps.JIT = {
             // this means you dragged an existing node, autosave that to the database
             if (Metamaps.Active.Map) {
                 mapping = node.getData('mapping');
-                mapping.set({
+                mapping.save({
                     xloc: node.getPos().x,
                     yloc: node.getPos().y
                 });
-                mapping.save();
+                // also save any other selected nodes that also got dragged along
+                var l = Metamaps.Selected.Nodes.length;
+                for (var i = l - 1; i >= 0; i -= 1) {
+                    var n = Metamaps.Selected.Nodes[i];
+                    if (n !== node) {
+                        mapping = n.getData('mapping');
+                        mapping.save({
+                            xloc: n.getPos().x,
+                            yloc: n.getPos().y
+                        });
+                    }
+                };
             }
         }
     }, //onDragEndTopicHandler
@@ -1114,6 +1128,9 @@ Metamaps.JIT = {
 
         if (Metamaps.Visualize.mGraph.busy) return;
 
+        // select the node
+        Metamaps.Control.selectNode(node, e);
+
         // delete old right click menu
         $('.rightclickmenu').remove();
         // create new menu for clicked on node

app/assets/javascripts/src/Metamaps.js

@@ -360,7 +360,6 @@ Metamaps.Backbone.init = function () {
  */
 Metamaps.Create = {
     isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
-    metacodeScrollerInit: false, // indicates whether the scrollbar in the custom metacode set space has been init
     selectedMetacodeSet: null,
     selectedMetacodeSetIndex: null,
     selectedMetacodeNames: [],
@@ -438,7 +437,8 @@ Metamaps.Create = {
         $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
             titleBox: $('#metacodeImgTitle'),
             yRadius: 40,
-            xPos: 150,
+            xRadius: 190,
+            xPos: 170,
             yPos: 40,
             speed: 0.3,
             mouseWheel: true,
@@ -522,7 +522,8 @@ Metamaps.Create = {
             $("#metacodeImg").CloudCarousel({
                 titleBox: $('#metacodeImgTitle'),
                 yRadius: 40,
-                xPos: 150,
+                xRadius: 190,
+                xPos: 170,
                 yPos: 40,
                 speed: 0.3,
                 mouseWheel: true,
@@ -611,6 +612,8 @@ Metamaps.Create = {
             Metamaps.Create.newTopic.addSynapse = false;
             Metamaps.Create.newSynapse.topic1id = 0;
             Metamaps.Create.newSynapse.topic2id = 0;
+            Metamaps.Mouse.synapseStartCoordinates = [];
+            Metamaps.Visualize.mGraph.plot();
         },
         getSearchQuery: function () {
             var self = Metamaps.Create.newSynapse;
@@ -632,9 +635,10 @@ Metamaps.Create = {
  *
  */
 Metamaps.TopicCard = {
-    openTopicCard: null, //stores the JIT local ID of the topic with the topic card open
+    openTopicCard: null, //stores the topic that's currently open
-    linkActionsString: '<div class="linkActions"><div id="linkremove">Remove</div></div>',
+    authorizedToEdit: false, // stores boolean for edit permission for open topic card
     init: function () {
+        var self = Metamaps.TopicCard;
 
         // initialize best_in_place editing
         $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
@@ -645,31 +649,57 @@ Metamaps.TopicCard = {
         $('.showcard').draggable({
             handle: ".metacodeImage"
         });
-    },
+
-    fadeInShowCard: function (topic) {
+        embedly('on', 'card.rendered', self.embedlyCardRendered);
-        $('.showcard').fadeIn('fast');
-        Metamaps.TopicCard.openTopicCard = topic.isNew() ? topic.cid : topic.id;
     },
     /**
      * Will open the Topic Card for the node that it's passed
      * @param {$jit.Graph.Node} node
      */
     showCard: function (node) {
+        var self = Metamaps.TopicCard;
 
         var topic = node.getData('topic');
 
+        self.openTopicCard = topic;
+        self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper);
         //populate the card that's about to show with the right topics data
-        Metamaps.TopicCard.populateShowCard(topic);
+        self.populateShowCard(topic);
-        Metamaps.TopicCard.fadeInShowCard(topic);
+        $('.showcard').fadeIn('fast');
     },
     hideCard: function () {
+        var self = Metamaps.TopicCard;
+
         $('.showcard').fadeOut('fast');
-        Metamaps.TopicCard.openTopicCard = null;
+        self.openTopicCard = null;
+        self.authorizedToEdit = false;
+    },
+    embedlyCardRendered: function (iframe) {
+        var self = Metamaps.TopicCard;
+
+        $('#embedlyLinkLoader').hide();
+        $('#embedlyLink').fadeIn('fast');
+        if (self.authorizedToEdit) {
+            $('.embeds').append('<div id="linkremove"></div>');
+            $('#linkremove').click(self.removeLink);
+        }
+    },
+    removeLink: function () {
+        var self = Metamaps.TopicCard;
+        self.openTopicCard.save({
+            link: null
+        });
+        $('.embeds').empty();
+        $('.attachments').removeClass('hidden');
+        $('.addAttachment').show();
+        $('.CardOnGraph').removeClass('hasAttachment');
     },
     bindShowCardListeners: function (topic) {
         var self = Metamaps.TopicCard;
         var showCard = document.getElementById('showcard');
 
+        var authorized = self.authorizedToEdit;
+
         // get mapper image
         var setMapperImage = function (mapper) {
             $('.contributorIcon').attr('src', mapper.get('image'));
@@ -687,7 +717,6 @@ Metamaps.TopicCard = {
             $('.attachments').append(addLinkDiv);
             $('.showcard #addLinkReset').click(resetFunc);
             $('.showcard #addLinkInput input').bind("paste keyup",inputEmbedFunc);
-
             $('#addLinkInput input').focus();
         };
         var resetFunc = function () {
@@ -712,38 +741,31 @@ Metamaps.TopicCard = {
                         'data-card-description': '0',
                         href: text
                     }).html(text);
-                    //embedlyEl.embedly({
-                    //    query: {maxwidth: 300},
-                    //    key: '7983300f4c1f48569ca242e3d6bff1e9'
-                    //});
                     $('.addLink').remove();
+                    $('.attachments').addClass('hidden');
                     $('.embeds').append(embedlyEl);
+                    $('.embeds').append('<div id="embedlyLinkLoader"></div>');
+                    var loader = new CanvasLoader('embedlyLinkLoader');
+                    loader.setColor('#4fb5c0'); // default is '#000000'
+                    loader.setDiameter(28); // default is 40
+                    loader.setDensity(41); // default is 40
+                    loader.setRange(0.9); // default is 1.3
+                    loader.show(); // Hidden by default
                     embedly('card', document.getElementById('embedlyLink'));
                     $('.CardOnGraph').addClass('hasAttachment');
-                    $('.attachments').append(self.linkActionsString);
-                    bindLinkActionListeners();
                 }
             }, 100);
         };
-        var removeLinkFunc = function () {
+
-            topic.save({
+        // initialize the link card, if there is a link
-                link: null
+        if (topic.get('link') && topic.get('link') !== '') {
-            });
+            var loader = new CanvasLoader('embedlyLinkLoader');
-            $('.embeds').empty();
+            loader.setColor('#4fb5c0'); // default is '#000000'
-            $('.linkActions').remove();
+            loader.setDiameter(28); // default is 40
-            $('.addAttachment').show();
+            loader.setDensity(41); // default is 40
-            $('.CardOnGraph').removeClass('hasAttachment');
+            loader.setRange(0.9); // default is 1.3
-        };
+            loader.show(); // Hidden by default
-        var bindLinkActionListeners = function () {
-            $('#linkremove').click(removeLinkFunc);
-        };
-        if (topic.get('link')) {
-            //$('#embedlyLink').embedly({
-            //    query: {maxwidth: 300},
-            //    key: '7983300f4c1f48569ca242e3d6bff1e9'
-            //});
             embedly('card', document.getElementById('embedlyLink'));
-            bindLinkActionListeners();
         }
         $('.showcard #addlink').click(addLinkFunc);
 
@@ -761,38 +783,79 @@ Metamaps.TopicCard = {
             }
         });
 
-        $('.showcard .metacodeTitle').click(function () {
+        var metacodeLiClick = function () {
-            if (!selectingMetacode) {
-                selectingMetacode = true;
-                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
-                $('.metacodeSelect').show();
-                $('.metacodeSelect li').click(function () {
             selectingMetacode = false;
             var metacodeName = $(this).find('.mSelectName').text();
             var metacode = Metamaps.Metacodes.findWhere({
                 name: metacodeName
             });
-                    $('.CardOnGraph').find('.metacodeTitle').text(metacodeName)
+            $('.CardOnGraph').find('.metacodeTitle').html(metacodeName)
+                .append('<div class="expandMetacodeSelect"></div>')
                 .attr('class', 'metacodeTitle mbg' + metacodeName.replace(/\s/g, ''));
             $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')');
             topic.save({
                 metacode_id: metacode.id
             });
             Metamaps.Visualize.mGraph.plot();
-                    $('.metacodeTitle').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
             $('.metacodeSelect').hide();
-                    setTimeout(function () {
             $('.metacodeTitle').hide();
             $('.showcard .icon').css('z-index', '1');
-                    }, 500);
+        };
-                });
+
-            } else {
+        var openMetacodeSelect = function (event) {
-                selectingMetacode = false;
+            if (!selectingMetacode) {
-                $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+                selectingMetacode = true;
-                $('.metacodeSelect').hide();
+                $('.metacodeSelect').show();
+                event.stopPropagation();
             }
+        };
+
+        var hideMetacodeSelect = function () {
+            selectingMetacode = false;
+            $('.metacodeSelect').hide();
+            $('.metacodeTitle').hide();
+            $('.showcard .icon').css('z-index', '1');
+        };
+
+        if (authorized) {
+            $('.showcard .metacodeTitle').click(openMetacodeSelect);
+            $('.showcard').click(hideMetacodeSelect);
+            $('.metacodeSelect > ul li').click(function (event){
+                event.stopPropagation();
+            });
+            $('.metacodeSelect li li').click(metacodeLiClick);
+
+            var bipName = $(showCard).find('.best_in_place_name');
+            bipName.best_in_place();
+            bipName.bind("best_in_place:activate", function () {
+                var $el = bipName.find('textarea');
+                var el = $el[0];
+
+                $el.attr('maxlength', '140');
+
+                $('.showcard .title').append('<div class="titleCounter"></div>');
+
+                var callback = function (data) {
+                    $('.titleCounter').html(data.all + '/140');
+                };
+                Countable.live(el, callback);
+            });
+            bipName.bind("best_in_place:deactivate", function () {
+                $('.titleCounter').remove();
             });
 
+            //bind best_in_place ajax callbacks
+            bipName.bind("ajax:success", function () {
+                var name = Metamaps.Util.decodeEntities($(this).html());
+                topic.set("name", name);
+            });
+
+            $(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
+                this.innerHTML = this.innerHTML.replace(/\r/g, '')
+                var desc = $(this).html();
+                topic.set("desc", desc);
+            });
+        }
 
         // ability to change permission
         var selectingPermission = false;
@@ -825,39 +888,6 @@ Metamaps.TopicCard = {
                 }
             });
         }
-
-        if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
-            var bipName = $(showCard).find('.best_in_place_name');
-            bipName.best_in_place();
-            bipName.bind("best_in_place:activate", function () {
-                var $el = bipName.find('textarea');
-                var el = $el[0];
-
-                $el.attr('maxlength', '140');
-
-                $('.showcard .title').append('<div class="titleCounter"></div>');
-
-                var callback = function (data) {
-                    $('.titleCounter').html(data.all + '/140');
-                };
-                Countable.live(el, callback);
-            });
-            bipName.bind("best_in_place:deactivate", function () {
-                $('.titleCounter').remove();
-            });
-
-            //bind best_in_place ajax callbacks
-            bipName.bind("ajax:success", function () {
-                var name = Metamaps.Util.decodeEntities($(this).html());
-                topic.set("name", name);
-            });
-
-            $(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
-                this.innerHTML = this.innerHTML.replace(/\r/g, '')
-                var desc = $(this).html();
-                topic.set("desc", desc);
-            });
-        }
     },
     populateShowCard: function (topic) {
         var self = Metamaps.TopicCard;
@@ -902,24 +932,28 @@ Metamaps.TopicCard = {
         }
 
         var desc_nil = "Click to add description...";
-        var addAttachmentHidden='';
 
-        nodeValues.attachments = '';
+        nodeValues.attachmentsHidden = '';
-        if (topic.get('link') && topic.get('link')!=='') {
+        if (topic.get('link') && topic.get('link')!== '') {
             nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank" data-card-chrome="0" data-card-description="0">';
             nodeValues.embeds += topic.get('link');
-            nodeValues.embeds += '</a>';
+            nodeValues.embeds += '</a><div id="embedlyLinkLoader"></div>';
-            addAttachmentHidden='hidden';
+            nodeValues.attachmentsHidden = 'hidden';
-            nodeValues.attachments += self.linkActionsString;
             nodeValues.hasAttachment = "hasAttachment";
         }
         else {
             nodeValues.embeds = '';
             nodeValues.hasAttachment = '';
         }
-        nodeValues.attachments += '<div class="addAttachment ' +addAttachmentHidden+ '">';
+
-        nodeValues.attachments+= '<div id="addlink"><div id="linkIcon" class="attachmentIcon"></div>Attach a link</div>';
+        if (authorized) {
-        nodeValues.attachments+= '<div id="addupload"><div id="uploadIcon" class="attachmentIcon"></div>Upload a file</div></div>';
+            nodeValues.attachments = '<div class="addAttachment">';
+            nodeValues.attachments += '<div id="addlink"><div id="linkIcon" class="attachmentIcon"></div>Attach a link</div>';
+            nodeValues.attachments += '<div id="addupload"><div id="uploadIcon" class="attachmentIcon"></div>Upload a file</div></div>';
+        } else {
+            nodeValues.attachmentsHidden = 'hidden';
+            nodeValues.attachments = '';
+        }
 
         nodeValues.permission = topic.get("permission");
         nodeValues.mk_permission = topic.get("permission").substring(0, 2);
@@ -1369,6 +1403,20 @@ Metamaps.Util = {
     getDistance: function (p1, p2) {
         return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
     },
+    coordsToPixels: function (coords) {
+        var canvas = Metamaps.Visualize.mGraph.canvas,
+            s = canvas.getSize(),
+            p = canvas.getPos(),
+            ox = canvas.translateOffsetX,
+            oy = canvas.translateOffsetY,
+            sx = canvas.scaleOffsetX,
+            sy = canvas.scaleOffsetY;
+        var pixels = {
+          x: (coords.x / (1/sx)) + p.x + s.width/2 + ox,
+          y: (coords.y / (1/sy)) + p.y + s.height/2 + oy
+        };
+        return pixels;
+    },
     generateOptionsList: function (data) {
         var newlist = "";
         for (var i = 0; i < data.length; i++) {
@@ -1591,9 +1639,11 @@ Metamaps.Realtime = {
         mapperListItem += '<div class="littleJuntoIcon"></div>';
         mapperListItem += '</li>';
 
+        if (data.userid !== Metamaps.Active.Mapper.id) {
             $('#mapper' + data.userid).remove();
             $('.realtimeMapperList ul').append(mapperListItem);
 
+<<<<<<< HEAD
         // create a div for the collaborators compass
         $('#compass' + data.userid).remove();
         $('<div/>', {
@@ -1601,6 +1651,16 @@ Metamaps.Realtime = {
             class: 'collabCompass'
         }).html('<img width="28" height="28" src="'+data.userimage+'" /><p>'+data.username+'</p>').appendTo('#wrapper');
 
+=======
+            // create a div for the collaborators compass
+            $('#compass' + data.userid).remove();
+            $('<div/>', {
+                id: 'compass' + data.userid,
+                text: data.username,
+                class: 'collabCompass'
+            }).appendTo('#wrapper');
+        }
+>>>>>>> fe1f35d63eda20b39e97f11c8bb75135281d5b98
     },
     newPeerOnMap: function (data) {
         var self = Metamaps.Realtime;
@@ -1617,6 +1677,7 @@ Metamaps.Realtime = {
         };
 
         // create an item for them in the realtime box
+<<<<<<< HEAD
         var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">';
         mapperListItem += '<img src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
         mapperListItem += data.username;
@@ -1644,6 +1705,38 @@ Metamaps.Realtime = {
             mapid: Metamaps.Active.Map.id
         };
         socket.emit('updateNewMapperList', update);
+=======
+        if (data.userid !== Metamaps.Active.Mapper.id) {
+            var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">';
+            mapperListItem += '<img src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
+            mapperListItem += data.username;
+            mapperListItem += '<div class="littleJuntoIcon"></div>';
+            mapperListItem += '</li>';
+            $('#mapper' + data.userid).remove();
+            $('.realtimeMapperList ul').append(mapperListItem);
+
+            // create a div for the collaborators compass
+            $('#compass' + data.userid).remove();
+            $('<div/>', {
+                id: 'compass' + data.userid,
+                text: data.username,
+                class: 'collabCompass'
+            }).appendTo('#wrapper');
+
+            Metamaps.GlobalUI.notifyUser(data.username + ' just joined the map');
+
+            // send this new mapper back your details, and the awareness that you've loaded the map
+            var update = {
+                userToNotify: data.userid,
+                username: Metamaps.Active.Mapper.get("name"),
+                userimage: Metamaps.Active.Mapper.get("image"),
+                userid: Metamaps.Active.Mapper.id,
+                userrealtime: self.status,
+                mapid: Metamaps.Active.Map.id
+            };
+            socket.emit('updateNewMapperList', update);
+        }
+>>>>>>> fe1f35d63eda20b39e97f11c8bb75135281d5b98
     },
     lostPeerOnMap: function (data) {
         var self = Metamaps.Realtime;
@@ -1691,18 +1784,7 @@ Metamaps.Realtime = {
         var self = Metamaps.Realtime;
         var socket = Metamaps.Realtime.socket;
 
-        var c = data.usercoords,
+        var pixels = Metamaps.Util.coordsToPixels(data.usercoords);
-            canvas = Metamaps.Visualize.mGraph.canvas,
-            s = canvas.getSize(),
-            p = canvas.getPos(),
-            ox = canvas.translateOffsetX,
-            oy = canvas.translateOffsetY,
-            sx = canvas.scaleOffsetX,
-            sy = canvas.scaleOffsetY;
-        var pixels = {
-          x: (c.x / (1/sx)) + p.x + s.width/2 + ox,
-          y: (c.y / (1/sy)) + p.y + s.height/2 + oy
-        };
         $('#compass' + data.userid).css({
             left: pixels.x + 'px',
             top: pixels.y + 'px'
@@ -3063,6 +3145,8 @@ Metamaps.Map = {
             $('.rightclickmenu').remove();
             Metamaps.TopicCard.hideCard();
             Metamaps.SynapseCard.hideCard();
+            Metamaps.Create.newTopic.hide();
+            Metamaps.Create.newSynapse.hide();
             Metamaps.Realtime.endActiveMap();
         }
     },

app/assets/stylesheets/application.css

@@ -183,12 +183,20 @@ input[type="submit"]:active {
 .edit_user,
 .forgotPassword {
     display: block;
-    width: 250px;
+    width: 300px;
     background-color: #E0E0E0;
-    padding: 20px;
+    padding: 16px;
     border-radius: 5px;
     color: black;
     box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
+    top: 50%;
+    left:50%;
+    position:absolute;
+    margin-left: -166px;
+}
+.forgotPassword {
+    height: 134px;
+    margin-top: -83px;
 }
 .centerGreyForm input[type="text"],
 .centerGreyForm input[type="email"],
@@ -230,57 +238,55 @@ input[type="submit"]:active {
     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-#closenewtopic,
-#closenewsynapse {
-    position: absolute;
-    top: 3px;
-    right: 3px;
-}
 .new_topic {
     /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
     top: -1000px;
     left: -1000px;
     display: block;
     position: absolute;
-    width: 300px;
+    width: 340px;
-    margin: -40px 0 0 -50px;
+    margin: -40px 0 0 -35px;
-}
+    z-index: 1;
-.new_synapse {
-    display: none;
-    position: absolute;
 }
+
 #new_topic .twitter-typeahead {
     position: absolute !important;
     top: 40px;
-    left: 50px;
+    left: 35px;
     z-index: 9999;
-    width: 202px;
+    width: 270px;
-    height: 37px;
+    height: 42px;
-    font-family: ':atp';
 }
 .new_topic #topic_name,
 .new_topic .tt-hint {
-    width: 190px;
+    width: 254px;
-    background: rgba(0, 0, 0, 0.8);
+    background: #FFFFFF;
-    height: 25px;
+    height: 14px;
     margin: 0;
-    padding: 5px 5px;
+    padding: 14px 8px;
-    border: 1px solid black;
+    border: none;
+    border-radius: 2px;
     outline: none;
-    font-size: 25px;
+    font-size: 14px;
-    line-height: 35px;
+    line-height: 14px;
-    color: rgba(255, 255, 255, 0.7);
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+.new_topic .tt-hint {
+    color: #BDBDBD;
 }
 .openMetacodeSwitcher {
     display: block;
-    height: 20px;
+    height: 16px;
-    width: 20px;
+    width: 16px;
-    background-image: url('MMCCicon_metacode_set_change.png');
+    background-image: url(metacodesettings_sprite.png);
-    background-size: contain;
     position: absolute;
     z-index: 2;
     top: 20px;
-    left: 30px;
+    left: 16px;
+}
+.openMetacodeSwitcher:hover {
+    background-position: -16px 0;
 }
 #metacodeImg {
     height: 120px;
@@ -289,27 +295,15 @@ input[type="submit"]:active {
     float: left;
     width: 120px;
     text-align: center;
-    margin-left: 90px;
+    margin-left: 110px;
 }
 /* synapse autocomplete */
-
+.new_synapse {
-.new_topic #topic_name {
+    display: none;
-    color: white;
+    position: absolute;
-}
+    z-index: 1;
-.new_topic .tt-hint {
+    margin-left: -135px;
-    color: grey;
+    margin-top: -21px;
-}
-.new_topic #topic_name,
-.new_topic .tt-hint {
-    width: 190px;
-    background: rgba(0, 0, 0, 0.8);
-    height: 25px;
-    margin: 0;
-    padding: 5px 5px;
-    border: 1px solid black;
-    outline: none;
-    font-size: 18px;
-    line-height: 35px;
 }
 .new_synapse #synapse_desc {
     color: rgba(255, 255, 255, 0.7);
@@ -319,15 +313,18 @@ input[type="submit"]:active {
 }
 .new_synapse #synapse_desc,
 .new_synapse .tt-hint {
-    width: 200px;
+    width: 254px;
-    background: rgba(0, 0, 0, 0.8);
+    background: #FFFFFF;
-    height: 18px;
+    height: 14px;
     margin: 0;
-    padding: 5px 5px;
+    padding: 14px 8px;
-    border: 1px solid black;
+    border: none;
+    border-radius: 2px;
     outline: none;
-    font-size: 16px;
+    font-size: 14px;
-    line-height: 20px;
+    line-height: 14px;
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
 }
 label,
 select,
@@ -907,35 +904,98 @@ float: left;
 
 #new_topic .tt-suggestion.tt-is-under-cursor,
 #new_topic .tt-suggestion.tt-is-under-mouse-cursor {
-    background: #0E161D;
+    background: #E0E0E0;
 }
 #new_topic .tt-suggestion {
-    padding: 5px;
+    background: #F5F5F5;
-    background: rgba(42, 52, 60, 0.9);
+    width: 270px;
-    ;
+    position: relative;
 }
 #new_topic .autocompleteSection {
     float: left;
 }
+#new_topic .topicType {
+    padding: 4px 0 0 4px;
+}
 #new_topic .topicTitle {
-    width: 130px;
+    width: 190px;
-    line-height: 22px;
+    line-height: 14px;
+    font-size: 14px;
+    padding: 9px 0 9px 4px;
+}
+#new_topic .expandTopicMetadata {
+    display:none;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-repeat: no-repeat;
+    background-image: url(arrowright_sprite.png);
+    background-position: 0 -32px;
+}
+#new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata,
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata {
+    display: block;
+}
+#new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata,
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata {
+    display: block;
+}
+#new_topic .topicMetadata {
+    position: absolute;
+    display: none;
+    top: -18px;
+    right: -100px;
+    width: 100px;
+    height: 70px;
+    background-color: #E0E0E0;
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 14px;
 }
 #new_topic .topicPermission {
-    width: 20px;
+    width: 32px;
-    height: 20px;
+    height: 32px;
     background-repeat: no-repeat;
-    background-position: center center;
+    background-image: url(permissions32_sprite.png);
-    background-size: 16px 16px;
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+}
+#new_topic .topicPermission.commons {
+    background-position: 0 0;
+}
+#new_topic .topicPermission.public {
+    background-position: -64px 0;
+}
+#new_topic .topicPermission.private {
+    background-position: -32px 0;
+}
+#new_topic .topicNumMaps {
+    height: 14px;
+    padding: 1px 0 1px 32px;
+    background-image: url(metamap16.png);
+    background-repeat: no-repeat;
+    background-position: 8px 0;
+    position: absolute;
+    top: 10px;
+}
+#new_topic .topicNumSynapses {
+    height: 14px;
+    padding: 1px 0 1px 32px;
+    background-image: url(synapse16.png);
+    background-repeat: no-repeat;
+    background-position: 8px 0;
+    position: absolute;
+    bottom: 10px;
 }
 #new_topic .topicOriginatorIcon {
-    position: relative;
+    position: absolute;
-    width: 20px;
+    top: 8px;
-    height: 20px;
+    right: 8px;
-    background-repeat: no-repeat;
+}
-    background-position: center center;
+#new_topic .topicOriginatorIcon img {
-    background-size: 16px 16px;
+    border-radius: 12px;
-    background-image: url(MMCCicon_mapper.png);
 }
 #new_topic .topicOriginatorIcon:hover .tip {
     display: block;
@@ -1195,7 +1255,7 @@ float: left;
     display: none;
 }
 #lightbox_main {
-    width: 770px;
+    width: 800px;
     height: auto;
     margin: 0 auto;
     z-index: 2;
@@ -1223,24 +1283,22 @@ float: left;
     border: solid 2px #000;
 }
 #lightbox_overlay #lightbox_main a#lightbox_close {
-    /*background-image: url(../images/barometer_close.png);*/
+    background-image: url(xlightbox.png);
     cursor: pointer;
-    height: 42px;
+    height: 32px;
-    outline-color: -moz-use-text-color;
     outline-style: none;
     outline-width: medium;
     overflow: hidden;
     position: absolute;
-    top: -23px;
+    top: -8px;
-    right: -22px;
+    right: -32px;
-    width: 42px;
+    width: 32px;
     z-index: 4;
     border: none;
+    background-repeat: no-repeat;
+    background-position: center center;
 }
 #lightbox_content {
-/*    background: white url(metacode-watermark.png) 443px -30px no-repeat;
-    padding: 20px;
-    border-radius: 5px;*/
     width: 552px;
     height: 434px;
     background-color: #e0e0e0;
@@ -1429,6 +1487,7 @@ float: left;
 }
 #metacodeSwitchTabs > ul li {
     font-size: 14px;
+    text-transform: uppercase;
 }
 #metacodeSwitchTabs li.ui-state-active a {
     color: #00BCD4;
@@ -1436,9 +1495,8 @@ float: left;
 .customMetacodeList,
 .metacodeSetList {
     height: 301px;
-    overflow: hidden;
+    overflow-y: auto;
     margin: 5px 0 15px 0;
-    /*  border-bottom: 1px solid #BBB;*/
 }
 .customMetacodeList ul li {
     cursor: pointer;
@@ -1657,6 +1715,7 @@ float: left;
 }
 .permText {
     width: 360px;
+    height: 32px;
     margin: 16px 20px 0;
     text-align: center;
     float: right;
@@ -1734,6 +1793,9 @@ float: left;
 #helpWrapper li:hover, #helpWrapper li.ui-state-active {
     border-bottom: 2px solid #00BCD4;
 }
+#helpWrapper li.ui-state-active a, #helpWrapper li.ui-state-hover a {
+  color: #424242;
+}
 #helpWrapper li a {
     padding: 0;
     font-family: 'din-medium', helvetica, sans-serif;
@@ -1742,6 +1804,9 @@ float: left;
 #quickReference {
     padding: 32px 0 0 0;
 }
+#quickReference .ui-widget-content {
+  color: #424242;
+}
 #quickReference ul {
     width: 150px;
 }
@@ -1768,6 +1833,35 @@ float: left;
 #upYourSkillz {
     margin: 0 68px;
 }
+#moreResources {
+    padding: 16px 0 0 0;
+    font-size: 14px;
+    line-height: 18px;
+    color: #424242;
+}
+.resourcesColumn {
+    margin-top: 32px;
+    width: 273px;
+    display: inline-block;
+    text-align: center;
+    text-transform: uppercase;
+}
+.resourcesColumn ul {
+    list-style: none;
+}
+.resourcesColumn li {
+    margin-top: 16px;
+}
+.resourcesColumn a.button {
+    background-color: #00BCD4;
+    color: #FFF;
+    padding-top: 8px;
+    height: 24px;
+}
+.resourcesColumn li a {
+    color: #424242;
+}
+
 /* Admin Pages */
 
 .blackBox {
@@ -1900,8 +1994,8 @@ float: left;
 #wrapper .requestInvite {
     width: 700px;
     margin: 0 auto;
-    padding: 20px;
+    padding: 0 0 60px 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: #FFFFFF;
     color: white;
     height: 100%;
     overflow: hidden;

app/assets/stylesheets/base.css

@@ -288,21 +288,29 @@ cursor: pointer;
   position: absolute;
   line-height: 24px;
   height:24px;
-  font-size: 20px;
+  font-size: 24px;
   display: none;
   width: 90%;
-  padding: 11px 0 11px 10%;
+  padding: 13px 0 9px 10%;
   background-color: #64BC61;
-  color: #000;
+  color: #424242;
 }
 .permission.canEdit .metacodeTitle {
   cursor:pointer;
-  background-image: url(MMCCicon_maximize_arrow_black.png);
-  background-repeat:no-repeat;
-  background-position: right center;
 }
-.permission.canEdit .metacodeTitle.minimize {
+
-  background-image: url(MMCCicon_minimize_arrow_black.png);
+.permission.canEdit .expandMetacodeSelect {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 16px;
+  height: 16px;
+  background-image: url(arrowright_sprite.png);
+  background-repeat: no-repeat;
+  background-position: 0 -32px;
+}
+.permission.canEdit .minimize .expandMetacodeSelect {
+  
 }
 
 .CardOnGraph .metacodeImage {
@@ -322,38 +330,61 @@ cursor: pointer;
 }
 .CardOnGraph .metacodeSelect {
   display:none;
-  width:100%;
+  width:200px;
   z-index: 2;
   position: absolute;
   background: #EAEAEA;
-  height: 150px;
+  left: 300px;
 }
 .CardOnGraph .metacodeSelect ul {
-font-style: italic;
+  position: relative; 
-font-family: 'vinyl';
+  line-height: 14px;
-text-transform: uppercase;
+  font-size: 14px;
-position: absolute;
+  font-family: helvetica, sans-serif;
-line-height: 36px;
+  display:block;
-font-size: 20px;
+  width: 100%;
-display:block;
+  margin:0;
-width: 100%;
+  padding: 0;
-margin:0;
+  list-style:none;
-padding: 0;
+  border: 1px solid #BDBDBD;
-list-style:none;
-height:150px;
-overflow:hidden;
 }
 .CardOnGraph .metacodeSelect ul li {
-background-color: #EAEAEA;
+background-color: #F5F5F5;
-width:100%;
-border-bottom:1px solid #AAAAAA;
 cursor:pointer;
+position: relative;
+padding: 9px 12px;
 }
 .CardOnGraph .metacodeSelect ul li:hover {
-background-color: #F8F8F8;
+background-color: #E0E0E0;
 }
-.CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName {
+.CardOnGraph .metacodeSelect ul li img {
-float:left;
+  position: absolute;
+  top: 4px;
+  left: 8px;
+}
+.CardOnGraph .metacodeSelect ul li .mSelectName {
+  padding-left: 28px;
+}
+.CardOnGraph .metacodeSelect ul ul {
+  display:none;
+  position: absolute;
+  left: 200px;
+  top: 0;
+  max-height: 270px;
+  overflow-y: auto;
+}
+.CardOnGraph .metacodeSelect li:hover ul {
+  display: block;
+}
+.CardOnGraph .metacodeSelect .expandMetacodeSet {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 16px;
+  height: 16px;
+  background-image: url(arrowright_sprite.png);
+  background-repeat: no-repeat;
+  background-position: 0 -32px;
 }
 
 .CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
@@ -373,6 +404,13 @@ float:left;
  z-index:100;
 }
 
+#embedlyLink {
+  display: none;
+}
+#embedlyLinkLoader {
+  margin: 0 auto;
+  width: 28px;
+}
 
 .CardOnGraph .attachments {
   border-top: 1px solid #BDBDBD;
@@ -479,23 +517,19 @@ font-family: 'din-regular', helvetica, sans-serif;
   position: relative;
 }
 
+.CardOnGraph .embeds {
+  position: relative;
+}
 #linkremove {
-  height: 12px;
-  padding: 26px 0 10px;
-  font-size: 12px;
   background-image: url(/assets/remove.png);
   background-repeat: no-repeat;
-  background-position: center 8px;
+  background-position: center center;
-  width: 48px;
+  width: 24px;
-  text-align: center;
+  height: 24px;
   position: absolute;
-  top: 0;
+  top: 3px;
-  right: 8px;
+  right: 0;
   cursor: pointer;
-  color: #9E9E9E;
-}
-#linkremove:hover {
-  color: #616161;
 }
 
 .cardSettings {

app/helpers/topics_helper.rb

@@ -15,6 +15,7 @@ module TopicsHelper
       topic['mapCount'] = t.maps.count
       topic['synapseCount'] = t.synapses.count
       topic['originator'] = t.user.name
+      topic['originatorImage'] = t.user.image
       topic['rtype'] = "topic"
       
       temp.push topic

app/views/layouts/_templates.html.erb

@@ -167,12 +167,18 @@
     </script>
 
     <script type="text/template" id="topicAutocompleteTemplate">
-        <img class="autocompleteSection topicType" width="22" height="22" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
+        <img class="autocompleteSection topicType" width="24" height="24" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
         <p class="autocompleteSection topicTitle">{{label}}</p>
-        <div class="autocompleteSection topicPermission {{permission}}"></div>
+        <div class="expandTopicMetadata"></div>
-        <div class="autocompleteSection topicOriginatorIcon hoverForTip">
+        <div class="topicMetadata">
+          <div class="topicNumMaps">{{mapCount}}</div>
+          <div class="topicNumSynapses">{{synapseCount}}</div>
+          <div class="topicOriginatorIcon hoverForTip">
+              <img width="24" height="24" src="{{originatorImage}}" />
               <span class="tip topicOriginator">{{originator}}</span>
           </div>
+          <div class="topicPermission {{permission}}"></div>
+        </div>
         <div class="clearfloat"></div>
     </script>
 
@@ -191,8 +197,12 @@
         </span>
         <div class="links">
             <div class="linkItem icon">
-                <div class="metacodeTitle {{metacode_class}}">{{metacode}}</div>
+                <div class="metacodeTitle {{metacode_class}}">
+                  {{metacode}}
+                  <div class="expandMetacodeSelect"></div>
+                </div>
                 <div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
+                <div class="metacodeSelect">{{{metacode_select}}}</div>
             </div>
             <div class="linkItem contributor">
                 <img src="/assets/user.png" class="contributorIcon" width="32" height="32" />
@@ -209,7 +219,6 @@
             <div class="linkItem mapPerm {{mk_permission}}" title="{{permission}}"></div>
             <div class="clearfloat"></div>
         </div>
-        <div class="metacodeSelect">{{{metacode_select}}}</div>
         <div class="scroll">
             <div class="desc">
                 <span class="best_in_place best_in_place_desc" data-url="/topics/{{id}}" data-object="topic" data-nil="{{desc_nil}}" data-attribute="desc" data-type="textarea">{{desc}}</span> 
@@ -219,7 +228,7 @@
         <div class="embeds">
            {{{embeds}}}
         </div>
-        <div class="attachments">
+        <div class="attachments {{attachmentsHidden}}">
             {{{attachments}}}
         </div>
         <div class="clearfloat"></div>

app/views/layouts/application.html.erb

@@ -104,9 +104,6 @@
     Metamaps.Loading.loader.setDensity(41); // default is 40
     Metamaps.Loading.loader.setRange(0.9); // default is 1.3
     Metamaps.Loading.loader.show(); // Hidden by default
-
-    // embedly
-    !function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b,d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}}(document);
 </script>
 
 <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>

app/views/main/requestinvite.html.erb

@@ -9,9 +9,3 @@
 <div id="yield">
 <iframe class="requestInvite" src="https://docs.google.com/forms/d/1lWoKPFHErsDfV5l7-SvcHxwX3vDi9nNNVW0rFMgJwgg/viewform?embedded=true" width="700" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
 </div>
-
-<script>
-$(document).ready(function() {
-  $('.requestInvite').height( (parseInt($('body').height()) - 40) ); 
-});
-</script>

app/views/shared/_cheatsheet.html.erb

@@ -128,5 +128,49 @@
     <div class="tutorialItem" id="advancedMapping">3. ADVANCED MAPPING</div>
 </div>
 
+<div id="moreResources">
+    <p>For more information about Metamaps.cc, visit our Knowledge Base or skip directly to a section by clicking on one of the categories below.</p>
+    <div class="resourcesColumnOne resourcesColumn">
+        <a href="#" target="_blank" data-bypass="true" class="button">Feedback Forums</a>
+        <ul>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">Getting Started</a>
+            </li>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">Key Fundamentals</a>
+            </li>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">Best Practices</a>
+            </li>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">General Troubleshooting</a>
+            </li>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">Applications & Use Cases</a>
+            </li>
+        </ul>
+    </div>
+    <div class="resourcesColumnTwo resourcesColumn">
+        <a href="#" target="_blank" data-bypass="true" class="button">KNOWLEDGE BASE</a>
+        <ul>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">General Questions</a>
+            </li>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">Getting Involved</a>
+            </li>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">Organization & Governance</a>
+            </li>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">Technical Infrastructure</a>
+            </li>
+            <li>
+                <a href="#" target="_blank" data-bypass="true">References & Key Theory</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
 
 </div>

app/views/shared/_forkmap.html.erb

@@ -5,11 +5,7 @@
 <div class="onConsole">
 <%= form_for Map.new, url: maps_url, remote: true, html: { class: "new_map", id: "fork_map" } do |form|%>
   
-  <% if controller_name == "maps" %>
   <h3 class="forCreateMap">Save To New Map</h3>
-  <% elsif controller_name == "topics" %>
-    <h3 class="forCreateMap">Save As New Map</h3>
-  <% end %>
   
   <div class="inputGroup">
     <label for="map_name">Name: </label>

app/views/shared/_metacodeoptions.html.erb

@@ -8,10 +8,11 @@
   <% MetacodeSet.order("name").all.each do |set| %>
   <li>
     <span><%= set.name %></span>
+    <div class="expandMetacodeSet"></div>
     <ul>
     	<% set.metacodes.sort { |a, b| a.name <=> b.name }.each do |m| %>
 		  <li data-id="<%= m.id.to_s %>">
-		    <img width="16" height="16" src="<%= m.icon %>" alt="<%= m.name %>" />
+		    <img width="24" height="24" src="<%= m.icon %>" alt="<%= m.name %>" />
 		    <span class="mSelectName"><%= m.name %></span>
 		    <div class="clearfloat"></div>
 		  </li>
@@ -21,10 +22,11 @@
   <% end %>
   <li>
   	<span>All</span>
+    <div class="expandMetacodeSet"></div>
   	<ul>
   		<% Metacode.order("name").all.each do |m| %>
 		  <li data-id="<%= m.id.to_s %>">
-		    <img width="16" height="16" src="<%= m.icon %>" alt="<%= m.name %>" />
+		    <img width="24" height="24" src="<%= m.icon %>" alt="<%= m.name %>" />
 		    <span class="mSelectName"><%= m.name %></span>
 		    <div class="clearfloat"></div>
 		  </li>

app/views/users/passwords/new.html.erb

@@ -4,12 +4,12 @@
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post, :class => "forgotPassword centerGreyForm" }) do |f| %>
   <%= devise_error_messages! %>
   
-  <h3>Forgot your password?</h3>
+  <h3>FORGOT PASSWORD?</h3>
 
-  <div><%= f.label :email %>
+  <div><%= f.label :email, "Enter Your Email:" %>
   <%= f.email_field :email, :autofocus => true %></div>
 
-  <div><%= f.submit "Send me reset password instructions" %></div>
+  <div><%= f.submit "Send Reset Password Instructions" %></div>
   
 <% end %>
 </div>