From 77ecf398527a0efc7ea70f487627f53edc448d70 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Thu, 6 Aug 2015 11:19:37 +0200 Subject: [PATCH] Updates styles for debates index --- app/assets/images/truncate.png | Bin 0 -> 1160 bytes app/assets/stylesheets/debates.scss | 425 ++++++++++---------- app/views/debates/_debate.html.erb | 61 +-- app/views/debates/_featured_debate.html.erb | 70 ++-- app/views/debates/index.html.erb | 2 +- 5 files changed, 286 insertions(+), 272 deletions(-) create mode 100644 app/assets/images/truncate.png diff --git a/app/assets/images/truncate.png b/app/assets/images/truncate.png new file mode 100644 index 0000000000000000000000000000000000000000..799bcef4da78f2675faf0246c95f12f830c9733a GIT binary patch literal 1160 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`Gjk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*9U+m^Cs(B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+* zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxOgGuU%v{0TQqR!T z+}y-mN5ROz&{W^RSl`${*T~q)#K6kLNC66zfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5 zFD$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;NpiyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr7I$IMft0d=ry1 z^FV@{U|qhxR-SpqC5d^-sh%#jN*Q ziwjQkpn6kqy2a8Jr(S)aWAs7Mixk~3Az&H;G2w|9$bl#S)I4CCF9Ig+tuyyT12e`q zPZ!6Kid$QzSo0k+;As=)RI}Q&(WscAERFAg=*^jtkvDHxbe@do6zO?;L$_08t7lGq zXZ*~Lpz{;C6K+ZyR6IGggfm?^A(pe?q0XF->s6-T%VsdUnr7R<`MG}I^p@_P23=); zS(TfN3FenABE?w}^ldgSU9t0}yLdzM0+nBvCHs#g7nG#=?_gQLejqbVc1BUR5&O~a zx8hz1nJzf}fPrgCj`rj$;uVU^9%?i&UH!+(mhkjMzW;-xP0q9CMLP*wy*|#yAg+9O z%b)XIzdc^LUbhzsxfa8A;A}?5!fgs`8Fy%x6dgOdhMz(1;32M)OdsCd)QV%`VaRTs VP^xu5<}9de@O1TaS?83{1ON+Ug~$K^ literal 0 HcmV?d00001 diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index 9e991d89b..112e0120c 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -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); diff --git a/app/views/debates/_debate.html.erb b/app/views/debates/_debate.html.erb index f37f1c5bc..adebe128c 100644 --- a/app/views/debates/_debate.html.erb +++ b/app/views/debates/_debate.html.erb @@ -1,39 +1,40 @@ -
-
-
-
-
-
- <%= t("debates.debate.debate") %> - -

<%= link_to debate.title, debate %>

-

-  <%= pluralize(debate.comment_threads.count, t("debates.debate.comment"), t("debates.debate.comments")) %> -

+
+
+
+
+
+ <%= t("debates.debate.debate") %> + +

<%= link_to debate.title, debate %>

+

+  <%= pluralize(debate.comment_threads.count, t("debates.debate.comment"), t("debates.debate.comments")) %> +

+
<%= debate.description %> - <%= render "shared/tags", debate: debate %> +
+ <%= render "shared/tags", debate: debate %>
-
-
- <%= link_to debate_votes_path(debate, value: 'yes'), class: "like inline-block", title: t('votes.agree'), method: "post" do %> - - <%= percentage('likes', debate) %> - <% end %> +
+
+
+ <%= link_to debate_votes_path(debate, value: 'yes'), class: "like inline-block", title: t('votes.agree'), method: "post" do %> + + <%= percentage('likes', debate) %> + <% end %> - + - <%= link_to debate_votes_path(debate, value: 'no'), class: "unlike inline-block", title: t('votes.disagree'), method: "post" do %> - - <%= percentage('dislikes', debate) %> - <% end %> -
- - <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %> - -
+ <%= link_to debate_votes_path(debate, value: 'no'), class: "unlike inline-block", title: t('votes.disagree'), method: "post" do %> + + <%= percentage('dislikes', debate) %> + <% end %> + + + <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %> +
-
+
\ No newline at end of file diff --git a/app/views/debates/_featured_debate.html.erb b/app/views/debates/_featured_debate.html.erb index 6f74b0ed7..20d63fdd0 100644 --- a/app/views/debates/_featured_debate.html.erb +++ b/app/views/debates/_featured_debate.html.erb @@ -1,41 +1,37 @@ -
-
-
-