From 3c4974d5efcbaf8d7b13963903b7b56fecfc38f9 Mon Sep 17 00:00:00 2001
From: Thomas Menari <t@menari.eu>
Date: Thu, 24 Jan 2013 19:39:28 +0000
Subject: [PATCH] make more l33t

---
 modules/profile/pages.js        |  2 +-
 public/styles.css               | 31 +++++++++++++++++++++++++++++++
 views/profile/profile.jade      |  3 +++
 views/profile/profile_grid.jade | 11 ++++++-----
 views/users/connections.jade    |  2 +-
 5 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/modules/profile/pages.js b/modules/profile/pages.js
index 543567e..96acbed 100644
--- a/modules/profile/pages.js
+++ b/modules/profile/pages.js
@@ -23,7 +23,7 @@ var pages = function(dbot) {
             });
         },
 
-        '/grid/:connection': function(req, res) {
+        '/profile/:connection': function(req, res) {
             var connection = req.params.connection;
             var profiles = dbot.db.profiles[connection];
 
diff --git a/public/styles.css b/public/styles.css
index 900c548..671d5c3 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -193,3 +193,34 @@ li.option-votes {
   text-align: left;
   margin-bottom: 10px;
 }
+
+/**
+ * spaceinvader's thumbnails
+ */
+span.nicks {
+  display: none;
+  color: #fff;
+  text-decoration: none;
+  position: absolute;
+  left: 0px;
+  top: 10px;
+  width: 100%;
+}
+div.imgwrap {
+  background-color: #000;
+  position: relative;
+}
+div.imgwrap > img {
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+ 
+.thumbnail:hover > div.imgwrap > img {
+  opacity: 0.5;
+}
+
+.thumbnail:hover > div.imgwrap > span.nicks {
+  display: inline;
+}
diff --git a/views/profile/profile.jade b/views/profile/profile.jade
index 04b018d..414dee5 100644
--- a/views/profile/profile.jade
+++ b/views/profile/profile.jade
@@ -92,3 +92,6 @@ block content
                           #{chan.fields.wpl.data}
                       td
                           #{chan.fields.in_mentions.data}
+      ul.pager
+        li.previous
+          a(href='/profile/'+connection) &larr; Back to #{connection}.
diff --git a/views/profile/profile_grid.jade b/views/profile/profile_grid.jade
index df63fc5..ad7a5a1 100644
--- a/views/profile/profile_grid.jade
+++ b/views/profile/profile_grid.jade
@@ -4,10 +4,11 @@ block content
   div.page-header.profile_page-header
     h1 
       #{connection}
-  div.span9
+  ul.thumbnails
     each profile, key in profiles
       if profile.hasOwnProperty('profile') && profile.profile.avatar
-        div.span2  
-          a(href='/profile/'+connection+'/'+encodeURIComponent(key)) 
-            h3= profile.profile.primary
-            img.profile_avatar(src="#{profile.profile.avatar}")
+        li.span2
+          a.thumbnail(href='/profile/'+connection+'/'+encodeURIComponent(key))
+            div.imgwrap
+              img(src="#{profile.profile.avatar}", alt="#{key}'s photo")
+              span.nicks #{profile.profile.primary}
diff --git a/views/users/connections.jade b/views/users/connections.jade
index 023376b..27681e9 100644
--- a/views/users/connections.jade
+++ b/views/users/connections.jade
@@ -7,4 +7,4 @@ block content
     #modulelinks
       -each connection in connections
         a.module(href='/channels/'+connection) #{connection}
-        a.module(href='/grid/'+connection) #{connection} headshots
+        a.module(href='/profile/'+connection) #{connection} headshots