diff --git a/app/views/posts/show.html.haml b/app/views/posts/show.html.haml
index a0b4c6623..bd8500dab 100644
--- a/app/views/posts/show.html.haml
+++ b/app/views/posts/show.html.haml
@@ -56,11 +56,19 @@
- if current_user
#user-controls
- = link_to "Like", "#", :class => "label"
- = link_to "Follow", "#", :class => "label"
- = link_to "Reshare", "#", :class => "label"
- = link_to "Comment", "#", :class => "label"
- = person_image_link(current_user.person)
+ = link_to "#", :class => "label" do
+ %i.icon-heart.icon-white
+
+ = link_to "#", :class => "label" do
+ %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
- = text_area_tag :text, ''
- = hidden_field_tag :post_id, @post.id
- = submit_tag 'submit', :onclick => "$('#comment').modal('hide'); $('#text').text('')"
+ - @post.comments.each do |c|
+ .media
+ .img
+ = 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('')"
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 0a8aefa96..da558919a 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/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 {