diff --git a/public/javascripts/app/pages/post-viewer.js b/public/javascripts/app/pages/post-viewer.js
index 3b6ad3d24..7817f6197 100644
--- a/public/javascripts/app/pages/post-viewer.js
+++ b/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();
},
diff --git a/public/javascripts/app/templates/feedback.handlebars b/public/javascripts/app/templates/feedback.handlebars
index 9be5c0480..472cf0b0c 100644
--- a/public/javascripts/app/templates/feedback.handlebars
+++ b/public/javascripts/app/templates/feedback.handlebars
@@ -41,4 +41,3 @@
-
diff --git a/public/javascripts/app/templates/post-viewer/feedback.handlebars b/public/javascripts/app/templates/post-viewer/feedback.handlebars
index 7029bacff..8e8609b73 100644
--- a/public/javascripts/app/templates/post-viewer/feedback.handlebars
+++ b/public/javascripts/app/templates/post-viewer/feedback.handlebars
@@ -27,7 +27,15 @@
{{/if}}
-
+
+
+
+
diff --git a/public/javascripts/app/templates/post-viewer/interactions.handlebars b/public/javascripts/app/templates/post-viewer/interactions.handlebars
index e46b013e3..53e1ab79c 100644
--- a/public/javascripts/app/templates/post-viewer/interactions.handlebars
+++ b/public/javascripts/app/templates/post-viewer/interactions.handlebars
@@ -6,3 +6,4 @@
+
diff --git a/public/javascripts/app/views/post-viewer/feedback.js b/public/javascripts/app/views/post-viewer/feedback.js
index 47eab9af5..93d076f4b 100644
--- a/public/javascripts/app/views/post-viewer/feedback.js
+++ b/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")
}
-
})
diff --git a/public/javascripts/app/views/post-viewer/interactions.js b/public/javascripts/app/views/post-viewer/interactions.js
index fcb354273..a5fce9ac7 100644
--- a/public/javascripts/app/views/post-viewer/interactions.js
+++ b/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)
+ }
})
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 0f32269a2..25a97a3fa 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/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 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;
+ @include info-container();
}
.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;
+}