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) ->
$(document).on {
'mouseenter focus': ->
$("div.anonymous-votes", this).show();
$("div.organizations-votes", this).show();
$("div.not-logged", this).show();
$("div.no-supports-allowed", this).show();
$("div.logged", this).hide();
$("div.participation-not-allowed", this).show();
$("div.participation-allowed", this).hide();
mouseleave: ->
$("div.anonymous-votes", this).hide();
$("div.organizations-votes", this).hide();
$("div.not-logged", this).hide();
$("div.no-supports-allowed", this).hide();
$("div.logged", this).show();
$("div.participation-not-allowed", this).hide();
$("div.participation-allowed", this).show();
}, votes
initialize: ->

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

@@ -1580,6 +1580,7 @@ table {
font-size: $small-font-size;
margin: rem-calc(6) 0;
padding: rem-calc(6);
position: relative;
[class^="icon-arrow"] {
font-size: rem-calc(18);

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

@@ -12,15 +12,14 @@
// ----------------------
@mixin votes {
background: $votes-bg;
border-top: 1px solid $votes-border;
background: $votes;
margin: 0 rem-calc(-12);
padding: rem-calc(14) rem-calc(12);
position: relative;
.icon-like {
.icon-like, .icon-unlike {
background: white;
border: 2px solid $votes-border;
border: 2px solid $votes;
border-radius: rem-calc(3);
color: $text-light;
display: inline-block;
@@ -29,40 +28,25 @@
padding: rem-calc(3) rem-calc(6);
position: relative;
&:hover {
background: $votes-like;
&:hover, &:active {
border-color: white;
color: white;
cursor: pointer;
opacity: 1 !important;
}
}
&:active {
border-color: $votes-like-act;
.icon-like {
&:hover, &:active {
background: $like;
}
}
.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 {
background: $votes-unlike;
border-color: white;
color: white;
cursor: pointer;
opacity: 1 !important;
}
&:active {
border-color: $votes-unlike-act;
&:hover, &:active {
background: $unlike;
}
}
@@ -81,20 +65,23 @@
}
.voted {
.icon-like {
background: $votes-like;
.icon-like, .icon-unlike {
border-color: white;
color: white;
}
.icon-like {
background: $like;
}
.icon-unlike {
background: $votes-unlike;
border-color: white;
color: white;
background: $unlike;
}
}
.no-voted {
.icon-like, .icon-unlike {
opacity: .5;
}
@@ -109,54 +96,10 @@
.divider {
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 {
background: $proposals;
border-top: 1px solid $proposals-border;
margin: 0 rem-calc(-12);
padding: rem-calc(14) rem-calc(12);
position: relative;
@@ -166,7 +109,7 @@
height: $line-height/2;
.meter {
background: $votes-like;
background: $like;
display: block;
height: $line-height/2;
}
@@ -197,7 +140,7 @@
margin-top: rem-calc(12);
&:hover {
background: $proposals-border;
background: darken($proposals, 35%);
color: white;
cursor: pointer;
}
@@ -221,49 +164,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 {
color: white;
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
// ---------------------
.debate-new, .debate-edit,
.proposal-new, .proposal-edit,
.spending-proposal-new, .spending-proposal-edit {
.debate-form,
.proposal-form,
.spending-proposal-form {
.icon-debates, .icon-proposals, .icon-budget {
font-size: rem-calc(50);
line-height: $line-height;
opacity: .5;
}
.icon-debates {
color: $debates;
font-size: rem-calc(60);
line-height: $line-height;
opacity: .5;
}
.icon-proposals {
color: $proposals;
font-size: rem-calc(50);
line-height: $line-height;
opacity: .5;
}
.icon-budget {
color: $budget;
font-size: rem-calc(50);
line-height: $line-height;
opacity: .5;
}
.recommendations {
@@ -330,14 +259,14 @@
}
}
.debate-new, .debate-edit {
.debate-form {
.recommendations li:before {
color: $debates;
}
}
.proposal-new, .proposal-edit {
.proposal-form {
.recommendations li:before {
color: $proposals;
@@ -496,11 +425,6 @@
line-height: $line-height;
}
.not-logged {
line-height: $line-height;
padding: rem-calc(24);
}
@include breakpoint(small + rem-calc(1) and medium down) {
.in-favor, .against {
text-align: left;
@@ -530,11 +454,6 @@
float: none;
line-height: $line-height;
}
.not-logged {
line-height: $line-height;
padding: rem-calc(24);
}
}
.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 {
display: none;
}
@@ -745,7 +655,7 @@
.votes {
@include votes;
border: 1px solid $votes-border;
border: 1px solid $votes;
margin: 0 rem-calc(-12);
@include breakpoint(medium) {
@@ -803,7 +713,7 @@
.supports {
@include supports;
border: 1px solid $proposals-border;
border: 1px solid $proposals;
margin: 0 rem-calc(-12);
@include breakpoint(medium) {
@@ -904,16 +814,6 @@
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 {
.ssb-twitter,
@@ -1006,18 +906,13 @@
margin-top: 0;
}
.not-logged,
.organizations-votes,
.anonymous-votes {
.participation-not-allowed {
background: $featured;
color: $color-warning;
font-size: $small-font-size;
line-height: $line-height;
padding-top: 0;
a {
color: $color-warning;
font-weight: bold;
}
p {

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

@@ -33,7 +33,7 @@
<% elsif !user_signed_in? %>
<div class="logged" >
<div class="participation-allowed">
<%= t('comments.comment.votes', count: comment.total_votes) %>
&nbsp;|&nbsp;
@@ -60,7 +60,7 @@
<%= comment.total_dislikes %>
</span>
</div>
<div class="not-logged" style='display:none'>
<div class="participation-not-allowed" style='display:none' aria-hidden="false">
<%= t("votes.comment_unauthenticated",
signin: link_to(t("votes.signin"), new_user_session_path),
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>
<% if user_signed_in? && current_user.organization? %>
<div class="organizations-votes" style='display:none' aria-hidden="false">
<p>
<%= t("votes.organizations") %>
</p>
</div>
<div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p>
<%= t("votes.organizations") %>
</p>
</div>
<% elsif user_signed_in? && !debate.votable_by?(current_user)%>
<div class="anonymous-votes" style='display:none' aria-hidden="false">
<p>
<%= t("votes.anonymous",
verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %>
</p>
</div>
<div class="participation-not-allowed" style='display:none' aria-hidden="false">
<p>
<%= t("votes.anonymous",
verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %>
</p>
</div>
<% elsif !user_signed_in? %>
<div class="not-logged" style='display:none' aria-hidden="false">
<%= t("votes.unauthenticated",
signin: link_to(t("votes.signin"), new_user_session_path),
signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
</div>
<div class="participation-not-allowed" style='display:none' aria-hidden="false">
<%= t("votes.unauthenticated",
signin: link_to(t("votes.signin"), new_user_session_path),
signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
</div>
<% end %>
</div>

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

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

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

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

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

@@ -24,7 +24,7 @@
</div>
<% 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>
<%= t("votes.spending_proposals.#{reason}",
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
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('.not-logged', visible: true)
expect(page).to have_selector('.participation-allowed', visible: false)
expect(page).to have_selector('.participation-not-allowed', visible: true)
end
def expect_message_to_many_anonymous_votes