From 8390756dddf8470ac2aaf5adaefa6ff3d8dfb62c Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Mon, 23 Apr 2012 17:57:04 -0700
Subject: [PATCH] pop up stats on hover instead of always showing them [ci
 skip]

---
 .../stylesheets/new_styles/_canvas.scss       | 22 +++++++++++++-----
 app/assets/templates/small-frame.jst.hbs      | 23 ++++++++++---------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss
index c2a3a3d87..e40c4e647 100644
--- a/app/assets/stylesheets/new_styles/_canvas.scss
+++ b/app/assets/stylesheets/new_styles/_canvas.scss
@@ -50,6 +50,11 @@ body {
 
     &:hover {
       @include box-shadow(0,1px,5px,rgba(0,0,0,0.5));
+
+      .info {
+        bottom : 0;
+      }
+
       cursor : pointer;
     }
 
@@ -108,11 +113,19 @@ body {
   }
 
   .info {
-    @include opacity(0.3);
+    @include transition(bottom);
+    @include opacity(0.8);
+
+    background-color : rgba(255,255,255,0.4);
+
+    position : absolute;
+    bottom : -30px;
+    right : 0;
+    text-align : center;
+    width : 100%;
 
     padding : 5px;
-    max-height : 10px;
-    text-align : right;
+    padding-right : 8px;
     i {
       margin-left:  3px;
     }
@@ -191,9 +204,6 @@ body {
 
 
   &.wallpaper {
-    .info {
-      
-    }
     .content{
       display: table;
     }
diff --git a/app/assets/templates/small-frame.jst.hbs b/app/assets/templates/small-frame.jst.hbs
index 498e2f19f..e93686469 100644
--- a/app/assets/templates/small-frame.jst.hbs
+++ b/app/assets/templates/small-frame.jst.hbs
@@ -24,16 +24,17 @@
         </div>
     {{/if}}
 
-        <div class="text-content">
-            {{{text}}}
-        </div>
-        {{#if text}}
-            <div class="background-color"></div>
-        {{/if}}
+    <div class="text-content">
+        {{{text}}}
+    </div>
+    {{#if text}}
+        <div class="background-color"></div>
+    {{/if}}
+
+    <div class="info">
+        <i class="icon-heart"></i> {{likes_count}}
+        <i class="icon-retweet"></i> {{reshares_count}}
+        <i class="icon-comment"></i> {{comments_count}}
+    </div>
 </div>
 
-<div class="info">
-    <i class="icon-heart"></i> {{likes_count}}
-    <i class="icon-retweet"></i> {{reshares_count}}
-    <i class="icon-comment"></i> {{comments_count}}
-</div>