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