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

Adds new styles for debates show

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-07-29 17:42:27 +02:00
parent 63895f52c3
commit 0efa9c77f1
5 changed files with 174 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,10 @@
// 03. Header
// 04. Footer
// 05. Debates
// 06. Comentarios
// 05.1. Debates Index
// 05.2. Debates Show
// 06. Comments
// 06. Tags
//
// 01. Variables
@@ -14,14 +17,31 @@
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$line-height: rem-calc(24);
$background: #EDEFF0;
$background: #F9F9F9;
$border: #DEE0E3;
$brand: #0077B9;
$debates: #008CCF;
$comments-bg: #FAF9F8;
$header-color: #292B33;
$link: #0077B9;
$tags-bg: #FAFAFA;
$tags-border: #F0F0F0;
$tags-color: #8F8F8F;
$text-color: #919399;
$text-medium: #999999;
$text-light: #a3a6ad;
$votes-background: #EDEDED;
$votes-dislike: #FF7978;
$votes-like: #00D288;
$votes-border: #DEE0E3;
$votes-dislike: #EF8585;
$votes-dislike-b: #D26463;//FF7978;
$votes-like: #7BD2A8;
$votes-like-b: #56A47D;
// 02. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -32,8 +52,9 @@ $votes-like: #00D288;
}
body {
background: $background;
background: white;
font-family: $font-family-sans-serif;
font-size: rem-calc(13);
font-weight: normal;
p {
@@ -45,6 +66,14 @@ body {
max-width: 1170px;
}
.row-full {
max-width: 100% !important;
}
.clear {
clear: both;
}
.inline-block {
display: inline-block;
}
@@ -53,13 +82,13 @@ body {
// - - - - - - - - - - - - - - - - - - - - - - - - -
header {
background: url('home-header-bg.jpg');
background: url('home_header_bg.jpg');
background-position: 50% 50%;
background-size: cover;
height: $line-height*20;
min-height: $line-height*20;
&.results {
height: $line-height*8 !important;
min-height: $line-height*8;
}
h1 {
@@ -152,6 +181,9 @@ header {
// 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -
// 05.1. Debates Index
// - - - - - - - - - - - -
.debates-index {
margin-top: $line-height;
}
@@ -160,7 +192,6 @@ header {
.panel {
background: white;
border: 0;
box-shadow: 0 2px 0 rgba(0,0,0,.1);
.fi-comment-quotes {
@@ -254,48 +285,97 @@ header {
}
}
// 05.2. Debates Show
// - - - - - - - - - - - -
.debate-show {
background: white;
color: $text-medium;
margin-top: $line-height;
padding: $line-height/2;
padding: 0 $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);
.back {
color: $text-light;
font-size: rem-calc(13);
line-height: $line-height;
}
h1 {
clear: both;
font-size: rem-calc(24);
font-weight: bold;
line-height: $line-height*1.3333;
margin: 0;
padding-top: $line-height/2;
}
.debate-info {
color: $text-light;
font-weight: lighter;
line-height: $line-height*2;
margin-bottom: $line-height*0.5;
text-align: justify;
span {
color: $border;
}
p {
font-size: rem-calc(14);
line-height: $line-height;
margin-bottom: 0;
}
}
.author-photo {
border-radius: 2px;
display: inline-block;
height: 32px;
line-height: $line-height*2;
margin-right: $line-height/4;
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 {
color: $votes-like;
background: $votes-like;
border: 1px solid $votes-like-b;
border-radius: $line-height*2.5;
color: white;
display: block;
font-size: rem-calc(48);
line-height: $line-height*2;
height: $line-height*2.5;
line-height: $line-height*2.5;
width: $line-height*2.5;
}
.fi-dislike {
color: $votes-dislike;
display: inline-block;
background: $votes-dislike;
border: 1px solid $votes-dislike-b;
border-radius: $line-height*2.5;
color: white;
display: block;
font-size: rem-calc(48);
line-height: $line-height*2;
padding-top: $line-height/3;
height: $line-height*2.5;
line-height: $line-height*2.5;
width: $line-height*2.5;
}
.in-favor {
color: $votes-like;
line-height: rem-calc(48);
vertical-align: top;
span {
display: inline-block;
line-height: 48px;
padding-top: 5px;
font-size: rem-calc(18);
font-weight: bold;
line-height: $line-height;
padding-top: $line-height/4;
vertical-align: top;
}
}
@@ -307,24 +387,26 @@ header {
.total-votes {
font-size: rem-calc(14);
line-height: $line-height*2;
margin: 0;
}
.divider {
background: rgba(0,0,0, .1);
background: rgba(0,0,0,.05);
display: inline-block;
height: 3rem;
margin: 0 .5rem;
height: $line-height*4;
margin: 0 $line-height;
width: 1px;
}
}
}
// 06. Comentarios
// 06. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - -
.comments {
clear: both;
background: $comments-bg;
margin-top: $line-height*2;
padding-top: $line-height;
h2 {
margin: 0;
@@ -332,6 +414,27 @@ header {
}
}
// 07. Tags
// - - - - - - - - - - - - - - - - - - - - - - - - -
.tags a {
background: $tags-bg;
border: 1px solid $tags-border;
border-radius: 3px;
color: $tags-color;
font-size: rem-calc(13);
margin-bottom: 8px;
margin-right: $line-height/3;
padding: $line-height/4 $line-height/3;
&:hover {
color: $link;
cursor: pointer;
background: #e5f1f8;
border: 1px solid $brand;
}
}

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

@@ -1,16 +1,23 @@
<article class="debate-show">
<section class="debate-show">
<%= link_to t("debates.show.back_link"), debates_path, class: 'right' %>
<div id="debate-<%= @debate.id %>" class="row">
<div class="small-12 medium-9 column">
<%= link_to "&lt;&nbsp;".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>
<div class="row">
<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><%= sanitize(@debate.description.html_safe) %></p>
<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>
<p><%= @debate.description %></p>
<p><%= render 'shared/tags', debate: @debate %></p>
</div>
<div class="votes small-12 medium-3 column">
<div class="small-12 medium-3 column votes">
<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 %>
@@ -34,7 +41,9 @@
</div>
</div>
</div>
</section>
<<<<<<< HEAD
<div id="comments" class="comments">
<h2><%= t("debates.show.comments") %></h2>
<div style="padding-bottom:60px">
@@ -47,5 +56,21 @@
<% 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 %>
=======
<section class="row-full comments">
<div class="row">
<div id="comments" class="small-12 column">
<h2><%= t("debates.show.comments") %></h2>
<div style="padding-bottom:60px">
<%= t("debates.show.leave_comment") %>
<%= render 'comments/form', parent: @debate %>
</div>
<%= render @debate.root_comments %>
</div>
>>>>>>> Adds new styles for debates show
</article>
<% 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>

6
app/views/layouts/application.html.erb
View File

@@ -23,11 +23,7 @@
<p class="alert-box"><%= alert %></p>
<% end %>
<div class="row">
<div class="small-12 column">
<%= yield %>
</div>
</div>
<%= yield %>
<%= render 'layouts/footer' %>
</body>

1
config/locales/en.yml
View File

@@ -27,6 +27,7 @@ en:
accept_terms: I accept the privacy policy and the legal terms
show:
back_link: Back
comment: Comment
comments: Comments
leave_comment: Write a comment
edit_debate_link: Edit

1
config/locales/es.yml
View File

@@ -27,6 +27,7 @@ es:
accept_terms: Acepto la política de privacidad y el aviso legal
show:
back_link: Volver
comment: Comentario
comments: Comentarios
leave_comment: Deja tu comentario
edit_debate_link: Editar