added more resources into help lightbox

app/assets/javascripts/src/Metamaps.js

@@ -632,9 +632,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 +646,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 +714,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 +738,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 +780,79 @@ Metamaps.TopicCard = {
             }
         });
 
-        $('.showcard .metacodeTitle').click(function () {
+        var metacodeLiClick = function () {
+            selectingMetacode = false;
+            var metacodeName = $(this).find('.mSelectName').text();
+            var metacode = Metamaps.Metacodes.findWhere({
+                name: 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();
+            $('.metacodeSelect').hide();
+            $('.metacodeTitle').hide();
+            $('.showcard .icon').css('z-index', '1');
+        };
+
+        var openMetacodeSelect = function (event) {
             if (!selectingMetacode) {
                 selectingMetacode = true;
-                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
                 $('.metacodeSelect').show();
-                $('.metacodeSelect li li').click(function () {
+                event.stopPropagation();
-                    selectingMetacode = false;
-                    var metacodeName = $(this).find('.mSelectName').text();
-                    var metacode = Metamaps.Metacodes.findWhere({
-                        name: metacodeName
-                    });
-                    $('.CardOnGraph').find('.metacodeTitle').text(metacodeName)
-                        .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 {
-                selectingMetacode = false;
-                $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-                $('.metacodeSelect').hide();
             }
-        });
+        };
 
+        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 +885,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 +929,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);

app/assets/stylesheets/application.css

@@ -273,15 +273,17 @@ input[type="submit"]:active {
 }
 .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;
 }
+.openMetacodeSwitcher:hover {
+    background-position: -16px 0;
+}
 #metacodeImg {
     height: 120px;
 }
@@ -1195,7 +1197,7 @@ float: left;
     display: none;
 }
 #lightbox_main {
-    width: 770px;
+    width: 800px;
     height: auto;
     margin: 0 auto;
     z-index: 2;
@@ -1223,24 +1225,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;
@@ -1658,6 +1658,7 @@ float: left;
 }
 .permText {
     width: 360px;
+    height: 32px;
     margin: 16px 20px 0;
     text-align: center;
     float: right;
@@ -1735,6 +1736,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;
@@ -1743,6 +1747,9 @@ float: left;
 #quickReference {
     padding: 32px 0 0 0;
 }
+#quickReference .ui-widget-content {
+  color: #424242;
+}
 #quickReference ul {
     width: 150px;
 }
@@ -1769,6 +1776,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 {

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 {
@@ -332,6 +340,7 @@ cursor: pointer;
   position: relative; 
   line-height: 14px;
   font-size: 14px;
+  font-family: helvetica, sans-serif;
   display:block;
   width: 100%;
   margin:0;
@@ -348,8 +357,13 @@ padding: 9px 12px;
 .CardOnGraph .metacodeSelect ul li:hover {
 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;
@@ -362,6 +376,16 @@ float:left;
 .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 {
   display:block;
@@ -380,6 +404,13 @@ float:left;
  z-index:100;
 }
 
+#embedlyLink {
+  display: none;
+}
+#embedlyLinkLoader {
+  margin: 0 auto;
+  width: 28px;
+}
 
 .CardOnGraph .attachments {
   border-top: 1px solid #BDBDBD;
@@ -486,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/views/layouts/_templates.html.erb

@@ -191,7 +191,10 @@
         </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>
@@ -219,7 +222,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/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>
-    <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>