DG MS; fix user controls

app/views/posts/show.html.haml

@@ -56,11 +56,19 @@
 
     - if current_user
       #user-controls
-        = link_to "Like", "#", :class => "label"
+        = link_to "#", :class => "label" do
-        = link_to "Follow", "#", :class => "label"
+          %i.icon-heart.icon-white
-        = link_to "Reshare", "#", :class => "label"
+
-        = link_to "Comment", "#", :class => "label"
+        = link_to "#", :class => "label" do
-        = person_image_link(current_user.person)
+          %i.icon-plus.icon-white
+
+        = link_to "#", :class => "label" do
+          %i.icon-retweet.icon-white
+
+        = link_to "#", :class => "label",  do
+          %i.icon-comment.icon-white
+
+        = link_to person_image_tag(current_user.person), root_path
 
 #post-content
 
@@ -68,8 +76,21 @@
 = link_to image_tag('arrow-right.png'), post_path(@post.id+1), :class => 'nav-arrow right', :id => 'forward'
 
 #comment.modal.fade
+  .modal-header
+    %h3
+      Responses
+
   .modal-body
-    = form_tag comments_path, :remote => true do
+    - @post.comments.each do |c|
-      = text_area_tag :text, ''
+      .media
-      = hidden_field_tag :post_id, @post.id
+        .img
-      = submit_tag 'submit', :onclick => "$('#comment').modal('hide'); $('#text').text('')"
+          = person_image_link c.author
+        .bd
+          %strong= person_link(c.author)
+          %br
+          = c.text
+    .modal-footer
+      = form_tag comments_path, :remote => true do
+        = text_area_tag :text, '', :class => 'span6'
+        = hidden_field_tag :post_id, @post.id
+        = submit_tag 'submit', :onclick => "$('#comment').modal('hide'); $('#text').text('')"

public/stylesheets/sass/new-templates.scss

@@ -34,6 +34,10 @@ $light-grey: #999;
   background-size: cover;
 }
 
+@mixin opacity($val) {
+  opacity: $val;
+}
+
 /* styles */
 
 .multi-photo {
@@ -129,6 +133,8 @@ $light-grey: #999;
 }
 
 .nav-arrow {
+  @include opacity(0.2);
+
   -o-transition: opacity 0.3s;
   -moz-transition: opacity 0.3s;
   -webkit-transition: opacity 0.3s;
@@ -136,7 +142,6 @@ $light-grey: #999;
 
   position: fixed;
   z-index: 3;
-  opacity: 0.2;
 
   top: 45%;
 
@@ -144,7 +149,7 @@ $light-grey: #999;
   &.right { right: 0; }
 
   &:hover {
-    opacity: 0.6;
+    @include opacity(0.6);
   }
 }
 
@@ -164,6 +169,10 @@ $light-grey: #999;
   float: left;
   margin: 0;
 
+  background-color: rgba(255,255,255,0.8);
+
+  max-height: 52px;
+
   .avatar {
     height: 52px;
     width: 52px;
@@ -194,6 +203,29 @@ $light-grey: #999;
     height: 27px;
     width: 27px;
   }
+
+  .label {
+    @include opacity(0.5);
+    padding: 5px;
+    margin-right: 5px;
+    line-height: 24px;
+
+    padding-top: 3px;
+    padding-right: 2px;
+
+    i {
+      padding: 0;
+      margin: 0;
+    }
+
+    background-color: #000;
+    color: #fff;
+
+    &:hover {
+      @include opacity(1);
+      text-decoration: none;
+    }
+  }
 }
 
 #post-content {