Move interactions.scss

app/assets/stylesheets/_application.scss

@@ -15,7 +15,7 @@
 @import 'sprites';
 @import 'hovercard';
 @import 'base';
-@import 'new_styles/interactions';
+@import 'interactions';
 @import 'spinner';
 @import 'timeago';
 @import 'vendor/fileuploader';

app/assets/stylesheets/interactions.scss

@@ -0,0 +1,65 @@
+.control-icons {
+  a {
+    &:hover { text-decoration: none; }
+
+    [class^="entypo-"],
+    [class*="entypo-"] {
+      color: $text-grey;
+      font-size: $font-size-base;
+      line-height: $line-height-base;
+      vertical-align: middle;
+    }
+
+    [class^="entypo-"]:hover,
+    [class*="entypo-"]:hover {
+      color: $text;
+    }
+
+    &.hide_conversation i { font-size: $line-height-computed * 1.5; }
+    &.delete_conversation i { font-size: $font-size-base * 1.5; }
+    &.destroy_participation i { color: $black; }
+    &.destroy_participation i:hover { color: $text-dark-grey; }
+  }
+}
+
+.stream_container,
+.single-post-interactions {
+  .control-icons {
+    float: right;
+    z-index: 6;
+
+    .block_user,
+    .comment_report,
+    .create_participation,
+    .delete,
+    .destroy_participation,
+    .post_report {
+      display: inline-block;
+    }
+
+    > a:hover { text-decoration: none; }
+  }
+}
+
+.stream_element,
+.comment,
+.photo,
+.stream_element:hover .comment {
+  .control-icons {
+    @include transition(opacity);
+    opacity: 0;
+  }
+
+  &:hover .control-icons { opacity: 1; }
+}
+
+.stream_element,
+.comment,
+.photo {
+  .control-icons > a {
+    @include transition(opacity);
+    opacity: .8;
+  }
+
+  .control-icons > a:hover { opacity: 1; }
+}

app/assets/stylesheets/new_styles/_interactions.scss

@@ -1,59 +0,0 @@
-.control-icons {
-  a {
-    &:hover { text-decoration: none; }
-
-    [class^="entypo-"], [class*="entypo-"] {
-      color: $text-grey;
-      font-size: $font-size-base;
-      line-height: $line-height-base;
-      vertical-align: middle;
-      &:hover { color: $text; }
-      &.cross { font-size: $line-height-base; }
-    }
-
-    &.hide_conversation i {
-      font-size: $line-height-computed*1.5;
-    }
-
-    &.delete_conversation i {
-      font-size: $font-size-base*1.5;
-    }
-
-    &.destroy_participation i {
-      color: $black;
-      &:hover { color: $text-dark-grey; }
-    }
-  }
-}
-
-.stream_container, #single-post-interactions {
-  .control-icons {
-    z-index: 6;
-    float: right;
-
-    .block_user,
-    .comment_report,
-    .create_participation,
-    .delete,
-    .destroy_participation,
-    .post_report {
-      display: inline-block;
-    }
-
-    & > a:hover {
-      text-decoration: none;
-    }
-  }
-
-  .stream_element, .comment, .photo, .stream_element:hover .comment {
-    .control-icons > a {
-      @include transition(opacity);
-      opacity: 0;
-    }
-
-    &:hover .control-icons {
-      & > a { opacity: 0.8; }
-      & > a:hover { opacity: 1; }
-    }
-  }
-}

app/assets/templates/single-post-viewer_tpl.jst.hbs

@@ -1,8 +1,8 @@
 <div id='single-post-container' class='container-fluid'>
   <div class='row'>
-    <div id='single-post-content' class='col-md-6'>
+    <div id='single-post-content' class='col-md-6 single-post-content'>
     </div>
-    <div id='single-post-interactions' class='col-md-6'>
+    <div id='single-post-interactions' class='col-md-6 single-post-interactions'>
     </div>
   </div>
 </div>

features/step_definitions/custom_web_steps.rb

@@ -88,6 +88,7 @@ And /^I hover over the "([^"]+)"$/ do |element|
 end
 
 When /^I prepare the deletion of the first post$/ do
+  find(".stream .stream_element", match: :first).hover
   within(find(".stream .stream_element", match: :first)) do
     ctrl = find(".control-icons")
     ctrl.hover
@@ -96,6 +97,7 @@ When /^I prepare the deletion of the first post$/ do
 end
 
 When /^I prepare hiding the first post$/ do
+  find(".stream .stream_element", match: :first).hover
   within(find(".stream .stream_element", match: :first)) do
     ctrl = find(".control-icons")
     ctrl.hover