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

Merge pull request #1253 from consul/refactor-styles

Browse Source 
Refactor styles
This commit is contained in:
Juanjo Bazán
2016-10-31 17:27:52 +01:00
committed by GitHub
parent df7fb0360c 6fd5e6a67a
commit 87ec74b49f
17 changed files with 149 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/votes.js.coffee
View File

@@ -3,17 +3,11 @@ App.Votes =
hoverize: (votes) -> hoverize: (votes) ->
$(document).on { $(document).on {
'mouseenter focus': -> 'mouseenter focus': ->
$("div.anonymous-votes", this).show(); $("div.participation-not-allowed", this).show();
$("div.organizations-votes", this).show(); $("div.participation-allowed", this).hide();
$("div.not-logged", this).show();
$("div.no-supports-allowed", this).show();
$("div.logged", this).hide();
mouseleave: -> mouseleave: ->
$("div.anonymous-votes", this).hide(); $("div.participation-not-allowed", this).hide();
$("div.organizations-votes", this).hide(); $("div.participation-allowed", this).show();
$("div.not-logged", this).hide();
$("div.no-supports-allowed", this).hide();
$("div.logged", this).show();
}, votes }, votes
initialize: -> initialize: ->

22
app/assets/stylesheets/_settings.scss
View File

@@ -48,37 +48,32 @@
// -------------------- // --------------------
$base-font-size: rem-calc(17); $base-font-size: rem-calc(17);
$base-line-height: rem-calc(26); $base-line: rem-calc(26);
$small-font-size: rem-calc(14); $small-font-size: rem-calc(14);
$line-height: rem-calc(24); $line-height: rem-calc(24);
$brand: #004A83; $brand: #004A83;
$body: #E9E9E9;
$background: #EDEFF0;
$border: #DEE0E3;
$dark: darken($brand, 10%); $dark: darken($brand, 10%);
$text: #222222; $text: #222222;
$text-medium: #999999; $text-medium: #999999;
$text-light: #CCCCCC; $text-light: #CCCCCC;
$border: #DEE0E3;
$link: #2895F1; $link: #2895F1;
$link-hover: #2178BF; $link-hover: darken($link, 20%);
$debates: #008CCF; $debates: #008CCF;
$votes-bg: #26AEEE;
$votes-border: #1F94CB;
$votes-like: #7BD2A8; $votes: #26AEEE;
$votes-like-act: #5D9E7F; $like: #7BD2A8;
$votes-unlike: #EF8585; $unlike: #EF8585;
$votes-unlike-act: #BD6A6A;
$delete: #F04124; $delete: #F04124;
$check: #46DB91; $check: #46DB91;
$proposals: #FFA42D; $proposals: #FFA42D;
$proposals-border: #CC8425;
$budget: #454372; $budget: #454372;
$budget-hover: #7571BF; $budget-hover: #7571BF;
@@ -86,9 +81,6 @@ $budget-hover: #7571BF;
$highlight: #E7F2FC; $highlight: #E7F2FC;
$featured: #FED900; $featured: #FED900;
$footer-bg: #DEE0E2;
$footer-color: #171819;
$footer-link: #454A4C;
$footer-border: #BFC1C3; $footer-border: #BFC1C3;
$success-bg: #DFF0D8; $success-bg: #DFF0D8;

2
app/assets/stylesheets/admin.scss
View File

@@ -82,7 +82,7 @@ body.admin {
.admin-content { .admin-content {
.proposal-new, .proposal-edit { .proposal-form {
padding-top: 0; padding-top: 0;
} }

29
app/assets/stylesheets/layout.scss
View File

@@ -40,7 +40,7 @@ h1, h2, h3, h4, h5, h6 {
p { p {
font-size: $base-font-size; font-size: $base-font-size;
font-weight: 400; font-weight: 400;
line-height: $base-line-height; line-height: $base-line;
} }
a { a {
@@ -487,7 +487,7 @@ header {
// ---------- // ----------
footer { footer {
color: $footer-color; color: $text;
.logo a { .logo a {
font-family: 'Lato' !important; font-family: 'Lato' !important;
@@ -507,10 +507,11 @@ footer {
} }
a, a:active, a:focus { a, a:active, a:focus {
color: $footer-link; color: $text;
text-decoration: underline;
&:hover { &:hover {
color: $footer-color; color: $text-medium;
} }
} }
@@ -519,7 +520,7 @@ footer {
} }
h2 a { h2 a {
border-bottom: 1px solid $footer-border; border-bottom: 1px solid $text-light;
display: block; display: block;
font-size: rem-calc(24); font-size: rem-calc(24);
line-height: rem-calc(31); line-height: rem-calc(31);
@@ -529,14 +530,14 @@ footer {
} }
.footer { .footer {
background: $footer-bg; background: $border;
border-top: 6px solid $brand; border-top: 6px solid $brand;
margin-top: $line-height*2; margin-top: $line-height*2;
padding-top: $line-height; padding-top: $line-height;
} }
.subfooter { .subfooter {
border-top: 1px solid $footer-border; border-top: 1px solid $text-light;
padding-top: $line-height/2; padding-top: $line-height/2;
} }
@@ -563,8 +564,8 @@ footer {
color: $link; color: $link;
&:hover { &:hover {
background: $highlight; background: $brand;
color: $link-hover; color: white;
} }
} }
@@ -1002,15 +1003,6 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
// 09. Search // 09. Search
// ---------- // ----------
.search-form h3 {
border-top: 1px solid $votes-border;
display: inline-block;
font-size: rem-calc(16);
margin: -1px 0 $line-height/2;
padding-top: $line-height/4;
text-transform: uppercase;
}
.search-results h2 { .search-results h2 {
margin-bottom: 0; margin-bottom: 0;
} }
@@ -1588,6 +1580,7 @@ table {
font-size: $small-font-size; font-size: $small-font-size;
margin: rem-calc(6) 0; margin: rem-calc(6) 0;
padding: rem-calc(6); padding: rem-calc(6);
position: relative;
[class^="icon-arrow"] { [class^="icon-arrow"] {
font-size: rem-calc(18); font-size: rem-calc(18);

239
app/assets/stylesheets/participation.scss
View File

@@ -12,15 +12,14 @@
// ---------------------- // ----------------------
@mixin votes { @mixin votes {
background: $votes-bg; background: $votes;
border-top: 1px solid $votes-border;
margin: 0 rem-calc(-12); margin: 0 rem-calc(-12);
padding: rem-calc(14) rem-calc(12); padding: rem-calc(14) rem-calc(12);
position: relative; position: relative;
.icon-like { .icon-like, .icon-unlike {
background: white; background: white;
border: 2px solid $votes-border; border: 2px solid $votes;
border-radius: rem-calc(3); border-radius: rem-calc(3);
color: $text-light; color: $text-light;
display: inline-block; display: inline-block;
@@ -29,40 +28,25 @@
padding: rem-calc(3) rem-calc(6); padding: rem-calc(3) rem-calc(6);
position: relative; position: relative;
&:hover { &:hover, &:active {
background: $votes-like;
border-color: white; border-color: white;
color: white; color: white;
cursor: pointer; cursor: pointer;
opacity: 1 !important; opacity: 1 !important;
} }
}
&:active { .icon-like {
border-color: $votes-like-act;
&:hover, &:active {
background: $like;
} }
} }
.icon-unlike { .icon-unlike {
background: white;
border: 2px solid $votes-border;
border-radius: rem-calc(3);
color: $text-light;
display: inline-block;
font-size: rem-calc(30);
line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6);
position: relative;
&:hover { &:hover, &:active {
background: $votes-unlike; background: $unlike;
border-color: white;
color: white;
cursor: pointer;
opacity: 1 !important;
}
&:active {
border-color: $votes-unlike-act;
} }
} }
@@ -81,20 +65,23 @@
} }
.voted { .voted {
.icon-like {
background: $votes-like; .icon-like, .icon-unlike {
border-color: white; border-color: white;
color: white; color: white;
} }
.icon-like {
background: $like;
}
.icon-unlike { .icon-unlike {
background: $votes-unlike; background: $unlike;
border-color: white;
color: white;
} }
} }
.no-voted { .no-voted {
.icon-like, .icon-unlike { .icon-like, .icon-unlike {
opacity: .5; opacity: .5;
} }
@@ -109,54 +96,10 @@
.divider { .divider {
margin: 0 rem-calc(6); margin: 0 rem-calc(6);
} }
.not-logged {
background: rgba(22,99,135,.9);
color: white;
font-size: $small-font-size;
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#222222', endColorstr='#222222'); /* IE */
a {
color: white;
text-decoration: underline;
}
}
.anonymous-votes, .organizations-votes {
background: $warning-bg;
color: $color-warning;
height: 100%;
left: 0;
line-height: $line-height;
padding-top: rem-calc(12);
position: absolute;
text-align: center;
top: 0;
width: 100%;
p {
color: $color-warning;
margin: 0 rem-calc(12);
text-align: left;
}
a {
color: $color-warning;
font-weight: bold;
text-decoration: underline;
}
}
} }
@mixin supports { @mixin supports {
background: $proposals; background: $proposals;
border-top: 1px solid $proposals-border;
margin: 0 rem-calc(-12); margin: 0 rem-calc(-12);
padding: rem-calc(14) rem-calc(12); padding: rem-calc(14) rem-calc(12);
position: relative; position: relative;
@@ -166,7 +109,7 @@
height: $line-height/2; height: $line-height/2;
.meter { .meter {
background: $votes-like; background: $like;
display: block; display: block;
height: $line-height/2; height: $line-height/2;
} }
@@ -197,7 +140,7 @@
margin-top: rem-calc(12); margin-top: rem-calc(12);
&:hover { &:hover {
background: $proposals-border; background: darken($proposals, 35%);
color: white; color: white;
cursor: pointer; cursor: pointer;
} }
@@ -221,49 +164,6 @@
margin: 0 rem-calc(6); margin: 0 rem-calc(6);
} }
.not-logged {
background: rgba(255,164,45,.9);
color: white;
font-size: $small-font-size;
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#222222', endColorstr='#222222'); /* IE */
a {
color: white;
text-decoration: underline;
}
}
.anonymous-votes, .organizations-votes, .no-supports-allowed {
background: $warning-bg;
color: $color-warning;
height: 100%;
left: 0;
line-height: $line-height;
padding-top: rem-calc(12);
position: absolute;
text-align: center;
top: 0;
width: 100%;
p {
color: $color-warning;
margin: 0 rem-calc(12);
text-align: left;
}
a {
color: $color-warning;
font-weight: bold;
text-decoration: underline;
}
}
.supported { .supported {
color: white; color: white;
margin-top: rem-calc(12); margin-top: rem-calc(12);
@@ -285,32 +185,61 @@
} }
} }
.participation-not-allowed {
background: $warning-bg;
color: $color-warning;
height: 100%;
left: 0;
line-height: $line-height;
padding: $line-height $line-height/2;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 2;
p {
color: $color-warning !important;
margin: 0 rem-calc(12);
text-align: left;
}
a {
color: $color-warning !important;
font-weight: bold;
text-decoration: underline;
}
}
.reply .participation-not-allowed {
padding-right: $line-height/2;
padding-top: $line-height/6;
text-align: right;
}
// 02. New participation // 02. New participation
// --------------------- // ---------------------
.debate-new, .debate-edit, .debate-form,
.proposal-new, .proposal-edit, .proposal-form,
.spending-proposal-new, .spending-proposal-edit { .spending-proposal-form {
.icon-debates, .icon-proposals, .icon-budget {
font-size: rem-calc(50);
line-height: $line-height;
opacity: .5;
}
.icon-debates { .icon-debates {
color: $debates; color: $debates;
font-size: rem-calc(60);
line-height: $line-height;
opacity: .5;
} }
.icon-proposals { .icon-proposals {
color: $proposals; color: $proposals;
font-size: rem-calc(50);
line-height: $line-height;
opacity: .5;
} }
.icon-budget { .icon-budget {
color: $budget; color: $budget;
font-size: rem-calc(50);
line-height: $line-height;
opacity: .5;
} }
.recommendations { .recommendations {
@@ -330,14 +259,14 @@
} }
} }
.debate-new, .debate-edit { .debate-form {
.recommendations li:before { .recommendations li:before {
color: $debates; color: $debates;
} }
} }
.proposal-new, .proposal-edit { .proposal-form {
.recommendations li:before { .recommendations li:before {
color: $proposals; color: $proposals;
@@ -496,11 +425,6 @@
line-height: $line-height; line-height: $line-height;
} }
.not-logged {
line-height: $line-height;
padding: rem-calc(24);
}
@include breakpoint(small + rem-calc(1) and medium down) { @include breakpoint(small + rem-calc(1) and medium down) {
.in-favor, .against { .in-favor, .against {
text-align: left; text-align: left;
@@ -530,11 +454,6 @@
float: none; float: none;
line-height: $line-height; line-height: $line-height;
} }
.not-logged {
line-height: $line-height;
padding: rem-calc(24);
}
} }
.leave-comment { .leave-comment {
@@ -711,15 +630,6 @@
} }
} }
.not-logged {
line-height: $line-height;
padding-top: rem-calc(24);
}
.anonymous-votes, .organizations-votes {
padding-top: rem-calc(24);
}
.divider { .divider {
display: none; display: none;
} }
@@ -745,7 +655,7 @@
.votes { .votes {
@include votes; @include votes;
border: 1px solid $votes-border; border: 1px solid $votes;
margin: 0 rem-calc(-12); margin: 0 rem-calc(-12);
@include breakpoint(medium) { @include breakpoint(medium) {
@@ -803,7 +713,7 @@
.supports { .supports {
@include supports; @include supports;
border: 1px solid $proposals-border; border: 1px solid $proposals;
margin: 0 rem-calc(-12); margin: 0 rem-calc(-12);
@include breakpoint(medium) { @include breakpoint(medium) {
@@ -904,16 +814,6 @@
line-height: rem-calc(70); line-height: rem-calc(70);
} }
.no-supports-allowed {
background: rgba(69,67,114,.96);
color: white;
padding: rem-calc(12);
}
.no-supports-allowed p, .no-supports-allowed a {
color: white;
}
.share-supported { .share-supported {
.ssb-twitter, .ssb-twitter,
@@ -1006,18 +906,13 @@
margin-top: 0; margin-top: 0;
} }
.not-logged, .participation-not-allowed {
.organizations-votes,
.anonymous-votes {
background: $featured; background: $featured;
color: $color-warning;
font-size: $small-font-size; font-size: $small-font-size;
line-height: $line-height;
padding-top: 0; padding-top: 0;
a { a {
color: $color-warning; color: $color-warning;
font-weight: bold;
} }
p { p {

4
app/views/comments/_votes.html.erb
View File

@@ -33,7 +33,7 @@
<% elsif !user_signed_in? %> <% elsif !user_signed_in? %>
<div class="logged" > <div class="participation-allowed">
<%= t('comments.comment.votes', count: comment.total_votes) %> <%= t('comments.comment.votes', count: comment.total_votes) %>
&nbsp;|&nbsp; &nbsp;|&nbsp;
@@ -60,7 +60,7 @@
<%= comment.total_dislikes %> <%= comment.total_dislikes %>
</span> </span>
</div> </div>
<div class="not-logged" style='display:none'> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<%= t("votes.comment_unauthenticated", <%= t("votes.comment_unauthenticated",
signin: link_to(t("votes.signin"), new_user_session_path), signin: link_to(t("votes.signin"), new_user_session_path),
signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %> signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>

32
app/views/debates/_votes.html.erb
View File

@@ -26,23 +26,23 @@
</span> </span>
<% if user_signed_in? && current_user.organization? %> <% if user_signed_in? && current_user.organization? %>
<div class="organizations-votes" style='display:none' aria-hidden="false"> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p> <p>
<%= t("votes.organizations") %> <%= t("votes.organizations") %>
</p> </p>
</div> </div>
<% elsif user_signed_in? && !debate.votable_by?(current_user)%> <% elsif user_signed_in? && !debate.votable_by?(current_user)%>
<div class="anonymous-votes" style='display:none' aria-hidden="false"> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p> <p>
<%= t("votes.anonymous", <%= t("votes.anonymous",
verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %> verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %>
</p> </p>
</div> </div>
<% elsif !user_signed_in? %> <% elsif !user_signed_in? %>
<div class="not-logged" style='display:none' aria-hidden="false"> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<%= t("votes.unauthenticated", <%= t("votes.unauthenticated",
signin: link_to(t("votes.signin"), new_user_session_path), signin: link_to(t("votes.signin"), new_user_session_path),
signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %> signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
</div> </div>
<% end %> <% end %>
</div> </div>

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

@@ -1,4 +1,4 @@
<div class="debate-edit row"> <div class="debate-form row">
<div class="small-12 column"> <div class="small-12 column">
<%= render "shared/back_link" %> <%= render "shared/back_link" %>

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

@@ -1,4 +1,4 @@
<div class="debate-new row"> <div class="debate-form row">
<div class="small-12 medium-9 column"> <div class="small-12 medium-9 column">
<%= render "shared/back_link" %> <%= render "shared/back_link" %>

2
app/views/management/proposals/new.html.erb
View File

@@ -1,4 +1,4 @@
<div class="proposal-new"> <div class="proposal-form">
<div class="clear float-right"> <div class="clear float-right">
<%= render '/shared/print' %> <%= render '/shared/print' %>

2
app/views/management/spending_proposals/new.html.erb
View File

@@ -1,4 +1,4 @@
<div class="spending-proposal-new"> <div class="spending-proposal-form">
<div class="clear float-right"> <div class="clear float-right">
<%= render '/shared/print' %> <%= render '/shared/print' %>

32
app/views/proposals/_featured_votes.html.erb
View File

@@ -14,24 +14,24 @@
</div> </div>
<% if user_signed_in? && current_user.organization? %> <% if user_signed_in? && current_user.organization? %>
<div class="organizations-votes" style='display:none'> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p> <p>
<%= t("votes.organizations") %> <%= t("votes.organizations") %>
</p> </p>
</div> </div>
<% elsif user_signed_in? && !proposal.votable_by?(current_user)%> <% elsif user_signed_in? && !proposal.votable_by?(current_user)%>
<div class="anonymous-votes" style='display:none'> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p> <p>
<%= t("votes.verified_only", <%= t("votes.verified_only",
verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %> verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %>
</p> </p>
</div> </div>
<% elsif !user_signed_in? %> <% elsif !user_signed_in? %>
<div class="not-logged" style='display:none'> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<%= t("votes.unauthenticated", <%= t("votes.unauthenticated",
signin: link_to(t("votes.signin"), new_user_session_path), signin: link_to(t("votes.signin"), new_user_session_path),
signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %> signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
</div> </div>
<% end %> <% end %>
<% if voted_for?(@featured_proposals_votes, proposal) %> <% if voted_for?(@featured_proposals_votes, proposal) %>

32
app/views/proposals/_votes.html.erb
View File

@@ -31,24 +31,24 @@
</div> </div>
<% if user_signed_in? && current_user.organization? %> <% if user_signed_in? && current_user.organization? %>
<div class="organizations-votes" style='display:none' aria-hidden="false"> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p> <p>
<%= t("votes.organizations") %> <%= t("votes.organizations") %>
</p> </p>
</div> </div>
<% elsif user_signed_in? && !proposal.votable_by?(current_user)%> <% elsif user_signed_in? && !proposal.votable_by?(current_user)%>
<div class="anonymous-votes" style='display:none' aria-hidden="false"> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p> <p>
<%= t("votes.verified_only", <%= t("votes.verified_only",
verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %> verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %>
</p> </p>
</div> </div>
<% elsif !user_signed_in? %> <% elsif !user_signed_in? %>
<div class="not-logged" style='display:none' aria-hidden="false"> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<%= t("votes.unauthenticated", <%= t("votes.unauthenticated",
signin: link_to(t("votes.signin"), new_user_session_path), signin: link_to(t("votes.signin"), new_user_session_path),
signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %> signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
</div> </div>
<% end %> <% end %>
<% if voted_for?(@proposal_votes, proposal) && setting['twitter_handle'] %> <% if voted_for?(@proposal_votes, proposal) && setting['twitter_handle'] %>

2
app/views/proposals/new.html.erb
View File

@@ -1,4 +1,4 @@
<div class="proposal-new row"> <div class="proposal-form row">
<div class="small-12 medium-9 column"> <div class="small-12 medium-9 column">
<%= render "shared/back_link" %> <%= render "shared/back_link" %>

2
app/views/spending_proposals/_votes.html.erb
View File

@@ -24,7 +24,7 @@
</div> </div>
<% if reason.present? && !user_voted_for %> <% if reason.present? && !user_voted_for %>
<div class="no-supports-allowed" style='display:none' aria-hidden="false"> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p> <p>
<%= t("votes.spending_proposals.#{reason}", <%= t("votes.spending_proposals.#{reason}",
verify_account: link_to(t("votes.verify_account"), verification_path), verify_account: link_to(t("votes.verify_account"), verification_path),

2
app/views/spending_proposals/new.html.erb
View File

@@ -1,4 +1,4 @@
<div class="spending-proposal-new row margin-top"> <div class="spending-proposal-form row margin-top">
<div class="small-12 medium-9 column"> <div class="small-12 medium-9 column">
<%= render "shared/back_link" %> <%= render "shared/back_link" %>

4
spec/support/common_actions.rb
View File

@@ -161,8 +161,8 @@ module CommonActions
def expect_message_you_need_to_sign_in_to_vote_comments def expect_message_you_need_to_sign_in_to_vote_comments
expect(page).to have_content 'You must Sign in or Sign up to vote' expect(page).to have_content 'You must Sign in or Sign up to vote'
expect(page).to have_selector('.logged', visible: false) expect(page).to have_selector('.participation-allowed', visible: false)
expect(page).to have_selector('.not-logged', visible: true) expect(page).to have_selector('.participation-not-allowed', visible: true)
end end
def expect_message_to_many_anonymous_votes def expect_message_to_many_anonymous_votes