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

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>
</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>
</section>
<% 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>