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

Changes styles for debates index and debate show

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
// Table of Contents
//
// 01. Variables
// 01.1. Fonts
// 01.2. Colors
// 02. Global styles
// 03. Header
// 04. Footer
@@ -17,16 +19,22 @@
// 01. Variables
// - - - - - - - - - - - - - - - - - - - - - - - - -
// 01.1. Fonts
// - - - - - - - - - - - -
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$line-height: rem-calc(24);
// 01.2. Colors
// - - - - - - - - - - - -
$background: #E9E9E9;
$border: #DEE0E3;
$brand: #0077B9;
$debates: #008CCF;
$comments-bg: #FAF9F8;
$comments-bg: #F1F1F1;//FAF9F8;
$comments-info: #A5B2B9;
$comments-text: #3F4549;
@@ -38,16 +46,16 @@ $tags-bg: #FAFAFA;
$tags-border: #F0F0F0;
$tags-color: #8F8F8F;
$text-color: #919399;
$text-color: #222222;
$text-medium: #999999;
$text-light: #a3a6ad;
$text-light: #A3A6AD;
$votes-background: #EDEDED;
$votes-border: #DEE0E3;
$votes-dislike: #EF8585;
$votes-dislike-b: #D26463;//FF7978;
$votes: #A0AEC4;
$votes-background: #F0F0F0;
$votes-border: #D8D8D8;
$votes-unlike: #EF8585;
$votes-like: #7BD2A8;
$votes-like-b: #56A47D;
$votes-text: #54627C;
// 02. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -62,10 +70,7 @@ body {
font-family: $font-family-sans-serif;
font-size: rem-calc(13);
font-weight: normal;
p {
font-weight: normal;
}
text-rendering: optimizeLegibility;
}
.row {
@@ -84,12 +89,7 @@ body {
display: inline-block;
}
::selection {
background: $brand;
color: white;
}
::-moz-selection {
::selection, ::-moz-selection {
background: $brand;
color: white;
}
@@ -125,8 +125,6 @@ header {
}
.button {
background: none;
border: 2px solid white;
color: white;
margin-top: $line-height*2;
}
@@ -197,38 +195,57 @@ header {
// 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -
aside {
.button {
margin-top: $line-height;
}
}
// 05.1. Debates Index
// - - - - - - - - - - - -
.debates-index {
.debates-list {
margin-top: $line-height;
}
.debates-featured {
.debate {
.panel {
background: white;
box-shadow: 0 2px 0 rgba(0,0,0,.1);
padding: rem-calc(20) rem-calc(20) 0 rem-calc(20);
.fi-comment-quotes {
color: $debates;
font-size: rem-calc(36);
line-height: $line-height;
margin-bottom: $line-height*0.77;
}
.fi-price-tag {
color: $text-color;
font-size: rem-calc(18);
line-height: $line-height;
.debate-content {
min-height: $line-height*11;
}
.label {
margin-top: $line-height/4;
background: none;
clear: both;
color: $debates;
display: block;
font-weight: bold;
text-transform: uppercase;
padding: 0;
}
.icon-quote-right {
color: $debates;
font-size: rem-calc(30);
line-height: $line-height;
position: absolute;
right: $line-height;
top: $line-height/2;
}
.icon-chat-bubble-two {
vertical-align: middle;
}
h3 {
margin: 0;
margin: rem-calc(12) 0 0 0;
font-weight: bold;
a {
@@ -240,63 +257,139 @@ header {
}
}
.debate-info {
color: $text-light;
font-weight: lighter;
margin-bottom: 0;
.icon-chat-bubble-two {
font-size: rem-calc(16);
}
}
p {
color: $text-color;
font-size: rem-calc(13);
line-height: $line-height;
margin-bottom: $line-height;
margin-bottom: $line-height/2;
}
}
.votes {
border-top: 1px solid $votes-border;
padding: $line-height/2 0;
.icon-like {
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-dislike {
color: $votes-dislike;
border: 1px solid $votes-border;
border-radius: rem-calc(3);
color: $votes;
display: inline-block;
font-size: rem-calc(48);
line-height: $line-height*2;
padding-top: $line-height/3;
font-size: rem-calc(30);
line-height: rem-calc(30);
padding: rem-calc(6) rem-calc(12);
//when active => color: $votes-like;
&:hover {
background: white;
color: $brand;
}
}
.in-favor {
color: $votes-like;
.icon-unlike {
background: $votes-background;
border: 1px solid $votes-border;
border-radius: rem-calc(3);
color: $votes;
display: inline-block;
font-size: rem-calc(30);
line-height: rem-calc(30);
padding: rem-calc(6) rem-calc(12);
//when active => color: $votes-unlike;
&:hover {
background: white;
color: $brand;
}
}
.like {
line-height: rem-calc(48);
vertical-align: top;
vertical-align: super;
span {
color: $votes-text;
display: inline-block;
line-height: 48px;
padding-top: 5px;
font-size: rem-calc(18);
font-weight: bold;
line-height: $line-height*2;
padding-left: rem-calc(6);
vertical-align: top;
}
}
.against {
@extend .in-favor;
color: $votes-dislike;
display: inline-block;
.unlike {
@extend .like;
}
.total-votes {
font-size: rem-calc(12);
color: $votes-text;
line-height: $line-height*2;
}
.divider {
background: rgba(0,0,0, .1);
display: inline-block;
height: 3rem;
margin: 0 .5rem;
width: 1px;
margin: 0 rem-calc(3);
}
}
}
}
.debates-index {
@extend .debates-featured;
.debate {
margin-bottom: rem-calc(6);
.panel {
border: 0;
box-shadow: none;
margin-bottom: 0;
padding: 0 rem-calc(6);
p {
text-align: justify;
}
.debate-content {
min-height: 0;
}
.icon-quote-right {
font-size: rem-calc(14);
position: initial;
vertical-align: bottom;
}
.label {
line-height: $line-height;
margin-right: rem-calc(5);
}
}
.votes {
border: 0;
margin-top: $line-height;
.like {
span {
color: $votes-text;
display: block;
font-size: rem-calc(18);
font-weight: bold;
line-height: $line-height*1.5;
}
}
}
}
}
@@ -305,10 +398,8 @@ header {
// - - - - - - - - - - - -
.debate-show {
color: $text-medium;
margin-top: $line-height;
margin-bottom: $line-height*2;
padding: 0 $line-height/2;
padding: 0 rem-calc(12);
.back {
color: $text-light;
@@ -316,23 +407,26 @@ header {
line-height: $line-height;
}
.icon-angle-left {
@extend .back;
}
h1 {
clear: both;
font-size: rem-calc(24);
font-weight: bold;
line-height: $line-height*1.3333;
line-height: $line-height*2;
margin: 0;
padding-top: $line-height/2;
}
.debate-info {
clear: both;
color: $text-light;
font-weight: lighter;
line-height: $line-height*2;
margin-bottom: $line-height*0.5;
text-align: justify;
span {
.bullet {
color: $border;
}
@@ -353,70 +447,87 @@ header {
width: 32px;
}
.author {
color: $text-color;
font-weight: bold;
}
.votes {
padding-top: 0;
@media (min-width: 480px) {
padding-top: $line-height*1.5;
}
h3 {
border-bottom: 1px solid $border;
font-size: rem-calc(18);
margin: 0 0 $line-height 0;
text-transform: uppercase;
}
.icon-like {
background: $votes-background;
border: 1px solid $votes-border;
box-shadow: 0 2px 0 rgba(0,0,0,.1);
border-radius: 3px;
padding: $line-height/2;
border-radius: rem-calc(3);
color: $votes;
display: inline-block;
font-size: rem-calc(30);
line-height: rem-calc(30);
padding: rem-calc(6) rem-calc(12);
//when active => color: $votes-like;
.fi-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);
height: $line-height*2.5;
line-height: $line-height*2.5;
width: $line-height*2.5;
&:hover {
background: white;
color: $brand;
}
}
.fi-dislike {
background: $votes-dislike;
border: 1px solid $votes-dislike-b;
border-radius: $line-height*2.5;
color: white;
display: block;
font-size: rem-calc(48);
height: $line-height*2.5;
line-height: $line-height*2.5;
width: $line-height*2.5;
.icon-unlike {
background: $votes-background;
border: 1px solid $votes-border;
border-radius: rem-calc(3);
color: $votes;
display: inline-block;
font-size: rem-calc(30);
line-height: rem-calc(30);
padding: rem-calc(6) rem-calc(12);
//when active => color: $votes-unlike;
&:hover {
background: white;
color: $brand;
}
}
.in-favor {
color: $votes-like;
line-height: rem-calc(48);
.like {
span {
display: inline-block;
color: $votes-text;
display: block;
font-size: rem-calc(18);
font-weight: bold;
line-height: $line-height;
padding-top: $line-height/4;
vertical-align: top;
line-height: $line-height*1.5;
}
}
.against {
@extend .in-favor;
color: $votes-dislike;
.unlike {
@extend .like;
}
.total-votes {
color: $votes-text;
font-size: rem-calc(14);
margin: 0;
line-height: $line-height;
}
.divider {
background: rgba(0,0,0,.05);
display: inline-block;
height: $line-height*4;
margin: 0 $line-height;
width: 1px;
margin: 0 rem-calc(12);
}
}
.publish-comment {
.leave-comment {
display: inline-block;
margin-top: $line-height;
}
}
@@ -490,15 +601,19 @@ header {
// 07. Tags
// - - - - - - - - - - - - - - - - - - - - - - - - -
.tags a {
.tags {
a {
background: $tags-bg;
border: 1px solid $tags-border;
border-radius: 3px;
color: $tags-color;
display: inline-block;
font-size: rem-calc(13);
margin-bottom: 8px;
margin-right: $line-height/3;
padding: $line-height/4 $line-height/3;
margin-bottom: rem-calc(8);
margin-right: rem-calc(8);
padding: 0 rem-calc(6);
&:hover {
color: $link;
@@ -507,6 +622,22 @@ header {
border: 1px solid $brand;
}
}
}
.tag-cloud {
@extend .tags;
h3 {
font-size: rem-calc(24);
font-weight: bold;
line-height: $line-height*2;
margin: 0;
}
a {
padding: $line-height/4 $line-height/3;
}
}
// 08. Login and Sign Up
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -534,38 +665,3 @@ header {

46
app/views/debates/_debate.html.erb
View File

@@ -1,32 +1,38 @@
<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>Por <%= debate.author.name %> el <%= l debate.created_at.to_date %></p>
<p><%= sanitize(debate.description.html_safe) %></p>
<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>
<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 %>
<span class="divider"></span>
<%= link_to debate_votes_path(debate, value: 'no'), class: 'against', method: "post" do %>
<i class="fi-dislike"></i>
<%= 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 %>
</div>
<div class="small-4 column">
<p class="total-votes right"><%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %></p>
<br>
<span class="total-votes">
<%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</span>
</div>
</div>
</div>
</div>
</div>

60
app/views/debates/index.html.erb
View File

@@ -1,9 +1,59 @@
<section id='debates' class="debates-index">
<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>
<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>
</section>
<aside>
<%= render 'shared/tag_cloud' %>
<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>

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

@@ -1,26 +1,20 @@
<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>
<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') %>
<%= @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 %>
<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="votes small-12 medium-3 column">
<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>

3
app/views/shared/_tag_cloud.html.erb
View File

@@ -1,4 +1,5 @@
<div id="tag-cloud">
<div id="tag-cloud" class="tag-cloud">
<h3><%= t("shared.tags_cloud.tags") %></h3>
<% tag_cloud Debate.tag_counts, %w[s m l] do |tag, css_class| %>
<%= link_to sanitize("#{tag.name}(#{tag.taggings_count})"), debates_path(tag: tag.name), class: css_class %>
<% end %>

22
app/views/votes/_votes.html.erb
View File

@@ -1,7 +1,14 @@
<div class="small-12 column text-center">
<div class="small-12 column">
<p class="total-votes right">
<%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</p>
<h3><%= t("votes.supports") %></h3>
<div class="text-center">
<div id="in_favor" class="inline-block">
<%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post", remote: true do %>
<i class="fi-like"></i>
<%= link_to debate_votes_path(@debate, value: 'yes'), class: "like", title: t('votes.agree'), method: "post", remote: true do %>
<i class="icon-like"></i>
<span><%= percentage('likes', @debate) %></span>
<% end %>
</div>
@@ -9,15 +16,10 @@
<span class="divider"></span>
<div id="against" class="inline-block">
<%= link_to debate_votes_path(@debate, value: 'no'), class: 'against', method: "post", remote: true do %>
<i class="fi-dislike"></i>
<%= link_to debate_votes_path(@debate, value: 'no'), class: "unlike", title: t('votes.disagree'), method: "post", remote: true do %>
<i class="icon-unlike"></i>
<span><%= percentage('dislikes', @debate) %></span>
<% end %>
</div>
</div>
<div class="small-12 column text-center">
<p class="total-votes">
<%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</p>
</div>

13
config/locales/en.yml
View File

@@ -12,10 +12,17 @@ en:
create_debate: Create a debate
my_account_link: My account
debates:
index:
create_debate: Create a debate
debate:
debate: Debate
vote: vote
votes: votes
comment: Comment
comments: Comments
agree: I agree
disagree: I disagree
leave_comment: Comment
form:
one_error: error
plural_errors: errors
@@ -45,9 +52,15 @@ en:
reply_link: Reply
reply_button: Publish reply
votes:
agree: I agree
disagree: I disagree
supports: Supports
notice_thanks: "Thanks for voting."
notice_already_registered: "Your vote is already registered."
account:
show:
title: "My account"
save_changes_submit: "Save changes"
shared:
tags_cloud:
tags: Tags

12
config/locales/es.yml
View File

@@ -12,10 +12,16 @@ es:
create_debate: Crea un debate
my_account_link: Mi cuenta
debates:
index:
create_debate: Crea un debate
debate:
debate: Debate
vote: voto
votes: votos
comment: Comentario
comments: Comentarios
agree: Estoy de acuerdo
disagree: No estoy de acuerdo
form:
one_error: error
plural_errors: errores
@@ -45,9 +51,15 @@ es:
reply_link: Responder
reply_button: Publicar respuesta
votes:
agree: Estoy de acuerdo
disagree: No estoy de acuerdo
supports: Apoyos
notice_thanks: "Gracias por votar."
notice_already_registered: "Tu voto ya ha sido registrado."
account:
show:
title: "Mi cuenta"
save_changes_submit: "Guardar cambios"
shared:
tags_cloud:
tags: Etiquetas