refactor thread collapse classes

I decided I thought the additional collapsedreplies and collapsereply
classes were unnecessary. Turns out I was right. I also managed to
remove some duplication in the annotation template, the reply count
and timestamp are laid out such that they each appear only once and
neither is inside the "controls".

h/css/common.scss

@@ -644,6 +644,15 @@ blockquote {
   font-family: $sansFontFamily;
   position: relative;
 
+  fuzzytime {
+    margin: 0 .4em;
+  }
+
+  .reply-count:hover {
+    color: $linkColorHover;
+    text-decoration: none;
+  }
+
   .user {
     font-weight: bold;
     font-size: 1.1em;
@@ -732,6 +741,31 @@ blockquote {
     &:first-child {
       margin-top: .5em;
     }
+
+    &.collapsed {
+      & > .annotation {
+        fuzzytime {
+          float: none;
+          font-style: italic;
+        }
+
+        header {
+          display: inline-block;
+        }
+
+        .body {
+          display: none;
+        }
+
+        .magicontrols {
+          display: none;
+        }
+
+        .reply-count {
+          font-style: italic;
+        }
+      }
+    }
   }
 
   .threadexp {
@@ -754,7 +788,6 @@ blockquote {
     background-image: url("../images/plus_1.png");
   }
 
-  //These are all the changes needed to collapse thread objects.
   &.collapsed {
     display: block !important;
 
@@ -762,17 +795,12 @@ blockquote {
       background-color: $grayLightest;
     }
 
-    .thread {
-      display: none;
-    }
-
     & > ul {
       max-height: 0;
       overflow: hidden;
     }
 
     & > .annotation {
-
       .body * {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -815,62 +843,12 @@ blockquote {
 }
 
 
-//COLLAPSED REPLIES////////////////////////////////
-.reply-count:hover {
-  color: $linkColorHover;
-  text-decoration: none;
-}
-
-.collapsedreply {
-  display: none;
-}
-
-.hidereplies {
-  display: block;
-  
-  li { 
-    display: none;
-
-    &.collapsedreplies {
-      display: none !important;
-    }
-  }
-}
-
-.collapsedreplies {
-    @extend .collapsed;
-    display: block !important;
-
-  .collapsedreply{
-      display: inline;
-      font-style: italic;
-      margin-right: 5px;
-      margin-left: 5px;
-  }
-  & > .annotation {
-    .body {
-      display: none;
-    }
-    .magicontrols {
-      display: none;
-    }
-  }
-}
-
 //MAGICONTROLS////////////////////////////////
 .magicontrols {
-  & > * {
-    display: inline-block;
-    padding-right: .8em;
-  }
-
-  &.pull-right {
-    text-align: right;
-    clear: both;
+  display: inline-block;
 
-    & > * {
-      padding-right: 0;
-    }
+  & > * {
+    margin: .4em;
   }
 
   & > .show {

h/js/directives.coffee

@@ -231,16 +231,6 @@ thread = ['$window', ($window) ->
       scope.collapsed = !scope.collapsed
       scope.openDetails scope.annotation unless scope.collapsed
 
-    scope.toggleReplies = (event) ->
-      event.stopPropagation()
-      scope.collapseReplies = !scope.collapseReplies
-      # console.log "Works."
-      if scope.collapseReplies
-        elem.addClass 'hidereplies'
-      else
-        elem.removeClass 'hidereplies'
-      unless scope.collapseReplies then scope.collapsed = false
-
     scope.$on 'toggleEditing', (event) ->
       {$id, editing} = event.targetScope
       if editing