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

Updates styles for debates index

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-08-06 11:19:37 +02:00
parent e69eb1eae8
commit 77ecf39852
5 changed files with 286 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/truncate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@@ -1,8 +1,6 @@
// Table of Contents
//
// 01. Variables
// 01.1. Fonts
// 01.2. Colors
// 02. Global styles
// 03. Header
// 04. Footer
@@ -19,43 +17,7 @@
// 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: #F1F1F1;//FAF9F8;
$comments-info: #A5B2B9;
$comments-text: #3F4549;
$header-color: #292B33;
$link: #0077B9;
$tags-bg: #FAFAFA;
$tags-border: #F0F0F0;
$tags-color: #8F8F8F;
$text-color: #222222;
$text-medium: #999999;
$text-light: #A3A6AD;
$votes: #A0AEC4;
$votes-background: #F0F0F0;
$votes-border: #D8D8D8;
$votes-unlike: #EF8585;
$votes-like: #7BD2A8;
$votes-text: #54627C;
@import "variables";
// 02. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -66,19 +28,15 @@ $votes-text: #54627C;
}
body {
background: white;
background: $background;
font-family: $font-family-sans-serif;
font-size: rem-calc(13);
font-weight: normal;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1170px;
}
.row-full {
max-width: 100% !important;
.button {
padding: rem-calc(15) rem-calc(32);
}
.clear {
@@ -89,6 +47,14 @@ body {
display: inline-block;
}
.row {
max-width: 1170px;
}
.row-full {
max-width: 100% !important;
}
::selection, ::-moz-selection {
background: $brand;
color: white;
@@ -126,6 +92,7 @@ header {
.button {
color: white;
font-family: inherit;
margin-top: $line-height*2;
}
}
@@ -195,200 +162,249 @@ header {
// 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -
aside {
.button {
margin-top: $line-height;
}
}
// 05.1. Debates Index
// - - - - - - - - - - - -
.debates-list {
margin-top: $line-height;
}
.debates-featured {
margin-bottom: rem-calc(34);
margin-top: rem-calc(23);
.debate {
.panel {
background: white;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: rem-calc(3);
margin-bottom: $line-height;
padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
.panel {
background: white;
box-shadow: 0 2px 0 rgba(0,0,0,.1);
padding: rem-calc(20) rem-calc(20) 0 rem-calc(20);
.debate-content {
min-height: $line-height*14.71;
}
.debate-content {
min-height: $line-height*11;
}
.label {
background: none;
clear: both;
color: $debates;
display: block;
font-weight: bold;
text-transform: uppercase;
padding-left: 0;
padding-top: 0;
}
.label {
background: none;
.icon-comment-quotes {
color: $debates;
font-size: rem-calc(36);
line-height: $line-height;
position: absolute;
right: rem-calc(18);
top: rem-calc(24);
}
h3 {
font-weight: bold;
margin: rem-calc(8) 0 0 0;
min-height: rem-calc(65);
a {
clear: both;
color: $debates;
color: $header-color;
display: block;
font-weight: bold;
text-transform: uppercase;
padding: 0;
}
.icon-quote-right {
color: $debates;
font-size: rem-calc(30);
font-size: rem-calc(16);
line-height: $line-height;
position: absolute;
right: $line-height;
top: $line-height/2;
}
}
.debate-info {
color: $text-light;
font-weight: lighter;
margin-bottom: 0;
.icon-chat-bubble-two {
vertical-align: middle;
}
h3 {
margin: rem-calc(12) 0 0 0;
font-weight: bold;
a {
clear: both;
color: $header-color;
display: block;
font-size: rem-calc(16);
line-height: $line-height;
}
}
.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/2;
font-size: rem-calc(16);
vertical-align: top;
}
}
.votes {
border-top: 1px solid $votes-border;
padding: $line-height/2 0;
.debate-description {
color: $text-color;
font-size: rem-calc(13);
height: $line-height*6.5;
line-height: $line-height;
margin-bottom: $line-height/2;
margin-top: $line-height;
overflow: hidden;
position: relative;
}
.icon-like {
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-like;
.truncate {
background: url('truncate.png');
background-repeat: repeat-x;
bottom: 0;
height: 24px;
position: absolute;
width: 100%;
}
&:hover {
background: white;
color: $brand;
}
}
.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: super;
span {
color: $votes-text;
display: inline-block;
font-size: rem-calc(18);
font-weight: bold;
line-height: $line-height*2;
padding-left: rem-calc(6);
vertical-align: top;
}
}
.unlike {
@extend .like;
}
.total-votes {
color: $votes-text;
line-height: $line-height*2;
}
.divider {
margin: 0 rem-calc(3);
}
p {
color: $text-color;
font-size: rem-calc(13);
line-height: $line-height;
margin-bottom: $line-height/2;
}
}
.votes {
border-top: 1px solid $votes-border;
padding: rem-calc(14) rem-calc(12);
background: $votes-background;
margin: 0 -12px;
.icon-like {
background: white;
border: 2px solid white;
border-radius: rem-calc(3);
color: $votes-neutral;
display: inline-block;
font-size: rem-calc(30);
line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6);
position: relative;
//when active => color: $votes-like;
&:hover {
background: $votes-like;
color: white;
cursor: pointer;
}
&:active {
border-color: $votes-like-act;
}
}
.icon-unlike {
background: white;
border: 2px solid white;
border-radius: rem-calc(3);
color: $votes-neutral;
display: inline-block;
font-size: rem-calc(30);
line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6);
position: relative;
//when active => color: $votes-unlike;
&:hover {
background: $votes-unlike;
color: white;
cursor: pointer;
}
&:active {
border-color: $votes-unlike-act;
}
}
.like {
line-height: rem-calc(48);
vertical-align: super;
span {
color: $votes-text;
display: inline-block;
font-size: rem-calc(16);
font-weight: lighter;
line-height: $line-height*2;
padding-left: rem-calc(8);
vertical-align: top;
}
}
.unlike {
@extend .like;
}
.total-votes {
color: $votes-text;
float: right;
line-height: $line-height*2;
}
.divider {
margin: 0 rem-calc(6);
}
}
}
.debates-list {
margin-bottom: $line-height*2;
}
.debates-index {
@extend .debates-featured;
margin-bottom: 0;
margin-top: 0;
.debate {
margin-bottom: rem-calc(6);
.panel {
margin-bottom: 0;
min-height: $line-height*8;
padding: 0 rem-calc(12) rem-calc(2) rem-calc(12);
.panel {
border: 0;
box-shadow: none;
margin-bottom: 0;
padding: 0 rem-calc(6);
&:first-child {
padding-top: $line-height;
}
p {
text-align: justify;
}
.label {
line-height: $line-height;
padding-bottom: 0;
}
.debate-content {
min-height: 0;
}
h3 {
margin-top: 0;
min-height: $line-height*2;
}
.icon-quote-right {
font-size: rem-calc(14);
position: initial;
vertical-align: bottom;
}
p {
text-align: justify;
}
.label {
line-height: $line-height;
margin-right: rem-calc(5);
.debate-content {
margin: 0;
min-height: 0;
.tags {
display: block;
}
}
.votes {
border: 0;
margin-top: $line-height;
.icon-comment-quotes {
font-size: rem-calc(18);
left: rem-calc(60);
top: 0;
}
.like {
.debate-description {
height: $line-height*3;
margin-top: 0;
}
}
span {
color: $votes-text;
display: block;
font-size: rem-calc(18);
font-weight: bold;
line-height: $line-height*1.5;
}
.votes {
border: 0;
.total-votes {
float: none;
line-height: $line-height;
display: block;
}
.like {
span {
color: $votes-text;
display: block;
line-height: $line-height/2;
}
}
}
@@ -610,6 +626,7 @@ aside {
color: $tags-color;
display: inline-block;
font-size: rem-calc(13);
line-height: rem-calc(22);
margin-bottom: rem-calc(8);
margin-right: rem-calc(8);
padding: 0 rem-calc(6);

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

@@ -1,39 +1,40 @@
<div class="debates-index">
<div id="debate-<%= debate.id %>" class="debate">
<div class="panel">
<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 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>
<div id="debate-<%= debate.id %>" class="debates-index">
<div class="panel">
<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-comment-quotes"></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.debate.comment"), t("debates.debate.comments")) %>
</p>
<div class="debate-description">
<%= debate.description %>
<%= render "shared/tags", debate: debate %>
<div class="truncate"></div>
</div>
<%= render "shared/tags", debate: debate %>
</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 %>
</div>
<div class="small-12 medium-3 column text-center">
<div class="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>
<span class="divider"></span>
<%= 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 %>
<br>
<span class="total-votes">
<%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</span>
</div>
<%= 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 %>
<span class="total-votes">
<%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

70
app/views/debates/_featured_debate.html.erb
View File

@@ -1,41 +1,37 @@
<div class="small-12 medium-4 column debates-list">
<div class="row">
<div class="debates-featured">
<div id="debate-<%= featured_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 featured_debate.title, featured_debate %></h3>
<p class="debate-info">
<i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(featured_debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
</p>
<p><%= sanitize(truncate(featured_debate.description, length: 200).html_safe) %></p>
<p><%= render "shared/tags", debate: featured_debate %></p>
</div>
<div class="row votes">
<div class="small-12 column">
<%= link_to debate_votes_path(featured_debate, value: "yes"), class: "like", title: t('votes.agree'), method: "post" do %>
<i class="icon-like"></i>
<span><%= percentage('likes', featured_debate) %></span>
<% end %>
<span class="divider"></span>
<%= link_to debate_votes_path(featured_debate, value: "no"), class: "unlike", title: t('votes.disagree'), method: "post" do %>
<i class="icon-unlike"></i>
<span><%= percentage('dislikes', featured_debate) %></span>
<% end %>
<span class="total-votes right">
<%= pluralize(featured_debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</span>
</div>
</div>
<div class="small-12 medium-4 column">
<div id="debate-<%= featured_debate.id %>" class="debates-featured">
<div class="panel">
<div class="debate-content">
<span class="label left"><%= t("debates.debate.debate") %></span>
<i class="icon-comment-quotes right"></i>
<h3><%= link_to featured_debate.title, featured_debate %></h3>
<p class="debate-info">
<i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(featured_debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
</p>
<div class="debate-description">
<%= featured_debate.description %>
<div class="truncate"></div>
</div>
<%= render "shared/tags", debate: featured_debate %>
</div>
<div class="votes">
<%= link_to debate_votes_path(featured_debate, value: "yes"), class: "like", title: t('votes.agree'), method: "post" do %>
<i class="icon-like"></i>
<span><%= percentage('likes', featured_debate) %></span>
<% end %>
<span class="divider"></span>
<%= link_to debate_votes_path(featured_debate, value: "no"), class: "unlike", title: t('votes.disagree'), method: "post" do %>
<i class="icon-unlike"></i>
<span><%= percentage('dislikes', featured_debate) %></span>
<% end %>
<span class="total-votes">
<%= pluralize(featured_debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
</span>
</div>
</div>
</div>
</div>
</div>

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

@@ -8,7 +8,7 @@
</div>
<div class="small-12 medium-3 column">
<aside role="complementary">
<%= link_to t("debates.index.create_debate"), new_debate_path, class: 'button radius' %>
<%= link_to t("debates.index.create_debate"), new_debate_path, class: 'button radius expand' %>
<%= render "shared/tag_cloud" %>
</aside>
</div>