consul/grecia
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 // 03. Header
// 04. Footer // 04. Footer
// 05. Debates // 05. Debates
// 06. Comentarios // 05.1. Debates Index
// 05.2. Debates Show
// 06. Comments
// 06. Tags
// //
// 01. Variables // 01. Variables
@@ -14,14 +17,31 @@
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$line-height: rem-calc(24); $line-height: rem-calc(24);
$background: #EDEFF0; $background: #F9F9F9;
$border: #DEE0E3;
$brand: #0077B9; $brand: #0077B9;
$debates: #008CCF; $debates: #008CCF;
$comments-bg: #FAF9F8;
$header-color: #292B33; $header-color: #292B33;
$link: #0077B9;
$tags-bg: #FAFAFA;
$tags-border: #F0F0F0;
$tags-color: #8F8F8F;
$text-color: #919399; $text-color: #919399;
$text-medium: #999999;
$text-light: #a3a6ad;
$votes-background: #EDEDED; $votes-background: #EDEDED;
$votes-dislike: #FF7978; $votes-border: #DEE0E3;
$votes-like: #00D288; $votes-dislike: #EF8585;
$votes-dislike-b: #D26463;//FF7978;
$votes-like: #7BD2A8;
$votes-like-b: #56A47D;
// 02. Global styles // 02. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -32,8 +52,9 @@ $votes-like: #00D288;
} }
body { body {
background: $background; background: white;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
font-size: rem-calc(13);
font-weight: normal; font-weight: normal;
p { p {
@@ -45,6 +66,14 @@ body {
max-width: 1170px; max-width: 1170px;
} }
.row-full {
max-width: 100% !important;
}
.clear {
clear: both;
}
.inline-block { .inline-block {
display: inline-block; display: inline-block;
} }
@@ -53,13 +82,13 @@ body {
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
header { header {
background: url('home-header-bg.jpg'); background: url('home_header_bg.jpg');
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
height: $line-height*20; min-height: $line-height*20;
&.results { &.results {
height: $line-height*8 !important; min-height: $line-height*8;
} }
h1 { h1 {
@@ -152,6 +181,9 @@ header {
// 05. Debates // 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
// 05.1. Debates Index
// - - - - - - - - - - - -
.debates-index { .debates-index {
margin-top: $line-height; margin-top: $line-height;
} }
@@ -160,7 +192,6 @@ header {
.panel { .panel {
background: white; background: white;
border: 0;
box-shadow: 0 2px 0 rgba(0,0,0,.1); box-shadow: 0 2px 0 rgba(0,0,0,.1);
.fi-comment-quotes { .fi-comment-quotes {
@@ -254,48 +285,97 @@ header {
} }
} }
// 05.2. Debates Show
// - - - - - - - - - - - -
.debate-show { .debate-show {
background: white; color: $text-medium;
margin-top: $line-height; margin-top: $line-height;
padding: $line-height/2; padding: 0 $line-height/2;
h1 { .back {
font-size: rem-calc(30); color: $text-light;
font-weight: bold; font-size: rem-calc(13);
margin: 0;
}
.fi-price-tag {
color: $text-color;
font-size: rem-calc(18);
line-height: $line-height; 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 { .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 { .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); 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 { .fi-dislike {
color: $votes-dislike; background: $votes-dislike;
display: inline-block; border: 1px solid $votes-dislike-b;
border-radius: $line-height*2.5;
color: white;
display: block;
font-size: rem-calc(48); font-size: rem-calc(48);
line-height: $line-height*2; height: $line-height*2.5;
padding-top: $line-height/3; line-height: $line-height*2.5;
width: $line-height*2.5;
} }
.in-favor { .in-favor {
color: $votes-like; color: $votes-like;
line-height: rem-calc(48); line-height: rem-calc(48);
vertical-align: top;
span { span {
display: inline-block; display: inline-block;
line-height: 48px; font-size: rem-calc(18);
padding-top: 5px; font-weight: bold;
line-height: $line-height;
padding-top: $line-height/4;
vertical-align: top; vertical-align: top;
} }
} }
@@ -307,24 +387,26 @@ header {
.total-votes { .total-votes {
font-size: rem-calc(14); font-size: rem-calc(14);
line-height: $line-height*2; margin: 0;
} }
.divider { .divider {
background: rgba(0,0,0, .1); background: rgba(0,0,0,.05);
display: inline-block; display: inline-block;
height: 3rem; height: $line-height*4;
margin: 0 .5rem; margin: 0 $line-height;
width: 1px; width: 1px;
} }
} }
} }
// 06. Comentarios // 06. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
.comments { .comments {
clear: both; background: $comments-bg;
margin-top: $line-height*2;
padding-top: $line-height;
h2 { h2 {
margin: 0; 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> <h1><%= @debate.title %></h1>
<p>Por <%= @debate.author.name %> el <%= l @debate.created_at.to_date %></p> <div class="debate-info">
<p><%= sanitize(@debate.description.html_safe) %></p>
<%= 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> <p><%= render 'shared/tags', debate: @debate %></p>
</div> </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 class="small-12 column text-center">
<div id="in_favor" class="inline-block"> <div id="in_favor" class="inline-block">
<%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post" do %> <%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post" do %>
@@ -34,7 +41,9 @@
</div> </div>
</div> </div>
</div> </div>
</section>
<<<<<<< HEAD
<div id="comments" class="comments"> <div id="comments" class="comments">
<h2><%= t("debates.show.comments") %></h2> <h2><%= t("debates.show.comments") %></h2>
<div style="padding-bottom:60px"> <div style="padding-bottom:60px">
@@ -47,5 +56,21 @@
<% if current_user && @debate.editable_by?(current_user) %> <% if current_user && @debate.editable_by?(current_user) %>
<%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), class: 'button radius right' %> <%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), class: 'button radius right' %>
<% end %> <% 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>

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

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

1
config/locales/en.yml
View File

@@ -27,6 +27,7 @@ en:
accept_terms: I accept the privacy policy and the legal terms accept_terms: I accept the privacy policy and the legal terms
show: show:
back_link: Back back_link: Back
comment: Comment
comments: Comments comments: Comments
leave_comment: Write a comment leave_comment: Write a comment
edit_debate_link: Edit 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 accept_terms: Acepto la política de privacidad y el aviso legal
show: show:
back_link: Volver back_link: Volver
comment: Comentario
comments: Comentarios comments: Comentarios
leave_comment: Deja tu comentario leave_comment: Deja tu comentario
edit_debate_link: Editar edit_debate_link: Editar