glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Connor Turland 2012-10-31 18:53:11 -04:00
parent 69b2fe87cc
commit 3b2214017f
15 changed files with 280 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/Jit/ForceDirected/metamapFD.js
View file

@ -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

10
app/assets/javascripts/Jit/RGraph/metamapRG.js
View file

@ -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();
}
});
}

7
app/assets/javascripts/application.js
View file

@ -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'));

25
app/assets/javascripts/scroll/jquery-ui-1.8.23.custom.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
app/assets/javascripts/scroll/jquery.mCustomScrollbar.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

12
app/assets/javascripts/scroll/jquery.mousewheel.min.js vendored Normal file
View file

@ -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)

BIN
app/assets/javascripts/scroll/mCSB_buttons.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

5
app/assets/stylesheets/application.css
View file

@ -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; }

6
app/assets/stylesheets/items.css.scss
View file

@ -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; }

199
app/assets/stylesheets/jquery.mCustomScrollbar.css Normal file
View file

@ -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 */
}

6
app/assets/stylesheets/maps.css.scss
View file

@ -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; }

6
app/views/items/_item.html.erb
View file

@ -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="desc"><p><%=item.desc %></p></div>
<div class="scroll">
<%= 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 %>

1
app/views/items/create.js.erb
View file

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

6
app/views/layouts/application.html.erb
View file

@ -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>

6
app/views/maps/_map.html.erb
View file

@ -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="desc"><p><%= map.desc %></p><p># of Topics: <%= map.items.count %></p><p># of Synapses: <%= map.synapses.count %></p></div>
<div class="scroll">
<%= 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 %>