consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improves styles for debate show and comments

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-08-11 13:16:24 +02:00
parent f9e0dad7a2
commit d5c27b36d5
4 changed files with 78 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/stylesheets/debates.scss
View File

@@ -354,10 +354,17 @@
font-weight: bold;
}
.sidebar {
border-top: 1px solid $border;
}
h3 {
border-bottom: 2px solid $votes-border;
font-size: rem-calc(18);
margin: 0;
border-top: 1px solid $votes-border;
display: inline-block;
font-family: $font-family-sans-serif;
font-size: rem-calc(16);
margin: -1px 0 rem-calc(12);
padding-top: rem-calc(6);
text-transform: uppercase;
}
@@ -456,12 +463,24 @@
p {
color: $comments-text;
font-size: rem-calc(15);
margin-bottom: 0;
}
a {
.comment-votes {
color: $comments-info;
font-weight: lighter;
margin: rem-calc(15) rem-calc(6) 0;
a {
color: $comments-info;
display: inline-block;
vertical-align: top;
}
[class^="icon-"] {
font-size: rem-calc(20);
vertical-align: top;
}
}
.user-photo {
@@ -469,7 +488,7 @@
display: inline-block;
height: 32px;
line-height: $line-height*2;
margin-right: $line-height/4;
margin-right: rem-calc(6);
vertical-align: top;
width: 32px;
}
@@ -478,13 +497,17 @@
margin-left: $line-height*1.6;
.reply {
background: white;
border: 1px solid $border;
font-size: rem-calc(12);
font-weight: lighter;
margin: rem-calc(6) 0;
padding: rem-calc(6);
}
}
.comment-children {
border-left: 1px dotted $border;
border-left: 1px dashed $border;
margin-left: $line-height*1.6;
padding-left: $line-height/4;
@@ -498,6 +521,11 @@
font-size: rem-calc(13);
font-weight: lighter;
vertical-align: middle;
span {
color: $text-color;
font-weight: bold;
}
}
}
}

40
app/views/comments/_comment.html.erb
View File

@@ -1,25 +1,29 @@
<div class="row">
<div id="comment-<%= comment.id %>" class="small-12 column comment">
<div id="comment-<%= comment.id %>" class="comment small-12 column">
<%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %>
<%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %>
<div class="comment-body">
<span class="comment-info">
<%= comment.user.name %>&nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
</span>
<p><%= comment.body %></p>
<div class="comment-body">
<span class="comment-info">
<span><%= comment.user.name %></span>&nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
</span>
<p><%= comment.body %></p>
<span id="<%= dom_id(comment) %>_votes">
<%= render 'comments/votes', comment: comment %>
</span>
<span id="<%= dom_id(comment) %>_votes" class="comment-votes right">
<%= render 'comments/votes', comment: comment %>
</span>
<% if user_signed_in? %>
<p class="reply"><%= render 'comments/form', {parent: comment, toggeable: true} %></p>
<% end %>
</div>
<p class="reply">
númerototal respuestas
<% if user_signed_in? %>
&nbsp;|&nbsp;
<%= render 'comments/form', {parent: comment, toggeable: true} %></p>
<% end %>
</div>
<div class="comment-children">
<%= render comment.children %>
</div>
</div>
<div class="comment-children">
<%= render comment.children %>
</div>
</div>
</div>

16
app/views/comments/_votes.html.erb
View File

@@ -1,11 +1,19 @@
<span>
númerototal votos
</span>
&nbsp;|&nbsp;
<span class="in_favor">
<%= link_to "up", vote_comment_path(comment, value: 'yes'),
method: "post", remote: true %>
<%= link_to vote_comment_path(comment, value: 'yes'),
method: "post", remote: true do %>
<i class="icon-angle-up"></i>
<% end %>
<%= comment.get_likes.size %>
</span>
<span class="against">
<%= link_to "down", vote_comment_path(comment, value: 'no'),
method: "post", remote: true %>
<%= link_to vote_comment_path(comment, value: 'no'),
method: "post", remote: true do %>
<i class="icon-angle-down"></i>
<% end %>
<%= comment.get_dislikes.size %>
</span>

14
app/views/debates/show.html.erb
View File

@@ -2,17 +2,22 @@
<div id="debate-<%= @debate.id %>" class="row">
<div class="small-12 medium-9 column">
<i class="icon-angle-left left"></i>&nbsp;<%= link_to t("debates.show.back_link"), debates_path, class: 'left back' %>
<h1><%= @debate.title %></h1>
<div class="debate-info">
<%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %>
<span class="author"><%= @debate.author.name %></span><span class="bullet">&nbsp;&bullet;&nbsp;</span> <%= l @debate.created_at.to_date %> <span class="bullet">&nbsp;&bullet;&nbsp;</span><i class="icon-chat-bubble-two"></i>&nbsp;<%= link_to pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")), "#comments" %>
</div>
<h1><%= @debate.title %></h1>
<%= @debate.description %>
<%= render 'shared/tags', debate: @debate %>
<p><%= social_share_button_tag(@debate.title) %></p>
</div>
<div class="small-12 medium-3 column">
<aside class="small-12 medium-3 column">
<div class="sidebar"></div>
<h3><%= t("votes.supports") %></h3>
<div class="text-center">
<div id="<%= dom_id(@debate) %>_votes">
@@ -24,8 +29,7 @@
<%= link_to t("debates.show.login_to_comment"), new_user_session_path, class: "leave-comment" %>
<% end %>
</div>
</div>
</aside>
</div>
</section>
@@ -45,4 +49,4 @@
<%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), :class => 'button radius right' %>
<% end %>
</div>
</section>
</section>