Permalink
Browse files

added texture, fork ribbon, user cards and scrollable

  • Loading branch information...
1 parent 3f5c75f commit 4cc50c3cd06b71f61b732cc193e5f37fb8d95358 @ejc ejc committed Jan 5, 2011
@@ -1,8 +1,6 @@
-.member
+.item
.column.left
- - unless account.portraits.empty?
- .portraits
- = render :partial => 'portrait', :collection => account.portraits
+ = render :partial => 'portrait', :collection => account.portraits
.column.right
%h2= account.username
- unless account.names.empty?
@@ -1 +1 @@
-.item= name.value
+.name= name.value
@@ -1 +1 @@
-.item= link_to site.title, site.url
+.site= link_to site.title, site.url
@@ -1,4 +1,11 @@
-%h1 Ruby Committers
.fork= link_to 'fork me on github', 'http://github.com/tenderlove/rubycommitters.org'
-.team
- = render :partial => 'account', :collection => @accounts
+.header
+ %h1 Ruby Committers
+.scrollcontainer
+ .scrollcenter
+ %a.prev.browse.left
+ .scrollable.vertical
+ .items
+ - @accounts.each_slice(6) do |account|
+ %div= render :partial => 'account', :collection => account
+ %a.next.browse.right
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,2 +1,8 @@
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
+$(function() {
+
+ // initialize scrollable
+ $(".scrollable").scrollable({ vertical: true, mousewheel: true });
+
+});
@@ -0,0 +1,59 @@
+/*
+root element for the scrollable.
+when scrolling occurs this element stays still.
+*/
+.scrollcontainer {width: 100%;background: url(/images/scroll_bg.png);position:relative;height:641px;}
+.scrollcenter {width: 1055px;margin: 0 auto;position: relative;}
+
+.scrollable{/* required settings */
+position:absolute;overflow:hidden;width:990px;height:580px;padding: 10px 0;border:none;left:40px;top:15px}
+
+/*
+root element for scrollable items. Must be absolutely positioned
+and it should have a extremely large width to accomodate scrollable items.
+it's enough that you set the width and height for the root element and
+not for this element.
+*/
+.scrollable .items{/* this cannot be too large */
+height:20000em;position:absolute;clear:both;}
+
+.items div {float:left;}
+
+/* single scrollable item */
+.scrollable img{}
+
+/* active item */
+.scrollable .active{border:2px solid #000;position:relative;cursor:default;}
+
+/* prev, next, prevPage and nextPage buttons */
+.scrollcontainer a.browse {
+ background:#fff;
+ display:block;
+ width:30px;
+ height:30px;
+ margin:0;
+ cursor:pointer;
+ font-size:1px;
+ border:1px solid #fff;
+ position:absolute;
+}
+
+.scrollcontainer a.right,
+.scrollcontainer a.left {top:142px;}
+
+/* right */
+.scrollcontainer a.right { background-position: 0 -30px; right:0px;}
+.scrollcontainer a.right:hover { background-position:-30px -30px; }
+.scrollcontainer a.right:active { background-position:-60px -30px; }
+
+
+/* left */
+.scrollcontainer a.left { margin-left: 0px; left:0;}
+.scrollcontainer a.left:hover { background-position:-30px 0; }
+.scrollcontainer a.left:active { background-position:-60px 0; }
+
+
+/* disabled navigational button */
+.scrollcontainer a.disabled {
+ visibility:hidden !important;
+}
@@ -1,20 +1,22 @@
-.team {width: 1100px;float:left;}
+body {background: #333 url(/images/dark_noise.png);}
+.fork a {position: absolute;top:0;left: 0;width:149px;height: 149px;display:block;text-indent: -9000px;background: url(/images/fork_me_ruby_red.png) no-repeat;}
+.header {width:600px; margin: 30px auto 0;height:115px;}
+.header h1 {text-indent: -9000px;background: url(/images/logo_inset.png) no-repeat;width:600px;height:80px;margin: 0 0 0 0;}
/* Member Cards */
-.member {float: left;width: 300px;padding:10px;border:1px solid #aaa;margin: 0 10px 10px 0;}
+.item {float: left;width: 300px !important;height:280px;padding:15px 5px 5px 15px;margin: 0 10px 10px 0;background: transparent url(/images/user_card.png) no-repeat;}
-.member h2, .member h3 {float:left;width:100%;}
-.column {float: left;}
+.item h2, .item h3 {float:left;width:100%;}
+.column {}
.column.left {width:105px;}
-.column.right {width:190px;}
+.column.right {width:190px;float:right;}
.column .meta {float:left;width:100%;margin-bottom:10px;}
.column .meta .item {float:left;width:100%;margin-bottom:5px;}
-
.portrait {width: 90px;height: 100px;overflow: hidden;}
.portrait img {width: 90px;}
-.icon a {text-indent: -9000px;display:block;width:28px;height:28px;background: url(/images/social_icons.png) no-repeat;float:left;margin-right:3px;}
+.icon a {text-indent: -99999px;display:block;width:28px;height:28px;background: url(/images/social_icons.png) no-repeat;float:left;margin-right:3px;}
.icon a.github {background-position: 0 0;}
.icon a.friendfeed {background-position: -30px -0;}

0 comments on commit 4cc50c3

Please sign in to comment.