Changes styles for debates index and debate show

This commit is contained in:
Alberto Garcia Cabeza
2015-08-04 13:21:09 +02:00
parent 90f863c49f
commit 4344bc121f
8 changed files with 651 additions and 477 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -1,33 +1,39 @@
<div id="debate-<%= debate.id %>" class="small-12 medium-6 large-4 column debate end">
<div class="debates-index">
<div id="debate-<%= debate.id %>" class="debate">
<div class="panel">
<i class="fi-comment-quotes left"></i>
<span class="label radius right"><%= t("debates.debate.debate") %></span>
<div class="row">
<div class="small-12 medium-9 column">
<div class="debate-content">
<span class="label left"><%= t("debates.debate.debate") %></span>
<i class="icon-quote-right"></i>
<h3><%= link_to debate.title, debate %></h3>
<p class="debate-info">
<i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(debate.comment_threads.count, t("debates.debate.comment"), t("debates.debate.comments")) %>
</p>
<p><%= sanitize(truncate(debate.description, length: 200).html_safe) %></p>
<%= render "shared/tags", debate: debate %>
</div>
</div>
<div class="small-12 medium-3 column">
<div class="text-center votes">
<%= link_to debate_votes_path(debate, value: 'yes'), class: "like inline-block", title: t('votes.agree'), method: "post" do %>
<i class="icon-like"></i>
<span><%= percentage('likes', debate) %></span>
<% end %>
<h3><%= link_to debate.title, debate %></h3>
<p>Por <%= debate.author.name %> el <%= l debate.created_at.to_date %></p>
<p><%= sanitize(debate.description.html_safe) %></p>
<span class="divider"></span>
<p><%= render 'shared/tags', debate: debate %></p>
<div class="row votes">
<div class="small-8 column">
<%= link_to debate_votes_path(debate, value: 'yes'), class: 'in-favor', method: "post" do %>
<i class="fi-like"></i>
<span><%= percentage('likes', debate) %></span>
<% end %>
<span class="divider"></span>
<%= link_to debate_votes_path(debate, value: 'no'), class: 'against', method: "post" do %>
<i class="fi-dislike"></i>
<span><%= percentage('dislikes', debate) %></span>
<% end %>
</div>
<div class="small-4 column">
<p class="total-votes right"><%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %></p>
</div>
</div>
<%= link_to debate_votes_path(debate, value: 'no'), class: "unlike inline-block", title: t('votes.disagree'), method: "post" do %>
<i class="icon-unlike"></i>
<span><%= percentage('dislikes', debate) %></span>
<% end %>
<br>
<span class="total-votes">
<%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,9 +1,59 @@
<section id='debates' class="debates-index">
<div class="row">
<%= render @debates %>
</div>
</section>
<section id="debates" role="main">
<div class="row">
<!-- HTML for debates featured (3) -->
<% debate = @debates.first %>
<div class="small-12 medium-4 column debates-list">
<div class="row">
<div class="debates-featured">
<div id="debate-<%= debate.id %>" class="small-12 column end debate">
<div class="panel">
<div class="debate-content">
<span class="label left"><%= t("debates.debate.debate") %></span>
<i class="icon-quote-right right"></i>
<aside>
<%= render 'shared/tag_cloud' %>
</aside>
<h3><%= link_to debate.title, debate %></h3>
<p class="debate-info">
<i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
</p>
<p><%= sanitize(truncate(debate.description, length: 200).html_safe) %></p>
<p><%= render "shared/tags", debate: debate %></p>
</div>
<div class="row votes">
<div class="small-12 column">
<%= link_to debate_votes_path(debate, value: "yes"), class: "like", title: t('votes.agree'), method: "post" do %>
<i class="icon-like"></i>
<span><%= percentage('likes', debate) %></span>
<% end %>
<span class="divider"></span>
<%= link_to debate_votes_path(debate, value: "no"), class: "unlike", title: t('votes.disagree'), method: "post" do %>
<i class="icon-unlike"></i>
<span><%= percentage('dislikes', debate) %></span>
<% end %>
<span class="total-votes right">
<%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- HTML for debates featured (3) -->
<div class="small-12 medium-9 column debates-list">
<%= render @debates %>
</div>
<div class="small-12 medium-3 column">
<aside role="complementary">
<%= link_to t("debates.index.create_debate"), new_debate_path, class: 'button radius' %>
<%= render "shared/tag_cloud" %>
</aside>
</div>
</div>
</section>

View File

@@ -1,42 +1,36 @@
<section class="debate-show">
<div id="debate-<%= @debate.id %>" class="row">
<div class="small-12 medium-9 column">
<%= link_to "&laquo;&nbsp;".html_safe + 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') %>
<%= @debate.author.name %> <span>&nbsp;&bullet;&nbsp;</span> <%= l @debate.created_at.to_date %> <span>&nbsp;&bullet;&nbsp;</span> <%= pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
</div>
<div class="debate-description">
<%= @debate.description.html_safe %>
</div>
<p><%= render 'shared/tags', debate: @debate %></p>
</div>
<div id="votes" class="votes small-12 medium-3 column">
<%= render 'votes/votes' %>
<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' %>
<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;<%= pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
</div>
<h1><%= @debate.title %></h1>
<p><%= @debate.description %></p>
<p><%= render 'shared/tags', debate: @debate %></p>
</div>
<div id="votes" class="small-12 medium-3 column votes">
<%= render 'votes/votes' %>
<div class="text-center">
<%= link_to t("debates.show.leave_comment"), "#comments", class: "leave-comment" %>
</div>
</div>
</div>
</section>
<section class="row-full comments">
<div class="row">
<div id="comments" class="small-12 column">
<h2><%= t("debates.show.comments") %></h2>
<div>
<%= t("debates.show.leave_comment") %>
<%= render 'comments/form', parent: @debate %>
</div>
<%= render @debate.root_comments %>
<div class="row">
<div id="comments" class="small-12 column">
<h2><%= t("debates.show.comments") %></h2>
<div>
<%= t("debates.show.leave_comment") %>
<%= render 'comments/form', parent: @debate %>
</div>
<% if current_user && @debate.editable_by?(current_user) %>
<%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), :class => 'button radius right' %>
<% end %>
<%= render @debate.root_comments %>
</div>
<% if current_user && @debate.editable_by?(current_user) %>
<%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), :class => 'button radius right' %>
<% end %>
</div>
</section>

View File

@@ -1,4 +1,5 @@
<div id="tag-cloud">
<div id="tag-cloud" class="tag-cloud">
<h3><%= t("shared.tags_cloud.tags") %></h3>
<% tag_cloud Debate.tag_counts, %w[s m l] do |tag, css_class| %>
<%= link_to sanitize("#{tag.name}(#{tag.taggings_count})"), debates_path(tag: tag.name), class: css_class %>
<% end %>

View File

@@ -1,23 +1,25 @@
<div class="small-12 column text-center">
<div id="in_favor" class="inline-block">
<%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post", remote: true do %>
<i class="fi-like"></i>
<span><%= percentage('likes', @debate) %></span>
<% end %>
</div>
<span class="divider"></span>
<div id="against" class="inline-block">
<%= link_to debate_votes_path(@debate, value: 'no'), class: 'against', method: "post", remote: true do %>
<i class="fi-dislike"></i>
<span><%= percentage('dislikes', @debate) %></span>
<% end %>
</div>
</div>
<div class="small-12 column text-center">
<p class="total-votes">
<div class="small-12 column">
<p class="total-votes right">
<%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</p>
<h3><%= t("votes.supports") %></h3>
<div class="text-center">
<div id="in_favor" class="inline-block">
<%= link_to debate_votes_path(@debate, value: 'yes'), class: "like", title: t('votes.agree'), method: "post", remote: true do %>
<i class="icon-like"></i>
<span><%= percentage('likes', @debate) %></span>
<% end %>
</div>
<span class="divider"></span>
<div id="against" class="inline-block">
<%= link_to debate_votes_path(@debate, value: 'no'), class: "unlike", title: t('votes.disagree'), method: "post", remote: true do %>
<i class="icon-unlike"></i>
<span><%= percentage('dislikes', @debate) %></span>
<% end %>
</div>
</div>
</div>

View File

@@ -12,10 +12,17 @@ en:
create_debate: Create a debate
my_account_link: My account
debates:
index:
create_debate: Create a debate
debate:
debate: Debate
vote: vote
votes: votes
comment: Comment
comments: Comments
agree: I agree
disagree: I disagree
leave_comment: Comment
form:
one_error: error
plural_errors: errors
@@ -45,9 +52,15 @@ en:
reply_link: Reply
reply_button: Publish reply
votes:
agree: I agree
disagree: I disagree
supports: Supports
notice_thanks: "Thanks for voting."
notice_already_registered: "Your vote is already registered."
account:
show:
title: "My account"
save_changes_submit: "Save changes"
shared:
tags_cloud:
tags: Tags

View File

@@ -12,10 +12,16 @@ es:
create_debate: Crea un debate
my_account_link: Mi cuenta
debates:
index:
create_debate: Crea un debate
debate:
debate: Debate
vote: voto
votes: votos
comment: Comentario
comments: Comentarios
agree: Estoy de acuerdo
disagree: No estoy de acuerdo
form:
one_error: error
plural_errors: errores
@@ -45,9 +51,15 @@ es:
reply_link: Responder
reply_button: Publicar respuesta
votes:
agree: Estoy de acuerdo
disagree: No estoy de acuerdo
supports: Apoyos
notice_thanks: "Gracias por votar."
notice_already_registered: "Tu voto ya ha sido registrado."
account:
show:
title: "Mi cuenta"
save_changes_submit: "Guardar cambios"
shared:
tags_cloud:
tags: Etiquetas