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

Merge pull request #59 from AyuntamientoMadrid/comments

Browse Source 
Comments
This commit is contained in:
Enrique García
2015-07-30 16:40:20 +02:00
parent c3aca6ac56 793127fbd3
commit 0a2bbe8c65
7 changed files with 96 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/comments_divider.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
app/assets/images/user_default_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

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

@@ -8,7 +8,7 @@
// 05.1. Debates Index
// 05.2. Debates Show
// 06. Comments
// 06. Tags
// 07. Tags
//
// 01. Variables
@@ -24,6 +24,9 @@ $brand: #0077B9;
$debates: #008CCF;
$comments-bg: #FAF9F8;
$comments-info: #A5B2B9;
$comments-text: #3F4549;
$header-color: #292B33;
$link: #0077B9;
@@ -33,7 +36,7 @@ $tags-border: #F0F0F0;
$tags-color: #8F8F8F;
$text-color: #919399;
$text-medium: #999999;
$text-medium: #999999;
$text-light: #a3a6ad;
$votes-background: #EDEDED;
@@ -92,7 +95,7 @@ header {
}
h1 {
color: white;
color: white;
font-size: rem-calc(45);
font-weight: bolder;
line-height: $line-height*3;
@@ -231,7 +234,7 @@ header {
margin-bottom: $line-height;
}
}
.votes {
background: $votes-background;
margin: -5px -20px -20px -20px;
@@ -291,15 +294,16 @@ header {
.debate-show {
color: $text-medium;
margin-top: $line-height;
padding: 0 $line-height/2;
margin-bottom: $line-height*2;
padding: 0 $line-height/2;
.back {
color: $text-light;
font-size: rem-calc(13);
line-height: $line-height;
}
}
h1 {
h1 {
clear: both;
font-size: rem-calc(24);
font-weight: bold;
@@ -323,7 +327,7 @@ header {
font-size: rem-calc(14);
line-height: $line-height;
margin-bottom: 0;
}
}
}
.author-photo {
@@ -335,13 +339,13 @@ header {
vertical-align: middle;
width: 32px;
}
.votes {
border: 1px solid $votes-border;
box-shadow: 0 2px 0 rgba(0,0,0,.1);
border-radius: 3px;
padding: $line-height/2;
.fi-like {
background: $votes-like;
border: 1px solid $votes-like-b;
@@ -398,6 +402,10 @@ header {
width: 1px;
}
}
.publish-comment {
margin-top: $line-height;
}
}
// 06. Comments
@@ -405,19 +413,71 @@ header {
.comments {
background: $comments-bg;
margin-top: $line-height*2;
background-image: url('comments_divider.png');
background-repeat: repeat-x;
padding-top: $line-height;
padding-bottom: $line-height*4;
h2 {
margin: 0;
font-weight: bold;
}
.comment {
margin: $line-height/4 0;
p {
color: $comments-text;
font-size: rem-calc(15);
margin-bottom: 0;
}
a {
color: $comments-info;
}
.user-photo {
border-radius: 2px;
display: inline-block;
height: 32px;
line-height: $line-height*2;
margin-right: $line-height/4;
vertical-align: top;
width: 32px;
}
.comment-body {
margin-left: $line-height*1.6;
.reply {
font-size: rem-calc(12);
font-weight: lighter;
}
}
.comment-children {
border-left: 1px dotted $border;
margin-left: $line-height*1.6;
padding-left: $line-height/4;
@media only screen and (max-width: 40em) {
margin-left: $line-height/1.5;
}
}
.comment-info {
color: $comments-info;
font-size: rem-calc(13);
font-weight: lighter;
vertical-align: middle;
}
}
}
// 07. Tags
// - - - - - - - - - - - - - - - - - - - - - - - - -
.tags a {
.tags a {
background: $tags-bg;
border: 1px solid $tags-border;
border-radius: 3px;

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

@@ -1,13 +1,18 @@
<div id="comment-<%= comment.id %>" class='comment' style="padding-bottom:30px">
<p><%= comment.user.name %></p>
<p>hace <%= time_ago_in_words(comment.created_at) %></p>
<p><%= comment.body %></p>
<div class="row">
<div id="comment-<%= comment.id %>" class="small-12 column comment">
<div style="margin-left:50px">
<%= render comment.children %>
</div>
<div style="margin-left:50px">
<%= render 'comments/form', parent: comment %>
</div>
<%= 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>
<p class="reply"><%= render 'comments/form', parent: comment %></p>
</div>
<div class="comment-children">
<%= render comment.children %>
</div>
</div>
</div>

2
app/views/comments/_form.html.erb
View File

@@ -6,6 +6,6 @@
<%= f.hidden_field :commentable_type, value: parent.class %>
<%= f.hidden_field :commentable_id, value: parent.id %>
<%= f.submit comment_button_text(parent), class: "button radius" %>
<%= f.submit comment_button_text(parent), class: "button radius small" %>
<% end %>
</div>

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

@@ -4,7 +4,7 @@
<div class="small-12 medium-9 column">
<%= link_to "&lt;&nbsp;".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>
<%= link_to "&laquo;&nbsp;".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>
<h1><%= @debate.title %></h1>
<div class="debate-info">
@@ -40,6 +40,10 @@
<p class="total-votes"><%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %></p>
</div>
</div>
<div class="small-12 medium-3 column text-center publish-comment">
<%= link_to t("debates.show.leave_comment"), "#comments", :class => 'button radius expand' %>
</div>
</div>
</section>
@@ -47,7 +51,7 @@
<div class="row">
<div id="comments" class="small-12 column">
<h2><%= t("debates.show.comments") %></h2>
<div style="padding-bottom:60px">
<div>
<%= t("debates.show.leave_comment") %>
<%= render 'comments/form', parent: @debate %>
</div>

3
app/views/layouts/_footer.html.erb
View File

@@ -1,4 +1,3 @@
<div style="background: #0077b9; width: 100%; margin-top: 48px;">
<div style="background: #0077b9; width: 100%;">
<%= image_tag('footer.jpg', style: 'width: 100%; max-width: 1170px;') %>
</div>