get sneaky

public/javascripts/app/pages/post-viewer.js

@@ -65,7 +65,6 @@ app.pages.PostViewer = app.views.Base.extend({
 
   invokePane : function(evt) {
     if(evt.keyCode != 32) { return }
-
     this.interactionsView.invokePane();
   },
 

public/javascripts/app/templates/feedback.handlebars

@@ -41,4 +41,3 @@
 <a href="#" class="focus_comment_textarea" rel="nofollow">
   {{t "stream.comment"}}
 </a>
-

public/javascripts/app/templates/post-viewer/feedback.handlebars

@@ -27,7 +27,15 @@
   </a>
 {{/if}}
 
-<a href="#" class="label comment" title="Comment">
+<a href="#" class="label comment" rel="interaction-pane" title="Comment">
   <i class="icon-comment icon-white"></i>
   {{comments_count}}
 </a>
+
+<!-- this acts as a dock underlay -->
+<div id="post-info-sneaky">
+  <a href="#" rel="interaction-pane">
+    <div id="post-info-container-sneaky"> </div>
+  </a>
+</div>
+

public/javascripts/app/templates/post-viewer/interactions.handlebars

@@ -6,3 +6,4 @@
     <div id="new-post-comment"> </div>
   </div>
 </div>
+

public/javascripts/app/views/post-viewer/feedback.js

@@ -10,7 +10,7 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
     "click .follow" : "toggleFollow",
     "click .reshare" : "resharePost",
 
-    "click .comment" : "invokePane"
+    "click *[rel='interaction-pane']" : "invokePane"
   },
 
   tooltipSelector : ".label",
@@ -18,5 +18,4 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
   invokePane : function(evt){
     this.trigger("invokePane")
   }
-
 })

public/javascripts/app/views/post-viewer/interactions.js

@@ -28,18 +28,24 @@ app.views.PostViewerInteractions = app.views.Base.extend({
 
   togglePane : function(evt) {
     if(evt) { evt.preventDefault() }
-    this.$("#post-info").slideToggle()
+    this.$("#post-info").slideToggle(300)
     this.removeTooltips()
   },
 
   invokePane : function(evt) {
     if(evt) { evt.preventDefault() }
-    if(!this.$("#post-info").is(":visible")) { this.togglePane() }
+    if(this.$("#post-info").is(":visible")) { return }
+
+    this.togglePane()
+    this.$("#post-info-sneaky").addClass('passive')
   },
 
   hidePane : function(evt) {
     if(evt) { evt.preventDefault() }
-    if(this.$("#post-info").is(":visible")) { this.togglePane() }
+    if(!this.$("#post-info").is(":visible")) { return }
-  }
 
+    this.togglePane()
+    setTimeout(function(){
+      this.$("#post-info-sneaky").removeClass('passive')}, 300)
+  }
 })

public/stylesheets/sass/new-templates.scss

@@ -59,6 +59,32 @@ $light-grey: #999;
   -ms-animation: $name $speed $easing;
 }
 
+@mixin info-container() {
+  @include box-shadow(0, 6px, 20px, #000);
+  @include border-radius(3px, 0px);
+  @include dark-hatched-bg();
+
+  display: inline-block;
+
+  border-top: 1px solid #555;
+  border-right: 1px solid #444;
+  border-left: 1px solid #444;
+
+  padding-top: 25px;
+
+  width: 420px;
+
+  color: #ddd;
+
+  /* webkit acceleration */
+  -webkit-transform: translateZ(0);
+}
+
+@mixin dark-hatched-bg() {
+  background-color: #444;
+  background-image: url("../images/hatched-bg-dark.png");
+}
+
 /* keyframes */
 
 @-webkit-keyframes bump-left {
@@ -344,29 +370,16 @@ $light-grey: #999;
   margin-top: 5px;
 }
 
-#post-info {
+
+#post-info,
+#post-info-sneaky {
   text-align: center;
-  z-index: 20;
+  z-index: 10;
 
   margin-top: -33px;
 
   #post-info-container {
-    @include box-shadow(0, 6px, 20px, #000);
+    @include info-container();
-    @include border-radius(3px, 0px);
-
-    display: inline-block;
-
-    border-top: 1px solid #555;
-    border-right: 1px solid #444;
-    border-left: 1px solid #444;
-
-    padding-top: 25px;
-
-    width: 420px;
-    background-color: #444;
-    background-image: url("../images/hatched-bg-dark.png");
-
-    color: #ddd;
   }
 
   .well {
@@ -397,7 +410,6 @@ $light-grey: #999;
       @include border-radius();
       margin-right: 2px;
     }
-
   }
 
   #post-comments {
@@ -437,6 +449,34 @@ $light-grey: #999;
   }
 }
 
+#post-info-sneaky {
+  @include transition(all, 0.2s);
+
+  z-index: 1;
+  position: fixed;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  bottom: 0;
+
+  margin-bottom: -60px;
+  min-height: 20px;
+
+  #post-info-container-sneaky {
+    @include info-container();
+
+    padding: 10px 0;
+    min-height: 20px;
+  }
+}
+
+#post-feedback:hover {
+  #post-info-sneaky:not(.passive) {
+    @include opacity(1);
+    margin-bottom: -13px;
+  }
+}
+
 .post-comment {
   -moz-box-shadow: 0 1px 2px -2px #999;
   -webkit-box-shadow: 0 1px 2px -2px #999;
@@ -515,6 +555,10 @@ $light-grey: #999;
     @include transition(opacity, 0.3s);
     @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9));
 
+    position: relative;
+
+    z-index: 20;
+
     padding: 5px;
     margin-right: 5px;
     line-height: 24px;
@@ -549,3 +593,9 @@ $light-grey: #999;
   height: 100%;
   width: 100%;
 }
+
+#post-feedback {
+  /* fixes flicker on hover... no idea as to why */
+  position: relative;
+  z-index: 30;
+}