Adds styles for debates show
This commit is contained in:
Alberto García Cabeza
@@ -5,7 +5,8 @@
|
||||
// 03. Header
|
||||
// 04. Footer
|
||||
// 05. Debates
|
||||
|
||||
// 06. Comentarios
|
||||
//
|
||||
|
||||
// 01. Variables
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
@@ -44,6 +45,10 @@ body {
|
||||
max-width: 1170px;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// 03. Header
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
@@ -190,58 +195,136 @@ header {
|
||||
line-height: $line-height;
|
||||
margin-bottom: $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.votes {
|
||||
background: $votes-background;
|
||||
margin: -5px -20px -20px -20px;
|
||||
padding: 1.25rem 1.25rem 0 1.25rem;
|
||||
.votes {
|
||||
background: $votes-background;
|
||||
margin: -5px -20px -20px -20px;
|
||||
padding: 1.25rem 1.25rem 0 1.25rem;
|
||||
|
||||
.fi-like {
|
||||
color: $votes-like;
|
||||
font-size: rem-calc(48);
|
||||
line-height: $line-height*2;
|
||||
}
|
||||
.fi-like {
|
||||
color: $votes-like;
|
||||
font-size: rem-calc(48);
|
||||
line-height: $line-height*2;
|
||||
}
|
||||
|
||||
.fi-dislike {
|
||||
color: $votes-dislike;
|
||||
.fi-dislike {
|
||||
color: $votes-dislike;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(48);
|
||||
line-height: $line-height*2;
|
||||
padding-top: $line-height/3;
|
||||
}
|
||||
|
||||
.in-favor {
|
||||
color: $votes-like;
|
||||
line-height: rem-calc(48);
|
||||
vertical-align: top;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: rem-calc(48);
|
||||
line-height: $line-height*2;
|
||||
padding-top: $line-height/3;
|
||||
}
|
||||
|
||||
.in-favor {
|
||||
color: $votes-like;
|
||||
line-height: rem-calc(48);
|
||||
line-height: 48px;
|
||||
padding-top: 5px;
|
||||
vertical-align: top;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 48px;
|
||||
padding-top: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.against {
|
||||
@extend .in-favor;
|
||||
color: $votes-dislike;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.total-votes {
|
||||
font-size: rem-calc(12);
|
||||
line-height: $line-height*2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background: rgba(0,0,0, .1);
|
||||
display: inline-block;
|
||||
height: 3rem;
|
||||
margin: 0 .5rem;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.against {
|
||||
@extend .in-favor;
|
||||
color: $votes-dislike;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.total-votes {
|
||||
font-size: rem-calc(12);
|
||||
line-height: $line-height*2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background: rgba(0,0,0, .1);
|
||||
display: inline-block;
|
||||
height: 3rem;
|
||||
margin: 0 .5rem;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.debate-show {
|
||||
background: white;
|
||||
margin-top: $line-height;
|
||||
padding: $line-height/2;
|
||||
|
||||
h1 {
|
||||
font-size: rem-calc(30);
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fi-price-tag {
|
||||
color: $text-color;
|
||||
font-size: rem-calc(18);
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
.votes {
|
||||
|
||||
.fi-like {
|
||||
color: $votes-like;
|
||||
font-size: rem-calc(48);
|
||||
line-height: $line-height*2;
|
||||
}
|
||||
|
||||
.fi-dislike {
|
||||
color: $votes-dislike;
|
||||
display: inline-block;
|
||||
font-size: rem-calc(48);
|
||||
line-height: $line-height*2;
|
||||
padding-top: $line-height/3;
|
||||
}
|
||||
|
||||
.in-favor {
|
||||
color: $votes-like;
|
||||
line-height: rem-calc(48);
|
||||
vertical-align: top;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 48px;
|
||||
padding-top: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.against {
|
||||
@extend .in-favor;
|
||||
color: $votes-dislike;
|
||||
}
|
||||
|
||||
.total-votes {
|
||||
font-size: rem-calc(14);
|
||||
line-height: $line-height*2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
background: rgba(0,0,0, .1);
|
||||
display: inline-block;
|
||||
height: 3rem;
|
||||
margin: 0 .5rem;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 06. Comentarios
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.comments {
|
||||
clear: both;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -250,7 +333,3 @@ header {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,5 +3,5 @@
|
||||
<%= f.hidden_field :commentable_type, value: parent.class %>
|
||||
<%= f.hidden_field :commentable_id, value: parent.id %>
|
||||
|
||||
<%= f.submit 'Publicar comentario' %>
|
||||
<%= f.submit 'Publicar comentario', :class => "button radius" %>
|
||||
<% end %>
|
||||
@@ -1,44 +1,51 @@
|
||||
<article>
|
||||
<article class="debate-show">
|
||||
|
||||
<%= link_to 'Volver', debates_path, :class => 'right' %>
|
||||
|
||||
<div class="row">
|
||||
<div id="debate-<%= @debate.id %>" class="small-12 medium-2 large-4 colum">
|
||||
<h3><%= @debate.title %></h3>
|
||||
<div id="debate-<%= @debate.id %>" class="small-12 medium-9 column">
|
||||
<h1><%= @debate.title %></h1>
|
||||
<p>Por <%= @debate.author.name %> el <%= l @debate.created_at.to_date %></p>
|
||||
<p><%= @debate.description %></p>
|
||||
<p>
|
||||
Creado el: <%= l @debate.created_at.to_date %>
|
||||
por: <%= @debate.author.name %>
|
||||
</p>
|
||||
<p><%= render 'shared/tags', debate: @debate %></p>
|
||||
</div>
|
||||
|
||||
<div class="votes small-12 medium-3 column">
|
||||
<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" 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" 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"><%= @debate.total_votes %> votos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span style="width:30%;float:left">
|
||||
<div id='in_favor'>
|
||||
<%= link_to "up", debate_votes_path(@debate, value: 'yes'), method: "post" %>
|
||||
<%= percentage('likes', @debate) %>
|
||||
</div>
|
||||
<div id="comments" class="comments">
|
||||
<h2>Comentarios</h2>
|
||||
<div style="padding-bottom:60px">
|
||||
Deja tu comentario
|
||||
<%= render 'comments/form', parent: @debate %>
|
||||
</div>
|
||||
<%= render @debate.root_comments %>
|
||||
</div>
|
||||
|
||||
<div id='against'>
|
||||
<%= link_to "down", debate_votes_path(@debate, value: 'no'), method: "post" %>
|
||||
<%= percentage('dislikes', @debate) %>
|
||||
</div>
|
||||
<% if current_user && @debate.editable_by?(current_user) %>
|
||||
<%= link_to 'Edit', edit_debate_path(@debate), :class => 'button radius right' %> |
|
||||
<% end %>
|
||||
|
||||
Votos <%= @debate.total_votes %>
|
||||
</span>
|
||||
|
||||
<div style="display: block; width:300px">
|
||||
<%= render 'shared/tags', debate: @debate %>
|
||||
</div>
|
||||
|
||||
<br/><br/>
|
||||
<div id="comments" style="padding-top:20px">
|
||||
<h2>Comentarios</h2>
|
||||
<div style="padding-bottom:60px">
|
||||
Deja tu comentario
|
||||
<%= render 'comments/form', parent: @debate %>
|
||||
</div>
|
||||
<%= render @debate.root_comments %>
|
||||
</div>
|
||||
|
||||
<% if current_user && @debate.editable_by?(current_user) %>
|
||||
<%= link_to 'Edit', edit_debate_path(@debate) %> |
|
||||
<% end %>
|
||||
<%= link_to 'Back', debates_path %>
|
||||
</article>
|
||||
Reference in New Issue
Block a user