added little scrollbars on cards whose text was getting too big.

app/assets/javascripts/Jit/ForceDirected/metamapFD.js

@@ -174,14 +174,15 @@ function initFD(){
         var html = 
           '<p class="type">' + node.getData("itemcatname") + '</p>' + 
            '<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
-           '<a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' + 
+           '<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' + 
 		   '<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' + 
-           '<div class="desc"><p>' + node.getData('desc') + '</p></div>' +
+           '<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
            '<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
 
         //append connections information
         $jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
         $jit.id('item_' + node.id).innerHTML = html;
+		$("#showcard .scroll").mCustomScrollbar();
       }
     },
     //Number of iterations for the FD algorithm
@@ -239,14 +240,15 @@ function initFD(){
 		   var html = 
           '<p class="type">' + node.getData("itemcatname") + '</p>' + 
            '<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
-           '<a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' + 
+           '<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' + 
 		   '<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' + 
-           '<div class="desc"><p>' + node.getData('desc') + '</p></div>' +
+           '<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
            '<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
 
         //append connections information
         $jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
-        $jit.id('item_' + node.id).innerHTML = html;  
+        $jit.id('item_' + node.id).innerHTML = html;
+		$("#showcard .scroll").mCustomScrollbar();  
 		};  
 	  },  
     // Change node styles when DOM labels are placed

app/assets/javascripts/Jit/RGraph/metamapRG.js

@@ -180,14 +180,15 @@ function initRG(){
         var html = 
           '<p class="type">' + node.getData("itemcatname") + '</p>' + 
            '<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
-           '<a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' + 
+           '<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' + 
 		   '<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' + 
-           '<div class="desc"><p>' + node.getData('desc') + '</p></div>' +
+           '<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
            '<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
 
         //append connections information
         $jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
         $jit.id('item_' + node.id).innerHTML = html;
+		$("#showcard .scroll").mCustomScrollbar();
       }
     },
     //Number of iterations for the rg algorithm
@@ -206,14 +207,15 @@ function initRG(){
 						var html = 
 						  '<p class="type">' + node.getData("itemcatname") + '</p>' + 
 						   '<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
-						   '<a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' + 
+						   '<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' + 
 						   '<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' + 
-						   '<div class="desc"><p>' + node.getData('desc') + '</p></div>' +
+						   '<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
 						   '<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
 				
 						//append connections information
 						$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
 						$jit.id('item_' + node.id).innerHTML = html;
+						$("#showcard .scroll").mCustomScrollbar();
 					}  
 				});  
 			}  

app/assets/javascripts/application.js

@@ -18,8 +18,15 @@
 //= require Jit/ForceDirected/metamapFD
 //= require Jit/RGraph/metamapRG
 //= require Jit/filters
+//= require scroll/jquery-ui-1.8.23.custom.min
+//= require scroll/jquery.mousewheel.min
+//= require scroll/jquery.mCustomScrollbar.min
 
  $(document).ready(function() {
+	 
+	$(".focus .desc").mCustomScrollbar(); 
+	$(".scroll").mCustomScrollbar();
+	
 	$('.nodemargin').css('padding-top',$('.focus').css('height'));
 	
 	

app/assets/javascripts/scroll/jquery.mousewheel.min.js

@@ -0,0 +1,12 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)

app/assets/stylesheets/application.css

@@ -12,6 +12,7 @@
  *= require_tree .
  *= require base
  *= require ForceDirected
+ *= require jquery.mCustomScrollbar
 */
 
 /* clear styles */
@@ -55,7 +56,7 @@ input[type="submit"] { margin-top:5px; }
 
 .headertop { display:block; position:fixed; top:0; left:0; z-index:10; height:38px; width:100%; min-width:622px; background: url(topbg2.png) repeat-x top left; }
 #mainTitle { float: left; }
-#mainTitle a { color:#FFF; font-family: "vinyl",sans-serif; text-transform:uppercase; font-weight: 400;}
+#mainTitle a { color:#FFF; font-family: "vinyl",sans-serif; font-style: italic; text-transform:uppercase; font-weight: 400;}
 .headertop ul { display:block; float: right; }
 .headertop ul li {display:block; float:right; margin:10px 5px 0 5px; }
 .headertop ul li a { color:#FFF; }
@@ -75,7 +76,7 @@ input[type="submit"] { margin-top:5px; }
 .focus .focusright p { font-weight:normal; font-size:16px; line-height:20px; padding:10px 0 5px 10px; }
 .focus .icon { margin:0 auto; }
 .focus .title { font-size:22px; line-height:25px; border-bottom:2px solid #000; padding:10px; }
-.focus .desc { padding:10px; }
+.focus .desc { padding:10px; height:75px; font-family:Arial, Helvetica, sans-serif; }
 .focus .desc h3 { font-style:normal; }
 .focus .location { padding-left:10px; }
 .focus .link { padding:0 0 0 10px; display:block; width:90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

app/assets/stylesheets/items.css.scss

@@ -2,7 +2,7 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.item { display:block; float:left; position:relative; width:170px; height:300px; padding:10px 10px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; }
+.item { display:block; float:left; position:relative; width:175px; height:300px; padding:10px 5px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; }
 
 .item .delete {position: absolute;
 top: -14px;
@@ -17,6 +17,8 @@ padding: 0;
 cursor:pointer;
 }
 
+.item .scroll { display:block; height:283px; }
+
 .item .type {position: absolute;
 color: white;
 top: -22px;
@@ -29,7 +31,7 @@ line-height: 24px;}
 
 .item .title { font-size:22px; line-height:25px; display:block; border-bottom:2px solid #000; padding-bottom:5px; }
 
-.item .desc { font-size:15px; }
+.item .desc { font-size:15px; font-family:Arial, Helvetica, sans-serif; }
 .item .desc h3 { font-style:normal; margin-top:5px; }
 
 .item .link { position:absolute; width:170px; top:295px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

app/assets/stylesheets/jquery.mCustomScrollbar.css

@@ -0,0 +1,199 @@
+/* basic scrollbar styling */
+/* vertical scrollbar */
+.mCSB_container{
+	width:auto;
+	margin-right:15px;
+	overflow:hidden;
+}
+.mCSB_container.mCS_no_scrollbar{
+	margin-right:0;
+}
+.mCustomScrollBox .mCSB_scrollTools{
+	width:16px;
+	height:100%;
+	top:0;
+	right:0;
+}
+.mCSB_scrollTools .mCSB_draggerContainer{
+	height:100%;
+	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
+}
+.mCSB_scrollTools .mCSB_buttonUp+.mCSB_draggerContainer{
+	padding-bottom:40px;
+}
+.mCSB_scrollTools .mCSB_draggerRail{
+	width:2px;
+	height:100%;
+	margin:0 auto;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+}
+.mCSB_scrollTools .mCSB_dragger{
+	cursor:pointer;
+	width:100%;
+	height:30px;
+}
+.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:4px;
+	height:100%;
+	margin:0 auto;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+	text-align:center;
+}
+.mCSB_scrollTools .mCSB_buttonUp,
+.mCSB_scrollTools .mCSB_buttonDown{
+	height:20px;
+	overflow:hidden;
+	margin:0 auto;
+	cursor:pointer;
+}
+.mCSB_scrollTools .mCSB_buttonDown{
+	bottom:0;
+	margin-top:-40px;
+}
+/* horizontal scrollbar */
+.mCSB_horizontal .mCSB_container{
+	height:auto;
+	margin-right:0;
+	margin-bottom:30px;
+	overflow:hidden;
+}
+.mCSB_horizontal .mCSB_container.mCS_no_scrollbar{
+	margin-bottom:0;
+}
+.mCSB_horizontal.mCustomScrollBox .mCSB_scrollTools{
+	width:100%;
+	height:16px;
+	top:auto;
+	right:auto;
+	bottom:0;
+	left:0;
+	overflow:hidden;
+}
+.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerContainer{
+	height:100%;
+	width:auto;
+	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
+	overflow:hidden;
+}
+.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft+.mCSB_draggerContainer{
+	padding-bottom:0;
+	padding-right:20px;
+}
+.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerRail{
+	width:100%;
+	height:2px;
+	margin:7px 0;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+}
+.mCSB_horizontal .mCSB_scrollTools .mCSB_dragger{
+	width:30px;
+	height:100%;
+}
+.mCSB_horizontal .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:100%;
+	height:4px;
+	margin:6px auto;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+}
+.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft,
+.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight{
+	width:20px;
+	height:100%;
+	overflow:hidden;
+	margin:0 auto;
+	cursor:pointer;
+	float:left;
+}
+.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight{
+	right:0;
+	bottom:auto;
+	margin-left:-40px;
+	margin-top:-16px;
+	float:right;
+}
+
+/* default scrollbar colors and backgrounds */
+.mCustomScrollBox .mCSB_scrollTools{
+	opacity:0.75;
+}
+.mCustomScrollBox:hover .mCSB_scrollTools{
+	opacity:1;
+}
+.mCSB_scrollTools .mCSB_draggerRail{
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.4);
+	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	background:#fff; /* rgba fallback */
+	background:rgba(255,255,255,0.75);
+	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+	background:rgba(255,255,255,0.85);
+	filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+	background:rgba(255,255,255,0.9);
+	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_buttonUp,
+.mCSB_scrollTools .mCSB_buttonDown,
+.mCSB_scrollTools .mCSB_buttonLeft,
+.mCSB_scrollTools .mCSB_buttonRight{
+	background-image:url(mCSB_buttons.png);
+	background-repeat:no-repeat;
+	opacity:0.4;
+	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_buttonUp{
+	background-position:0 0;
+	/* 
+	sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) 
+	*/
+}
+.mCSB_scrollTools .mCSB_buttonDown{
+	background-position:0 -20px;
+	/* 
+	sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) 
+	*/
+}
+.mCSB_scrollTools .mCSB_buttonLeft{
+	background-position:0 -40px;
+	/* 
+	sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) 
+	*/
+}
+.mCSB_scrollTools .mCSB_buttonRight{
+	background-position:0 -56px;
+	/* 
+	sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) 
+	*/
+}
+.mCSB_scrollTools .mCSB_buttonUp:hover,
+.mCSB_scrollTools .mCSB_buttonDown:hover,
+.mCSB_scrollTools .mCSB_buttonLeft:hover,
+.mCSB_scrollTools .mCSB_buttonRight:hover{
+	opacity:0.75;
+	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_buttonUp:active,
+.mCSB_scrollTools .mCSB_buttonDown:active,
+.mCSB_scrollTools .mCSB_buttonLeft:active,
+.mCSB_scrollTools .mCSB_buttonRight:active{
+	opacity:0.9;
+	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
+}

app/assets/stylesheets/maps.css.scss

@@ -2,7 +2,7 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.map { display:block; float:left; position:relative; width:170px; height:300px; padding:10px 10px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; }
+.map { display:block; float:left; position:relative; width:175px; height:300px; padding:10px 5px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; }
 
 .map .delete {position: absolute;
 top: -14px;
@@ -17,6 +17,8 @@ padding: 0;
 cursor:pointer;
 }
 
+.map .scroll { display:block; height:283px; }
+
 .map .type {position: absolute;
 color: white;
 top: -22px;
@@ -29,7 +31,7 @@ line-height: 24px;}
 
 .map .title { font-size:22px; line-height:25px; display:block; border-bottom:2px solid #000; padding-bottom:5px; }
 
-.map .desc { font-style:italic; font-size:15px; }
+.map .desc { font-size:15px; font-family:Arial, Helvetica, sans-serif; }
 .map .desc h3 { font-style:normal; margin-top:5px; }
 
 .map .link { position:absolute; width:170px; top:295px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

app/views/items/_item.html.erb

@@ -2,7 +2,9 @@
 	<% if item.user == user %><%= link_to 'Delete', user_item_path(@user,item), :class => 'delete', :confirm => 'Delete this topic and all synapses linking to it?', :method => :delete, :remote => true%><% end %>
 	<p class="type"><%= item.item_category.name %></p>
 	<%= image_tag item.item_category.icon, :class => 'icon', :size => '50x50' %>
-	<%= link_to item.name, user_item_path(@user, item), :class => 'title' %>
+	<div class="scroll">
-	<div class="desc"><p><%=item.desc %></p></div>
+		<%= link_to item.name, user_item_path(@user, item), :class => 'title' %>
+		<div class="desc"><p><%=item.desc %></p></div>
+	</div>
 	<%= link_to item.link, item.link, :class => 'link', :target => '_blank' %>
 <% end %>

app/views/items/create.js.erb

@@ -47,5 +47,6 @@ if (map2 != null) {
 }
 else {
 	$('#cards').prepend('<%= escape_javascript(render(@item)) %>');
+	$(".scroll").mCustomScrollbar();
 }
 		

app/views/layouts/application.html.erb

@@ -29,7 +29,7 @@
 			<% if authenticated? %>
 				<ul id="menus">
 					<li class="accountWrap">
-						<p id="account">Account</p>
+						<p id="account">ACCOUNT</p>
 						<ul class="account">
 							<li class="first"><%= link_to "My Topics", user_items_url(user) %></li>
 							<li><%= link_to "My Synapses", user_synapses_url(user) %></li>
@@ -41,7 +41,7 @@
 					</li>
 					<li>|</li>
 					<li class="createWrap">
-						<p id="create">Create</p>
+						<p id="create">CREATE</p>
 						<ul class="create">
 							<li class="first"><%= link_to "Add Topic", new_user_item_path(user), id: "newtopic" %></li>
 							<li><%= link_to "Add Synapse", new_user_synapse_path(user), id: "newsynapse" %></li>
@@ -50,7 +50,7 @@
 					</li>
 					<li>|</li>
 					<li class="exploreWrap">
-						<p id="explore">Explore</p>
+						<p id="explore">EXPLORE</p>
 						<ul class="explore">
 							<li class="first"><%= link_to "Maps", allmaps_path %></li>
 							<li class="last"><%= link_to "Metamap", metamap_path %></li>

app/views/maps/_map.html.erb

@@ -1,6 +1,8 @@
 <%= div_for map do %>
 	<% if map.user == user %><%= link_to 'Delete', user_map_path(map.user,map), :class => 'delete', :confirm => 'Delete this map (nodes and synapses will remain)?', :method => :delete, :remote => true %><% end %>
-	<%= link_to map.name, user_map_path(map.user, map), :class => 'title' %>
+	<div class="scroll">
-	<div class="desc"><p><%= map.desc %></p><p># of Topics: <%= map.items.count %></p><p># of Synapses: <%= map.synapses.count %></p></div>
+		<%= link_to map.name, user_map_path(map.user, map), :class => 'title' %>
+		<div class="desc"><p><%= map.desc %></p><p># of Topics: <%= map.items.count %></p><p># of Synapses: <%= map.synapses.count %></p></div>
+	</div>
 	<div class="link"><p>Permissions:<%= map.permission %></p></div>
 <% end %>