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

unifies styles for participation not allowed

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2016-10-31 16:50:13 +01:00
parent d771b739bf
commit 6fd5e6a67a
9 changed files with 125 additions and 235 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: ->

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

@@ -1580,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 %>

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

@@ -26,20 +26,20 @@
</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 %>

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

@@ -14,20 +14,20 @@
</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 %>

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

@@ -31,20 +31,20 @@
</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 %>

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),

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