diff --git a/app/views/posts/show.html.haml b/app/views/posts/show.html.haml index a0b4c66234bcd5f6e1b542d6ea1242a67042a40d..bd8500dabf98a4738cf5ca6cb983b37cd0e4c01e 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 0a8aefa962bce7a490b54714f38c1d65d344965a..da558919a0a4003282d7d01ada099141390ca6ee 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 {